/* ================= belge kabugu — tasarim kitabi 02/03 =================
   Yasal ve bilgi sayfalarinin ortak bicimi. Tanitim sayfasi tuval (koyu)
   ustunde yasar; belgeler kagit ustunde. Ust cubuk ve alt bilgi yine tuval,
   boylece sayfalar ayni kabugun icindeymis gibi durur.

   Jeton adlari index.html ile birebir ayni — orada bir renk degisirse
   burada da degismeli. */
:root{
  --paper:#F7F7F5;  --card:#FFFFFF;  --sunken:#EFEFEC;
  --line:#E2E2DD;   --line-2:#C9C9C2;
  --ink:#0E0F13;    --dim:#6E7078;
  --canvas:#0E0F13; --canvas-2:#1A1C22;
  --on-canvas:#F7F7F5; --on-canvas-dim:#8A8D96;
  --accent:#5B3DF5; --accent-hi:#7C63FF;
  --accent-1:#3A22C4; --accent-2:#2A1795; --geo:#C9BEFF;
  --accent-wash:#EDE9FF;
  --uyari:#8A5A12;  --uyari-zemin:#FBF3E2;  --uyari-line:#E8D5A8;
  --hat:rgba(255,255,255,.10);
  --hat-2:rgba(255,255,255,.12);
  --sessiz:#4A4D56;
  --r-card:6px; --r-btn:5px; --r-kucuk:4px;
  --en:1240px;
  --pay:40px;
  --okuma:720px;                 /* satir uzunlugu: ~80 karakter */
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
html,body{ margin:0; padding:0; }
body{ background:var(--paper); color:var(--ink);
      font-family:Sora,system-ui,sans-serif; overflow-x:hidden;
      -webkit-font-smoothing:antialiased; }
::selection{ background:var(--accent); color:#FFF; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,p,ul,ol{ margin:0; }
.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }
.en{ max-width:var(--en); margin:0 auto; }
.et{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
     letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }

/* ================= kutle · marka bicimi =================
   Duz sinir yukari cikarilir: ust yuz mor, iki yan yuz koyulasir.
   Cikarma yuksekligi kenarin %27'si (tasarim kitabi 01). */
.kutle{ perspective:300px; flex:none; }
.kutle>i{ display:block; position:relative; transform-style:preserve-3d;
          transform:rotateX(58deg) rotateZ(45deg); }
.kutle>i>b{ position:absolute; display:block; }
.kutle .ust{ inset:0; background:var(--accent); }
.kutle .yan-a{ left:0; top:0; background:var(--accent-1); transform-origin:top center; }
.kutle .yan-b{ left:0; top:0; background:var(--accent-2); transform-origin:left center; }
.k28{ perspective:382px; }
.k28>i{ width:28px; height:28px; }
.k28 .ust{ transform:translateZ(7.5px); }
.k28 .yan-a{ width:28px; height:7.5px; transform:translateZ(7.5px) translateY(28px) rotateX(-90deg); }
.k28 .yan-b{ width:7.5px; height:28px; transform:translateZ(7.5px) translateX(28px) rotateY(90deg); }
.k18>i{ width:18px; height:18px; }
.k18 .ust{ transform:translateZ(5px); }
.k18 .yan-a{ width:18px; height:5px; transform:translateZ(5px) translateY(18px) rotateX(-90deg); }
.k18 .yan-b{ width:5px; height:18px; transform:translateZ(5px) translateX(18px) rotateY(90deg); }
.yazi{ display:flex; align-items:baseline; font-weight:700; letter-spacing:-.04em; }
.yazi .a{ font-size:1.321em; color:var(--accent-hi); }
.yazi .i{ font-size:.961em; color:var(--accent-hi); }
.kilit{ display:flex; align-items:center; gap:10px; }
.kilit:hover{ text-decoration:none; }

/* ================= ust cubuk ================= */
nav{ position:sticky; top:0; z-index:20; background:rgba(14,15,19,.86);
     backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
     border-bottom:1px solid var(--hat); padding:14px var(--pay); }
.nav-ic{ display:flex; align-items:center; gap:14px 32px; flex-wrap:wrap; }
.nav-yol{ display:flex; gap:14px 24px; margin-left:auto; flex-wrap:wrap; font-size:13.5px; }
.nav-yol a{ color:var(--on-canvas-dim); transition:color .16s ease; }
.nav-yol a:hover{ color:var(--on-canvas); text-decoration:none; }
.nav-yol a[aria-current]{ color:var(--on-canvas); }
.nav-uc .dene{ font-size:13.5px; font-weight:600; background:var(--accent); color:#FFF;
               padding:9px 16px; border-radius:var(--r-kucuk); transition:background .16s ease; }
.nav-uc .dene:hover{ background:var(--accent-hi); text-decoration:none; }

/* ================= belge basligi ================= */
.tepe{ padding:64px var(--pay) 0; }
.tepe .et{ display:block; margin-bottom:14px; }
.tepe h1{ font-size:clamp(34px,5vw,54px); font-weight:600; line-height:1.05;
          letter-spacing:-.035em; text-wrap:balance; max-width:16ch; }
.tepe .ozet{ margin-top:20px; max-width:var(--okuma); font-size:17px; line-height:1.65;
             color:var(--dim); text-wrap:pretty; }
.tarih{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
        display:flex; gap:10px 28px; flex-wrap:wrap;
        font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
        letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.tarih b{ color:var(--ink); font-weight:500; }

/* ================= govde + icindekiler =================
   Genis ekranda icindekiler solda yapisir; 1080'in altinda belgenin
   basina duz bir liste olarak duser. */
.govde{ padding:44px var(--pay) 96px; }
.izgara{ display:grid; gap:48px; align-items:start; }
@media (min-width:1080px){ .izgara{ grid-template-columns:236px minmax(0,1fr); gap:64px; } }

.icindekiler{ min-width:0; }
@media (min-width:1080px){ .icindekiler{ position:sticky; top:88px; } }
.icindekiler .et{ display:block; margin-bottom:14px; }
.icindekiler ol{ list-style:none; padding:0; margin:0; counter-reset:ic;
                 border-left:1px solid var(--line); }
.icindekiler li{ counter-increment:ic; }
.icindekiler a{ display:flex; gap:10px; padding:7px 0 7px 14px; margin-left:-1px;
                border-left:1px solid transparent; font-size:13.5px; line-height:1.4;
                color:var(--dim); transition:color .16s ease, border-color .16s ease; }
.icindekiler a::before{ content:counter(ic,decimal-leading-zero);
                        font-family:"JetBrains Mono",ui-monospace,monospace;
                        font-size:10.5px; color:var(--line-2); padding-top:2px; }
.icindekiler a:hover{ color:var(--ink); border-left-color:var(--accent); text-decoration:none; }

.belge{ min-width:0; max-width:var(--okuma); }
.belge section{ scroll-margin-top:88px; padding:0 0 44px; }
.belge section+section{ border-top:1px solid var(--line); padding-top:44px; }
.belge h2{ display:flex; gap:14px; align-items:baseline; font-size:clamp(21px,2.6vw,26px);
           font-weight:600; letter-spacing:-.025em; line-height:1.25; text-wrap:balance; }
.belge h2 .no{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
               font-weight:500; letter-spacing:.1em; color:var(--accent); flex:none;
               padding-top:5px; }
.belge h3{ margin-top:28px; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.belge p{ margin-top:14px; font-size:15.5px; line-height:1.72; color:var(--dim);
          text-wrap:pretty; }
.belge h2+p{ margin-top:16px; }
.belge strong{ color:var(--ink); font-weight:600; }
.belge ul,.belge ol{ margin-top:14px; padding-left:0; list-style:none; }
.belge ol{ counter-reset:mad; }
.belge li{ position:relative; padding-left:22px; margin-top:10px;
           font-size:15.5px; line-height:1.7; color:var(--dim); text-wrap:pretty; }
.belge ul>li::before{ content:""; position:absolute; left:2px; top:11px;
                      width:5px; height:5px; background:var(--accent); }
.belge ol>li{ counter-increment:mad; }
.belge ol>li::before{ content:counter(mad) "."; position:absolute; left:0; top:0;
                      font-family:"JetBrains Mono",ui-monospace,monospace;
                      font-size:12px; color:var(--accent); padding-top:3px; }
.belge li ul{ margin-top:8px; }

/* ================= kutular ================= */
.kutu{ margin-top:22px; background:var(--card); border:1px solid var(--line);
       border-radius:var(--r-card); padding:22px 24px; }
.kutu>*:first-child{ margin-top:0; }
.kutu .bas{ font-size:14px; font-weight:600; color:var(--ink); }

.uyari{ margin-top:22px; background:var(--uyari-zemin); border:1px solid var(--uyari-line);
        border-radius:var(--r-card); padding:22px 24px; }
.uyari .bas{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
             letter-spacing:.14em; text-transform:uppercase; color:var(--uyari); }
.uyari p{ margin-top:10px; color:#5C4210; }
.uyari p strong{ color:#3D2B08; }

.vurgu-kutu{ margin-top:22px; background:var(--accent-wash); border:1px solid #C9BEFF;
             border-radius:var(--r-card); padding:22px 24px; }
.vurgu-kutu .bas{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
                  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }
.vurgu-kutu p{ margin-top:10px; color:#3B2E6B; }
.vurgu-kutu p strong{ color:var(--accent-2); }

/* ================= cizelge ================= */
.cizelge-sar{ margin-top:22px; overflow-x:auto; border:1px solid var(--line);
              border-radius:var(--r-card); background:var(--card); }
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
th,td{ text-align:left; padding:13px 18px; vertical-align:top; line-height:1.55; }
th{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
    font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
    border-bottom:1px solid var(--line); white-space:nowrap; }
td{ color:var(--dim); border-top:1px solid var(--line); }
tbody tr:first-child td{ border-top:0; }
td:first-child{ color:var(--ink); }
td code{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px;
         color:var(--accent-2); background:var(--accent-wash); padding:2px 6px;
         border-radius:3px; overflow-wrap:anywhere; }

/* ================= kart izgarasi (hakkimizda · iletisim) ================= */
.kartlar{ margin-top:26px; display:grid; gap:16px;
          grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.kart{ min-width:0; background:var(--card); border:1px solid var(--line);
       border-radius:var(--r-card); padding:26px; }
.kart .no{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
           letter-spacing:.14em; color:var(--accent); }
.kart h3{ margin-top:12px; font-size:17px; font-weight:600; letter-spacing:-.015em; }
.kart p{ margin-top:9px; font-size:14.5px; line-height:1.65; color:var(--dim); }
.kart .adres{ margin-top:14px; display:inline-block;
              font-family:"JetBrains Mono",ui-monospace,monospace; font-size:13.5px;
              color:var(--accent); overflow-wrap:anywhere; }

/* ilgili belgeler */
.ilgili{ margin-top:56px; padding-top:26px; border-top:1px solid var(--line); }
.ilgili .et{ display:block; margin-bottom:14px; }
.ilgili-yol{ display:flex; gap:10px 22px; flex-wrap:wrap; font-size:14.5px; }

/* ================= alt bilgi ================= */
footer{ background:var(--canvas); color:var(--on-canvas);
        padding:52px var(--pay); }
.footer-ic{ display:grid; gap:32px 48px;
            grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.footer-marka{ min-width:0; }
.footer-marka p{ margin-top:16px; max-width:36ch; font-size:13.5px; line-height:1.65;
                 color:var(--on-canvas-dim); }
.footer-sutun{ min-width:0; }
.footer-sutun .et{ display:block; margin-bottom:14px; color:var(--geo); }
.footer-sutun a{ display:block; margin-top:9px; font-size:13.5px; color:var(--on-canvas-dim);
                 transition:color .16s ease; }
.footer-sutun a:hover{ color:var(--on-canvas); text-decoration:none; }
.footer-alt{ max-width:var(--en); margin:40px auto 0; padding-top:24px;
             border-top:1px solid var(--hat); display:flex; gap:12px 32px; flex-wrap:wrap;
             font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;
             line-height:1.7; color:var(--sessiz); }
.footer-alt .sag{ margin-left:auto; }

@media (max-width:640px){
  :root{ --pay:22px; }
  .tepe{ padding:44px var(--pay) 0; }
  .govde{ padding:36px var(--pay) 72px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; }
}