/* ============================================================
 * SERAP GEREBİÇ — PROTOTİP POP-UP KATMANI
 * ------------------------------------------------------------
 * prototype.css'teki tasarım sistemine (renk değişkenleri, yuvarlaklık,
 * gölge) yaslanır; kendi değişkenini tanımlamaz. Ayrı dosya olmasının
 * sebebi kapsam: pop-up kapatılmak istendiğinde layout'tan iki satır
 * çıkarmak yetmeli.
 *
 * Kapsam: modal kabuğu, altı pop-up tipinin gövdeleri, SVG çark ve
 * dönüş animasyonu.
 * ============================================================ */

/* ---------------------------------------------------------- Kabuk */
.popup-root{position:fixed;inset:0;z-index:1200;display:flex;
  align-items:center;justify-content:center;padding:20px}

.popup-veil{position:absolute;inset:0;background:rgba(41,32,25,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease}
.popup-root.is-open .popup-veil{opacity:1}

.popup-card{position:relative;width:min(440px,100%);max-height:calc(100dvh - 40px);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--krem);border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:28px 24px 26px;text-align:center;
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.9,.3,1)}
.popup-root.is-open .popup-card{opacity:1;transform:none}

/* Çark kartı daha geniş: 200px'lik disk + etiketler sıkışmasın. */
.popup-root.is-wheel .popup-card{width:min(500px,100%)}

/* Kapatma düğmesi HER ZAMAN görünür bir zemin taşır.
   Saydam bırakıldığında krem kartın üstünde neredeyse kayboluyordu; bir
   modalın çıkışı aranacak bir şey olmamalı — kapatamadığını sanan ziyaretçi
   pop-up'ı sinir bozucu bulur. */
.popup-close{position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--fistik-900);background:var(--fistik-100);
  transition:background .2s,color .2s}
.popup-close:hover{background:var(--fistik-900);color:#F4EFE2}
.popup-close svg{width:19px;height:19px}

.popup-image{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:16px}

.popup-body{display:flex;flex-direction:column;gap:14px;align-items:stretch}

/*
  Başlık iki yandan eşit boşluk alır. Kapatma düğmesi sağ üstte duruyor ve
  başlık ortalı olduğu için uzun bir başlığın ilk satırı düğmenin altına
  giriyordu ("Fırından ilk siz haberdar olun"). Boşluğu tek yandan vermek
  ortalamayı bozardı; iki yandan verilince hem çakışma biter hem başlık
  ortada kalır.
*/
.popup-title{font-size:clamp(21px,4.6vw,26px);line-height:1.25;color:var(--fistik-900);
  font-weight:600;margin:0;padding:0 30px}
.popup-text{font-size:14.5px;line-height:1.6;color:var(--toprak)}
.popup-text p{margin:0 0 8px}
.popup-text p:last-child{margin-bottom:0}

.popup-fineprint{font-size:12px;color:var(--toprak);line-height:1.5;margin:0}

/* ---------------------------------------------------------- Butonlar */
.popup-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:var(--pill);
  font-size:15px;font-weight:700;text-align:center;cursor:pointer;
  transition:opacity .2s,background .2s,color .2s}
.popup-btn-primary{background:var(--fistik-900);color:#F4EFE2}
.popup-btn-primary:hover{opacity:.9}
.popup-btn-primary[disabled]{opacity:.45;cursor:default}
.popup-btn-ghost{background:transparent;color:var(--fistik-900);
  border:1.5px solid var(--cizgi)}
.popup-btn-ghost:hover{background:var(--fistik-100)}

/* ---------------------------------------------------------- Kupon kodu */
.popup-code{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;background:var(--serbet-soft);border:1.5px dashed var(--serbet);
  border-radius:12px;padding:13px 15px}
.popup-code-value{font-size:19px;font-weight:800;letter-spacing:.14em;
  color:var(--fistik-900);word-break:break-all}
.popup-code-copy{flex:none;padding:7px 13px;border-radius:var(--pill);
  background:var(--fistik-900);color:#F4EFE2;font-size:12.5px;font-weight:700}
.popup-code-copy.is-done{background:var(--fistik-500)}
.popup-expiry{font-size:12.5px;color:var(--toprak);margin:0}

/* ---------------------------------------------------------- Form */
/* Alanlar arası nefes: 9px'te etiket bir önceki alanın kutusuna yapışık
   duruyordu. Etiket kendi alanına yakın, alanlar birbirinden uzak olmalı —
   ilişkiyi boşluk anlatır. */
.popup-form{display:flex;flex-direction:column;gap:6px;text-align:left}
.popup-form .popup-input{margin-bottom:8px}
.popup-form .popup-input:last-of-type{margin-bottom:2px}
.popup-label{font-size:13px;font-weight:700;color:var(--fistik-900)}
.popup-optional{font-weight:500;color:var(--toprak)}
.popup-input{min-height:46px;border:1.5px solid var(--cizgi);border-radius:12px;
  padding:0 13px;font-size:15px;font-family:inherit;color:var(--kabuk);background:#fff}
.popup-input:focus{outline:none;border-color:var(--fistik-500)}
.popup-input.is-error{border-color:#9B3B2F}
/* İzin kutusu okunur olmalı: onay isteyen bir metnin gövde yazısından
   küçük olması hem hukuken hem UX olarak yanlış. */
.popup-check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;
  font-size:13px;line-height:1.55;color:var(--kabuk);cursor:pointer}
.popup-check input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--fistik-700)}

.popup-msg{font-size:13px;line-height:1.5;margin:0;color:#9B3B2F}
.popup-msg.is-ok{color:var(--fistik-700)}

/* ---------------------------------------------------------- Çark */
.popup-wheel{display:flex;flex-direction:column;gap:16px;align-items:center}

.wheel-stage{position:relative;width:min(300px,72vw);aspect-ratio:1;
  /* Diskin altında duran altın halka: çarkın kendisine ait değil, ona
     takılan bir çerçeve. Diskin gölgesiyle birlikte derinlik verir. */
  padding:7px;border-radius:50%;
  background:linear-gradient(150deg,var(--serbet) 0%,#E8CE8F 42%,var(--serbet) 100%);
  box-shadow:var(--shadow-lift)}

/* İbre diskin ÜSTÜNDE, saat 12 yönünde. Kazanan dilim buraya gelir.
   CSS kenarlıklarından yapılan üçgen yerine damla biçimi: köşeli üçgen
   sayfanın hiçbir yerinde geçmiyor, yuvarlak biten form tasarım diline
   daha yakın. */
.wheel-pointer{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:24px;height:30px;z-index:3;
  filter:drop-shadow(0 2px 4px rgba(41,32,25,.35))}
.wheel-pointer svg{width:100%;height:100%;display:block;
  fill:var(--fistik-900);transform:rotate(180deg)}

.wheel-disc{width:100%;height:100%;border-radius:50%;
  border:3px solid var(--krem);background:var(--krem);
  /* Dönüş süresi ve yavaşlama eğrisi: sona doğru uzun bir "acaba" anı. */
  transition:transform 4.2s cubic-bezier(.17,.67,.16,1)}
.wheel-hub{fill:var(--krem);stroke:var(--serbet);stroke-width:2.5}
/* stroke-width motifin kendi ölçeğinde verilir; transform'daki scale(.3)
   onu da küçültür (10 → 3 birim). */
.wheel-hub-knot{fill:none;stroke:var(--fistik-900);stroke-width:10;
  stroke-linecap:round;stroke-linejoin:round}
/* 9px'te etiketler okunmuyordu. Metin rengi dilimin parlaklığına göre
   JS'te seçiliyor (bkz. textColorOn), burada yalnız ölçü var. */
.wheel-label{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.01em}

.wheel-result{display:flex;flex-direction:column;gap:11px;align-items:stretch;width:100%}
.wheel-result-label{font-family:'Fraunces',serif;font-size:21px;font-weight:600;
  color:var(--fistik-900);margin:0}
.wheel-result-msg{font-size:14px;line-height:1.55;color:var(--toprak);margin:0}
.wheel-claim{display:flex;flex-direction:column;gap:9px}

/* ---------------------------------------------------- Hareket duyarlılığı */
/*
  `prefers-reduced-motion` açıkken çark DÖNMEZ, sonucu gösteren açıya
  anında geçer. Sonucu gizlemek eşit erişim değildir; hareketi kaldırmak
  yeterlidir.
*/
@media (prefers-reduced-motion: reduce){
  .wheel-disc{transition:none}
  .popup-card,.popup-veil{transition:none}
}

/* ---------------------------------------------------------- Küçük ekran */
@media (max-width:420px){
  .popup-card{padding:24px 18px 22px}
  .popup-code-value{font-size:17px;letter-spacing:.1em}
}