/*
   PAYLASILAN BLADE'LERIN STILI - kayit sihirbazi ve sozlesme sayfasi.

   ⚠️ NEDEN AYRI BIR DOSYA: bu iki ekran taban temada duruyor ama HER
   tenant onlari kullaniyor. `default`/`saymed`/`sedan` kendi
   `layout/layout.blade.php`'lerini tasidigi icin taban temanin
   `tema.css`'i onlarda HIC yuklenmiyor - yani sihirbaz onlarda
   TAMAMEN STILSIZ ciziliyordu. Olculdu (saymed.test, 2026-08-18):
   `.sihirbaz` display:block (grid olmali), `.sihirbaz__adim` border:none
   (1px solid olmali), `.form select` ham tarayici gorunumu. Islevsel
   olarak calisiyor, gorsel olarak bugunku Vue sihirbazindan belirgin
   sekilde kotu - yani sessiz degil ama kayit zirvesinde kabul edilemez.

   ⚠️ KURALLAR BURAYA TASINDI, KOPYALANMADI. `tema.css`'te ayni
   kurallarin bir kopyasi BIRAKILMAMALI: iki dosya sessizce ayrisir ve
   yonetici ile velinin gordugu ekran farklilasir. Taban tema her iki
   dosyayi da yukluyor.

   ⚠️ `.dugme` ve `.form` DE BURADA: sihirbaz ikisini de kullaniyor
   (sihirbaz.blade.php, adim-dogrulama.blade.php). Taban temanin oteki
   sayfalari da `.dugme` kullaniyor ama onlar zaten bu dosyayi yukluyor.

   ⚠️ TOKEN'LAR ASAGIDA VARSAYILAN OLARAK TANIMLI. Taban temada
   `layout.blade.php` ayni token'lari theme.json'dan satir ici basiyor ve
   SONRA geliyor, yani orada tema secimi kazaniyor. Legacy temalarda ise
   satir ici basan bir sey yok; oralarda gecerli olan bu blok - ya da
   temanin kendi `stiller.blade.php`'sinde ezdigi degerler.
*/

:root {
    /* Legacy temalar icin GERI DUSME degerleri. Taban tema bunlari
       layout.blade.php'de theme.json'dan eziyor. */
    --renk-birincil: #1e40af;
    --renk-ikincil: #0ea5e9;
    --yazi-tipi: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --renk-metin: #1f2937;
    --renk-soluk: #6b7280;
    --renk-cizgi: #e5e7eb;
    --renk-zemin: #ffffff;
    --renk-zemin-alt: #f8fafc;
    --renk-koyu: #0f172a;
    --renk-ustu: #ffffff;

    --bosluk-1: 0.5rem;
    --bosluk-2: 1rem;
    --bosluk-3: 1.5rem;
    --bosluk-4: 2.5rem;
    --bosluk-5: 4rem;

    --kose: 0.625rem;

    /*
       SIHIRBAZA OZGU TOKEN'LAR - hepsi GERI DUSME degeriyle burada.
       ⚠️ Legacy temalarda theme.json token'lari BASILMIYOR; oralarda
       yalnizca --renk-birincil ve --renk-ikincil eziliyor
       (layout/sihirbaz-stilleri.blade.php). Yani buradaki her deger
       uc canli temada gecerli olan degerdir.
    */
    /*
       ⚠️ MARKA RENGININ USTUNE BEYAZ METIN KONMAZ - OLCULDU 2026-08-20.
       Dort temanin marka rengiyle beyaz metnin kontrasti:
           servis  #1e40af ->  8,72  ✔
           sedan   #122179 -> 13,82  ✔
           saymed  #3498db ->  3,15  ✘
           default #1dc5ce ->  2,11  ✘   (Safran - EN KOTU)
       WCAG AA normal metin icin 4,5 istiyor. Yani Safran'da "Devam Et"
       yazisi ve aktif adim etiketi PRATIKTE OKUNMUYORDU - sayfa 200
       donuyor, hicbir test kirmizi yanmiyor (CLAUDE.md tuzak 13'un ayni
       sinifi, bu kez halka acik sayfada).

       %35 siyahla karistirilmis hali dort temada da geciyor:
           servis 13,09 · sedan 16,99 · saymed 6,47 · default 4,71
       Renk TONU korunuyor, yalnizca koyuluyor - marka kimligi durur.

       ⚠️ GERI DUSME SIRASI BAGLAYICI. color-mix desteklemeyen bir
       tarayicida ikinci satir DUSER ve birinci satir gecerli kalir; o
       yuzden geri dusme markanin KENDISI degil koyu bir notr - marka
       olsaydi desteklemeyen tarayici Safran'da yine 2,11 gorurdu.
    */
    --renk-birincil-koyu: #1f2937;
    --renk-birincil-koyu: color-mix(in srgb, var(--renk-birincil) 65%, black);

    --kose-genis: 1rem;
    --golge: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --alan-yukseklik: 3rem;
}

/* ---------- dugme ---------- */

/*
   ⚠️ min-height DOKUNMA HEDEFI ICIN, susleme degil. Veli bu formu
   telefondan dolduruyor ve 44px alti hedefler WCAG 2.5.5'in altinda
   kaliyor; 48px hem Android hem iOS kilavuzunun ustunde.
*/
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--alan-yukseklik);
    padding: 0.75rem 1.75rem;
    border-radius: var(--kose);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.dugme:active { transform: translateY(1px); }

.dugme:disabled { opacity: 0.6; cursor: progress; }

.dugme:focus-visible {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 2px;
}

.dugme:hover { text-decoration: none; opacity: 0.9; }
/*
   ⚠️ ZEMIN MARKA RENGININ KOYU TONU, MARKANIN KENDISI DEGIL - gerekce
   yukarida --renk-birincil-koyu'nun yaninda olculdu. Bu kural taban
   temanin oteki sayfalarindaki dugmeleri de etkiliyor (sihirbaz.css
   paylasilan katman): orada gorunur etki markanin biraz koyulmasi,
   kazanc ise iki musteride okunabilir bir CTA.
*/
.dugme--birincil {
    background: var(--renk-birincil-koyu);
    color: var(--renk-ustu);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
/*
   ⚠️ AYNI TUZAK, IKINCIL DUGME - OLCULDU 2026-08-21 (saymed.test, okul
   kartinin "Degistir" dugmesi): ham marka renginde metin, acik zeminde
   (#f3f9fd) kontrasti yalnizca 2,97 veriyor - WCAG AA normal metin icin
   4,5 istiyor. Safran'da (#1dc5ce) durum daha kotu, beyaza karsi 2,11
   olculmustu (bkz. dosyanin basi). Cozum .dugme--birincil ile ayni:
   --renk-birincil-koyu.
*/
.dugme--ikincil { background: transparent; color: var(--renk-birincil-koyu); border-color: var(--renk-birincil-koyu); }


/* ---------- form ---------- */

.form { display: grid; gap: var(--bosluk-2); }
.form label { font-weight: 600; font-size: 0.9375rem; }

/*
   ⚠️ font-size: 1rem ACIKCA VERILIYOR, `font: inherit` DEGIL - ve bu bir
   MOBIL HATA duzeltmesi. iOS Safari, odaklanilan girdinin yazi boyu
   16px'in ALTINDAYSA sayfayi kendiliginden yakinlastiriyor; veli o
   andan itibaren formu yatay kaydirmak zorunda kaliyor. `font: inherit`
   govde boyunu devraliyordu ve uc legacy temanin ikisinde govde 16px'in
   altinda (Bootstrap 4.x varsayilani 1rem ama temalar eziyor).
   Yazi TIPI hala devraliniyor - degisen yalnizca boy.
*/
.form input,
.form textarea {
    width: 100%;
    min-height: var(--alan-yukseklik);
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    padding: 0.75rem 1rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form input:focus,
.form textarea:focus {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 1px;
    border-color: var(--renk-birincil);
}

.form input::placeholder,
.form textarea::placeholder { color: var(--renk-soluk); opacity: 1; }

/* ⚠️ 160px'ten indirildi: "Adres Tarifi" ve "Eklemek Istedikleriniz"
   artik istege bagli ve ikisi de rows="2". Bos birakilacak bir alanin
   ekranin ucte birini kaplamasi, sadelestirmenin tersi olurdu. */
.form textarea { min-height: 5.5rem; resize: vertical; }


/* ---------- kayit sihirbazi ---------- */

/*
   Yeni degisken TANIMLANMIYOR: tema farklilasmasi yalnizca theme.json
   uzerinden olsun diye buradaki her renk :root'ta zaten var olan
   token'lardan geliyor (--renk-birincil ve --renk-ikincil'i layout
   theme.json'dan basiyor).

   TEK ISTISNA hata kirmizisi - asagida gerekcesi yazili.
*/

/*
   ⚠️ ZEMIN VAR ama `overflow: hidden` YOK - BILEREK. Asagida
   `.sihirbaz__dugmeler`'in yaninda YAPISKAN EYLEM CUBUGU gerekcesi
   olculmus durumda: musteri temasinin `.page-wrapper`'indaki
   `overflow: hidden`, iceride sticky olan her seyi olduruyor. Ayni
   deseni burada tekrarlamamak icin bu kural zemin ve kose veriyor,
   tasma davranisini degistirmiyor - ileride sihirbaz icine sticky bir
   sey eklenirse bu kural onu bogmasin diye.
*/
.sihirbaz {
    display: grid;
    gap: var(--bosluk-3);
    background: var(--renk-zemin-alt);
    background: color-mix(in srgb, var(--renk-birincil) 5%, white);
    border-radius: var(--kose-genis);
}

/* ---------- ilerleme seridi ----------

   ⚠️ ISARET UC KATLI: numarali daire (dolu/bos), etiket rengi ve
   dolan cizgi. Eskiden yalnizca kenarlik rengi vardi - renk goremeyen
   veli hangi adimda oldugunu HIC goremiyordu. Blade ayrica aria-current
   ve tamamlanan adimlarda gorsel-gizli bir metin basiyor.

   Dolan cizgi --ilerleme degiskeninden besleniyor; degeri blade
   hesapliyor (adim sayisi ADIMLAR sabitinden geliyor, CSS'e sabit
   yazilamaz). */

.sihirbaz__adimlar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    position: relative;
}

/*
   Baglayici cizgi - dairelerin ARKASINDA, ilk ve son dairenin merkezleri
   arasinda. Kenarlardaki yarim aralik (calc) olmadan cizgi dairelerin
   disina tasar.

   ⚠️ TEK OGE + GRADYAN, IKI OGE + calc DEGIL - ve bu bir DUZELTME.
   Once ikinci bir ::after katmani vardi ve genisligi
   `calc((100% - 100%/N) * oran)` ile veriliyordu. Iki sorun cikti:
     1. Ilk yazimda oran YUZDE geciliyordu ve `<yuzde> * <yuzde>` calc'ta
        gecersiz - cizgi hic cizilmiyordu.
     2. Duzeltildikten sonra bile DOGRULANAMADI: bir grid kabinin
        mutlak konumlu pseudo cocugunda getComputedStyle width'i
        guvenilmez okuyor (olculdu safran.test: `width: 200px !important`
        bile 0px raporlaniyordu). Yani "calisiyor" diyebilecegimiz bir
        olcum yoktu.

   Gradyan bu sinifi kapatiyor: tek oge, tek ozellik, carpim yok ve
   degerin CSS'e ULASTIGI backgroundImage dizesinden dogrudan okunabiliyor.
*/
.sihirbaz__adimlar::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    left: calc(50% / var(--adim-sayisi, 3));
    right: calc(50% / var(--adim-sayisi, 3));
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(
        to right,
        var(--renk-birincil-koyu) 0 var(--ilerleme, 0%),
        var(--renk-cizgi) var(--ilerleme, 0%) 100%
    );
}

.sihirbaz__adim {
    display: grid;
    justify-items: center;
    gap: var(--bosluk-1);
    text-align: center;
    color: var(--renk-soluk);
    font-size: 0.875rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.sihirbaz__adim-no {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--renk-cizgi);
    background: var(--renk-zemin);
    color: var(--renk-soluk);
    font-size: 0.9375rem;
    font-weight: 700;
}

/*
   ⚠️ AKTIF ETIKET MARKA RENGINDE DEGIL, METIN RENGINDE.
   Onceki hali `color: var(--renk-birincil)` idi ve Safran'da kontrast
   2,11 olcildu - etiket beyaz zeminde neredeyse gorunmuyordu. Marka
   rengi seride yine giriyor, ama DAIRENIN ZEMINI olarak; orada beyaz
   metin koyu tonun ustunde duruyor ve okunuyor.
*/
.sihirbaz__adim--aktif {
    color: var(--renk-metin);
    font-weight: 700;
}

.sihirbaz__adim--aktif .sihirbaz__adim-no {
    border-color: var(--renk-birincil-koyu);
    background: var(--renk-birincil-koyu);
    color: var(--renk-ustu);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--renk-birincil) 18%, transparent);
}

.sihirbaz__adim--tamam { color: var(--renk-metin); }

.sihirbaz__adim--tamam .sihirbaz__adim-no {
    border-color: var(--renk-birincil-koyu);
    background: var(--renk-zemin);
    color: var(--renk-birincil-koyu);
}

/* Cok dar ekranda etiketler yan yana sigmiyor; daireler kaliyor. */
@media (max-width: 380px) {
    .sihirbaz__adim-etiket { font-size: 0.75rem; }
}

/* ---------- kabuk ---------- */

/*
   ⚠️ KART KABI - govdeyi cerceveliyor ama ILERLEME SERIDI DISARIDA.
   Serit kartin icinde olsaydi her adimda kartin ust kenarina yapisirdi;
   disarida durunca "kacinci adimdayim" sorusu formdan bagimsiz okunuyor.
*/
/*
   ⚠️ BLOK, GRID DEGIL - VE BU SART. .form grid veriyor, burasi
   ayni elemanda onu eziyor (sonraki kural kazaniyor).

   Sebep OLCULDU 2026-08-20: alttaki eylem cubugu `position: sticky`
   tasiyor ve GRID EBEVEYNDE sticky HIC CALISMIYOR - bir grid ogesinin
   kapsayan blogu kendi grid ALANI, yani oynayacak bosluk yok. Olcum:
   sayfa 0 -> 200 -> 400 kaydirildiginda cubugun tepesi 934 -> 734 -> 534
   oldu, yani kaydirmayla BIREBIR hareket etti. Ekranda hicbir sey
   bozuk gorunmuyordu; "yapiskan cubuk var" iddiasi kagit uzerindeydi.

   Blok akista kapsayan blok kartin TAMAMI (866px) ve sticky calisiyor.
   Bosluklar bu yuzden gap ile degil kardes marjiyla veriliyor.
*/
.sihirbaz__govde {
    display: block;
    padding: var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose-genis);
    background: var(--renk-zemin);
    box-shadow: var(--golge);
}

/* gap yerine kardes marji - gerekce .sihirbaz__govde'de. */
.sihirbaz__govde > * + * { margin-top: var(--bosluk-2); }

.sihirbaz__baslik {
    font-size: 1.375rem;
    line-height: 1.3;
    margin: 0;
}

.sihirbaz__bolum {
    display: grid;
    gap: var(--bosluk-2);
    padding-top: var(--bosluk-2);
    border-top: 1px solid var(--renk-cizgi);
}

.sihirbaz__bolum:first-of-type {
    padding-top: 0;
    border-top: 0;
}

/*
   ⚠️ HATA OZETI - metin renkle DEGIL, sol kenar cizgisiyle DE
   isaretleniyor. Kirmizi tek basina renk goremeyen veliye hicbir sey
   soylemez; ayrica blade role="alert" basiyor.
*/
.sihirbaz__hata-ozeti {
    padding: var(--bosluk-2);
    border: 1px solid #fca5a5;
    border-left-width: 4px;
    border-radius: var(--kose);
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.9375rem;
    font-weight: 600;
}

.sihirbaz__dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    justify-content: flex-end;
}

/*
   ⚠️ YAPISKAN EYLEM CUBUGU DENENDI VE KALDIRILDI - iki kez olculdu,
   ikisinde de CALISMADI. Bir daha eklemeden once bunlari okuyun:

   1. Kart `display: grid` iken bir grid ogesinin kapsayan blogu kendi
      GRID ALANI, yani sticky'nin oynayacak boslugu yok. Olcum: sayfa
      0 -> 200 -> 400 kaydirildiginda cubugun tepesi 934 -> 734 -> 534,
      yani kaydirmayla BIREBIR hareket etti.
   2. Kart bloka cevrildi ve YINE calismadi. Sebep musteri temasinda:
      Safran'in `layout.blade.php`'sindeki `.page-wrapper` uzerinde
      `overflow: hidden` var (olculdu, safran.test) - overflow'u
      `visible` olmayan bir ata sticky'nin kaydirma kabi oluyor ve o kap
      kaydirilmadigi icin sticky HIC tetiklenmiyor.

   Ikincisi kapatilamaz: uc musteri temasinin duzenleri bize ait degil ve
   ucu de ayri Bootstrap surumunde. Sihirbazi calisir kilmak icin
   musteri temasinin sarmalayicisini degistirmek, sihirbazin disindaki
   her sayfayi da etkilerdi.

   ⚠️ KART BLOK AKISTA BIRAKILDI. Sticky icin bloka cevrilmisti ve
   sticky gitti, ama geri almiyoruz: blok akista `> * + *` marji
   grid `gap` ile ayni gorunumu veriyor ve fieldset gibi kendi marjini
   sifirlayan ogeler icin daha ongorulebilir.

   Yerine ne var: dar ekranda dugmeler TAM GENISLIK. Veli alanlari
   yukaridan asagi dolduruyor; son alani bitirdiginde zaten dugmenin
   yanindadir. Dogrulama hatasi durumu icin de adimin BASINDA hata ozeti
   var (.sihirbaz__hata-ozeti).
*/
@media (max-width: 640px) {
    .sihirbaz__dugmeler .dugme { flex: 1 1 8rem; }
}

.alan { display: grid; gap: var(--bosluk-1); align-content: start; }

/*
   ⚠️ IKI SUTUN YALNIZCA >=640px'te. Iki kisa alani (sinif/sube, veli
   adi/telefonu) yan yana koymak formu gorsel olarak kisaltiyor; dar
   ekranda ayni kural alanlari 150px'e sikistirir ve telefon maskesi
   sigmaz.
*/
.alan-grup { display: grid; gap: var(--bosluk-2); }

@media (min-width: 640px) {
    .alan-grup { grid-template-columns: 1fr 1fr; }
}

/*
   "isteğe bağlı" rozeti. ⚠️ SADELESTIRMENIN GORUNUR YUZU BU: uc alan
   zorunlulultan cikti (ikinci veli x2, adres tarifi) ama veli bunu
   ancak rozetten anlar. Rozetsiz bir gevsetme, veliye HIC ulasmayan bir
   gevsetmedir.
*/
.alan__istege-bagli {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: var(--renk-zemin-alt);
    border: 1px solid var(--renk-cizgi);
    color: var(--renk-soluk);
    font-size: 0.75rem;
    font-weight: 500;
    vertical-align: middle;
}

/* ---------- radyo secenekleri (cinsiyet) ----------
   ⚠️ <fieldset> varsayilan kenarlik/dolgu tasiyor ve tarayicilar arasi
   farkli; sifirlanmadan .alan izgarasi bozuluyor. */
/*
   ⚠️ `margin: 0` DEGIL `margin-inline: 0`. Tarayicilar fieldset'e
   varsayilan yan marj (2px) veriyor ve o temizlenmeli; ama duz
   `margin: 0` yazmak ust marji da siliyordu ve olculdu: kartin
   `> * + *` kurali fieldset'te ETKISIZ kaliyor, cinsiyet secenekleri
   bir onceki alana YAPISIK ciziliyordu.
*/
.alan--secenekli {
    border: 0;
    margin-inline: 0;
    padding: 0;
    min-width: 0;
}

.alan--secenekli > legend {
    padding: 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.secenekler { display: flex; flex-wrap: wrap; gap: var(--bosluk-1); }

/*
   ⚠️ RADYO GIZLENMIYOR, GORUNUR DURUYOR. `appearance: none` ile ozel
   bir isaret cizmek klavye odagini ve yuksek kontrast kipini bozuyor;
   burada kart yalnizca dokunma hedefini buyutuyor.
*/
.secenek {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-1);
    min-height: var(--alan-yukseklik);
    padding: 0 var(--bosluk-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    font-weight: 500;
    cursor: pointer;
}

/*
   ⚠️ SECILI METIN KOYU TONDA - marka renginde degil. Safran'in
   #1dc5ce'si beyaz zeminde 2,11 kontrast veriyor, yani secilen secenek
   secilmeyenden DAHA ZOR okunurdu.

   ⚠️ ISARET RENKLE SINIRLI DEGIL: kalin yazi ve ic golge (cerceve
   kalinligi) renk goremeyen kullaniciya da hangisinin secili oldugunu
   soyluyor. Radyo girdisinin kendisi zaten gorunur duruyor.
*/
.secenek:has(input:checked) {
    border-color: var(--renk-birincil-koyu);
    color: var(--renk-birincil-koyu);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--renk-birincil-koyu);
}

.secenek:focus-within {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 1px;
}

.secenek input { accent-color: var(--renk-birincil); width: 1.125rem; height: 1.125rem; }

/* Alan alti ipucu - hata DEGIL, aciklama. Rengi de ayri (soluk gri)
   ki veli ikisini karistirmasin. */
.ipucu {
    margin: 0;
    color: var(--renk-soluk);
    font-size: 0.875rem;
}

.aciklama { margin: 0; color: var(--renk-metin); }

/* ---------- sozlesme onay kutusu ----------
   ⚠️ ETIKET BUTUN SATIRI SARIYOR, yani dokunma hedefi kutucuk degil
   kartin tamami. Parmakla 18px'lik bir kutucugu tutturmak zorunda kalan
   veli, kutuyu isaretlemedigini fark etmeden "Kabul Et ve Kodu Gonder"e
   basar ve hatayla karsilasir. */
.onay-kutusu {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-1);
    margin-top: var(--bosluk-2);
    padding: 0.75rem 1rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
    cursor: pointer;
}

/* ⚠️ min-height SIFIRLANIYOR: `.form input` butun girdilere
   --alan-yukseklik (3rem) veriyor ve o kural bu kutucugu de yakalar -
   18px'lik bir onay kutusu 3rem yer kaplardi. */
.onay-kutusu input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    margin-top: 0.1875rem;
    padding: 0;
    accent-color: var(--renk-birincil);
}

.onay-kutusu strong { display: block; color: var(--renk-metin); }

/* Vaat metni - hata DEGIL, aciklama; .ipucu ile ayni soluk ton. */
.onay-kutusu__aciklama {
    display: block;
    margin-top: 0.25rem;
    color: var(--renk-soluk);
    font-size: 0.875rem;
    font-weight: 400;
}

/* Klavyeyle gezen kullanicida odak kutucukta degil kartta gorunsun. */
.onay-kutusu:focus-within {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 1px;
}

/* Dogrulama kodu tek basina bir alan - genis bir kutu icinde altı hane
   kaybolmus gorunuyordu.

   ⚠️ TEK GIRDI, ALTI KUTU GORUNUMU. Tasarim alti ayri kutu gosteriyor
   ama alti ayri <input> otomatik doldurmayi kirar - `one-time-code`
   yalnizca ilk alani doldurur. Ayrim harf araligiyla veriliyor.

   ⚠️ text-indent, letter-spacing'i DENGELIYOR. Harf araligi son haneden
   SONRA da uygulaniyor; ortalanmis metin bu yuzden sola kayik gorunur.
   Ayni degerde girinti onu geri itiyor. Ikisi birlikte degistirilmeli. */
.kod-alani {
    max-width: 14rem;
    min-height: var(--alan-yukseklik);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem !important;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.75em;
    text-indent: 0.75em;
}

/* ⚠️ DAR EKRANDA ARALIK KUCULUYOR: 0.75em'de alti hane + yatay dolgu
   320px'lik bir ekrana SIGMIYOR ve son hane kirpiliyor. */
@media (max-width: 380px) {
    .kod-alani {
        letter-spacing: 0.4em;
        text-indent: 0.4em;
        font-size: 1.25rem !important;
    }
}

/* Bag gorunumlu dugme - "Numara yanlis mi?" gibi kacis yollari icin.
   ⚠️ <button> OLARAK KALIYOR: yaptigi sey bir gezinme degil bir eylem
   (wire:click), yani <a href="#"> yazmak ekran okuyuculara yanlis soz
   verirdi. */
.bag-dugme {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: var(--renk-birincil-koyu);
    text-decoration: underline;
    cursor: pointer;
}

.bag-dugme:focus-visible {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 2px;
}

/* ---------- ozet ----------
   Adim 2'nin ilk parcasi. Etiket/deger ciftleri; bilgi-listesi ile ayni
   sekil ama sozlesme sayfasindan bagimsiz (o sayfada Livewire yok). */
.ozet {
    display: grid;
    grid-template-columns: minmax(8rem, 32%) 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
    overflow: hidden;
}

.ozet dt,
.ozet dd {
    margin: 0;
    padding: 0.625rem var(--bosluk-2);
    border-top: 1px solid var(--renk-cizgi);
}

.ozet dt { color: var(--renk-soluk); font-size: 0.875rem; }
.ozet dd { color: var(--renk-metin); overflow-wrap: anywhere; }

.ozet > dt:first-of-type,
.ozet > dt:first-of-type + dd { border-top: 0; }

@media (max-width: 520px) {
    .ozet { grid-template-columns: 1fr; }
    .ozet dd { padding-top: 0; border-top: 0; }
    .ozet dt { padding-bottom: 0.125rem; }
    .ozet > dt:first-of-type + dd { border-top: 0; }
}

/* select, .form input/.form textarea ile BIREBIR ayni govdeyi tasiyor;
   ayrisirsa ayni satirdaki iki alan farkli yukseklikte gorunur. */
.form select {
    width: 100%;
    min-height: var(--alan-yukseklik);
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    padding: 0.75rem 1rem;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    transition: border-color 0.15s ease;
}

.form select:focus {
    outline: 2px solid var(--renk-birincil);
    outline-offset: 1px;
    border-color: var(--renk-birincil);
}

/* Kademeli adreste ust secim yapilmadan alt liste bos gelir ve blade
   @disabled basar. Tiklanabilir gorunup hicbir sey yapmamasindansa
   acikca pasif gorunmeli. */
.form select:disabled {
    background: var(--renk-zemin-alt);
    color: var(--renk-soluk);
    cursor: not-allowed;
}

/* ---------- aranabilir secim (mahalle / sokak) ----------

   ⚠️ BU DOSYA UC CANLI MUSTERI SITESININ LAYOUT'UNDAN DA YUKLENIYOR.
   Bu yuzden buradaki her secici `.aranabilir` altina kapatildi ve hicbir
   genel oge (input, select, option) tek basina yeniden bicimlendirilmedi.

   ⚠️ HICBIR MARKA RENGI SABIT YAZILMIYOR - dort tema kendi
   --renk-birincil'ini enjekte ediyor. Bekci:
   test_ikonlar_marka_rengini_sabit_yazmiyor.

   Govde (yukseklik, yazi boyu, cerceve, odak halkasi) `.form input`
   kuralindan geliyor; burada YALNIZCA ikisini ayiran seyler var. Kutuyu
   bastan bicimlendirmek, iOS'un 16px yakinlastirma duzeltmesini (bkz.
   `.form input` yorumu) sessizce kaybetmek olurdu.
*/

/* Arama kutusu <select>'in USTUNDE ve ondan bir ton geride duruyor:
   asil alan secimin kendisi, kutu ona yardimci. Ayni zemin tonu, pasif
   <select> ile ayni token - iki "ikincil" yuzey ayrismasin diye. */
.aranabilir__ara {
    background: var(--renk-zemin-alt);
}

/* ⚠️ GUVENLIK AGI, SUS DEGIL. Suzme `hidden` niteligiyle yapiliyor ve
   tarayicilarin varsayilan `[hidden] { display: none }` kurali onu
   karsiliyor; ama bir musteri temasinin genel `option { display: ... }`
   kurali o varsayilani ezerse suzulmus secenekler GERI GORUNUR ve arama
   hicbir sey yapmiyormus gibi olur. Hata vermez, yalnizca calismaz. */
.aranabilir select option[hidden] {
    display: none;
}

/* "Aramaniza uyan secenek bulunamadi" ipucu. Rengi ve boyu `.ipucu`'dan
   geliyor - hata DEGIL, aciklama. Burada yalnizca kaydirma payi var. */
.aranabilir__ipucu {
    margin-top: calc(-1 * var(--bosluk-1) / 2);
}

/*
   ⚠️ HATA KIRMIZISI TOKEN DEGIL, DUZ RENK - bilerek.
   Token olsaydi bir tema "gecersiz alan" vurgusunu kendi marka rengine
   cekebilirdi; marka rengi cogu zaman hatayi belli etmeyen bir ton olur
   ve alan gecersizken gecerli gorunur. Bu bir erisilebilirlik gerilemesi
   olurdu, tema ozgurlugu degil.
*/
.form .hatali {
    border-color: #dc2626;
}

.form .hatali:focus {
    outline-color: #dc2626;
    border-color: #dc2626;
}

.hata {
    margin: 0;
    color: #dc2626;
    font-size: 0.875rem;
}

/* ---------- sozlesme sayfasi ----------
   Renkler yine yalnizca :root token'larindan; bir tema theme.json disinda
   hicbir sey degistirmeden farklilassin diye. */

.sozlesme-bilgi {
    margin-bottom: var(--bosluk-4);
}

.sozlesme-bilgi h2 {
    margin: 0 0 var(--bosluk-2);
    font-size: 1.125rem;
    color: var(--renk-koyu);
}

.bilgi-listesi {
    margin: 0;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin);
    overflow: hidden;
}

.bilgi-listesi__satir {
    display: grid;
    grid-template-columns: minmax(9rem, 30%) 1fr;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2);
    border-top: 1px solid var(--renk-cizgi);
}

.bilgi-listesi__satir:first-child {
    border-top: 0;
}

.bilgi-listesi dt {
    margin: 0;
    color: var(--renk-soluk);
    font-size: 0.875rem;
}

.bilgi-listesi dd {
    margin: 0;
    color: var(--renk-metin);
    overflow-wrap: anywhere;
}

.bilgi-listesi__ek {
    color: var(--renk-soluk);
    font-size: 0.875rem;
}

/* Dar ekranda etiket/deger alt alta - iki sutun 320px'de sigmiyor. */
@media (max-width: 520px) {
    .bilgi-listesi__satir {
        grid-template-columns: 1fr;
        gap: var(--bosluk-1);
    }
}

/* Okul sozlesme metni /panel'den HAM HTML geliyor; govde tipografisi
   icerik-govdesi ile ayni kalsin. */
.sozlesme {
    padding: var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
}

.sozlesme > :first-child { margin-top: 0; }
.sozlesme > :last-child { margin-bottom: 0; }

/* ---------- fiyat kademeleri (sihirbaz, adim 4) ----------
   Renkler yalnizca :root token'larindan; bir tema theme.json disinda
   hicbir sey degistirmeden farklilassin diye. TEK ISTISNA yok - secili
   satirin vurgusu da birincil token. */

.sihirbaz__altbaslik {
    font-size: 1.0625rem;
    margin: var(--bosluk-3) 0 var(--bosluk-1);
}

/* ⚠️ KAYDIRMA TABLONUN KENDI SARMALINDA. Bes sutun 320px'e sigmiyor;
   sarmal olmadan SAYFA GOVDESI yatay kayar ve sihirbazin butun adimlari
   bozulur. */
.fiyat-listesi-sarmal {
    overflow-x: auto;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
}

.fiyat-listesi {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--renk-zemin);
}

.fiyat-listesi th,
.fiyat-listesi td {
    padding: var(--bosluk-2);
    text-align: left;
    border-top: 1px solid var(--renk-cizgi);
    white-space: nowrap;
}

.fiyat-listesi thead th {
    border-top: 0;
    color: var(--renk-soluk);
    font-size: 0.875rem;
    font-weight: 600;
}

/* ⚠️ ISARET RENKLE SINIRLI DEGIL: sol kenardaki kalin cizgi ve kalin
   yazi, renk goremeyen veliye de hangi satirin kendisine ait oldugunu
   soyluyor. Blade ayrica aria-current basiyor. */
.fiyat-listesi__secili > td {
    background: var(--renk-zemin-alt);
    font-weight: 600;
}

.fiyat-listesi__secili > td:first-child {
    box-shadow: inset 3px 0 0 var(--renk-birincil);
}

.fiyat-listesi__aciklama {
    margin: var(--bosluk-1) 0 0;
    color: var(--renk-soluk);
    font-size: 0.875rem;
}

/* Dar ekranda tablo satir satir kartlara donuyor - yatay kaydirma bir
   telefonda fiyat karsilastirmayi kullanilmaz kiliyor. Etiketler
   blade'deki data-etiket'ten geliyor, ikinci bir isaretleme yok. */
@media (max-width: 520px) {
    .fiyat-listesi-sarmal { overflow-x: visible; }
    .fiyat-listesi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .fiyat-listesi tr { display: block; border-top: 1px solid var(--renk-cizgi); }
    .fiyat-listesi tr:first-child { border-top: 0; }

    .fiyat-listesi td {
        display: grid;
        grid-template-columns: minmax(8rem, 45%) 1fr;
        gap: var(--bosluk-1);
        border-top: 0;
        padding: var(--bosluk-1) var(--bosluk-2);
        white-space: normal;
    }

    .fiyat-listesi td::before {
        content: attr(data-etiket);
        color: var(--renk-soluk);
        font-size: 0.875rem;
        font-weight: 400;
    }

    .fiyat-listesi__secili > td:first-child { box-shadow: none; }
    .fiyat-listesi__secili { box-shadow: inset 3px 0 0 var(--renk-birincil); }
}

/* ---------- fiyat karti (dar ekran, tablonun yerini alir) ----------
   Bes sutunlu tablo 520px altinda satir-karta donuyor ama veli yine de
   kendi kademesini ARAMAK zorunda kaliyordu. Bu kart aramayi ortadan
   kaldirir - yalnizca ISARETLI kademeyi basar. Blade tarafinda
   $secili yoksa hic cizilmiyor (partial'a bakin). */
.fiyat-karti {
    display: none;
    padding: var(--bosluk-2) var(--bosluk-3);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
}

.fiyat-karti__etiket {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--renk-birincil-koyu);
}

.fiyat-karti__aralik {
    display: block;
    margin-top: 0.125rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--renk-koyu);
}

.fiyat-karti__detay {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem var(--bosluk-2);
    margin: var(--bosluk-1) 0 0;
}

.fiyat-karti__detay dt { color: var(--renk-soluk); font-size: 0.875rem; }
.fiyat-karti__detay dd { margin: 0; text-align: right; font-weight: 600; color: var(--renk-metin); }

/* ⚠️ ASLA IKISI BIRDEN: kart ve tablo sarmali karsilikli disliyor. Ters
   olsaydi ayni rakam ekranda IKI KEZ gorunurdu. Esik `sihirbaz__band-alt`
   ile ayni (max-width: 40rem) - dosyanin genelinde COGUNLUKLA bu yon
   kullaniliyor (.alan-grup tek istisna, orada min-width - gerekce kendi
   yorumunda). */
@media (max-width: 40rem) {
    .fiyat-karti { display: block; }
    .fiyat-listesi-sarmal { display: none; }
}


/* Ekran okuyucuya gorunur, goze gorunmez. `display:none` OLMAZ - okuyucu
   da atlar. */
.gorsel-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- QR okul karti ---------- */

/*
   ⚠️ ZEMIN MARKA RENGININ COK ACIK TONU. Sabit bir renk yazilsaydi dort
   temanin dordunde de ayni ton cikardi ve kart temanin disinda dururdu.
   color-mix desteklemeyen tarayicida ilk satir gecerli kalir.
*/
.okul-karti {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: 0.875rem 1rem;
    border: 1px solid var(--renk-cizgi);
    border-left: 4px solid var(--renk-birincil-koyu);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
    background: color-mix(in srgb, var(--renk-birincil) 6%, white);
}

.okul-karti__ikon {
    flex: 0 0 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kose);
    background: var(--renk-birincil-koyu);
    color: var(--renk-ustu);
}

.okul-karti__ikon svg { width: 1.25rem; height: 1.25rem; }

.okul-karti__govde { flex: 1; min-width: 0; }

.okul-karti__etiket {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--renk-birincil-koyu);
}

.okul-karti__ad { display: block; font-weight: 600; color: var(--renk-koyu); }

/* ⚠️ min-height 44px (2.75rem) - WCAG 2.5.5'in DOKUNMA HEDEFI TABANI,
   susleme degil (bkz. .dugme'nin baslangicindaki not). Eskiden 2.25rem
   (36px) idi - "kucuk" varyant boyutu kuculturken bu tabani deldi. Okul
   kartinda (okul-karti.blade.php) satir yuksekligini artik ikon degil
   bu dugme belirliyor: kart ~64px'ten ~72px'e cikiyor, dengeyi bozmuyor. */
.dugme--kucuk { min-height: 2.75rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; }

/* ⚠️ SABIT RENKLER KASITLI: bu bir uyari, marka rengi degil - marka
   tonuna cekilirse uyari gibi gorunmez olur. */
.uyari-seridi {
    padding: 0.75rem 1rem;
    border-radius: var(--kose);
    background: #fef3c7;
    color: #78350f;
    font-size: 0.9375rem;
}

/* ⚠️ Dar ekranda kart alt alta: 320px'de ikon + ad + dugme yan yana
   sigmiyor ve "Degistir" tasiyor. */
/*
   ⚠️ DAR EKRANDA YALNIZCA DUGME ALT SATIRA INER - IKON VE AD YAN YANA
   KALIR. Once govde'ye `flex: 1 1 100%` verilmisti ve kart UC SATIRA
   yayiliyordu: ikon tek basina bir satirda, ad ikincide, dugme ucuncude.
   Olculdu 2026-08-21, saymed.test 375px: kart yuksekligi 182px ve ikon
   kendi satirinda oksuz duruyordu. Simdi iki satir.
*/
@media (max-width: 30rem) {
    .okul-karti { flex-wrap: wrap; }
    .okul-karti__govde { flex: 1 1 auto; }
    .okul-karti .dugme--kucuk { flex: 1 1 100%; }
}

/* ---------- marka bandi ---------- */

/*
   ⚠️ ZEMIN KOYU TON. Gerekce dosyanin basinda --renk-birincil-koyu'nun
   yaninda olculdu: ham renkte Safran 2,11 / Saymed 3,15.
   Bekci: KayitSihirbaziGorunumTest.
*/
.sihirbaz__band {
    background: var(--renk-birincil-koyu);
    color: var(--renk-ustu);
    padding: var(--bosluk-2) var(--bosluk-3);
    border-radius: var(--kose-genis) var(--kose-genis) 0 0;
}

.sihirbaz__band-baslik { margin: 0; font-size: 1.125rem; font-weight: 700; }

/*
   ⚠️ opacity KULLANMA - OLCULDU 2026-08-20 ve bir kez GERCEKTEN
   kirdi. --renk-birincil-koyu zemininde beyaz metnin kontrasti
   Safran'da 4,71 (WCAG AA'nin 4,5 esigini az geciyor). opacity: 0.9
   beyazi zeminle karistirip ~#e7f2f3'e dusuruyor ve olculen kontrast
   4,14'e, yani esigin ALTINA, iniyor. 13px'te bu KUCUK metin sayilir,
   4,5 aynen gecerli. Bu satir ayrica 40rem altinda adim metninin
   TEK gostergesi (gorsel adim etiketleri orada kirpiliyor), yani
   kirilirsa Safran'da kimse hangi adimda oldugunu okuyamiyor.
*/
.sihirbaz__band-alt { margin: 0.25rem 0 0; font-size: 0.8125rem; }

/* ⚠️ Adim seridi bandin ALTINDA ve gorsel; metin karsiligi band icinde
   ("Adim 2 / 3 - Veli ve Adres"). Dar ekranda uc etiket yan yana
   sigmiyor - sigdirmaya calismak yerine metin banda tasindi. */
@media (max-width: 40rem) {
    .sihirbaz__adim-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- kartli bolum ---------- */

/* ⚠️ HEPSI .sihirbaz ILE KAPSANMIS - kapsanmadan .bolum/.bolum__* taban
   temanin genel-amacli isimler. Kapsamasiz halde canli tanik oldu
   (2026-08-21 inceleme): ayni siniflar taban temanin herkese acik
   anasayfa bolumlerinde ZATEN kullaniliyor
   (partials/sections/{hero,hizmetler,neden-biz,filo,referanslar,sss,
   iletisim-cta}.blade.php) ve tema.css bu sihirbaz kurallarindan SONRA
   yuklendigi icin yalnizca kendi tanimladigi iki ozelligi (padding-block,
   text-align/margin-bottom) geri aliyordu - geri kalani (kenarlik, kose
   yuvarlama, flex baslik) o yedi bolume sizip beslerini bozuyordu.
   Sihirbaz markup'i baştan sona .sihirbaz icinde (bkz. sihirbaz.blade.php
   kok div'i), yani kapsama guvenli. */
.sihirbaz .bolum {
    background: var(--renk-zemin);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--kose);
    overflow: hidden;
}

/* ⚠️ Baslik seridi COK ACIK marka tonu; metin ise NOTR koyu - OLCULDU
   2026-08-21. Once metin de --renk-birincil-koyu idi ve Safran'da
   (en acik marka rengi, en cok yolcusu olan tenant) #138086 metin
   #ebfafb zemine karsi yalnizca 4,38 veriyordu - WCAG AA'nin 4,5
   esiginin ALTINDA (Saymed'de ayni ciftin 5,91 olcup gectigi icin
   fark yalnizca Safran'da gorulurdu). Marka kimligi zaten dolu
   --renk-birincil-koyu zeminli .bolum__ikon rozetinde duruyor; basligi
   da markayla boyamak ayni riski buraya tasiyor. --renk-koyu, tema
   basliklarinda zaten kullanilan notr (bkz. .sozlesme-bilgi h2,
   .fiyat-karti__aralik) - dort temada da 13+ kontrast veriyor, tema
   basina ayarlama gerektirmiyor. */
.sihirbaz .bolum__baslik {
    display: flex;
    align-items: center;
    gap: var(--bosluk-1);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin-alt);
    background: color-mix(in srgb, var(--renk-birincil) 9%, white);
}

.sihirbaz .bolum__baslik h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--renk-koyu);
}

/* ⚠️ BASLIKTAKI IKINCIL DUGME NOTR KALIR - olculdu 2026-08-21,
   safran.test/onkayit adim 3, tarayicida hesaplanmis stil okunarak.

   Hemen yukaridaki h3 duzeltmesi bu basligi notre cekti ama AYNI
   BASLIKTAKI KARDES DUGMEYI atladi: .dugme--ikincil metnini ve
   cercevesini --renk-birincil-koyu ile boyuyor (#138086 Safran'da) ve
   zemin de bu basligin marka tonlu #ebfafb'si. Birebir ayni cift,
   birebir ayni zemin:

     .bolum__baslik icindeki "Duzenle"  -> 4,39  AA ALTI
     beyaz zemindeki "Geri" / "Duzenle" -> 4,71  gecer

   Taban .dugme--ikincil kurali DOGRU ve degismiyor - beyaz zeminde
   4,71 veriyor ve bekcisi var. Eksik olan, marka tonlu zemine dusen
   ornegin karsiligiydi. Depo kurali: hem zemini hem metni markayla
   tonlamak, acik markalari AA'nin altina iten seydir; biri marka
   olacaksa oteki notr kalmali. Marka kimligi zaten .bolum__ikon
   rozetinde. */
.sihirbaz .bolum__baslik .dugme--ikincil {
    color: var(--renk-koyu);
    border-color: var(--renk-koyu);
}

/* Ozet kartinin basligindaki "Duzenle" - flex ebeveynde saga yaslar. */
.sihirbaz .bolum__baslik-eylem { margin-left: auto; flex: 0 0 auto; }

.ozet__duzenle { margin: 0; }

.sihirbaz .bolum__ikon {
    flex: 0 0 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--renk-birincil-koyu);
    color: var(--renk-ustu);
}

.sihirbaz .bolum__ikon svg { width: 1rem; height: 1rem; }

.sihirbaz .bolum__govde { display: grid; gap: var(--bosluk-2); padding: 1rem; }

/* ⚠️ .alan-grup ZATEN mobil-once kuruluydu: taban kural tek sutun
   (grid-template-columns tanimsiz -> tek zimni sutun) ve iki sutuna
   GECIS yalnizca yukaridaki `@media (min-width: 640px)` ile geliyor -
   yani 375px'de zaten alt alta, etiket kirilmasi olculmedi. Ayri bir
   `max-width: 40rem` kurali eklemek bu esikle YARISAN ikinci, gereksiz
   bir kural olurdu; bu yuzden buraya eklenmedi. */

/* ---------- adres onizlemesi ---------- */

/*
   ⚠️ ZEMIN MARKA RENGININ COK ACIK TONU - okul-karti'yle AYNI desen
   (bkz. yukarida). Sabit bir renk dort temada da ayni ton cikarirdi ve
   kutu temanin disinda dururdu. color-mix desteklemeyen tarayicida ilk
   satir (--renk-zemin-alt) gecerli kalir.
*/
.adres-onizleme {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-1);
    padding: 0.75rem 1rem;
    border: 1px dashed var(--renk-cizgi);
    border-radius: var(--kose);
    background: var(--renk-zemin-alt);
    background: color-mix(in srgb, var(--renk-birincil) 5%, white);
    font-size: 0.9375rem;
}

.adres-onizleme__ikon {
    flex: 0 0 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    color: var(--renk-birincil-koyu);
}

.adres-onizleme__ikon svg { width: 1.25rem; height: 1.25rem; }

.adres-onizleme__metin { color: var(--renk-metin); }

/* Henuz hicbir alan girilmemis - .ipucu ile AYNI soluk ton. */
.adres-onizleme__metin--bos { color: var(--renk-soluk); font-style: italic; }