/* ══════════════════════════════════════════════════════════════════════
   /operasyon/ ortak stil katmani.

   TEK KAYNAK: /opt/firsat-hatti/sablon/operasyon.css
   Yayindaki kopya: <site-root>/operasyon/ortak.css
   kapsam_sayfasi_uret.py her calismada kopyayi tazeler; yayindaki
   dosyayi ELLE duzenleme, bir sonraki uretimde geri alinir.

   Token katmani /emlak/ sayfasindan devralindi (ayni alan adi, ayni
   marka). Yerlesim DEVRALINMADI: /emlak/ pinlenmis bir video anlatisi,
   burasi belge gibi okunan bir tablo sayfasi.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --zemin:  oklch(0.165 0.021 262);
  --sahne:  oklch(0.132 0.019 262);
  --metin:  oklch(0.955 0.008 262);
  --ikinci: oklch(0.700 0.020 262);
  --aksan:  oklch(0.860 0.163 118);
  --cizgi:  oklch(0.320 0.024 262);

  --anlati: "Archivo", system-ui, -apple-system, sans-serif;
  --teknik: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --p13:.8125rem; --p15:.9375rem; --p18:1.125rem;
  --p26:clamp(1.35rem,2.4vw,1.625rem);
  --p40:clamp(1.9rem,4.2vw,2.5rem);
  --pdev:clamp(2.4rem,5.2vw,4rem);

  --y8:.5rem; --y12:.75rem; --y20:1.25rem;
  --g32:2rem; --g56:3.5rem; --g96:clamp(4rem,9vw,6rem); --g144:clamp(5rem,13vw,8.5rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --aksan-ustu: oklch(0.165 0.021 262);
  --hayalet:    oklch(0.245 0.022 262);
  --d-bekliyor: oklch(0.760 0.055 85);
  --d-yapildi : oklch(0.780 0.055 150);
  --d-onayda  : oklch(0.760 0.050 250);

}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--zemin);color:var(--metin);
     font:var(--p18)/1.55 var(--anlati);-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
.sar{max-width:72rem;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;margin:0}
/* TR diakritigi: satir araligi 1.05 ALTINA inilmez */
h1{font-size:var(--pdev);line-height:1.1;max-width:20ch;text-wrap:balance}
h2{font-size:var(--p40);line-height:1.14;max-width:24ch;text-wrap:balance}
h3{font-size:var(--p26);line-height:1.2}
h4{font-size:var(--p18);line-height:1.25}
p{margin:0}
a{color:var(--metin);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--aksan);outline-offset:3px}

.mono{font-family:var(--teknik);font-variant-numeric:tabular-nums;
      letter-spacing:.08em;text-transform:uppercase;font-size:var(--p13);
      color:var(--ikinci);display:block}

/* Yalniz ekran okuyucu icin -- atlama baglantisi odaklaninca gorunur. */
.atla{position:absolute;left:-9999px;top:0;z-index:9;padding:var(--y12) var(--y20);
      background:var(--aksan);color:var(--aksan-ustu);font-family:var(--teknik);
      font-size:var(--p13);letter-spacing:.06em;text-transform:uppercase;
      text-decoration:none}
.atla:focus{left:0}

/* ═══ Ust serit ════════════════════════════════════════════════════════ */
.serit{border-bottom:1px solid var(--cizgi)}
.serit .sar{display:flex;flex-wrap:wrap;gap:var(--y12) var(--g32);
            align-items:baseline;justify-content:space-between;
            padding-block:var(--y20)}
.serit a{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.08em;
         text-transform:uppercase;color:var(--ikinci);text-decoration:none}
.serit a:hover{color:var(--metin)}
.serit .kim{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.08em;
            text-transform:uppercase;color:var(--metin)}

/* ═══ Giris ════════════════════════════════════════════════════════════ */
.giris{padding-block:var(--g96) var(--g56)}
.giris h1{margin-top:var(--y20)}
.giris .ozet{font-size:var(--p26);line-height:1.4;max-width:44ch;
             margin-top:var(--g32);color:var(--metin)}
.giris .kosul{margin-top:var(--y20);max-width:54ch;color:var(--ikinci);
              font-size:var(--p15)}
.giris .kosul b{color:var(--metin);font-weight:600}

/* Tek CTA. Sayfada baska eyleme cagri YOK -- e-posta disinda kanal
   acilmiyor (telefon/WhatsApp/randevu bilerek yok). */
.eylem{display:inline-flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-top:var(--g32);padding:var(--y20) var(--g32);
  background:var(--aksan);color:var(--aksan-ustu);
  font-family:var(--teknik);font-size:var(--p15);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;text-decoration:none;
  border:1px solid var(--aksan);
  transition:background 180ms var(--ease-out),color 180ms var(--ease-out)}
.eylem:hover{background:transparent;color:var(--aksan)}
.eylem .adres{font-variant-numeric:tabular-nums;text-transform:none;
              letter-spacing:.02em;opacity:.8}
.eylem-not{margin-top:var(--y12);font-size:var(--p13);color:var(--ikinci);
           font-family:var(--teknik);letter-spacing:.04em}

/* ═══ Bolum iskeleti ═══════════════════════════════════════════════════ */
.bolum{padding-block:var(--g96);border-top:1px solid var(--cizgi)}
.bolum-bas{display:flex;justify-content:space-between;align-items:baseline;
           gap:var(--g32);flex-wrap:wrap;margin-bottom:var(--g56)}
.bolum-bas .mono{flex:none}
.bolum-giris{max-width:60ch;color:var(--ikinci);font-size:var(--p15);
             margin-top:calc(var(--g32) * -1);margin-bottom:var(--g56)}

/* ═══ Adim rayi (01-04) ════════════════════════════════════════════════ */
.ray{display:grid;gap:0;margin:0;padding:0}
@media (min-width:56rem){.ray{grid-template-columns:repeat(4,1fr)}}
.ray li{list-style:none;border-top:1px solid var(--cizgi);
        padding:var(--y20) 0 var(--g32);display:flex;flex-direction:column;
        gap:var(--y12)}
@media (min-width:56rem){
  .ray li{border-top:2px solid var(--cizgi);padding-right:var(--g32)}
  .ray li:first-child{border-top-color:var(--aksan)}
}
.ray .no{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.1em;
         color:var(--aksan);font-variant-numeric:tabular-nums}
.ray h3{font-size:var(--p18);max-width:20ch}
.ray p{color:var(--ikinci);font-size:var(--p15);max-width:34ch}

/* ═══ Tablolar — sayfanin cekirdegi ════════════════════════════════════
   Dar ekranda sayfa DEGIL tablo kayar. Kaydirilabilir kutu klavyeyle de
   gezilebilsin diye HTML tarafinda tabindex="0" + role="region" var.   */
.tablo-kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch;
              border:1px solid var(--cizgi)}
table.kapsam{width:100%;border-collapse:collapse;min-width:52rem;
             font-size:var(--p15);text-align:left}
table.kapsam caption{caption-side:top;padding:var(--y20) var(--y20) 0;
                     text-align:left;color:var(--ikinci);font-size:var(--p13);
                     font-family:var(--teknik);letter-spacing:.06em;
                     text-transform:uppercase}
table.kapsam th,table.kapsam td{padding:var(--y20);vertical-align:top;
                                border-bottom:1px solid var(--cizgi)}
table.kapsam thead th{font-family:var(--teknik);font-size:var(--p13);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ikinci);
  font-weight:400;border-bottom-color:var(--metin);white-space:nowrap}
table.kapsam thead th:first-child{color:var(--aksan)}
table.kapsam tbody th{color:var(--metin);font-weight:600;width:22%;
                      line-height:1.4}
table.kapsam tbody td{color:var(--ikinci);line-height:1.5}
table.kapsam tbody tr:last-child th,
table.kapsam tbody tr:last-child td{border-bottom:0}
table.kapsam tbody tr:nth-child(even){background:var(--sahne)}

/* "Bu bir ORNEK" uyarisi -- gercek sirket sanilmasin diye tablonun
   ustune yapisik, aksan cizgili. */
.ornek-uyari{border:1px solid var(--cizgi);border-left:3px solid var(--aksan);
  padding:var(--y20) var(--g32);margin-bottom:var(--g32);
  color:var(--ikinci);font-size:var(--p15);max-width:64ch}
.ornek-uyari b{color:var(--metin)}

/* ═══ Madde kutulari ═══════════════════════════════════════════════════ */
.kutular{display:grid;gap:var(--g32)}
@media (min-width:46rem){.kutular{grid-template-columns:repeat(2,1fr)}}
.kutu{border:1px solid var(--cizgi);padding:var(--g32);display:flex;
      flex-direction:column;gap:var(--y12)}
.kutu h3{font-size:var(--p18)}
.kutu p{color:var(--ikinci);font-size:var(--p15);max-width:44ch}

ul.dahil{margin:0;padding:0;list-style:none;display:grid;gap:var(--y12)}
ul.dahil li{position:relative;padding-left:1.5rem;color:var(--ikinci);
            font-size:var(--p15);line-height:1.45}
ul.dahil li::before{content:"";position:absolute;left:0;top:.62em;
                    width:.5rem;height:1px;background:var(--aksan)}
ul.dahil li b{color:var(--metin);font-weight:600}

/* ═══ Kanit — yalnizca canli, dogrulanabilir urunler ═══════════════════ */
.kanit{display:grid;gap:0;margin:0;padding:0}
.kanit li{list-style:none;border-top:1px solid var(--cizgi);
          padding:var(--g32) 0;display:grid;gap:var(--y12)}
@media (min-width:56rem){
  .kanit li{grid-template-columns:15rem minmax(0,1fr) auto;
            gap:var(--g32);align-items:baseline}
}
.kanit li:last-child{border-bottom:1px solid var(--cizgi)}
.kanit .ad{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.08em;
           text-transform:uppercase;color:var(--metin);font-weight:600}
.kanit p{color:var(--ikinci);font-size:var(--p15);max-width:56ch}
.kanit .bag{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.06em;
            color:var(--aksan);text-underline-offset:.25em}

/* ═══ SSS ══════════════════════════════════════════════════════════════ */
.sss{display:grid;gap:var(--g32)}
@media (min-width:60rem){.sss{grid-template-columns:repeat(2,1fr);gap:var(--g32) var(--g56)}}
.sss article{border-top:1px solid var(--cizgi);padding-top:var(--y20)}
.sss h3{font-size:var(--p18);line-height:1.3;margin-bottom:var(--y8);max-width:34ch}
.sss p{color:var(--ikinci);font-size:var(--p15);max-width:52ch}

/* ═══ Kunye ════════════════════════════════════════════════════════════ */
footer{padding-block:var(--g96) var(--g144);border-top:2px solid var(--aksan)}
footer .kapanis{font-size:var(--p26);max-width:34ch;line-height:1.35}
.imza{margin-top:var(--g56);padding-top:var(--y20);
      border-top:1px solid var(--cizgi);display:flex;flex-wrap:wrap;
      gap:var(--y12) var(--g32);align-items:baseline;justify-content:space-between}
.imza p{font-size:var(--p15);color:var(--ikinci);max-width:48ch}
.imza .kisi{color:var(--metin)}
.imza .tarih{font-family:var(--teknik);font-size:var(--p13);letter-spacing:.06em}

/* ═══ Kapsam sayfasina ozel (uretilen sayfalar) ════════════════════════ */
.hedef{display:grid;gap:var(--y8);margin-top:var(--y20)}
.hedef .sirket{font-size:var(--p40);line-height:1.12;font-weight:700;
               letter-spacing:-.02em;max-width:24ch}
.hedef .pozisyon{color:var(--aksan);font-family:var(--teknik);
                 font-size:var(--p15);letter-spacing:.08em;text-transform:uppercase}
.kaynaklar{display:flex;flex-wrap:wrap;gap:var(--y12) var(--g32);
           margin-top:var(--g32);padding-top:var(--y20);
           border-top:1px solid var(--cizgi)}
.kaynaklar a,.kaynaklar span{font-family:var(--teknik);font-size:var(--p13);
  letter-spacing:.06em;color:var(--ikinci);text-underline-offset:.25em}
.kaynaklar a{color:var(--aksan)}
.gizli-not{margin-top:var(--g32);font-size:var(--p13);color:var(--ikinci);
           font-family:var(--teknik);letter-spacing:.04em;max-width:64ch;
           line-height:1.6}

/* ═══ Hareket ══════════════════════════════════════════════════════════
   Tek hareket: bolumler goruse girerken 8px yukselerek beliriyor.
   Scroll-jack YOK, parallax YOK -- bu bir belge sayfasi. JS calismazsa
   .bel sinifi hic eklenmez, icerik acik kalir (asagiya bak).           */
@media (prefers-reduced-motion:no-preference){
  .js .bel{opacity:0;transform:translateY(8px);
       transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
  .js .bel.gorundu{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Yazdirma: kapsam sayfasi cikti alinabilsin. */
@media print{
  :root{--zemin:#fff;--metin:#111;--ikinci:#444;--cizgi:#bbb;--sahne:#f4f4f4;
        --aksan:#a4451c}
  .serit,.eylem-not,.atla{display:none}
  .js .bel{opacity:1!important;transform:none!important}
  table.kapsam{min-width:0;font-size:10pt}
  .tablo-kaydir{overflow:visible}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ══════════════════════════════════════════════════════════════════════
   KAPSAM KAYIT KATMANI (21 Agu 2026)

   Uretici artik 8 sutunlu tek dev tablo cikarmiyor -- 390px'te
   okunamiyordu. Gorev basina bir KAYIT BLOGU cikiyor; asagisi onu
   masaustunde tabloya benzeyen izgaraya, mobilde alt alta kayda cevirir.

   YON NOTU (design-brief.md §6, birincil risk):
   Bu sayfada PIN YOK, SCRUB YOK. Genel sayfanin anlati makinesi buraya
   SIZMAZ -- kapsam sayfasi 5x8 bir kayittir, film degil. Iki sayfa ayni
   TOKEN katmanini paylasir, YERLESIMI paylasmaz.

   ESKI table.kapsam KURALLARI SILINMEDI: 20 Agu'da gonderilen 20
   e-postadaki baglantilar hala eski uretici ciktisina isaret ediyor ve
   o sayfalar CANLI. Onlar yeniden uretilene kadar iki bicim de yasar.
   ══════════════════════════════════════════════════════════════════ */

.kayit-caption{
  font-family:var(--teknik); font-size:var(--p13); letter-spacing:.06em;
  color:var(--ikinci); margin-bottom:var(--g32); max-width:60ch;
}

.kapsam-kayitlari{ display:grid; gap:var(--y20); }

.kapsam-kayit{
  border:1px solid var(--cizgi); background:var(--sahne);
  padding:clamp(1rem,2.4vw,1.5rem);
  display:grid; gap:var(--y12);
}
/* Numara + gorev basligi tek satirda: tek bakista "kacinci gorev". */
.kayit-no{ margin:0 }
.kayit-no .mono{ color:var(--aksan); display:inline }   /* AKSAN 3/3 -- aktif kayit isareti */
.kayit-gorev{
  font-size:var(--p18); line-height:1.3; font-weight:600;
  color:var(--metin); margin:0; max-width:60ch;
}

.kayit-alanlar{ margin:var(--y12) 0 0; display:grid; gap:1px; background:var(--cizgi); }
.alan{
  background:var(--sahne); display:grid; gap:.35rem;
  padding:var(--y12) 0 var(--y12);
}
.alan-ad{
  font-family:var(--teknik); font-size:var(--p13); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ikinci); margin:0;
}
.alan-deger{ margin:0; color:var(--metin); font-size:var(--p15); line-height:1.45 }
.alan-metin{ display:block }

/* Adimlar: numarali, tek satirlik, "→" degil gercek liste.
   Ekran okuyucu sirayi soyleyebilsin diye <ol>.               */
.adimlar{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  counter-reset:adim;
}
.adimlar li{
  counter-increment:adim; position:relative; padding-left:1.6rem;
  font-size:var(--p15); line-height:1.4;
}
.adimlar li::before{
  content:counter(adim,decimal-leading-zero);
  position:absolute; left:0; top:.1em;
  font-family:var(--teknik); font-size:var(--p13);
  color:var(--ikinci); font-variant-numeric:tabular-nums;
}

/* ═══ 48rem ustu: kayit gercek bir tabloya benzer ═════════════════════
   Alan adi sabit sutunda, deger akiskan sutunda -- goz asagi
   indiginde etiketler HIZALI kalir, tarama hizlanir.          */
@media (min-width:48rem){
  .kapsam-kayit{
    grid-template-columns:3.5rem minmax(0,1fr);
    align-items:start; column-gap:var(--y20);
  }
  .kayit-no     { grid-column:1; grid-row:1 }
  .kayit-gorev  { grid-column:2; grid-row:1 }
  .kayit-alanlar{ grid-column:2; grid-row:2 }
  .alan{
    grid-template-columns:11rem minmax(0,1fr);
    gap:var(--y20); align-items:baseline;
    padding:var(--y12) 0;
  }
  .alan-ad{ text-align:right }
  .adimlar{ flex-direction:column; gap:.3rem }
}

/* Yazdirma: teklif ciktisi kagida basilabilsin. */
@media print{
  .kapsam-kayit{ break-inside:avoid; border-color:#999 }
  .serit,.eylem{ display:none }
}

/* ═══ KAPSAM DENETIM DUZELTMELERI (olcumle yakalandi) ═════════════════ */

/* 1) Adimlar HER genislikte tek sutun.
      Bulgu (390px): flex-wrap satir yonunde sarinca "01 Veri cekilir
      02 dusuk/yuksek ayrilir" yan yana diziliyordu -- sira okunmuyor,
      "tek bakista anlasilir" kurali bozuluyor. Adim listesi bir
      SIRADIR; yan yana dizmek sirayi gizler.                          */
.adimlar{ flex-direction:column; gap:.3rem }

/* 2) Dokunma hedefleri: 4 satir ici baglanti 390px'te 16-20px yuksekti
      (44px alt siniri). Kapsam sayfasindaki baglantilar govde metni
      icinde -- min-height vermek satir akisini bozar, o yuzden dikey
      padding + negatif margin: tiklama alani buyur, YERLESIM kaymaz. */
.kaynaklar a, .adres a, .imza a, footer a, .gizli-not a{
  display:inline-block;
  padding-block:.75rem; margin-block:-.75rem;   /* 20px + 24px = 44px */
}

/* 3) Serit baglantisi da 44px: ust seritteki "GENEL SAYFA ->" 113x20 idi. */
.serit a{ display:inline-flex; align-items:center; min-height:44px }

/* 4) Mobil hiyerarsi: h1/govde orani 390px'te 2.13 olculdu (esik 2.5).
      --pdev tabani 2.4rem -> 2.9rem. Bu token YALNIZ kapsam sayfasinin
      h1'inde kullaniliyor; genel sayfa kendi --p88'ini kullanir, yani
      oradaki 2.58 orani etkilenmez.                                    */
:root{ --pdev: clamp(2.9rem, 5.2vw, 4rem) }

/* ═══ IKI KANAL (21 Agu 2026) ═════════════════════════════════════════
   E-posta BIRINCIL, WhatsApp IKINCIL. Ikisi de yazili kanal.
   Gorsel hiyerarsi kasitli: birincil dolu aksan, ikincil yalniz
   kenarlikli. Iki dolu buton olsaydi beklenen eylem kaybolur ve
   aksanin "yalniz 3 yerde" kurali bozulurdu.                        */
.eylemler{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:stretch }
.eylem.ikincil{
  background:transparent; color:var(--metin);
  /* WCAG 1.4.11: etkilesimli oge kenarligi zeminden >=3:1.
     --cizgi (1.52:1) YETMEZ; --ikinci (7.25:1) kullaniliyor. */
  border:1px solid var(--ikinci);
}
.eylem.ikincil:hover{ border-color:var(--metin) }
@media (max-width:30rem){
  .eylemler{ flex-direction:column; align-items:stretch }
  .eylemler .eylem{ justify-content:center; text-align:center }
}