/* ============================================================================
   ultra.rekid.uk — arayuz

   MARKA: rekid.uk ile AYNI. Palet, yazi tipi ve kose yaricapi rekid'in
   public/styles.css dosyasindan birebir alindi. ultra ayri bir servis ama
   ayri bir MARKA DEGIL; kullanici bunu acikca soyledi.
     --blue #1A56DB · --teal #00C6C8 · --yellow #FFC83D
     --paper #F6F8FA · --ink #0D1B2A · Poppins · --radius 16px

   TEK TEMA. Marka `color-scheme: light` ile bilerek tek temali; ultra da
   oyle. (Onceki surumde uydurulmus bir koyu tema vardi, kaldirildi.)

   DUZEN: solda cevap, SAGDA bilgi bannerlari. Bannerlar kart degil, kenar
   notu -- ince cizgiyle ayrilmis, hizalamayla tasinan. Dar ekranda yan yana
   SIKISTIRILMAZ, cevabin altina kendi bolumu olarak gecer.

   OZGULLUK NOTU: bilesen kurallari gerektiginde `.kap eleman.sinif`
   biciminde yazildi. Sade sinif kurallari eleman kurallarina yeniliyor ve
   bu projede radio dugmeleri kartin ustune kacmisti; ayni tuzak yok.
   ========================================================================== */

:root{
  --blue:      #1A56DB;
  --blue-dark: #1445B0;
  --teal:      #00C6C8;
  --yellow:    #FFC83D;
  --paper:     #F6F8FA;
  --ink:       #0D1B2A;
  /* KOYU ARKA PLAN. portal.gumrukbeyan.com footer rengi; koyu yuzey
     isteyen her kural bunu okur. --ink METIN rengi olarak kalir. */
  --dark:      #0D3B66;
  --dark-rgb:  13,59,102;
  --text:      #3D4E60;
  --muted:     #7A8CA0;
  /* Marka TM isaretinin rengi. getrekid.com ile AYNI deger --muted DEGIL;
     logo iki sitede birebir ayni gorunsun diye ayri bir belirtec. */
  --faint:     #8A96A8;
  --line:      #E3E9F2;
  --line-soft: #EEF2F8;
  --green:     #12A150;
  --warn:      #B4690E;
  --radius:    16px;

  --olcu: 66ch;              /* okunabilir satir uzunlugu */
  --kap:  1140px;            /* sayfa kabinin en genis hali */
  --bosl: 26px;              /* kabin yan boslugu */
}

/* ==========================================================================
   SAYFA SUTUNU — TEK SOL KENAR

   Sorun (olculdu): soru kutusu 66ch'lik ORTALANMIS bir kutudaydi (sol 327),
   cevap ise 1140px'lik kabinde (sol 88). Ayni sayfada iki ayri sutun vardi
   ve soru kutusu cevabin 239 px sagindan basliyordu.

   Cozum: her bolum, 1140px'lik ortalanmis kabinin SOL IC KENARINDAN baslar.
   Genislik yine --olcu ile sinirli (okunabilir satir), ama ORTALANMIYOR.
   Dar ekranda max() ile 26 px'e kilitlenir, tasma olmaz.
   margin-inline: Arapca'da (dir=rtl) kendiliginden saga doner.
   ========================================================================== */
.ask, .clar, .hist, .note, .urun, .sdil, .oneri{
  --sol: max(var(--bosl), calc((100% - var(--kap)) / 2 + var(--bosl)));
  margin-inline-start: var(--sol);
  margin-inline-end: var(--bosl);
}

html{ color-scheme: light; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:#fff; color:var(--text);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  /* Alt bilgi SAYFANIN DIBINE yapissin. Kisa sayfalarda (gecmis listesi,
     kapi ekrani) footer ekranin ortasinda asili kaliyor ve altinda genis
     bos bir alan birakiyordu. min-height:100dvh mobilde adres cubugunu
     hesaba katar; 100vh orada fazladan kaydirma uretiyor. */
  min-height:100dvh; display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }
body > .ftr{ flex:none; }
h1,h2,h3{ color:var(--ink); line-height:1.25; margin:0; text-wrap:balance; }
a{ color:var(--blue); text-underline-offset:3px; }
a:hover{ color:var(--blue-dark); }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* ------------------------------------------------------------------ baslik */
.hdr{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 26px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
/* ==========================================================================
   LOGO YAZIMI — getrekid.com ile BIREBIR
   Kaynak: getrekid/public/styles.css `.brand` ve cocuklari (olculerek
   alindi, tahminle degil). Marka iki sitede iki turlu yazilamaz.

   `.brand` BURADA YALNIZCA BAGLANTI KABI. getrekid'de ayni ad yazinin
   kendisini bicimlendiriyor; rekid'de o ad ultra'dan gelen <a> sarmalayicisina
   ait. Cakismayi onlemek icin yazi `.rk-logo` altinda ve getrekid'in
   `.brand` kurallarinin AYNISINI tasiyor.
   ========================================================================== */
.brand{ display:inline-flex; align-items:center; text-decoration:none; }

.rk-logo{
  display:flex; align-items:flex-start; gap:1px; font-weight:700;
  /* LTR ADASI: Arapca sayfada dir=rtl mirasi siralamayi ters ceviriyor
     ve logo "TM * Kid Re" olarak diziliyordu. getrekid'de olculup
     duzeltildi; ayni koruma burada da. */
  direction:ltr;
  font-size:25px; letter-spacing:-.035em; line-height:1; color:var(--ink);
}
.rk-logo .re{ color:var(--blue); }
.rk-logo .kid{ color:var(--teal); }
.rk-logo .star{ margin-top:2px; }
.rk-logo .tm{ font-size:11px; font-weight:600; color:var(--faint); margin-top:1px; }

/* ESKI SADE YAZIM. ultra'nin iki renkli hali; artik basliktan
   cagrilmiyor ama alt bar ve olasi eski isaretler icin duruyor. */
.b-re{ color:var(--blue); }
.b-kid{ color:var(--teal); }
/* ULTRA rozeti: markanin sari vurgusu. rekid'den ayirt eden tek isaret. */
.b-ultra{ margin-left:9px; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); background:var(--yellow);
  padding:3px 8px; border-radius:6px; }
.hdr-end{ display:flex; gap:9px; align-items:center; }
.pill{ font-size:12.5px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px;
  font-variant-numeric:tabular-nums; }
.pill.wait{ color:var(--warn); background:#FFF7E8; border-color:#F5E2BC; }

/* ------------------------------------------------------------- soru sorma */
.ask{ max-width:var(--olcu); margin-block:60px 0; }
.ask h1{ font-size:clamp(28px,4.2vw,38px); font-weight:700; letter-spacing:-.02em; }
.ask p.sub{ color:var(--text); margin:14px 0 28px; }
/* SOL HIZA: kutunun ICINDEKI metin, baslik ve paragrafla AYNI sutunda
   baslar. Yuvarlak kutunun kendi ic boslugu metni 24 px iceri kaydiriyordu
   (olculdu: baslik 334, input 358). Kutuyu kendi ic boslugu kadar sola
   tasiyoruz -- yuvarlak kenar korunur, metin hizaya oturur.
   Bosluk .ask'in 26 px yan doldurmasindan geliyor, tasma yok.
   margin-inline-start: Arapca'da (dir=rtl) kendiliginden saga doner. */
.askbar{ display:flex; gap:10px; align-items:center; background:#fff;
  border:1.5px solid var(--line); border-radius:999px; padding:7px 7px 7px 22px;
  margin-inline-start:-23.5px;
  box-shadow:0 2px 14px -8px rgba(13,27,42,.18); }
.askbar:focus-within{ border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(26,86,219,.10); }
.askbar input{ flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:17px; color:var(--ink); }
.askbar input::placeholder{ color:var(--muted); }
.btn{ font:inherit; font-weight:600; font-size:15px; border:0; border-radius:999px;
  padding:11px 24px; background:var(--blue); color:#fff; }
.btn:hover:not(:disabled){ background:var(--blue-dark); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ------------------------------------------------------------------ durum */
.note{ max-width:var(--olcu); margin-block:22px; padding:15px 19px;
  border-radius:var(--radius); font-size:15px; }
.note.info{ background:var(--paper); border:1px solid var(--line); color:var(--text); }
.note.warn{ background:#FFF7E8; border:1px solid #F5E2BC; color:var(--warn); }
.note.care{ background:#EAF6FF; border:1px solid #C9E4F8; color:#0B4A79; }
.note.bad { background:#FDECEC; border:1px solid #F6CFCF; color:#A32020; }
.spin{ display:inline-block; width:14px; height:14px; margin-right:10px;
  border:2px solid var(--line); border-top-color:var(--blue);
  border-radius:50%; animation:sp .9s linear infinite; vertical-align:-2px; }
@keyframes sp{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin{ animation:none; } }

/* --------------------------------------------------- "bunu mu sormustunuz" */
.clar{ max-width:var(--olcu); margin-block:28px; }
.clar h2{ font-size:20px; font-weight:700; }
.clar .sub{ color:var(--muted); font-size:14.5px; margin:6px 0 16px; }
.clar-list{ display:grid; gap:10px; }
.clar-list button.clar-b{
  display:grid; gap:3px; width:100%; text-align:left; font:inherit; margin:0;
  background:#fff; color:inherit; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:15px 18px;
}
.clar-list button.clar-b:hover{ border-color:var(--blue); background:#F7FAFF; }
.clar-b b{ color:var(--ink); font-size:16.5px; font-weight:600; }
.clar-b span{ color:var(--muted); font-size:13.5px; }

/* ------------------------------------------------------------- cevap duzeni */
/* Cevap kabini SUTUNUN OLCUSUNU tanimlayan yerdir: yukaridaki --sol
   hesabi bu genislige gore yapiliyor. Sabit sayi yazmiyoruz ki ikisi
   birbirinden kopmasin. */
.ans-wrap{
  max-width:var(--kap); margin:36px auto 0; padding:0 var(--bosl) 64px;
  display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:0 38px;
  align-items:start;
}
.ans{ min-width:0; }
.ans h1{ font-size:clamp(24px,3.2vw,32px); font-weight:700;
  letter-spacing:-.02em; margin-bottom:14px; }

/* ------------------------------------------------------------- kunye
   "Bu madde icerigi X desteğiyle hazirlanmistir." — basligin HEMEN
   ALTINDA, tek satir.

   BILINCLI OLARAK SESSIZ: kutu yok, arka plan yok, ikon yok, renk vurgusu
   yok. Kunye bir REKLAM DEGIL; gozu cevaptan almamali. Bu yuzden --muted
   ve govdeden kucuk. Yalnizca destekcinin adi (<b>) bir tik one cikiyor.

   SOL HIZA: h1 ve govde paragraflariyla AYNI sutunda basliyor (kural:
   "form alaninin metni basligin sol hizasindan baslar"). Kutu ya da ic
   bosluk verilseydi metin iceri kayardi -- ozette (.ans-sum) yasanan ve
   duzeltilen kusurun aynisi. */
.kunye{ font-size:13.5px; line-height:1.5; color:var(--muted);
  margin:-6px 0 18px; max-width:var(--olcu); }
.kunye b{ font-weight:600; color:var(--ink); }

/* Ozet: mavi kenarli giris blogu — rekid'in kart dilinden. */
/* Ozet: giris paragrafi. SOL HIZA icin kutu kaldirildi -- arka plan ve
   ic bosluk metni 22 px iceri kaydiriyordu. Mavi vurgu duruyor ama artik
   YAZININ ICINDE degil, sol bosluga asili (::before). Boylece ozet, h1
   ve govde paragraflariyla ayni sutunda basliyor. */
.ans-sum{ position:relative; font-size:18px; line-height:1.55;
  color:var(--ink); font-weight:500; margin:0 0 24px;
  max-width:var(--olcu); }
.ans-sum::before{ content:""; position:absolute; top:.28em; bottom:.28em;
  inset-inline-start:-14px; width:3px; border-radius:3px; background:var(--blue); }
.ans-body p{ margin:0 0 15px; max-width:var(--olcu); }

/* ------------------------------------------------------------- gorsel
   Cizim ve ETIKET KATMANI. Yazi gorselin ICINDE degil; etiketler
   ustune konan ayri bir katman ve yuzde konumlu -- gorsel olceklenince
   yerlerinde kaliyorlar. Bicim TEK YERDE: sunucu (bilgi-seti.js) ve
   istemci (answerHTML) ayni sinif adlarini basiyor. */
.gk{ margin:0 0 24px; max-width:var(--olcu); }
.gk-c{ position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--paper); }
.gk-c svg{ display:block; width:100%; height:auto; }
.gk-e{ position:absolute; transform:translate(-50%,-50%);
  font-size:clamp(11px,1.5vw,14px); font-weight:600; line-height:1.25;
  color:#0B2B44; background:rgba(255,255,255,.88);
  border:1px solid rgba(11,43,68,.20); border-radius:3px;
  padding:3px 7px; white-space:nowrap; pointer-events:none; }
/* RTL etiket kendi yonunde aksin; marka LTR adasi kalir. */
[dir="rtl"] .gk-e{ direction:rtl; }
@media (max-width:520px){ .gk-e{ font-size:10px; padding:2px 5px; } }

/* --------------------------------------------------------- quick facts */
/* SOL HIZA: kart cercevesi kaldirildi. 24 px ic bosluk basligi ve
   maddeleri sutunun disina itiyordu (olculdu: 88 yerine 113). Bolum artik
   .srcs ile ayni dilde -- ince ust cizgi, kutu yok. Sayfadaki TEK cerceveli
   oge kaynak kartlari kaliyor; rekid.uk'te de boyle. */
.facts{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); }
.facts h2, .srcs h2, .quiz h2{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px; }
.facts ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.facts li{ position:relative; padding-left:24px; font-size:15.5px; color:var(--ink); }
.facts li::before{ content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; border-radius:50%; background:var(--yellow); }

/* ---------------------------------------------------- kaynaklar (URL karti)
   rekid.uk/public/styles.css icindeki .list/.item/.shot blogunun BIREBIR
   ayni kurallari. Ayni sirket, ayni sonuc karti; ultra ya ozel bir URL
   bicimi uydurulmadi -- cocuk iki sitede de ayni karti goruyor. Tek ek:
   .score rozeti, rekid deki .trust rozetinin yerinde ve olcusunde. */
.srcs{ margin-top:30px; }
.srcs .list{ list-style:none; display:flex; flex-direction:column;
  gap:14px; margin:0; padding:0; }
.srcs li.item{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px;
}
.srcs li.item:hover{ border-color:var(--teal); }
.srcs a.shot{
  flex:0 0 auto; width:118px; height:88px; border-radius:11px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); position:relative;
  display:block;
}
.srcs a.shot img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; opacity:0; transition:opacity .3s; }
.srcs a.shot img.on{ opacity:1; }
.srcs a.shot.load{ background:linear-gradient(90deg, var(--line-soft) 25%,
  var(--line) 37%, var(--line-soft) 63%); background-size:400% 100%;
  animation:shim 1.3s linear infinite; }
@keyframes shim{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){ .srcs a.shot.load{ animation:none; } }

.srcs .item-b{ flex:1; min-width:0; }
.srcs .item-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:3px; }
.srcs .rank{ display:inline-grid; place-items:center; min-width:22px; height:22px;
  padding:0 6px; border-radius:7px; background:var(--paper); color:var(--muted);
  font-size:12px; font-weight:600; }
.srcs .dom{ font-size:13px; color:var(--muted); font-weight:500; }
.srcs .score{ font-size:11px; font-weight:600; color:var(--green);
  background:#E7F7EE; border:1px solid #BDE9D0; border-radius:6px;
  padding:2px 8px; font-variant-numeric:tabular-nums; }
.srcs a.item-t{ display:block; font-size:18px; font-weight:600; color:var(--blue);
  text-decoration:none; line-height:1.35; margin-bottom:4px; }
.srcs a.item-t:hover{ text-decoration:underline; }
.srcs .item-s{ margin:0; font-size:14.5px; line-height:1.55; color:var(--text); }

@media (max-width: 620px){
  .srcs a.shot{ width:92px; height:70px; }
  .srcs a.item-t{ font-size:16.5px; }
  .srcs .item-s{ font-size:14px; }
}

/* ============================================ SAG: bilgi bannerlari */
.side{ display:grid; gap:0; align-content:start;
  border-left:1px solid var(--line); padding-left:34px; }
.bn{ padding:19px 0; border-bottom:1px solid var(--line); }
.bn:first-child{ padding-top:0; }
.bn:last-child{ border-bottom:0; }

/* ------------------------------------------------------ ilgili maddeler
   Sag sutunda, bannerlarin ALTINDA. Ayni sutunun devami gibi durmali:
   .bn kartlariyla ayni ust cizgi ve ayni ic bosluk. Bannerlar varsa
   .bn:last-child cizgisini kaldiriyor; bu bolum kendi cizgisini geri
   getiriyor ki iki blok birbirine yapismasin. */
.ilg{ padding:19px 0 0; border-top:1px solid var(--line); }
.side .bn:last-child{ border-bottom:0; }
.ilg h2{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:700; margin:0 0 10px; }
.ilg ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ilg a{ font-size:14px; line-height:1.4; color:var(--ink);
  text-decoration:none; display:block; }
.ilg a:hover{ color:var(--blue); text-decoration:underline; }
/* Dar ekranda sag sutun alta iniyor; bolum orada da ayni duruyor. */
@media (max-width:900px){ .ilg{ padding-top:16px; } }
.bn-h{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.bn-i{ font-size:18px; line-height:1; flex:none; }
.bn h3{ font-size:14.5px; font-weight:600; color:var(--ink); }
.bn p{ margin:0; font-size:14px; line-height:1.62; color:var(--text); }

/* ----------------------------------------------------------------- quiz */
.quiz{ margin-top:34px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; }
.quiz h2{ color:var(--blue); }
.quiz .sub{ color:var(--muted); font-size:14px; margin:0 0 20px; }
.qz-q{ margin-bottom:22px; }
.qz-q:last-child{ margin-bottom:0; }
.qz-q p.p{ font-size:16px; font-weight:600; color:var(--ink); margin:0 0 11px; }
.qz-opts{ display:grid; gap:8px; max-width:var(--olcu); }
.qz-opts button.qz-o{
  font:inherit; font-size:15.5px; text-align:left; margin:0;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px; padding:12px 16px;
}
.qz-opts button.qz-o:hover:not(:disabled){ border-color:var(--blue); }
.qz-opts button.qz-o:disabled{ cursor:default; }
.qz-opts button.qz-o.ok{ border-color:var(--green); background:#EAF7EF;
  color:#0B6E37; font-weight:600; }
.qz-opts button.qz-o.no{ border-color:#D96A6A; background:#FDECEC; color:#A32020; }
/* ---------------------------------------------------------------- rapor
   SESSIZ DURUR, KAYBOLMAZ. Kapali haldeyken yalnizca bir metin
   baglantisi: cevabi okuyan cocugun dikkatini caldirmiyoruz. Acilinca
   kendi kutusunu aciyor.

   QUIZ KUTUSUNUN BICIMINDEN KASITLI OLARAK AYRI: quiz bir oyun,
   bu bir bildirim. Ayni kutu bicimi ikisini de "yapilacak sey" gibi
   gosterirdi.

   SOL HIZA: kutunun ici cevap govdesiyle AYNI sutunda basliyor
   (--olcu). Bu projede hizalama iki kez gozle duzeltildi; olcum
   "saglam" derken goze bakilacak. */
.rapor{ margin-top:30px; padding-top:16px; border-top:1px solid var(--line-soft); }
.rapor button{ font:inherit; cursor:pointer; }

button.rapor-ac{
  background:none; border:0; padding:0; margin:0;
  color:var(--muted); font-size:14px; text-decoration:underline;
  text-underline-offset:3px;
}
button.rapor-ac:hover{ color:var(--blue); }

.rapor.acik{ background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; border-top-color:var(--line); }
.rapor-h{ font-size:16px; font-weight:600; color:var(--ink); margin:0 0 4px; }
.rapor-sub{ font-size:14px; color:var(--muted); margin:0 0 14px; }

.rapor-s{ display:flex; flex-wrap:wrap; gap:8px; max-width:var(--olcu); }
.rapor-s button.rapor-o{
  font-size:14.5px; text-align:left; margin:0;
  background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:999px; padding:8px 15px;
}
.rapor-s button.rapor-o:hover{ border-color:var(--blue); }
.rapor-s button.rapor-o.on{ border-color:var(--blue); background:#EAF0FD;
  color:var(--blue-dark); font-weight:600; }

.rapor-nl{ display:block; font-size:13px; color:var(--muted); margin:16px 0 6px; }
textarea.rapor-n{
  font:inherit; font-size:15px; width:100%; max-width:var(--olcu);
  color:var(--ink); background:#fff; resize:vertical;
  border:1.5px solid var(--line); border-radius:12px; padding:10px 13px;
}
textarea.rapor-n:focus{ outline:2px solid var(--blue); outline-offset:1px;
  border-color:var(--blue); }

.rapor-e{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.rapor-e button.rapor-gonder{
  background:var(--blue); color:#fff; border:1.5px solid var(--blue);
  border-radius:12px; padding:9px 20px; font-size:15px; font-weight:600;
}
.rapor-e button.rapor-gonder:hover:not(:disabled){ background:var(--blue-dark); }
/* Sebep secilmeden gonderilemez: kapali liste olmadan panelde
   siniflandirilamaz bir yigin olusurdu. */
.rapor-e button.rapor-gonder:disabled{ opacity:.45; cursor:default; }
.rapor-e button.rapor-vazgec{
  background:none; border:0; padding:4px 6px; color:var(--muted); font-size:14px;
}
.rapor-e button.rapor-vazgec:hover{ color:var(--ink); }

.rapor-son{ margin:0; font-size:15px; font-weight:600; color:var(--green); }
.rapor-son.bad{ color:#A32020; }

/* -------------------------------------------------------------- altbilgi */
.ftr{ border-top:1px solid var(--line); margin-top:44px; padding:28px 26px 48px;
  background:var(--paper); }
.ftr p{ max-width:640px; margin:0 auto 7px; color:var(--muted);
  font-size:14px; text-align:center; }
.ftr-note{ font-size:13px; }

/* ------------------------------------------------------------- dar ekran */
@media (max-width: 980px){
  /* Bannerlar sikistirilmaz; cevabin ALTINA kendi bolumu olarak gecer. */
  .ans-wrap{ grid-template-columns:minmax(0,1fr); gap:0; }
  .side{ border-left:0; padding-left:0; margin-top:30px;
    border-top:1px solid var(--line); padding-top:6px;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 30px; }
}
@media (max-width: 620px){
  .hdr{ padding:12px 16px; }
  /* Oneri seridi `.ask`in DISINDA duruyor, dolayisiyla onun ic boslugunu
     kendiliginden almiyor. Ayni degeri burada aliyor: olculdu, aksi halde
     serit basliktan 16 px SOLDA basliyordu. Bu projenin hizalama kurali
     acik -- icerik, basligin sol hizasindan baslar.
     `padding-inline`: dir=rtl'de kendiliginden donsun. */
  .ask, .oneri{ padding-inline:16px; }
  .ask{ margin-top:36px; }
  /* ALT BAR SABIT (.ftrbar position:fixed). Katlanmis halde tek satir,
     acilinca uzuyor. Serit sayfanin SON ogesi oldugu icin alt bosluk
     olmadan en dibe kaydirildiginda son dugmeler barin altinda kaliyordu
     (olculdu: tiklanamiyorlardi). Bar artik varsayilan olarak KATLI
     geldigi icin bosluk kucultuldu; acildiginda ustune binmemesi icin
     yine de comert birakildi. */
  .oneri{ padding-bottom:96px; }

  /* KATLI ALT BAR: tek satir, ortada logo. Logo bir dugme gibi
     davraniyor (app.js `role="button"` veriyor), o yuzden imlec ve
     dokunma hedefi de dugme gibi. */
  .ftrbar-kapali{ justify-content:center; padding-top:10px; padding-bottom:10px; }
  .ftrbar-kapali .ftrbar-c{ cursor:pointer; }
  /* Acilabilir oldugu GORUNSUN: sessizce tiklanabilir bir logo,
     tiklanabilir oldugu anlasilmayan bir logodur. */
  .ftrbar-kapali .ftrbar-c::after{
    content:"›"; display:inline-block; margin-inline-start:8px;
    transform:rotate(90deg); color:var(--muted); font-weight:700;
  }
  .ftrbar .ftrbar-c:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .askbar{ padding-left:16px; }
  .ans-wrap{ padding:0 16px 52px; }
  .facts, .quiz{ padding:18px; }
}

/* ----------------------------------------------------------- gecmis sayfasi
   Kart yigini DEGIL, liste. Cocugun 60 soruluk gecmisinde her satiri
   cerceveye almak sayfayi okunmaz yapar; ince ayirici cizgi yeterli.
   OZGULLUK: baglanti kurallari `.h-list a.h-l` biciminde yaziliyor --
   sade `a` kurali marka mavisini geri getirip basligi eziyordu. */
.hist{ max-width:var(--olcu); margin-block:56px 80px; }
.hist h1{ font-size:clamp(26px,3.6vw,34px); font-weight:700; letter-spacing:-.02em; }
.hist p.sub{ color:var(--text); margin:12px 0 30px; }

.h-list{ list-style:none; margin:0; padding:0; }
.h-list li.h-i{ border-top:1px solid var(--line); }
.h-list li.h-i:last-child{ border-bottom:1px solid var(--line); }

/* SOL HIZA: metin basligin sutununda. Ic bosluk kadar NEGATIF dis bosluk
   veriliyor -- net kayma sifir, ama uzerine gelince beliren zemin yine
   nefes aliyor. Eskiden hover'da padding-left degisiyordu ve METIN
   ZIPLIYORDU; artik yerinde duruyor. */
.h-list .h-l{
  display:grid; gap:4px; padding:15px 12px;
  margin-inline:-12px;
  text-decoration:none; color:inherit; border-radius:10px;
}
.h-list a.h-l:hover{ background:var(--paper); }
.h-list a.h-l:hover .h-q{ color:var(--blue); }

.h-q{ font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.4; }
.h-m{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }
.h-n{ font-variant-numeric:tabular-nums; }
.h-n::before{ content:"·"; margin-right:9px; }

/* Sonuc etiketi YALNIZCA acilamayan satirda. Anlam rengi: bu bir uyari
   degil, "burada cevap yok" bilgisi -- sari degil, notr. */
.h-s{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--warn);
  background:#FFF7E8; border:1px solid #F5E2BC; border-radius:6px; padding:1px 8px; }
.h-a{ font-size:13.5px; color:var(--muted); line-height:1.5; }
.h-list li.h-yok .h-l{ cursor:default; }
.h-list li.h-yok .h-q{ color:var(--text); font-weight:500; }

.h-nav{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:26px; }
.h-c{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Ikincil dugme: mavi zeminli .btn ile ayni ailede ama sessiz. */
.btn-l{ display:inline-block; font:inherit; font-size:14px; font-weight:600;
  color:var(--blue); background:#fff; border:1.5px solid var(--line);
  border-radius:999px; padding:8px 18px; text-decoration:none; }
.btn-l:hover{ border-color:var(--blue); background:#F7FAFF; color:var(--blue-dark); }

/* Baslikta gecmis baglantisi. .pill ile ayni yukseklikte durur. */
.hdr-hist{ font-size:12.5px; font-weight:600; color:var(--muted);
  text-decoration:none; border:1px solid var(--line); border-radius:999px;
  padding:4px 12px; white-space:nowrap; }
.hdr-hist:hover{ color:var(--blue); border-color:var(--blue); background:#F7FAFF; }

@media (max-width: 620px){
  .hist{ margin-top:36px; }
  .hdr-hist{ font-size:0; padding:4px 10px; }
  /* Dar ekranda metin yerine kisa etiket: baslik satiri tasmasin. */
  .hdr-hist::after{ content:"Questions"; font-size:12.5px; }
}

/* ------------------------------------------------------- cevap dili secici
   Soru cubugunun ALTINDA, kucuk. Cocuk once soruyu yazar; dil ikincil bir
   karardir ve sorunun onune gecmemeli. */
.al{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  /* Yan bosluk YOK: etiket de baslikla ayni sutunda bassin. */
  margin:14px 0 0; font-size:13px; }
.al-l{ color:var(--muted); font-weight:500; }
/* SARMALI. Olculdu (2026-09-06, 360 px): on bir dil yan yana 952 px
   ediyordu ve sayfaya YATAY KAYDIRMA biniyordu -- serit degil, butun
   sayfa saga kayiyordu. `inline-flex` tek satirda israr ediyor;
   flex-wrap ile alt satira geciyor. Hap gorunumu korunuyor. */
.al-g{ display:inline-flex; flex-wrap:wrap; max-width:100%;
  gap:4px; background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:3px; }
.al .al-o{ font:inherit; font-size:13px; font-weight:600; border:0;
  background:transparent; color:var(--muted); border-radius:999px;
  padding:5px 13px; line-height:1.2; }
.al .al-o:hover{ color:var(--ink); }
.al .al-o.on{ background:#fff; color:var(--blue);
  box-shadow:0 1px 4px -1px rgba(13,27,42,.18); }
/* Yabanci dil uyarisi: bilgi, uyari degil -- notr renk. */
.al-n{ flex-basis:100%; color:var(--muted); font-size:12.5px; line-height:1.5; }

/* ----------------------------------------------------------- oneri sorulari
   Soru kutusunun altinda on hap dugme. Her acilista havuzdan RASTGELE
   on tanesi geliyor, yani liste sabit bir menu degil bir vitrin.

   `.ask` BOLUMUNUN DISINDA duruyor ve bu bilincli. Ilk denemede iceride
   yazilmisti; olculdu: `.ask` 66ch'lik OKUMA sutunu (663 px) ve bir soru
   cumlesi 330-460 px oldugu icin on dugme ALT ALTA on satir oluyordu --
   dugme seridi degil, uzun bir liste. Disari alininca ayni satira iki
   dugme sigiyor.

   Hizalamayi kendi cozumumle DEGIL, yukaridaki `--sol` kalibiyla
   yapiyor (bu dosyanin basinda tanimli): serit basligin sol hizasindan
   basliyor ve dir=rtl'de margin-inline-start sayesinde kendiliginden
   saga doner. Arapca paket bu yuzden ayrica ele alinmadi. */
.oneri{ margin-block:34px 0; }
.oneri-b{ color:var(--muted); font-size:13px; font-weight:500;
  margin:0 0 12px; }
.oneri-g{ display:flex; flex-wrap:wrap; gap:8px; }
/* Dugme GORUNUMLU <a>. Metin uzun olabilir (bir soru cumlesi), bu yuzden
   hap tek satirda kalmiyor -- kirpmak yerine sarmasina izin veriyoruz:
   yarim soru, cocuk icin soru degildir. */
.oneri-d{ display:inline-block; font-size:13.5px; font-weight:500;
  color:var(--text); background:var(--paper);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; line-height:1.35; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s; }
.oneri-d:hover{ background:#fff; border-color:var(--blue);
  color:var(--blue); }
.oneri-d:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:640px){
  .oneri{ margin-top:26px; }
  .oneri-d{ font-size:13px; padding:7px 13px; }
}

/* Gecmiste yabanci dilde uretilmis satirin isareti. */
.h-lang{ font-size:11px; font-weight:600; color:var(--blue);
  background:#EEF3FE; border:1px solid #D4E0FB; border-radius:6px;
  padding:1px 8px; }

/* ------------------------------------------------------------- ayarlar */
.set-h{ font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:34px 0 8px; }
.set-help{ color:var(--text); font-size:14.5px; line-height:1.6;
  margin:0 0 16px; max-width:var(--olcu); }
.set-list{ display:grid; gap:9px; }
/* OZGULLUK NOTU: `.set-list label.set-o` degil sade `.set-o` yeterli --
   bu dosyada `label` icin eleman kurali YOK. getrekid'de `.tform label`
   sade sinifi eziyordu; burada ayni tuzak kurulmadi, ama kural eklenirse
   buranin da ozgullugu artirilmali. */
.set-o{ display:flex; align-items:center; gap:11px; cursor:pointer;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius);
  padding:13px 17px; font-size:15.5px; color:var(--ink); }
.set-o:hover{ border-color:var(--blue); background:#F7FAFF; }
.set-o.on{ border-color:var(--blue); background:#F7FAFF; font-weight:600; }
.set-o input{ accent-color:var(--blue); width:17px; height:17px; margin:0; }
.set-msg{ font-size:14px; font-weight:600; }
.set-msg.ok{ color:var(--green); }
.set-msg.bad{ color:#A32020; }
.set .h-nav{ justify-content:flex-start; gap:16px; }
.set-note{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }

/* Salt okunur bilgi listesi. Input DEGIL: kota, plan ve anahtar pakette
   belirlenir; degistirilemeyen bir seyi input gibi gostermek yanlis
   vaattir. */
.inf{ margin:0; }
.inf-r{ display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:11px 2px; border-bottom:1px solid var(--line-soft); }
.inf-r dt{ color:var(--muted); font-size:14px; }
.inf-r dd{ margin:0; color:var(--ink); font-size:15px; font-weight:600;
  text-align:right; font-variant-numeric:tabular-nums; }
/* Maskeli deger: yildizlar GERCEK KARAKTER TASIMAZ. Tuz ve anahtar
   ozetleri sunucudan hic cikmiyor. */
.inf-r dd.inf-k{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px; letter-spacing:.02em; color:var(--text); }

/* Kalan hak: sayfanin en gorunur ogesi. */
.inf-big{ display:flex; align-items:baseline; gap:12px; margin:0 0 8px; }
.inf-n{ font-size:40px; font-weight:700; color:var(--blue); line-height:1;
  font-variant-numeric:tabular-nums; }
.inf-d{ color:var(--muted); font-size:14.5px; }

/* Basliktaki kalan-hak rozeti. */
.pill.left{ color:var(--blue); background:#EEF3FE; border-color:#D4E0FB; }
.pill.left.zero{ color:var(--warn); background:#FFF7E8; border-color:#F5E2BC; }

/* --------------------------------------------- uretim maliyeti (test) */
/* Bu bir TEST gostergesi: ULTRA_SHOW_COST=1 ile aciliyor. Cocuga kalici
   olarak fiyat gosterilmez; olcum bitince bayrak kaldirilir. */
/* SOL HIZA: kutu yerine kesikli UST cizgi. Ic bosluk basligi 107'ye
   itiyordu; artik 88'de, sayfanin geri kalaniyla ayni sutunda. */
.cost{ margin-top:34px; padding-top:18px;
  border-top:1px dashed var(--line-3,#D8DEEA); }
.cost h2{ font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.cost table{ width:100%; border-collapse:collapse; font-size:13px;
  font-variant-numeric:tabular-nums; }
.cost td{ padding:5px 0; color:var(--text); border-bottom:1px solid var(--line-soft); }
.cost td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.cost td:nth-child(2){ color:var(--muted); }
.cost td:nth-child(3){ text-align:right; color:var(--muted); padding-right:14px; }
.cost tr.cost-t td{ border-bottom:0; padding-top:9px; font-weight:700;
  color:var(--ink); }

/* ------------------------------------------- karsilama ve kurulum */
/* Karsilama, CEVAP SAYFASININ duzenini kullaniyor (.ans-wrap + .side).
   Buradaki kurallar yalnizca o duzende olmayan uc parca icin: oturum
   dugmesi, yan karttaki adim listesi ve ornek listesi alt satiri. */
.hdr-auth{ display:inline-flex; align-items:center; }
.btn-signin{
  display:inline-block; text-decoration:none; white-space:nowrap;
  background:var(--blue); color:#fff; font-size:14px; font-weight:600;
  border-radius:999px; padding:9px 16px;
}
.btn-signin:hover{ background:var(--blue-dark); color:#fff; }

.btn-alt{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-radius:999px; padding:10px 18px; font:inherit; font-size:14px;
  font-weight:600;
}
.btn-alt:hover{ border-color:var(--blue); color:var(--blue); }

/* Yan karttaki adimlar. .bn zaten kart; icine liste giriyor. */
.bn-ol{ margin:10px 0 14px; padding-inline-start:20px; }
.bn-ol li{ margin:6px 0; font-size:14px; line-height:1.6; color:var(--text); }
.bn-eylem{ display:flex; flex-wrap:wrap; gap:9px; margin:0; }

/* Ornek sorular: kisa bilgiler listesiyle ayni bicim, satirlar baglanti. */
#oneriListe a{ color:var(--text); text-decoration:none; }
#oneriListe a:hover{ color:var(--blue); text-decoration:underline; }
.ornek-alt{ margin:14px 0 0; }

.uyari{ background:#FFF6E5; border:1px solid #FFE0A3; color:var(--warn);
  border-radius:12px; padding:11px 14px; font-size:14px; margin:0 0 18px;
  max-width:var(--olcu); }

/* ---------------------------------------------------------- /s/ sayfasi */

/* Cevabin ustundeki soru kutusu. Baslik h1 DEGIL h2: sayfanin h1'i
   sorunun kendisi ve o oyle kalmali. */
.pub-ask{ margin-block:36px 0; }
.pub-ask h2{ font-size:clamp(22px,3vw,28px); font-weight:700;
             letter-spacing:-.02em; margin-bottom:14px; }

/* NE ALDIGINI ANLATAN BLOK.

   KUTU DEGIL, BOLUM. Ilk halinde arka planli bir kart yaptim ve
   "margin:8px auto" kisayolu yukaridaki margin-inline-start: var(--sol)
   kuralini eziyordu: metin 91 pikselden, sayfanin geri kalani 88'den
   basliyordu. Ayni sayfada iki eksen olmasin diye kart kaldirildi;
   bolum artik .facts ile ayni dili konusuyor ve ayni hizadan basliyor.
   Inline margin'lere DOKUNULMUYOR -- yalnizca margin-block. */
.urun{ max-width:820px; margin-block:34px 64px;
       padding-top:26px; border-top:1px solid var(--line); }
.urun h2{ font-size:20px; font-weight:700; margin-bottom:14px; }
.urun-l{ columns:2; column-gap:38px; margin:0; padding:0; list-style:none; }
.urun-l li{ break-inside:avoid; position:relative;
            padding:0 0 9px 22px; color:var(--text); }
.urun-l li::before{ content:"✓"; position:absolute; inset-inline-start:0;
                    color:var(--blue); font-weight:700; }
.urun-e{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
         margin-top:18px; }
@media (max-width:720px){ .urun-l{ columns:1; } }

/* ------------------------------------------------- otomatik tamamlama */

/* Sarmal YALNIZCA konumlandirma icin: soru kutusunun gorunumu
   degismiyor, liste altina asilabilsin diye bir eksen gerekiyor. */
.askwrap{ position:relative; }

.oto{ position:absolute; z-index:30; inset-inline:0; top:calc(100% + 6px);
      margin:0; padding:6px; list-style:none; background:#fff;
      border:1px solid var(--line); border-radius:14px;
      box-shadow:0 12px 30px rgba(16,32,64,.13); max-height:340px;
      overflow-y:auto; }
.oto-i a{ display:block; padding:9px 12px; border-radius:9px;
          color:var(--text); text-decoration:none; line-height:1.35; }
.oto-i a:hover, .oto-i.on a{ background:var(--paper); }
.oto-i mark{ background:transparent; color:var(--blue); font-weight:600; }

/* ==========================================================================
   MARKA ISARETI · SABIT ALT BAR · YASAL METIN PENCERESI

   Header zaten position:sticky ile ustte duruyordu; alt bar da HER ZAMAN
   gorunur olmali. Sticky bottom yetmez: sticky yalnizca kendi kapsayan
   kutusu ekrandayken tutunur, footer sayfanin en altinda oldugu icin
   ancak sona gelindiginde yapisirdi. Bu yuzden fixed; govdeye de bar
   yuksekligi kadar alt bosluk veriliyor ki son satir barin altinda
   kalmasin.
   ========================================================================== */

/* Marka: Re + Kid + yildiz + (TM). Arapca sayfada bile soldan saga bir
   ada -- direction/unicode-bidi bunun icin. */
.rk{ display:inline-flex; align-items:baseline; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate; font-weight:700; }
.rk .re{ color:var(--blue); }
.rk .kid{ color:var(--teal); }
.rk-star{ width:.58em; height:.58em; margin-inline-start:.16em;
  align-self:flex-start; margin-top:.10em; flex:none; }
.rk-tm{ font-size:.38em; line-height:1; align-self:flex-start;
  margin-inline-start:.14em; color:var(--muted); }

:root{ --ftrbar: 46px; }
body{ padding-bottom:var(--ftrbar); }

.ftrbar{
  position:fixed; inset-inline:0; bottom:0; z-index:25;
  min-height:var(--ftrbar); box-sizing:border-box;
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px;
  padding:7px 22px; background:#fff; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.ftrbar-c{ display:inline-flex; align-items:baseline; gap:5px;
  margin-inline-end:8px; }
.ftrbar-c .b-ultra{ font-size:13px; }
.ftrbar-n{ display:flex; flex-wrap:wrap; gap:2px; }
.ftrbar button{ border:0; background:none; color:var(--text); font-size:13px;
  padding:5px 9px; border-radius:7px; cursor:pointer; font-family:inherit; }
.ftrbar button:hover{ background:var(--paper); color:var(--blue); }
.ftrbar-sp{ flex:1 1 auto; }
.ftrbar-tag{ font-size:13px; color:var(--blue); font-weight:600; }

/* Alt bar iki satira dustugunde govdenin bosluğu da buyumeli, yoksa
   son satir barin altinda kalir. */
@media (max-width:900px){
  :root{ --ftrbar: 84px; }
  .ftrbar{ padding:8px 14px; }
  .ftrbar-sp{ flex-basis:100%; height:0; }
}
@media (max-width:560px){
  :root{ --ftrbar: 76px; }
  .ftrbar-tag{ display:none; }
}

/* ------------------------------------------------- yasal metin penceresi */
/* [hidden] KURALI ONCE. Yazar kuralindaki display:flex, tarayicinin
   [hidden] -> display:none kuralini eziyor: pencere gizliyken de
   aciliyor, ici bos duruyor ve body.modal-open ile sayfa kilitleniyordu.
   rekid'de bu satir zaten vardi; ultra'ya kopyalanmamisti. */
[hidden]{ display:none !important; }

.modal-back{ position:fixed; inset:0; z-index:90; background:rgba(var(--dark-rgb),.5);
  display:flex; align-items:center; justify-content:center; padding:22px; }
.modal{ background:#fff; border-radius:18px; width:100%; max-width:760px;
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 70px rgba(var(--dark-rgb),.3); }
.modal-head{ display:flex; align-items:center; gap:14px;
  padding:20px 24px 14px; border-bottom:1px solid var(--line); }
.modal-head h2{ margin:0; font-size:20px; font-weight:700; flex:1; }
.modal-x{ border:0; background:none; color:var(--muted); font-size:18px;
  width:34px; height:34px; border-radius:9px; cursor:pointer; }
.modal-x:hover{ background:var(--paper); }
.modal-body{ padding:20px 24px; overflow-y:auto; font-size:14.5px;
  line-height:1.72; color:var(--text); }
.modal-body h3{ margin:22px 0 8px; font-size:15.5px; font-weight:700; }
.modal-body h3:first-child{ margin-top:0; }
.modal-body h4{ margin:16px 0 6px; font-size:14px; font-weight:600; }
.modal-body p{ margin:0 0 12px; }
.modal-body ul, .modal-body ol{ margin:0 0 12px; padding-inline-start:22px; }
.modal-body li{ margin-bottom:6px; }
.modal-body code{ background:var(--paper); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; font-size:13px; }
.ltable{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13.5px; }
.ltable th, .ltable td{ border:1px solid var(--line); padding:8px 10px;
  text-align:start; vertical-align:top; }
.ltable th{ background:var(--paper); font-weight:600; }
.lnote{ background:#F0FCFC; border:1px solid #B8ECEC; border-radius:10px;
  padding:12px 14px; margin:0 0 14px; }
.ldate{ color:var(--muted); font-size:13px; }
.modal-foot{ display:flex; align-items:center; gap:14px; padding:14px 24px;
  border-top:1px solid var(--line); }
.modal-note{ flex:1; font-size:12.5px; color:var(--muted); }
body.modal-open{ overflow:hidden; }
@media (max-width:720px){
  .modal-back{ padding:0; align-items:flex-end; }
  .modal{ max-height:92vh; border-radius:18px 18px 0 0; }
}

/* VURGULU METIN. Sorumluluk metni sayfanin dibinde gri bir dipnottu ve
   kimse okumuyordu. Kendi arka plani ve kenarligi olan bir kutuda,
   okunacak boyutta. */
.remark{ background:#F0FCFC; border:1px solid #B8ECEC; border-radius:12px;
  padding:14px 16px; margin:0 0 12px; font-size:15px; line-height:1.7;
  color:var(--text); }
.remark b{ color:var(--blue); }

/* GORUNMEZ TUZAK ALANI. display:none kullanmiyoruz: otomatik doldurma
   yapan araclarin bir kismi gizli alanlari atlar, ekran disindakini
   doldurur. Ekran okuyucudan da aria-hidden ile gizli. */
.tuzak{ position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none; }

/* --------------------------------------------------- sponsorluk basvurusu
   Bes tur, tek ekran. Bicim mevcut dilden: tur kartlari `.clar-b`nin
   (netlestirme secenekleri), alanlar `.set-o`nun akrabasi. Yeni bir
   gorsel dil UYDURULMADI -- ekran ayni siteye ait gorunmeli. */
.sp-turler{ display:grid; gap:10px; margin:18px 0 6px; }
.sp-t{ display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:#fff; }
.sp-t:hover{ border-color:var(--blue); background:#F7FAFF; }
.sp-t.on{ border-color:var(--blue); background:#F7FAFF; }
.sp-t input{ accent-color:var(--blue); width:17px; height:17px; margin:2px 0 0; flex:none; }
.sp-t b{ display:block; color:var(--ink); font-size:15.5px; font-weight:600; }
.sp-t small{ display:block; color:var(--muted); font-size:13.5px; margin-top:3px; }

.sp-form{ margin-top:18px; }
/* Etiket USTTE, alan altta: "form alaninin metni basligin sol hizasindan
   baslar" kurali. Etiketi sola almak alani iceri kaydirirdi. */
.sp-l{ display:block; margin:0 0 14px; max-width:var(--olcu); }
.sp-l > span{ display:block; font-size:13.5px; color:var(--muted);
  margin:0 0 5px; }
.sp-l input, .sp-l textarea{ width:100%; font:inherit; font-size:15px;
  color:var(--ink); background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:10px 13px; }
.sp-l input:focus, .sp-l textarea:focus{ outline:2px solid var(--blue);
  outline-offset:1px; border-color:var(--blue); }
.sp-l textarea{ resize:vertical; min-height:76px; }
.sp-z{ color:var(--blue); font-style:normal; }

/* Takip kodu: basvuranin kendi kaydini anmasi icin. rekid'de e-posta
   gonderimi YOK -- kod yalnizca bu ekranda gorunuyor, o yuzden
   okunakli ve secilebilir. */
.sp-kod{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:16px 0; }
.sp-kod span{ color:var(--muted); font-size:13.5px; }
.sp-kod b{ font-size:20px; font-weight:700; color:var(--ink);
  letter-spacing:.04em; user-select:all; }

/* ------------------------------------------- sayfanin dil surumleri */

/* Ayni bilgi seti baska dillerde de varsa ustte ince bir satir. Yalnizca
   GERCEKTEN uretilmis diller yaziliyor. */
.sdil{ display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-block:18px 0; }
.sdil-o{ font-size:13px; color:var(--muted); text-decoration:none;
  padding:4px 9px; border:1px solid var(--line); border-radius:99px; }
.sdil-o:hover{ color:var(--blue); border-color:var(--blue); }
.sdil-o.on{ color:#fff; background:var(--blue); border-color:var(--blue);
  font-weight:600; }

/* DAR EKRAN. getrekid.com ile ayni kirilma noktasi ve ayni boy:
   640px altinda yazim 25px yerine 22px. */
@media (max-width:640px){
  .rk-logo{ font-size:22px; }
}

/* ==========================================================================
   ESKI KAYITLI SAYFA — /s/<slug>
   
   REGRESYON DUZELTMESI. Bugun `styles.css` kaldirildi (kabuk ultra'nin
   kabugu oldu) ve yerine gecen bu dosya, o sayfanin kullandigi 12 sinifin
   HICBIRINI tanimlamiyordu. Sonuc olculdu: dizine girmis 22 sayfa cirilciplak
   HTML olarak aciliyor, metin sol kenara yapisiyor ve `list-style` geri
   geldigi icin her satirda sira numarasi IKI KEZ gorunuyordu ("1. 1").
   
   Sayfa emekliye ayrilan motorun urunu ama YERINDE DURUYOR: verilmis her
   baglanti ve arama motorundaki her kayit calismaya devam etmeli.
   
   Kurallar eski styles.css'ten AYNEN alindi; yalnizca iki degisken bu
   dosyanin karsiligina baglandi (--fg -> --ink, --card -> #fff).
   ========================================================================== */
.pub-main, .pub-wrap{ max-width:820px; margin:0 auto; padding:28px 20px 60px; }
.pub-h1{ font-size:26px; margin:0 0 10px; line-height:1.25; }
.pub-about{ font-size:15.5px; line-height:1.6; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin:0 0 18px; }
.pub-count{ font-size:13px; color:var(--muted); margin-bottom:14px; }
/* list-style:none SART -- yoksa tarayicinin kendi numarasi .pr-rank ile
   yan yana cikiyor ve her satir "1. 1" olarak goruluyor. */
.pr-list{ list-style:none; margin:0; padding:0; }
.pr-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.pr-rank{ min-width:26px; font-variant-numeric:tabular-nums; color:var(--muted); font-size:14px; }
.pr-body{ min-width:0; }
.pr-dom{ font-size:12.5px; color:var(--muted); margin-bottom:2px; }
.pr-title{ font-size:17px; font-weight:600; color:var(--blue); text-decoration:none;
  display:block; line-height:1.35; }
.pr-title:hover{ text-decoration:underline; }
.pr-snip{ margin:5px 0 0; font-size:14px; color:var(--muted); line-height:1.5; }
.pub-near{ margin-top:28px; }
.pub-near h2{ font-size:15px; margin:0 0 10px; }
.pr-near{ display:inline-block; margin:0 8px 8px 0; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  text-decoration:none; font-size:13.5px; }
.pr-near:hover{ border-color:var(--blue); }
.pub-disc{ margin-top:30px; font-size:12.5px; line-height:1.6; color:var(--muted); }
.pub-cta{ margin-top:18px; font-size:14px; }