/* KPSS.AI — açık temalı kamuya açık site
   Palet, sınav dünyasının kendi malzemesinden: kitapçık kâğıdı, kurşun kalem grafiti,
   ÖSYM kitapçık mavisi ve optik okuyucunun görmediği açık mürekkep. */

:root{
  --kagit:#fcfcfa;
  --yuzey:#ffffff;
  --yuzey-alt:#f4f5f3;
  --murekkep:#16181c;
  --kalem:#5b6572;          /* maviye çalan gri — seçilmiş nötr */
  --kalem-acik:#8b94a1;
  --cizgi:#e3e6ea;
  --cizgi-koyu:#cdd3da;
  --optik:#12539e;
  --optik-koyu:#0d3f79;
  --optik-yumusak:#e5eefa;
  --dogru:#0e7a4d;
  --dogru-yumusak:#e2f2ea;
  --yanlis:#b93a2e;
  --yanlis-yumusak:#fae9e7;
  --uyari:#a8690a;
  --uyari-yumusak:#fbf0dc;
  --olcu:1140px;
  --golge:0 1px 2px rgba(22,24,28,.05), 0 8px 24px -12px rgba(22,24,28,.18);
  color-scheme:light;
}

/* Koyu palet — aynı belirteçler yeniden tanımlanır, bileşenler hiç değişmez.
   Üç durum: açık seçimi, koyu seçimi ve hiç seçim yapılmamış (işletim sistemi) hâli. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="acik"]){
    --kagit:#101216;
    --yuzey:#181b21;
    --yuzey-alt:#1f232a;
    --murekkep:#eef1f5;
    --kalem:#9aa4b2;
    --kalem-acik:#6f7986;
    --cizgi:#282d35;
    --cizgi-koyu:#39404a;
    --optik:#63aaf6;
    --optik-koyu:#8dc2f8;
    --optik-yumusak:#16263c;
    --dogru:#41c187;
    --dogru-yumusak:#12291f;
    --yanlis:#f0705f;
    --yanlis-yumusak:#2c1917;
    --uyari:#e0a132;
    --uyari-yumusak:#2a2113;
    --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-tema="koyu"]{
  --kagit:#101216;
  --yuzey:#181b21;
  --yuzey-alt:#1f232a;
  --murekkep:#eef1f5;
  --kalem:#9aa4b2;
  --kalem-acik:#6f7986;
  --cizgi:#282d35;
  --cizgi-koyu:#39404a;
  --optik:#63aaf6;
  --optik-koyu:#8dc2f8;
  --optik-yumusak:#16263c;
  --dogru:#41c187;
  --dogru-yumusak:#12291f;
  --yanlis:#f0705f;
  --yanlis-yumusak:#2c1917;
  --uyari:#e0a132;
  --uyari-yumusak:#2a2113;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font:400 16px/1.6 "Source Sans 3","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh;
}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Source Sans 3",system-ui,sans-serif;
  font-weight:700;margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.12;
}
p{margin:0}
a{color:var(--optik);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--optik);outline-offset:3px;border-radius:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block;max-width:100%}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.kalem{color:var(--kalem)}
.kucuk{font-size:14px}
.mini{font-size:13px}

/* Bölüm başlıklarının üstündeki küçük etiket — yalnız gerçek bir sınıflandırma varsa kullanılır */
.eyebrow{
  font:600 12px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kalem-acik);
  display:block;margin-bottom:14px;
}

.olcu{width:100%;max-width:var(--olcu);margin:0 auto;padding:0 24px}
.dar{max-width:720px}

/* ------------------------------------------------------------------- başlık */
.site-ust{
  border-bottom:1px solid var(--cizgi);
  background:color-mix(in srgb,var(--kagit) 88%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  position:sticky;top:0;z-index:40;
}
.site-ust .olcu{display:flex;align-items:center;gap:28px;height:64px}
.marka{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.03em;color:var(--murekkep);text-decoration:none;flex:none;
}
.marka:hover{text-decoration:none}
.marka i{font-style:normal;color:var(--optik)}
.site-menu{display:none;gap:26px;flex:1}
.site-menu a{color:var(--kalem);font-size:15px;font-weight:600}
.site-menu a:hover{color:var(--murekkep);text-decoration:none}
.site-ust-sag{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:900px){ .site-menu{display:flex} }

/* düğmeler */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:9px;padding:11px 18px;font-weight:600;font-size:15px;
  border:1px solid transparent;min-height:44px;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.dg:hover{text-decoration:none}
.dg-ana{background:var(--optik);color:#fff;border-color:var(--optik)}
.dg-ana:hover{background:var(--optik-koyu);border-color:var(--optik-koyu)}
.dg-cizgi{border-color:var(--cizgi-koyu);color:var(--murekkep);background:var(--yuzey)}
.dg-cizgi:hover{border-color:var(--kalem);background:var(--yuzey-alt)}
.dg-duz{color:var(--kalem);padding:11px 12px}
.dg-duz:hover{color:var(--murekkep)}
.dg-kucuk{padding:8px 13px;min-height:36px;font-size:14px;border-radius:8px}
.dg-buyuk{padding:15px 26px;min-height:52px;font-size:17px}
.dg-g{background:var(--yuzey);border-color:var(--cizgi-koyu);color:var(--murekkep)}
.dg-g:hover{border-color:var(--kalem)}
.dg-g b{color:var(--optik);font:800 16px/1 "Bricolage Grotesque",sans-serif}

kbd{
  font:600 11px/1 "IBM Plex Mono",monospace;color:var(--murekkep);
  background:var(--yuzey-alt);border:1px solid var(--cizgi-koyu);
  border-bottom-width:2px;border-radius:5px;padding:3px 6px;
}

/* --------------------------------------------------------------------- hero */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--cizgi)}
.hero .olcu{display:grid;gap:48px;grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){ .hero .olcu{grid-template-columns:1.05fr .95fr;gap:64px} }

.hero h1{font-size:clamp(36px,4.6vw,54px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--optik)}
.hero .giris{font-size:19px;color:var(--kalem);margin-top:20px;max-width:34em}
.hero-eylem{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.hero-not{color:var(--kalem);font-size:14px;margin-top:14px}
.hero-not b{color:var(--murekkep);font-weight:600}

/* net hesabı — bu ürünün konusuna özgü tek gerçek ölçü */
.net-serit{
  display:flex;flex-wrap:wrap;gap:0;margin-top:36px;
  border:1px solid var(--cizgi);border-radius:12px;overflow:hidden;background:var(--yuzey);
}
.net-serit div{
  flex:1;min-width:126px;padding:16px 18px;
  border-right:1px solid var(--cizgi);
}
.net-serit div:last-child{border-right:0}
.net-serit b{
  display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(20px,1.9vw,25px);font-weight:700;letter-spacing:-.025em;
  line-height:1.1;white-space:nowrap;
}
.net-serit span{display:block;font-size:13px;color:var(--kalem);margin-top:4px}

/* ------------------------------------------------- kitapçık: örnek soru kartı */
.kitapcik{
  background:var(--yuzey);border:1px solid var(--cizgi);border-radius:14px;
  box-shadow:var(--golge);overflow:hidden;
}
.kitapcik-ust{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px;border-bottom:1px solid var(--cizgi);
  background:var(--yuzey-alt);
  font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kalem);
}
.kitapcik-govde{padding:22px 22px 18px}
.soru-no{
  font:600 13px/1 "IBM Plex Mono",monospace;color:var(--kalem-acik);
  display:block;margin-bottom:10px;
}
.soru-metin{
  font-family:"Source Serif 4",Georgia,serif;   /* kitapçıkta soru metni serif dizilir */
  font-size:18px;line-height:1.5;margin-bottom:18px;
}
.sik-liste{display:flex;flex-direction:column;gap:7px}
.sik-satir{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border:1px solid var(--cizgi);border-radius:8px;font-size:15px;
}
.sik-satir .harf{
  font:600 13px/1 "IBM Plex Mono",monospace;color:var(--kalem);
  width:16px;flex:none;
}
.sik-satir.dogru{background:var(--dogru-yumusak);border-color:var(--dogru)}
.sik-satir.dogru .harf{color:var(--dogru)}
.sik-satir.yanlis{background:var(--yanlis-yumusak);border-color:var(--yanlis)}
.sik-satir.yanlis .harf{color:var(--yanlis)}
.sik-satir .isaret{margin-left:auto;font-size:13px;font-weight:600}
.sik-satir.dogru .isaret{color:var(--dogru)}
.sik-satir.yanlis .isaret{color:var(--yanlis)}

.aciklama{
  margin-top:16px;padding:14px 16px;border-radius:10px;
  background:var(--optik-yumusak);border:1px solid color-mix(in srgb,var(--optik) 22%,transparent);
}
.aciklama .etiket{
  display:block;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--optik);margin-bottom:7px;
}
.aciklama p{font-size:14.5px;line-height:1.55}

/* optik form baloncuk şeridi */
.optik-form{
  display:flex;gap:14px;padding:14px 22px 20px;border-top:1px solid var(--cizgi);
  overflow-x:auto;
}
.optik-sutun{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.optik-sutun .no{font:600 10px/1 "IBM Plex Mono",monospace;color:var(--kalem-acik)}
.optik-sutun i{
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid var(--optik-yumusak);background:transparent;display:block;
}
[data-tema="koyu"] .optik-sutun i{border-color:var(--cizgi-koyu)}
.optik-sutun i.dolu{background:var(--murekkep);border-color:var(--murekkep)}

/* ------------------------------------------------------------------ bölümler */
.blok{padding:64px 0;border-bottom:1px solid var(--cizgi)}
.blok-basi{margin-bottom:34px;max-width:44em}
.blok-basi h2{font-size:clamp(26px,3.2vw,34px)}
.blok-basi p{color:var(--kalem);font-size:17px;margin-top:12px}

/* özellik listesi — kart değil, çizgiyle ayrılmış sütunlar */
.ozellik-izgara{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:820px){ .ozellik-izgara{grid-template-columns:repeat(3,1fr)} }
.ozellik{padding:26px 0;border-top:1px solid var(--cizgi)}
@media (min-width:820px){
  .ozellik{padding:0 30px;border-top:0;border-left:1px solid var(--cizgi)}
  .ozellik:first-child{padding-left:0;border-left:0}
  .ozellik:last-child{padding-right:0}
}
.ozellik h3{font-size:19px;margin-bottom:9px}
.ozellik p{color:var(--kalem);font-size:15.5px}
.ozellik .sira{
  font:600 12px/1 "IBM Plex Mono",monospace;color:var(--kalem-acik);
  display:block;margin-bottom:12px;
}

/* bölüm tablosu */
.bolum-tablo{border-top:1px solid var(--cizgi)}
.bolum-satir{
  display:flex;align-items:center;gap:16px;padding:15px 4px;
  border-bottom:1px solid var(--cizgi);
}
a.bolum-satir{color:inherit}
a.bolum-satir:hover{background:var(--yuzey-alt);text-decoration:none}
.bolum-satir .ad{flex:1;min-width:0;font-weight:600;font-size:15.5px}
.bolum-satir .grup{
  font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;
  color:var(--kalem);background:var(--yuzey-alt);border:1px solid var(--cizgi);
  border-radius:5px;padding:5px 8px;flex:none;
}
.bolum-satir .adet{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--murekkep);min-width:66px;text-align:right;flex:none;
}
.bolum-satir .konu{color:var(--kalem);font-size:13.5px;display:none}
@media (min-width:700px){ .bolum-satir .konu{display:block;min-width:78px;text-align:right} }

/* ------------------------------------------------------------------ fiyat */
.fiyat-izgara{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:880px){ .fiyat-izgara{grid-template-columns:1.15fr 1fr;align-items:start} }
.plan{
  background:var(--yuzey);border:1px solid var(--cizgi-koyu);border-radius:14px;
  padding:30px;box-shadow:var(--golge);
}
.plan .tutar{
  font-family:"Bricolage Grotesque",sans-serif;font-size:52px;font-weight:800;
  letter-spacing:-.04em;line-height:1;margin:14px 0 6px;
}
.plan .tutar span{font-size:16px;font-weight:600;color:var(--kalem);letter-spacing:0;margin-left:8px}
.plan ul{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.plan li::before{
  content:"";width:17px;height:17px;border-radius:50%;flex:none;margin-top:3px;
  background:var(--dogru-yumusak);
  box-shadow:inset 0 0 0 1.5px var(--dogru);
}
.plan .dg{width:100%}

/* -------------------------------------------------------------------- SSS */
.sss{border-top:1px solid var(--cizgi);max-width:56em}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
  padding:18px 30px 18px 0;font-weight:600;font-size:16.5px;cursor:pointer;
  list-style:none;position:relative;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"+";position:absolute;right:4px;top:16px;
  font:400 22px/1 "IBM Plex Mono",monospace;color:var(--kalem);
}
.sss details[open] summary::after{content:"−"}
.sss details[open] summary{color:var(--optik)}
.sss .yanit{padding:0 40px 20px 0;color:var(--kalem);font-size:15.5px}

/* ------------------------------------------------------------------ belge */
.belge{padding:52px 0 68px}
.belge h1{font-size:clamp(28px,4vw,40px);margin-bottom:10px}
.belge .tarih{color:var(--kalem-acik);font-size:13.5px;margin-bottom:34px;
  font-family:"IBM Plex Mono",monospace}
.belge h2{font-size:20px;margin:34px 0 10px}
.belge h3{font-size:16.5px;margin:22px 0 8px}
.belge p,.belge li{color:var(--kalem);font-size:16px;line-height:1.7}
.belge p+p{margin-top:12px}
.belge ul,.belge ol{margin:12px 0;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.belge table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.belge th,.belge td{border:1px solid var(--cizgi);padding:10px 12px;text-align:left;vertical-align:top}
.belge th{background:var(--yuzey-alt);font-weight:600;color:var(--murekkep)}
.belge td{color:var(--kalem)}
.belge-sar{overflow-x:auto}
.belge .kutu{
  border-left:3px solid var(--optik);background:var(--optik-yumusak);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:20px 0;
}
.belge .kutu p{color:var(--murekkep);font-size:15px}

/* ---------------------------------------------------------------- alt bilgi */
.site-alt{
  margin-top:auto;border-top:1px solid var(--cizgi);
  background:var(--yuzey-alt);padding:52px 0 30px;
}
.alt-izgara{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:640px){ .alt-izgara{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .alt-izgara{grid-template-columns:1.5fr 1fr 1fr 1.2fr} }
.alt-marka p{color:var(--kalem);font-size:14.5px;margin-top:12px;max-width:30em}
.alt-sutun h4{
  font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kalem-acik);margin-bottom:14px;
}
.alt-sutun ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.alt-sutun a{color:var(--kalem);font-size:14.5px}
.alt-sutun a:hover{color:var(--optik)}
.alt-kunye{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--cizgi);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  color:var(--kalem-acik);font-size:13.5px;
}
.alt-uyari{
  margin-top:16px;color:var(--kalem-acik);font-size:13px;line-height:1.6;max-width:62em;
}


/* ------------------------------------------------------------------ formlar */
.form{display:flex;flex-direction:column;gap:16px}
.alan{display:flex;flex-direction:column;gap:6px}
.alan label{font-size:13.5px;font-weight:600;color:var(--murekkep)}
.alan .ipucu{font-size:12.5px;color:var(--kalem)}
.alan input,.alan select{
  background:var(--yuzey);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);border-radius:9px;
  padding:12px 14px;font:inherit;font-size:15.5px;width:100%;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.alan input:focus{border-color:var(--optik);box-shadow:0 0 0 3px var(--optik-yumusak)}
.alan input::placeholder{color:var(--kalem-acik)}
.alan input[aria-invalid="true"]{border-color:var(--yanlis)}
.alan .hata{font-size:13px;color:var(--yanlis)}
.alan-cift{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){ .alan-cift{grid-template-columns:1fr 1fr} }
.alan input.mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.06em}

/* adım başlıkları — sipariş akışı gerçek bir sıra izlediği için numaralı */
.adim{display:flex;align-items:baseline;gap:11px;margin:0 0 16px}
.adim .no{
  flex:none;width:25px;height:25px;border-radius:50%;
  background:var(--optik);color:#fff;
  font:600 12px/25px "IBM Plex Mono",monospace;text-align:center;
}
.adim h3{font-size:18px}
.adim .yan{margin-left:auto;font-size:13px;color:var(--kalem)}

.bolme{
  border:1px solid var(--cizgi);border-radius:14px;padding:22px;background:var(--yuzey);
  display:flex;flex-direction:column;
}
.bolme + .bolme{margin-top:16px}

.bilgi-kutu{
  border-left:3px solid var(--optik);background:var(--optik-yumusak);
  border-radius:0 10px 10px 0;padding:13px 16px;font-size:14px;color:var(--murekkep);
}
.uyari-kutu{
  border:1px solid var(--yanlis);background:var(--yanlis-yumusak);
  border-radius:10px;padding:13px 16px;font-size:14.5px;color:var(--yanlis);
}
.basari-kutu{
  border:1px solid var(--dogru);background:var(--dogru-yumusak);
  border-radius:10px;padding:13px 16px;font-size:14.5px;color:var(--dogru);
}

/* seçim (ödeme yöntemi) */
.secim-sirasi{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){ .secim-sirasi{grid-template-columns:1fr 1fr} }
.secim{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  border:1px solid var(--cizgi-koyu);border-radius:10px;padding:13px 15px;
  font-size:15px;font-weight:600;background:var(--yuzey);min-height:52px;
}
.secim input{position:absolute;opacity:0;width:0;height:0}
.secim i{
  flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--cizgi-koyu);transition:border-width .12s,border-color .12s;
}
.secim:has(input:checked){border-color:var(--optik);background:var(--optik-yumusak)}
.secim:has(input:checked) i{border:5px solid var(--optik)}
.secim:has(input:focus-visible){outline:2px solid var(--optik);outline-offset:2px}

.onay{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--kalem);line-height:1.5}
.onay input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--optik)}

/* sipariş özeti */
.siparis-izgara{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:940px){ .siparis-izgara{grid-template-columns:1fr 380px;gap:40px;align-items:start} }
.ozet{
  border:1px solid var(--cizgi-koyu);border-radius:14px;padding:22px;
  background:var(--yuzey);box-shadow:var(--golge);position:sticky;top:88px;
}
.ozet-satir{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:15px}
.ozet-satir.toplam{
  border-top:1px solid var(--cizgi);margin-top:10px;padding-top:14px;font-size:16px;font-weight:600;
}
.ozet-satir.toplam b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:26px;letter-spacing:-.02em;
}
.ozet .dg{width:100%;margin-top:16px}


/* kod şeridi — indirimli alışveriş ekranının başında, kodun ne kazandırdığını gösterir */
.kod-serit{
  display:flex;flex-wrap:wrap;gap:0;margin-top:6px;
  border:1px solid var(--dogru);border-radius:14px;overflow:hidden;
  background:var(--dogru-yumusak);
}
.kod-serit > div{
  flex:1;min-width:170px;padding:16px 20px;
  border-right:1px solid color-mix(in srgb,var(--dogru) 28%,transparent);
  display:flex;flex-direction:column;gap:4px;
}
.kod-serit > div:last-child{border-right:0}
.kod-serit .etiket-mini{
  font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dogru);
}
.kod-serit b{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;letter-spacing:-.02em}
.kod-serit .kod-buyuk{font-size:24px;font-weight:700;letter-spacing:.24em;color:var(--murekkep)}
.kod-serit .tutar{font-size:26px}
.kod-serit s{color:var(--kalem);font-size:13.5px}

/* giriş / kayıt dar sayfa */
.giris-kap{max-width:440px;margin:0 auto;padding:52px 24px 72px}
.giris-kap h1{font-size:30px;margin-bottom:8px}
.giris-kap .alt{color:var(--kalem);margin-bottom:26px}
.ayirac-yazi{
  display:flex;align-items:center;gap:14px;margin:22px 0;
  color:var(--kalem-acik);font-size:13px;
}
.ayirac-yazi::before,.ayirac-yazi::after{
  content:"";flex:1;height:1px;background:var(--cizgi);
}


/* Mobil alt eylem çubuğu — dar ekranda ana işlem parmağın erişebileceği yerde durur.
   Geniş ekranda yapışkan özet zaten görünür olduğu için gizlenir. */
.mobil-alt{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;align-items:center;gap:12px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--yuzey) 94%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--cizgi);
  box-shadow:0 -6px 24px -18px rgba(22,24,28,.5);
}
.mobil-alt .tutar{display:flex;flex-direction:column;gap:2px;flex:none}
.mobil-alt .tutar small{
  font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kalem-acik);
}
.mobil-alt .tutar b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:20px;letter-spacing:-.02em;
}
.mobil-alt .tutar s{color:var(--kalem-acik);font-size:12px;margin-left:6px;font-weight:400}
.mobil-alt .dg{flex:1;min-height:48px}
@media (min-width:940px){ .mobil-alt{display:none} }
body:has(.mobil-alt) .site-alt{padding-bottom:90px}

/* test ekranı alt çubuğu zaten sabit; dar ekranda dokunma alanını büyütelim */
@media (max-width:600px){
  .test-alt .btn{min-height:50px;font-size:16px}
}

/* --------------------------------------------------------- Ctrl + kod modalı */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--murekkep) 42%,transparent);
  backdrop-filter:blur(3px);
}
.modal-ic{
  width:100%;max-width:440px;background:var(--yuzey);
  border:1px solid var(--cizgi);border-bottom:0;border-radius:16px 16px 0 0;
  padding:22px 22px calc(26px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--golge);
}
@media (min-width:600px){
  .modal{align-items:center}
  .modal-ic{border-radius:16px;border-bottom-width:1px}
}
.modal-basi{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-basi h3{font-size:19px}
.modal p{color:var(--kalem);font-size:14.5px}
.kod-kutular{display:flex;gap:8px;cursor:text}
.kod-kutular i{
  flex:1;aspect-ratio:1/1.18;border-radius:10px;background:var(--yuzey-alt);
  border:1.5px solid var(--cizgi-koyu);display:grid;place-items:center;
  font:600 22px/1 "IBM Plex Mono",monospace;font-style:normal;color:var(--murekkep);
}
.kod-kutular i.dolu{border-color:var(--optik);background:var(--optik-yumusak);color:var(--optik)}
.kod-kutular i.imlec{border-color:var(--murekkep)}
#kod-gizli{position:absolute;opacity:0;pointer-events:none;height:0;width:0}
.kod-sonuc{min-height:22px;font-size:14px;color:var(--kalem)}
.kod-sonuc.hata{color:var(--yanlis)}
.kod-sonuc .fiyat-kutu{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--dogru-yumusak);border:1px solid color-mix(in srgb,var(--dogru) 30%,transparent);
  border-radius:10px;padding:13px 15px;
}
.kod-sonuc .fiyat-kutu .aciklayici{font-weight:600;color:var(--dogru);font-size:13px}
.kod-sonuc .fiyat-kutu s{color:var(--kalem-acik);font-size:13px;display:block}
.kod-sonuc .fiyat-kutu b{
  font-family:"Bricolage Grotesque",sans-serif;font-size:21px;letter-spacing:-.02em;
  color:var(--murekkep);
}
.modal .dg{width:100%}

/* ------------------------------------------------------------------ hareket */
@media (prefers-reduced-motion:no-preference){
  .optik-sutun i.canli{animation:doldur .5s ease-out both}
  @keyframes doldur{ from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}