@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Open+Sans:wght@700&display=swap');

:root{
  --brand:#13875a;
  --brand-2:#00ce88;
  --bg:#0a0f12;
  --ink:#e9f6ee;
  --muted:#9cc5b0;
  --glass:rgba(255,255,255,.08);
  --glass-b:rgba(255,255,255,.14);
  --radius:20px;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --ring:0 0 0 2px rgba(0,206,136,.45), 0 0 30px rgba(0,206,136,.25) inset;
  --jersey-text:#ffffff;
}

/* Arka plan efekti */
.wjc-wrapper::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(0,206,136,.25), transparent 60%),
    radial-gradient(900px 520px at -10% 80%, rgba(87, 245, 73, 0.22), transparent 60%),
    linear-gradient(180deg, #0b1116 0%, #070b0e 100%);
}
.wjc-wrapper::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode:soft-light; opacity:.35
}

.wjc-wrapper{
  font-family:Poppins,system-ui,sans-serif;
  display:grid; gap:clamp(16px, 3vw, 32px);
  grid-template-columns: 1.1fr .9fr;
  align-items:stretch; max-width:1500px; margin:0 auto; padding:clamp(20px,4vw,36px);
  position:relative; color:var(--ink);
}
@media (max-width:1024px){ 
  .wjc-wrapper{grid-template-columns:1fr; max-width:960px;} 
}

.wjc-col-left{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--glass-b); border-radius:var(--radius);
  padding: clamp(16px, 2.2vw, 22px); box-shadow: var(--shadow); overflow:hidden;
}
.wjc-col-left::before{
  content:""; position:absolute; inset:-25% -10% auto -10%; height:60%;
  background: radial-gradient(closest-side, rgba(0,178,255,.18), transparent 70%);
  filter: blur(30px); z-index:0;
}

.wjc-preview{
  aspect-ratio: 4/5; width:min(540px, 95%); margin: 18px auto 6px; 
  position:relative; perspective:1200px; z-index:1;
}
.wjc-preview-tilt{ 
  width:100%; height:100%; transform-style:preserve-3d; 
  transition: transform .25s ease; position:relative;
}
.wjc-preview:hover .wjc-preview-tilt{ transform:rotateX(7deg) rotateY(-7deg) }
.wjc-preview-inner{ 
  position:absolute; inset:0; display:grid; place-items:center; 
  transform:translateZ(38px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); 
}

.wjc-preview-base, .wjc-preview-back{
  position:absolute; width:88%; height:96%; margin:auto;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  overflow:hidden; object-fit:contain; display:block;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.wjc-preview-back{
  opacity: 0;
  z-index: 1;
}

.wjc-preview-base{
  opacity: 1;
  z-index: 2;
}

.wjc-preview:hover .wjc-preview-back,
.wjc-preview.show-back .wjc-preview-back{
  opacity: 1;
}

.wjc-preview:hover .wjc-preview-base,
.wjc-preview.show-back .wjc-preview-base{
  opacity: 0;
}

.wjc-preview-name, .wjc-preview-number{
  position:absolute; left:50%; text-align:center; 
  color:#14694f; text-transform:uppercase; 
  font-weight:700; pointer-events:none;
  width:100%;
  font-family: Arial, sans-serif;
  text-shadow: 
    -1px -1px 0 #d2f7ec,
    1px -1px 0 #d2f7ec,
    -1px 1px 0 #d2f7ec,
    1px 1px 0 #d2f7ec,
    -2px 0 0 #d2f7ec,
    2px 0 0 #d2f7ec,
    0 -2px 0 #d2f7ec,
    0 2px 0 #d2f7ec;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wjc-preview:hover .wjc-preview-name,
.wjc-preview:hover .wjc-preview-number,
.wjc-preview.show-back .wjc-preview-name,
.wjc-preview.show-back .wjc-preview-number{
  opacity: 1;
}
.wjc-preview-number{ 
  top:20%; transform:translateX(-50%); 
  font-size: clamp(120px, 22vw, 210px); 
  line-height:1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wjc-number-digit{
  width: clamp(60px, 11vw, 105px);
  height: clamp(120px, 22vw, 210px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.wjc-preview-name{
  top:52%; transform:translateX(-50%);
  font-size: clamp(23px, 2vw, 70px);
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #14694f;
  text-shadow: 
    -1px -1px 0 #d2f7ec,
    1px -1px 0 #d2f7ec,
    -1px 1px 0 #d2f7ec,
    1px 1px 0 #d2f7ec,
    -1px 0 0 #d2f7ec,
    1px 0 0 #d2f7ec,
    0 -1px 0 #d2f7ec,
    0 1px 0 #d2f7ec;
}

/* Backmark container for jersey text overlay */
.wjc-backmark{
  position:absolute; inset:0; display:flex; align-items:center; 
  justify-content:flex-start; flex-direction:column;
  text-align:center; color:var(--jersey-text); text-transform:uppercase; 
  letter-spacing:.08em; text-shadow:0 2px 10px rgba(0,0,0,.55); 
  font-weight:800; pointer-events:none; padding-top: clamp(90px, 14vw, 150px);
}

.wjc-col-right{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--glass-b); border-radius:var(--radius);
  padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:16px;
}
.wjc-title{ 
  margin:0; font-size:clamp(18px,2.4vw,22px); font-weight:800; 
  color:var(--ink);
}
.wjc-sub{ color:var(--muted); font-size:14px; line-height:1.6; margin-top:4px; }

.wjc-templates{ 
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; 
}
.wjc-thumb{
  aspect-ratio:1; width:100%; border-radius:14px; cursor:pointer; 
  position:relative; overflow:hidden; padding:0;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  min-height:150px;
}

@media (max-width:768px){
  .wjc-thumb{ min-height:100px; }
}
.wjc-thumb:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.05); background-color: rgba(255,255,255,.06); }
.wjc-thumb.is-active{ box-shadow: var(--ring); border-color: rgba(0,206,136,.85) }
.wjc-thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.wjc-field{ display:flex; flex-direction:column; gap:8px }
.wjc-field > span{ font-weight:700; font-size:13px; color:#d9ffee }

select.wjc-input-size, input.wjc-input-number, input.wjc-input-name{
  appearance:none; border:none; outline:none; color:#eafff5 !important;
  background:rgba(255,255,255,.06) !important; border:1px solid var(--glass-b) !important;
  padding:9px 16px; font-size:15px;
  transition: box-shadow .2s ease, border-color .2s ease;
  font-family:Poppins,system-ui,sans-serif;
}
.wjc-input-number{
border-radius:14px;
}

input.wjc-input-name::placeholder, input.wjc-input-number::placeholder{ color:#bfe9d3 }
select.wjc-input-size option{ color:#0b1410 !important; background:#fff !important; }
select.wjc-input-size:focus, input.wjc-input-number:focus, input.wjc-input-name:focus{ 
  box-shadow: var(--ring) !important; border-color: rgba(0,206,136,.8) !important; 
}
.wjc-form-grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:600px){ .wjc-form-grid{ grid-template-columns:1fr 1fr } }

.wjc-cta{
  cursor:pointer; user-select:none; border:none; outline:none; 
  font-weight:900; letter-spacing:.02em;
  color:#ffffff; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  padding:9px 18px; border-radius:14px;
  transition: transform .08s ease, filter .18s ease;
  font-family:Poppins,system-ui,sans-serif;
  font-size:15px; text-align:center; display:flex; align-items:center; justify-content:center;
}
.wjc-cta:hover{ filter:saturate(1.05) brightness(1.05) }
.wjc-cta:active{ transform: translateY(1px) scale(.99) }

.wjc-price-tag{
  display:flex; align-items:center; gap:10px; font-weight:800;
  padding:12px 18px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--glass-b); box-shadow:var(--shadow);
  width:fit-content;
}
.wjc-price-value{ font-size:clamp(16px,2vw,18px); color:#c9ffe5; letter-spacing:.02em }

.wjc-message{ color:var(--muted); font-size:12px; margin-top:8px; }

/* Toast notification */
.wjc-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(40px);
  background:rgba(12,18,16,.9); border:1px solid var(--glass-b); backdrop-filter: blur(8px);
  color:#dff7ef; padding:14px 18px; border-radius:14px; box-shadow:var(--shadow);
  display:flex; gap:10px; align-items:center; opacity:0; pointer-events:none; 
  transition: .35s ease; z-index:50;
}
.wjc-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto }

@media (prefers-reduced-motion:reduce){
  .wjc-preview-tilt, .wjc-thumb{ transition:none !important }
}