/* ---- 1. Token'lar (kurumsal siteyle birebir aynı değerler) --------------- */
:root{
  --paper:#fbf9f5; --paper-2:#f3efe7; --surface:#fff; --line:#e2ddd2; --line-soft:#ece7dd;
  --ink:#17211e; --ink-2:#4a5551; --ink-3:#5f6b66;
  --brand:#0b6b5c; --brand-deep:#085043; --brand-wash:#e6f0ec;
  --accent:#b3541c; --accent-ink:#9c4715; --accent-wash:#f7ece3;
  --tehlike:#a3231b; --tehlike-wash:#fbeae8;
  --focus:#b3541c;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --gutter:clamp(16px,4vw,32px);
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif","Source Serif Pro",ui-serif,serif;
  --font-text:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Noto Sans","Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101513; --paper-2:#161d1a; --surface:#171f1c; --line:#26302c; --line-soft:#1e2724;
    --ink:#ece7dd; --ink-2:#b3bdb8; --ink-3:#93a09a;
    --brand:#4fc9b0; --brand-deep:#6fd8c1; --brand-wash:#14302a;
    --accent:#e8a06a; --accent-ink:#efb589; --accent-wash:#2a1f16;
    --tehlike:#ff8f84; --tehlike-wash:#2c1512;
    --focus:#e8a06a;
  }
}

/* ---- 2. Temel ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-block-size:100dvh; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.012em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem)}
h2{font-size:1.125rem}
h3{font-size:1rem;letter-spacing:0}
p{margin:0 0 1em;color:var(--ink-2)}
p:last-child{margin-block-end:0}
a{color:var(--brand-deep);text-underline-offset:.18em}
a:hover{color:var(--accent-ink)}
img{max-inline-size:100%;height:auto;display:block}
code{font-family:var(--font-mono);font-size:.9375em;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.gizli{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atla{position:absolute;inset-inline-start:12px;inset-block-start:12px;z-index:60;padding:12px 18px;
  background:var(--surface);color:var(--ink);border:2px solid var(--accent);border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .18s ease}
.atla:focus{transform:translateY(0)}

/* ---- 3. Kabuk: üst bar · içerik · alt sekmeler --------------------------- */
.ust{
  position:sticky;inset-block-start:0;z-index:20;background:var(--paper);
  border-block-end:1px solid var(--line);
}
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-block-size:56px;padding-inline:var(--gutter);max-inline-size:74rem;margin-inline:auto}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding-block:8px}
.logo em{font-style:normal;color:var(--brand)}
.logo-im{inline-size:22px;block-size:20px;border-radius:7px 7px 7px 3px;background:var(--brand);flex:none;position:relative}
.logo-im::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:5px;inline-size:12px;block-size:2px;
  border-radius:2px;background:var(--paper);box-shadow:0 4px 0 0 var(--paper)}
.kimlik{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--ink-3);min-inline-size:0}
.kimlik b{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:11rem}

main{display:block;max-inline-size:74rem;margin-inline:auto;padding:20px var(--gutter) 104px}
.sayfa-basi{margin-block-end:20px}
.sayfa-basi p{margin-block-start:6px;font-size:.9375rem;max-inline-size:40rem}

.sekmeler{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:30;
  display:flex;background:var(--surface);border-block-start:1px solid var(--line);
  padding-block-end:env(safe-area-inset-bottom);
}
.sekmeler a{
  flex:1 1 0;min-inline-size:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-block-size:58px;padding:8px 4px;font-size:.75rem;font-weight:600;color:var(--ink-3);
  text-decoration:none;border-block-start:2px solid transparent;
}
.sekmeler a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%}
.sekmeler a[aria-current="page"]{color:var(--brand-deep);border-block-start-color:var(--brand);
  background:var(--brand-wash)}
.sekmeler a:hover{color:var(--ink)}

@media (min-width:64rem){
  /* Ray + içerik TEK blok olarak ortalanır. İlk denemede içerik sütunu 1fr'di ve
     ray ile metin arasında ~150px ölü bant kalıyordu (1280px ekran görüntüsünde görüldü). */
  .kabuk{display:grid;grid-template-columns:12rem minmax(0,46rem);justify-content:center;
    gap:clamp(24px,4vw,48px);max-inline-size:74rem;margin-inline:auto;padding-inline:var(--gutter)}
  main{padding:32px 0 72px;max-inline-size:none}
  .sekmeler{position:sticky;inset-block-start:76px;inset-block-end:auto;z-index:1;
    flex-direction:column;align-self:start;margin-block-start:32px;
    background:none;border:0;border-inline-end:1px solid var(--line);padding-block-end:0}
  .sekmeler a{flex:none;flex-direction:row;justify-content:flex-start;gap:10px;min-block-size:46px;
    padding:6px 14px;font-size:.9375rem;border-block-start:0;border-inline-end:2px solid transparent;margin-inline-end:-1px}
  .sekmeler a[aria-current="page"]{border-inline-end-color:var(--brand);background:var(--brand-wash)}
}

/* ---- 4. Cetvel başlık (defter motifi) ------------------------------------ */
.bolum{margin-block:28px 14px;display:flex;align-items:center;gap:12px}
.bolum::after{content:"";flex:1;block-size:1px;background:var(--line)}
.bolum h2{font-family:var(--font-text);font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- 5. Sıradaki adım şeridi -------------------------------------------- */
.sira{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;margin-block-end:22px;
  background:var(--accent-wash);border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);border-radius:var(--r-md);
}
.sira-ok{inline-size:10px;block-size:10px;flex:none;margin-block-start:9px;border:solid var(--accent);
  border-width:2px 2px 0 0;transform:rotate(45deg)}
.sira b{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin-block-end:3px}
.sira p{color:var(--ink);font-size:1.0625rem;line-height:1.45}

/* ---- 6. Kartlar ve durum satırları -------------------------------------- */
.izgara{display:grid;gap:12px}
@media (min-width:34rem){.izgara.uc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:34rem){.izgara.iki{grid-template-columns:repeat(2,minmax(0,1fr))}}

.kart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.kart + .kart{margin-block-start:12px}
.kart h3{margin-block-end:8px}
.kart .ipucu{font-size:.875rem;color:var(--ink-3);margin-block-start:8px}

.olcu{display:flex;flex-direction:column;gap:6px}
.olcu dt{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.olcu dd{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1.2;color:var(--ink)}
.olcu .alt{font-family:var(--font-text);font-size:.875rem;color:var(--ink-2);line-height:1.4}

dl.satirlar{margin:0;display:grid;gap:0}
dl.satirlar div{display:flex;justify-content:space-between;gap:16px;padding-block:11px;
  border-block-end:1px solid var(--line-soft)}
dl.satirlar div:last-child{border-block-end:0}
dl.satirlar dt{font-size:.875rem;color:var(--ink-3)}
dl.satirlar dd{margin:0;font-size:.9375rem;font-weight:600;text-align:end;overflow-wrap:anywhere}

.rozet{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--ink-2);background:var(--paper-2)}
.rozet::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:currentColor;flex:none}
.rozet.iyi{color:var(--brand-deep);border-color:var(--brand);background:var(--brand-wash)}
.rozet.uyari{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}
.rozet.kotu{color:var(--tehlike);border-color:var(--tehlike);background:var(--tehlike-wash)}

/* ---- 7. Adım listesi (3 adımda başla) ----------------------------------- */
.adimlar{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adimlar li{position:relative;margin:0;padding:14px 0 14px 46px}
.adimlar li::before{content:"";position:absolute;inset-block:44px 0;inset-inline-start:15px;
  inline-size:2px;background:var(--line)}
.adimlar li:last-child::before{display:none}
.adimlar .n{position:absolute;inset-block-start:12px;inset-inline-start:0;inline-size:32px;block-size:32px;
  display:grid;place-items:center;border:1.5px solid var(--accent);border-radius:50%;background:var(--paper);
  font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--accent-ink)}
.adimlar li.bitti .n{border-color:var(--brand);font-size:0;background:var(--brand-wash)}
/* Tik: iki kenarlı bir kare 45° döndürülür. Yükseklik/genişlik oranı 2:1 olmazsa
   "damla" gibi okunuyordu (ilk denemede öyle oldu) — 7×12 doğru oran. */
.adimlar li.bitti .n::after{content:"";inline-size:7px;block-size:12px;border:solid var(--brand);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-2px)}
.adimlar h3{margin-block-end:3px}
.adimlar li.bitti h3{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.adimlar p{font-size:.9rem}

/* ---- 8. Düğmeler --------------------------------------------------------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-block-size:50px;
  padding:0 22px;border:1.5px solid transparent;border-radius:var(--r-pill);background:transparent;
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1.2;color:var(--ink);
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.dugme.ana{background:var(--brand);border-color:var(--brand);color:#fff}
.dugme.ana:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
@media (prefers-color-scheme:dark){.dugme.ana,.dugme.ana:hover{color:#08110e}}
.dugme.sade{border-color:var(--line);background:var(--surface);color:var(--ink)}
.dugme.sade:hover{border-color:var(--ink-3)}
.dugme.tehlike{border-color:var(--tehlike);color:var(--tehlike);background:transparent}
.dugme.tehlike:hover{background:var(--tehlike-wash)}
.dugme.kucuk{min-block-size:44px;padding:0 16px;font-size:.875rem}
.dugme.genis{inline-size:100%}
.dugme[disabled]{opacity:.5;cursor:not-allowed}
.dugme-satir{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}
.dugme-satir .dugme{flex:1 1 auto;min-inline-size:min(100%,13rem)}
@media (min-width:34rem){.dugme-satir .dugme{flex:0 0 auto;min-inline-size:0}}
/* Bağımsız gezinme bağlantısı (metin içi değil) → 44px dokunma hedefi.
   inline-flex şart: satır içi <a>'da min-block-size uygulanmıyor. */
.metin-dugme{display:inline-flex;align-items:center;min-block-size:44px;background:none;border:0;
  padding:0;font:inherit;color:var(--brand-deep);text-decoration:underline;
  text-underline-offset:.18em;cursor:pointer}

/* ---- 9. Formlar ---------------------------------------------------------- */
form{margin:0}
.alan{display:block;margin-block-end:18px}
.alan > span{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);margin-block-end:6px}
.alan .ipucu{display:block;font-size:.8125rem;color:var(--ink-3);margin-block-end:8px;font-weight:400}
.alan input,.alan select,.alan textarea{
  inline-size:100%;min-block-size:52px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:1.0625rem}
.alan input:focus,.alan select:focus{border-color:var(--brand)}
.alan input[aria-invalid="true"]{border-color:var(--tehlike)}
.alan input::placeholder{color:var(--ink-3);opacity:.75}
.alan-hata{display:flex;gap:7px;align-items:flex-start;margin-block-start:7px;
  font-size:.875rem;font-weight:500;color:var(--tehlike)}
.alan-hata::before{content:"!";flex:none;inline-size:17px;block-size:17px;margin-block-start:2px;border-radius:50%;
  background:var(--tehlike);color:var(--surface);font-size:.75rem;font-weight:700;line-height:17px;text-align:center}

/* ---- 10. Uyarı / bilgi kutuları ----------------------------------------- */
.kutu{padding:14px 16px;border:1px solid var(--line);border-inline-start:4px solid var(--ink-3);
  border-radius:var(--r-md);background:var(--surface);margin-block-end:18px;font-size:.9375rem}
.kutu p{color:var(--ink-2)}
.kutu.iyi{background:var(--brand-wash);border-color:var(--brand)}
.kutu.uyari{background:var(--accent-wash);border-color:var(--accent)}
.kutu.kotu{background:var(--tehlike-wash);border-color:var(--tehlike)}
.kutu b{display:block;color:var(--ink);margin-block-end:2px}

/* ---- 11. Boş durum ------------------------------------------------------- */
.bos{text-align:center;padding:44px 20px;border:1px dashed var(--line);border-radius:var(--r-lg);
  background:var(--paper-2)}
.bos .im{inline-size:52px;block-size:40px;margin:0 auto 16px;border:2px solid var(--line);
  border-radius:9px 9px 9px 3px;position:relative}
.bos .im::before{content:"";position:absolute;inset-block-start:11px;inset-inline-start:11px;inline-size:26px;
  block-size:2px;border-radius:2px;background:var(--line);box-shadow:0 8px 0 0 var(--line)}
.bos h3{margin-block-end:6px}
.bos p{margin-inline:auto;max-inline-size:26rem;font-size:.9375rem}

/* ---- 12. Giriş ekranı ---------------------------------------------------- */
.giris{min-block-size:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:32px var(--gutter) 48px;max-inline-size:30rem;margin-inline:auto}
.giris .logo{align-self:flex-start;margin-block-end:26px;font-size:1.35rem}
.giris h1{margin-block-end:8px}
.giris .anlat{font-size:1rem;margin-block-end:26px}
.giris .neden{margin-block-start:22px;font-size:.8125rem;color:var(--ink-3)}

/* ---- 12b. Dil hapı --------------------------------------------------------
   reklora.com'un üst-sağ dil hapıyla BİREBİR aynı desen (küre ikonu + hedef dilin adı).
   Ayrı bir yer icat etmiyoruz: kullanıcı dili orada aramaya alışkın. */
.dil-hap{
  display:inline-flex;align-items:center;gap:7px;min-block-size:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-3);font-size:.8125rem;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.dil-hap:hover{border-color:var(--brand);color:var(--ink)}
/* Küre: saf CSS — bir yatay, bir dikey çizgili daire. Görsel dosyası/ikon kütüphanesi yok. */
.dil-hap .kure{
  inline-size:14px;block-size:14px;flex:none;border:1.5px solid currentColor;border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}
/* Giriş ekranı: üst bar olmadığı için hap sayfanın üst-sağına konumlanır.
   .giris içeriği dikeyde ortalı olduğundan akışa sokulursa logonun üstüne biner. */
.giris{position:relative}
.giris .dil-hap{position:absolute;inset-block-start:16px;inset-inline-end:var(--gutter)}

.kod{margin-block:22px;padding:22px 18px;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);position:relative;overflow:hidden}
.kod::before,.kod::after{content:"";position:absolute;inset-inline:0;block-size:6px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.kod::before{inset-block-start:0}
.kod::after{inset-block-end:0}
.kod b{display:block;font-family:var(--font-display);font-size:clamp(2.5rem, 1.4rem + 5.4vw, 3.4rem);
  font-weight:600;letter-spacing:.16em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-inline-start:.16em}
.kod .sure{display:block;margin-block-start:8px;font-size:.8125rem;color:var(--ink-3)}
.kod-adim{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;counter-reset:ka}
.kod-adim li{position:relative;margin:0;padding-inline-start:34px;font-size:.9375rem;color:var(--ink-2)}
.kod-adim li::before{counter-increment:ka;content:counter(ka);position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:24px;block-size:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-wash);color:var(--brand-deep);font-size:.8125rem;font-weight:700}
.bekleniyor{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--ink-3);margin-block-start:14px}
.bekleniyor .nokta{inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent);
  animation:nabiz 1.4s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:.25}50%{opacity:1}}

/* ---- 13. İçerik ocağı ---------------------------------------------------- */
.ocak{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.parca{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.parca .gorsel{aspect-ratio:4/5;background:var(--paper-2);object-fit:cover;inline-size:100%}
.parca video{inline-size:100%;aspect-ratio:4/5;background:#000;display:block}
.parca .bilgi{padding:12px 14px}
.parca .bilgi h3{font-family:var(--font-text);font-size:.9375rem;overflow-wrap:anywhere}
.parca .bilgi .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:8px;
  font-size:.8125rem;color:var(--ink-3)}
.parca a.ac{display:inline-flex;align-items:center;min-block-size:44px;font-size:.875rem;font-weight:600}

/* ---- 14. Yönetici tablosu ------------------------------------------------ */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
table{inline-size:100%;border-collapse:collapse;font-size:.875rem;min-inline-size:34rem}
th,td{text-align:start;padding:11px 12px;border-block-end:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-block-end:0}
th{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);white-space:nowrap}
td code{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere}
td form{display:inline}
.satir-arac{display:flex;gap:6px;flex-wrap:wrap}

/* ---- 15. Hareket / baskı ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
@media print{.sekmeler,.ust,.atla{display:none}body{background:#fff;color:#000}}