/* ===========================================================================
   Sicilim — müşteri karşılama arayüzü
   ---------------------------------------------------------------------------
   Tasarım yönü: ESNAF FİŞİ.
   Ürünün adı "sicil" — yani kayıt. Türkiye'de her dükkânda elinize tutuşturulan
   fiş, hem sıcak (fiziksel, sıradan, tanıdık) hem güven verici (bir kayıt) bir
   nesne. Arayüz bu nesneyi taklit etmiyor, onun DİLİNİ kullanıyor: ortalanmış
   aralıklı büyük harf başlık, kesikli ayraçlar, yırtma kenarı, altta mühür.
   Bu yüzden burada büyük serif kahraman başlık yok — fişte de yok. Hiyerarşi
   boşluk ve kesikli çizgiyle kuruluyor.

   Palet fiş dünyasından: bakkal tentesi yeşili (zemin), fiş kâğıdı (kart),
   mühür moru (vurgu), soluk mürekkep (ikincil).
   =========================================================================== */

:root {
  /* Renk */
  --tente:    #14453d;   /* zemin — bakkal/kahve tentesi yeşili */
  --tente-ust:#1b564c;
  --fis:      #faf7f1;   /* fiş kâğıdı */
  --fis-inset:#f2ece1;   /* metin kutusu — bir ton daha kâğıt */
  --murekkep: #23201c;   /* ana metin */
  --soluk:    #6b6459;   /* ikincil metin, fiş metaverisi */
  --cizgi:    #d3cbbc;   /* kesikli ayraç */
  --muhur:    #453f94;   /* mühür moru — vurgu ve odak */
  --uyari:    #9c3520;   /* hata */

  /* Tipografi — fişin kendi yazı dünyası:
     mono yardımcı yüz (başlık, etiket, metaveri), sans gövde (okunacak metin) */
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Ölçek — fiş gibi küçük ve yoğun; tek bir dev başlık yok */
  --nokta: 7px;          /* yırtma kenarı yarıçapı */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(14px, 4vw, 40px) clamp(12px, 4vw, 24px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--tente-ust) 0%, var(--tente) 62%),
    var(--tente);
  color: var(--murekkep);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* --- Fiş ------------------------------------------------------------------
   Yırtma kenarı: üst ve altta yarım daire ısırıklar. Maskelenmiş bir öğe
   box-shadow'u kırptığı için gölge dış sarmalayıcıda drop-shadow ile veriliyor —
   böylece gölge de ısırıkların şeklini izliyor.
   ------------------------------------------------------------------------ */
.fis-sarmal {
  width: 100%;
  max-width: 460px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.3));
}

.fis {
  position: relative;
  background: var(--fis);
  padding: calc(var(--nokta) + 20px) clamp(18px, 5.5vw, 30px)
           calc(var(--nokta) + 22px);
  -webkit-mask:
    radial-gradient(var(--nokta) at 50% 0, #0000 98%, #000) 50% 0 /
      calc(var(--nokta) * 2) calc(var(--nokta) * 2) repeat-x,
    radial-gradient(var(--nokta) at 50% 100%, #0000 98%, #000) 50% 100% /
      calc(var(--nokta) * 2) calc(var(--nokta) * 2) repeat-x,
    linear-gradient(#000 0 0) 50% 50% / 100%
      calc(100% - var(--nokta) * 2) no-repeat;
  mask:
    radial-gradient(var(--nokta) at 50% 0, #0000 98%, #000) 50% 0 /
      calc(var(--nokta) * 2) calc(var(--nokta) * 2) repeat-x,
    radial-gradient(var(--nokta) at 50% 100%, #0000 98%, #000) 50% 100% /
      calc(var(--nokta) * 2) calc(var(--nokta) * 2) repeat-x,
    linear-gradient(#000 0 0) 50% 50% / 100%
      calc(100% - var(--nokta) * 2) no-repeat;
}

/* --- Fiş başlığı ---------------------------------------------------------- */
.marka {
  margin: 0;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--soluk);
}

.isletme {
  margin: 10px 0 0;
  font: 600 clamp(17px, 5vw, 20px)/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  color: var(--murekkep);
  overflow-wrap: break-word;
}

.kategori {
  margin: 5px 0 0;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--soluk);
}

/* Kesikli ayraç — fişin satır ayracı. Bölüm sınırını gösterir, süs değil. */
.ayrac {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px dashed var(--cizgi);
}

/* --- Ana soru ------------------------------------------------------------- */
.soru {
  margin: 0;
  font: 600 clamp(20px, 5.8vw, 24px)/1.25 var(--sans);
  letter-spacing: -0.015em;
}

.aciklama {
  margin: 10px 0 0;
  color: var(--soluk);
  font-size: 15px;
}

/* --- Alanlar -------------------------------------------------------------- */
.etiket {
  display: block;
  margin-bottom: 7px;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soluk);
}

input[type="tel"],
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--cizgi);
  border-radius: 3px;
  background: var(--fis-inset);
  color: var(--murekkep);
  font-family: var(--mono);
  font-size: 17px;          /* 16px altı iOS'ta otomatik yakınlaştırır */
  letter-spacing: 0.04em;
}

textarea {
  font-family: var(--sans);
  letter-spacing: normal;
  line-height: 1.55;
  min-height: 130px;
  resize: vertical;
}

input[type="tel"]::placeholder,
textarea::placeholder { color: #a49c8e; }

input[type="tel"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--muhur);
  outline-offset: 2px;
  border-color: var(--muhur);
}

.ipucu {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--soluk);
}

/* --- Onay metni ----------------------------------------------------------- */
.onay-kutu {
  padding: 14px 15px;
  border: 1px dashed var(--cizgi);
  border-radius: 3px;
  background: var(--fis-inset);
}

/* Metnin tamamı görünür: yüksekliği kısıtlanmıyor, kaydırma kutusuna
   sıkıştırılmıyor. Açık rıza metnini gizlemek KVKK açısından karanlık
   desendir — sayfanın uzaması kabul edilebilir bir bedel. */
.onay-metni {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--murekkep);
  white-space: pre-line;
}

.onay-metni[data-durum="bekliyor"] { color: var(--soluk); font-style: italic; }

.onay-satir {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  cursor: pointer;
}

.onay-satir input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--muhur);
}

.onay-satir input:focus-visible { outline: 2px solid var(--muhur); outline-offset: 3px; }
.onay-satir span { font-size: 14.5px; }
.onay-satir[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* --- Düğmeler ------------------------------------------------------------- */
.gonder {
  width: 100%;
  margin-top: 4px;
  padding: 16px 18px;
  border: 0;
  border-radius: 3px;
  background: var(--muhur);
  color: var(--fis);
  font: 600 12.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.16s ease;
}

.gonder:hover:not(:disabled) { background: #3a3480; }
.gonder:active:not(:disabled) { transform: translateY(1px); }
.gonder:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; }
.gonder:disabled { background: #b8b3ce; cursor: not-allowed; }

/* --- Fiş dip notu --------------------------------------------------------- */
.dipnot {
  margin: 0;
  font: 400 10.5px/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--soluk);
}

/* --- İkincil yol ---------------------------------------------------------
   "Numaranızı bırakın, hatırlatalım" — açılıştaki iki seçeneğin altındaki üçüncü
   yol. İki seçenekle GÖRSEL OLARAK YARIŞMAMASI işlevsel bir gerekliliktir:
   kart değil düz metin, ortalanmış ve soluk. Buna `.secenek` görünümü vermek
   üçüncü bir eşit seçenek izlenimi yaratır ve iki seçeneğin birbirine
   eşitliğini bulanıklaştırır (Kural 1).
   ------------------------------------------------------------------------ */
.ikincil {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--soluk);
}

/* --- Durum bildirimleri --------------------------------------------------- */
.hata {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--uyari);
  background: #f7e9e4;
  color: #6d2415;
  font-size: 14px;
}

.not {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--uyari);
}

[hidden] { display: none !important; }

/* --- Mühür (imza öğesi) --------------------------------------------------
   Onay kaydedildiğinde kâğıda basılan mühür. Daire içinde onay işareti
   yerine gerçek bir mühür: çift halka, hafif eğik, mürekkep gibi kâğıda
   karışıyor (mix-blend-mode: multiply).
   ------------------------------------------------------------------------ */
.muhur {
  width: 148px;
  height: 148px;
  margin: 6px auto 0;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 2.5px solid var(--muhur);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3.5px var(--fis), inset 0 0 0 5.5px var(--muhur);
  color: var(--muhur);
  text-align: center;
  transform: rotate(-8deg);
  opacity: 0.88;
  mix-blend-mode: multiply;
  animation: muhur-bas 420ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.muhur b {
  font: 700 15px/1.15 var(--mono);
  letter-spacing: 0.12em;
}

.muhur small {
  font: 400 8.5px/1.2 var(--mono);
  letter-spacing: 0.24em;
}

@keyframes muhur-bas {
  from { transform: rotate(-16deg) scale(1.55); opacity: 0; }
  to   { transform: rotate(-8deg) scale(1); opacity: 0.88; }
}

/* --- İKİ SEÇENEK ---------------------------------------------------------
   KURAL 1 — REVIEW GATING YASAK.

   Bu iki seçeneğin GÖRSEL OLARAK EŞİT olması işlevseldir, estetik tercih
   değildir. Aynı ızgara hücresi, aynı dolgu, aynı yazı boyutu, aynı renk;
   birinde vurgu düğmesi, diğerinde bağlantı görünümü YOKTUR. Birine
   `background: var(--muhur)` vermek ya da birini `order` ile öne almak,
   diğerini bastırmak anlamına gelir ve kuralın ihlalidir.

   Fişin dilinde bunun doğal karşılığı var: koçanı ortadan delikli çizgiyle
   ikiye ayrılan çift nüshalı fiş. İki nüsha zorunlu olarak birbirinin eşi.
   ------------------------------------------------------------------------ */
.secenekler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.secenek {
  display: block;
  padding: 20px 14px 22px;
  border: 0;
  background: none;
  color: var(--murekkep);
  font-family: var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

/* Perfore ayrım — iki nüshayı ayıran delikli çizgi. */
.secenek + .secenek { border-left: 1.5px dashed var(--cizgi); }

.secenek:hover { background: var(--fis-inset); }
.secenek:focus-visible { outline: 2px solid var(--muhur); outline-offset: -2px; }

.secenek-ust {
  display: block;
  margin-bottom: 9px;
  font: 500 9.5px/1.4 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--soluk);
}

.secenek-ad {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
}

.secenek-alt {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--soluk);
}

/* Dikey diziliş — üç seçenek için.
   Yan yana üç kart 390px'de ~120px'e sıkışır; uzun etiket sarar, kısa etiket
   sarmaz ve kartlar farklı yükseklikte kalır. Yani yatay diziliş üç seçenekte
   EŞİTLİĞİ BOZAR. Dikeyde üçü de tam genişlik ve aynı yükseklikte olur.
   Dolgu üçünde de aynı — burada tek bir kartı sıkıştırmak/genişletmek Kural
   1'in ihlalidir. */
.secenekler--dikey { grid-template-columns: 1fr; }

.secenekler--dikey .secenek { padding: 16px 14px 18px; }

/* Perfore ayrım dikeyde yatay çizgiye döner. */
.secenekler--dikey .secenek + .secenek {
  border-left: 0;
  border-top: 1.5px dashed var(--cizgi);
}

/* Teşekkür ekranında tek kart kalır — yarım genişlikte durmasın.
   Bu, Kural 1 istisnası değil: iki seçenek zaten eşit olarak sunuldu ve
   müşteri seçimini yaptı. Buradaki hatırlatma HERKESE AÇIK seçeneğe yönlendirir,
   yani gating'in tam tersi yöndedir. */
.secenekler--tek { grid-template-columns: 1fr; }

/* Metin bağlantısı — kart değil. `.secenek` görünümünü devralmaz. */
.geri-baglanti {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soluk);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.geri-baglanti:focus-visible { outline: 2px solid var(--muhur); outline-offset: 3px; }

@media (max-width: 379px) {
  /* Dar ekranda alt alta — ama hâlâ birbirinin eşi. */
  .secenekler { grid-template-columns: 1fr; }
  .secenek + .secenek {
    border-left: 0;
    border-top: 1.5px dashed var(--cizgi);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .muhur { opacity: 0.88; transform: rotate(-8deg); }
}