/* =============================================================================
   A5x2PDF — arsiv kenar cubugu (her sayfada)

   Eskiden bu stiller transkripsiyon.html'in <style> blogunda duruyordu ve
   kenar yalniz o sayfada vardi. Arsiv artik sitenin her sayfasinda aciliyor
   (kayit listesi, klasorler, notlar), bu yuzden stiller ortak dosyaya alindi.
   HTML'i js/kenar.js uretiyor; sayfalara elle eklenmiyor.

   Iceride ayrica A.pencere (onay/secim penceresi) stilleri var: kenar
   cubugunun klasor secim pencereleri onu kullaniyor.
   ============================================================================= */
  /* ================================================== sol kenar arsivi ===
     Plaud tarzi: kenar SAYFANIN BIR PARCASI, icerigin ustune binmiyor.

     Onceki surumde kenar icerigin USTUNE biniyordu (overlay). Ana alan
     kipirdamiyordu ama 1280px gibi genisliklerde arsiv acikken transkriptin
     sol seridi altinda kaliyordu: yazi yazinin ustune geliyordu. Acilip
     kapanirken de icindeki metin ekranin disina kayarken gorunuyordu.

     Simdi uc kural var:
       1) Kenar yer KAPLIYOR. Govde soldan kenar kadar bosluk birakiyor;
          ust cubuk ve icerik o bosluga gore ortalaniyor. Hicbir sey ust uste
          binmiyor.
       2) Kenar tamamen kaybolmuyor, dar bir SERIDE (56px) iniyor. Ac/kapat
          dugmesi o seridin en ustunde; iki durumda da ayni pikselde.
       3) Metin hic yeniden akmiyor. Icerideki kutu SABIT 288px genislikte;
          dis kutu daralinca yalnizca kirpiliyor. Kapanirken yazilar ONCE
          soluyor, sonra genislik daraliyor; acilirken once genislik aciliyor,
          yazilar SONRA beliriyor. Goz hicbir anda sikisan, kayan, satir
          atlayan metin gormuyor.

     Durum sinifi <html> ogesinde: js/tema.js onu <head>'de, sayfa cizilmeden
     koyuyor. Boylece kapali kaydedilmis bir kenar acilista bir kare bile
     acik gorunup kapanmiyor.                                                 */
  :root{
    --kenarAcik:288px;
    --kenarRay:56px;
    --kenarW:var(--kenarAcik);
    --kenarEgri:cubic-bezier(.22,.8,.24,1);
    --kenarSure:.28s;
  }
  html.kenarKapali{ --kenarW:var(--kenarRay) }

  body{ padding-left:var(--kenarW) }
  html.kenarHazir body{ transition:padding-left var(--kenarSure) var(--kenarEgri) }

  #kenar{
    position:fixed;left:0;top:0;bottom:0;width:var(--kenarW);z-index:30;
    background:var(--panel);border-right:1px solid var(--rule);
    overflow:hidden;
  }
  html.kenarHazir #kenar{ transition:width var(--kenarSure) var(--kenarEgri) }

  /* KAPANIRKEN genislik 0,09 sn GECIKIYOR.
     Bunu olcerek buldum: gecisin karelerini tek tek orneklediğimde, kapanisin
     ilk 30 ms'inde kenar 288 -> 194 px'e inmisti ama yazilarin opakligi hala
     %56'ydi. Yani kullanici metnin kirpilarak disari kaydigini goruyordu --
     "gozu rahatsiz eden" sey tam olarak buydu. Egri basta hizli oldugu icin
     genislik, solmayi geride birakiyordu. Artik sira net: once yazi tamamen
     solar, sonra panel daralir. Acilista tersi zaten dogruydu (once genislik,
     sonra yazi). */
  html.kenarHazir.kenarKapali #kenar{
    transition:width var(--kenarSure) var(--kenarEgri) .09s;
  }
  html.kenarHazir.kenarKapali body{
    transition:padding-left var(--kenarSure) var(--kenarEgri) .09s;
  }

  /* Ic kutu sabit genislikte: dis kutu daraldikca kirpilir, METIN AKMAZ. */
  .kenarIc{ width:var(--kenarAcik);height:100%;display:flex;flex-direction:column }

  /* Baslik satiri ust cubukla ayni yukseklikte: iki cizgi tek cizgi gibi
     devam etsin. */
  .kenarBaslik{
    display:flex;align-items:center;gap:10px;height:var(--ustCubuk,53px);
    padding:0 12px 0 10px;border-bottom:1px solid var(--rule);flex:0 0 auto;
  }
  .kenarBaslik b{font-size:13px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
  .kenarBaslik .sayi{margin-left:auto;font-size:11.5px;color:var(--ink-soft);white-space:nowrap}

  /* Ac/kapat — seridin en ustunde, iki durumda da ayni yerde. */
  .kenarTus{
    flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;
    border:1px solid transparent;background:none;color:var(--ink-soft);
    border-radius:var(--r2);cursor:pointer;padding:0;
  }
  .kenarTus:hover{color:var(--cut);background:var(--vurgu-yumusak);border-color:var(--rule)}
  .kenarTus svg{display:block}
  .kenarTus .panelCizgi{transition:transform var(--kenarSure) var(--kenarEgri);transform-origin:center}
  html.kenarKapali .kenarTus .panelCizgi{transform:scaleX(.35)}

  /* Soluklasan icerik. Kapanirken: once solar (0,14 sn), sonra gorunmez olur
     ki klavye sekmesi icine girmesin. Acilirken: genislik acildiktan SONRA
     (0,12 sn gecikmeyle) belirir. */
  .kenarSolar{
    opacity:1;visibility:visible;
    transition:opacity .16s ease .14s, visibility 0s linear 0s;
  }
  html.kenarKapali .kenarSolar{
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .12s ease, visibility 0s linear .12s;
  }
  .kenarBaslik .kenarSolar{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
  .kenarGovde{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

  /* Seritteyken arsivin bos olmadigini gosteren kucuk rozet. */
  .kenarRozet{
    position:absolute;left:0;width:var(--kenarRay);top:calc(var(--ustCubuk,53px) + 12px);
    display:grid;justify-items:center;gap:6px;color:var(--ink-soft);font-size:11px;
    opacity:0;pointer-events:none;transition:opacity .12s ease;
  }
  html.kenarKapali .kenarRozet{opacity:1;transition:opacity .18s ease .14s}
  .kenarRozet b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

  /* Ust cubuktaki dugme yalniz telefonda (orada serit yok). */
  #kenarDugme{
    display:none;
    border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);
    border-radius:var(--r2);width:36px;height:36px;padding:0;cursor:pointer;
    place-items:center;margin-right:2px;
  }
  #kenarDugme:hover{color:var(--cut);border-color:var(--cut);background:var(--vurgu-yumusak)}

  /* ------------------------------------------------ telefon / dar ekran ---
     Burada serit icin yer yok. Kenar yine icerigin ustune kayan bir cekmece;
     ama kayma yumusak, arkasi yavasca kariyor ve cekmece kapaliyken hic yer
     kaplamiyor. Cekmecenin kendi dugmesi, ust cubuktaki dugmenin TAM ustune
     denk geliyor (ayni x, ayni y): parmak ayni yere dokunarak acip kapatir. */
  @media(max-width:900px){
    body{ padding-left:0 }
    html.kenarHazir body{ transition:none }
    #kenarDugme{ display:grid }
    #kenar{
      width:min(var(--kenarAcik),86vw);z-index:45;box-shadow:var(--golge-b);
      transform:translateX(0);
    }
    html.kenarHazir #kenar{ transition:transform var(--kenarSure) var(--kenarEgri), visibility 0s }
    html.kenarKapali #kenar{
      transform:translateX(-102%);box-shadow:none;visibility:hidden;
    }
    html.kenarHazir.kenarKapali #kenar{
      transition:transform var(--kenarSure) var(--kenarEgri), visibility 0s linear var(--kenarSure);
    }
    .kenarIc{ width:100% }
    /* Yukseklik burada --ustCubuk DEGIL, sabit 52px: telefonda ust menu iki
       satira sariyor ve --ustCubuk ~88px oluyordu. Cekmecenin dugmesi o
       yuksekligin ortasina, yani ust cubuktaki dugmeden 28px asagiya
       dusuyordu (olctum: y=36'ya karsi y=8). Ust cubugun ILK satiri 52px;
       basligi ona sabitleyince iki dugme ayni pikselde ust uste geliyor. */
    .kenarBaslik{ padding-left:var(--pad);height:52px }
    .kenarRozet{ display:none }
    html.kenarKapali .kenarSolar{ opacity:1;visibility:visible }
  }
  #kenarUst{padding:10px 12px;border-bottom:1px solid var(--rule);display:grid;gap:7px}
  #kenarArama{width:100%;box-sizing:border-box;border:1px solid var(--rule);
              background:var(--paper);padding:6px 8px;font:inherit;font-size:13px}
  #kenarAgac{flex:1 1 auto;overflow:auto;padding:8px 6px 24px;font-size:13px}
  .kenarBos{color:var(--ink-soft);font-size:12.5px;margin:6px 10px}
  .kenarBos a{color:var(--cut)}

  .kenarKlasor{margin-left:calc(var(--d,0) * 0px)}
  .kenarKlasor .icerik{margin-left:11px;border-left:1px solid var(--rule);padding-left:5px}
  .klasorBas,.kayitBas{display:flex;align-items:center;gap:2px}
  .klasorBas .ad{font-weight:600}
  .klasorBas .sayi{font-size:11px;color:var(--ink-soft);margin-left:2px}
  #kenarAgac .ok{
    background:none;border:0;padding:2px 4px;color:var(--ink-soft);cursor:pointer;
    font-size:10px;line-height:1;flex:0 0 auto;
  }
  /* Donen DUGME degil icindeki isaret: dugme donunce dokunma alani da
     donuyordu (34x44 -> 44x34). */
  #kenarAgac .ok span{display:inline-block;transition:transform .12s}
  #kenarAgac .ok.acik span{transform:rotate(90deg)}
  #kenarAgac .ok.bos{width:18px;display:inline-block}
  #kenarAgac .ad{
    background:none;border:0;padding:3px 4px;font:inherit;font-size:13px;color:var(--ink);
    cursor:pointer;text-align:left;flex:1 1 auto;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  #kenarAgac .ad:hover{color:var(--cut)}
  .kucukDugme{
    background:none;border:1px solid transparent;color:var(--ink-soft);
    padding:1px 5px;font:inherit;font-size:12px;line-height:1.4;cursor:pointer;flex:0 0 auto;
  }
  .kucukDugme:hover{border-color:var(--rule);color:var(--ink);background:var(--paper)}
  .kucukDugme.genis{width:100%;border-color:var(--rule);background:var(--paper);padding:5px}
  .klasorBas .kucukDugme,.kayitBas .kucukDugme{opacity:0}
  .klasorBas:hover .kucukDugme,.kayitBas:hover .kucukDugme,
  .klasorBas:focus-within .kucukDugme,.kayitBas:focus-within .kucukDugme{opacity:1}

  .kenarKayit{padding:2px 0 4px;border-left:2px solid transparent;padding-left:2px}
  .kenarKayit.secili{border-left-color:var(--cut);background:var(--paper)}
  .kayitNe{font-size:11px;color:var(--ink-soft);margin-left:22px}
  .kenarKayit .notlar{margin:3px 0 4px 22px;display:grid;gap:2px}
  .kenarNot{
    display:grid;grid-template-columns:auto 1fr;gap:1px 6px;text-align:left;
    background:none;border:1px solid transparent;padding:3px 5px;cursor:pointer;font:inherit;
  }
  .notSatir{display:flex;align-items:center;gap:2px}
  .notSatir .kenarNot{flex:1 1 auto;min-width:0}
  .notSatir .kucukDugme{opacity:0;flex:0 0 auto}
  .notSatir:hover .kucukDugme,.notSatir:focus-within .kucukDugme{opacity:1}
  .kenarNot:hover{border-color:var(--rule);background:var(--paper)}
  .kenarNot.secili{border-color:var(--cut);background:var(--paper)}
  .kenarNot .dil{grid-row:1/3;align-self:center;font-size:10px;font-weight:700;
                 border:1px solid var(--rule);padding:1px 4px;color:var(--ink-soft)}
  .kenarNot .ad{font-size:12.5px;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kenarNot .ne{font-size:10.5px;color:var(--ink-soft);overflow:hidden;
                text-overflow:ellipsis;white-space:nowrap}

  /* --------------------------------------------- duzenleme kipi + surukleme */
  .kenarAraclar{display:flex;gap:6px}
  .kenarAraclar .kucukDugme{flex:1 1 0;border-color:var(--rule);background:var(--paper);padding:5px}
  #kenarDuzenle.acik{background:var(--ink);color:var(--ust-yazi);border-color:var(--ink)}
  #kenarSecimCubugu{border-top:1px solid var(--rule);padding-top:8px;display:grid;gap:6px}
  .secimSayi{font-size:12px;color:var(--ink-soft)}
  .secimSayi b{color:var(--ink);font-size:13px}
  .secimDugmeler{display:flex;flex-wrap:wrap;gap:5px}
  .secimDugmeler .kucukDugme{border-color:var(--rule);background:var(--paper)}
  .kucukDugme.tehlike{color:var(--cut)}
  .kucukDugme.tehlike:hover{background:var(--cut);color:var(--cut-yazi);border-color:var(--cut)}
  .kucukDugme:disabled{opacity:.4;cursor:not-allowed}
  .secKutu{margin:0 4px 0 2px;accent-color:var(--cut);flex:0 0 auto}

  /* Surukleme: kaynak soluyor, birakilacak hedef cerceveleniyor. */
  #kenarAgac [draggable=true]{cursor:grab}
  .suruklenen{opacity:.4}
  .birakHedef > .klasorBas{outline:2px solid var(--cut);outline-offset:-1px;background:var(--paper)}
  .birakHedef > .klasorBas .ad{color:var(--cut)}
  .kenarIpucu{font-size:11.5px;color:var(--ink-soft);margin:8px 10px 0;line-height:1.45}

  /* ---------------------------------------------------------- pencere */
  .a5pencere{position:fixed;inset:0;background:var(--ortu);z-index:80;
             display:grid;place-items:center;padding:20px}
  .a5kutu{background:var(--panel);border:1.5px solid var(--ink);max-width:460px;width:100%;
          max-height:80vh;display:flex;flex-direction:column}
  .a5kutu h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--rule);font-size:15px}
  .a5govde{padding:14px 16px;overflow:auto}
  .a5dugmeler{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;
              border-top:1px solid var(--rule)}
  .btn.birincil{background:var(--ink);color:var(--ust-yazi);border-color:var(--ink)}
  .btn.birincil:hover:not(:disabled){background:var(--cut);border-color:var(--cut)}
  /* Silme onayi: dugme kirmizi, yanlislikla "Tamam" sanilmasin. */
  .btn.birincil.tehlike{background:var(--tehlike);border-color:var(--tehlike);color:var(--tehlike-yazi)}
  .btn.birincil.tehlike:hover:not(:disabled){background:var(--tehlike-koyu);border-color:var(--tehlike-koyu)}
  .a5metin{margin:0 0 10px;line-height:1.5;overflow-wrap:anywhere}
  .a5metin:last-child{margin-bottom:0}
  .a5govde input.a5girdi{width:100%;box-sizing:border-box;margin-top:4px;padding:10px 12px;
                          border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit}
  .a5hata{margin:0;padding:10px 16px 0;color:var(--tehlike);font-size:13.5px}

  /* "Dosya hazir" bandi (core.js A.indir): altta, kalici, parmakla kapanir. */
  .indirBandi{position:fixed;left:50%;bottom:max(12px, env(safe-area-inset-bottom));transform:translateX(-50%);
              z-index:70;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
              width:min(560px, calc(100vw - 24px));box-sizing:border-box;padding:10px 12px;
              background:var(--panel);border:1px solid var(--rule);border-radius:var(--r1);box-shadow:var(--golge-b)}
  .indirBandi .ibAd{flex:1 1 180px;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .indirBandi .btn{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
  .indirBandi .ibKapat{min-width:44px;justify-content:center;font-size:18px}
  .klasorSecKutu{display:grid;gap:4px;max-height:44vh;overflow:auto}
  .klasorSec{display:flex;gap:8px;align-items:center;padding:5px 6px;cursor:pointer;
             border:1px solid transparent;font-size:13.5px}
  .klasorSec:hover{border-color:var(--rule);background:var(--paper)}
  .klasorSec input{accent-color:var(--cut)}

  /* Ortu: yalniz dar ekranda. Aniden belirmiyor, cekmeceyle ayni surede
     yavasca kariyor. Genis ekranda hic yok: orada kenar yer kapliyor,
     arkasinda karartilacak bir sey kalmiyor. */
  #kenarOrtu{display:none}
  @media(max-width:900px){
    #kenarOrtu{
      display:block;position:fixed;inset:0;z-index:44;border:0;padding:0;margin:0;
      background:var(--ortu);opacity:0;pointer-events:none;cursor:pointer;
      transition:opacity var(--kenarSure) ease;
    }
    html:not(.kenarKapali) #kenarOrtu{opacity:1;pointer-events:auto}
  }

/* =====================================================================
   DOKUNMATIK: HOVER'A BAGLI DUGMELERI HEP GOSTER
   =====================================================================
   Yukarida ".klasorBas .kucukDugme{opacity:0}" var; dugmeler satirin
   uzerine GELINCE beliriyor. Parmakla kullanilan cihazda HOVER YOK, yani
   telefonda ve tablette bu dugmeler hic gorunmuyordu:

     · alt klasor ekle (+)      · klasoru yeniden adlandir (✎)
     · klasoru sil (×)          · kaydin klasorlerini sec (⊞)
     · notu sil (×)

   Yani arsivi telefondan duzenlemek MUMKUN DEGILDI. Olcup gordum.

   Kural buraya yazildi, tema.css'e degil: ikisi de ayni ozgullukte ve
   kenar.css sayfada SONRA yukleniyor -- tema.css'teki kopya sessizce
   eziliyordu (bunu da olctum).                                        */
/* Klasor islem menusu dugmesi: masaustunde yok (orada uc dugme hover ile).
   Bu varsayilan asagidaki dokunmatik blogundan ONCE gelmeli, yoksa onu ezer. */
.klasorBas [data-klasormenu] { display: none; place-items: center; }

@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .klasorBas .kucukDugme,
  .kayitBas  .kucukDugme,
  .notSatir  .kucukDugme { opacity: 1; }

  /* ---- PARMAKLA KULLANIM (olculdu 2026-09-29, 375px telefon) ----------
     Menu masaustunden kalmaydi: satirlar 34px, yazi 13px, klasor satirinda
     yan yana UC kucuk dugme (+ ✎ ×). 63 dokunma hedefi 44px'in altindaydi;
     ic ice klasorde ada 114px kaliyordu. Simdi: satir 44px, yazi 15px,
     klasorun uc islemi tek "⋯" dugmesinde (bir secim penceresi acar). */
  .klasorBas [data-altklasor],
  .klasorBas [data-klasorad],
  .klasorBas [data-klasorsil] { display: none; }
  .klasorBas [data-klasormenu] { display: inline-grid; }

  .kenarTus, #kenarDugme { width: 44px; height: 44px; min-height: 44px; }
  #kenarArama { padding: 10px 12px; }
  #kenarUst { gap: 8px; }
  .kenarAraclar .kucukDugme,
  .secimDugmeler .kucukDugme { min-height: 42px; font-size: 14px; padding: 6px 10px; }
  .secimSayi { font-size: 14px; }

  #kenarAgac { font-size: 15px; padding: 6px 4px 28px; }
  #kenarAgac .ad { font-size: 15px; padding: 10px 6px; min-height: 44px; }
  /* Kayit adlari telefonda IKI SATIRA kadar kirilsin: ayni dersin
     "Theorie de la Croissance 1/2/3.aac" kayitlari tek satirda ayni
     yerden kesilip birbirinden AYIRT EDILEMIYORDU. */
  #kenarAgac .kayitBas .ad, #kenarAgac .klasorBas .ad {
    white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    padding-top: 12px; padding-bottom: 12px;
  }
  /* Ok artik donmuyor (isaret donuyor), 32px genislik yetiyor; her klasor
     seviyesinde 12px daha az girinti. */
  #kenarAgac .ok { width: 32px; min-width: 32px; height: 44px; min-height: 44px; font-size: 14px; padding: 0; }
  #kenarAgac .ok.bos { width: 32px; }
  .klasorBas .sayi { font-size: 12.5px; padding: 0 4px; }
  #kenarAgac .kucukDugme { min-width: 44px; min-height: 44px; font-size: 18px; line-height: 1; }
  .kayitNe { font-size: 12.5px; margin-left: 38px; margin-top: -6px; padding-bottom: 4px; }
  .kenarKayit .notlar { margin-left: 32px; gap: 4px; }
  .kenarNot { padding: 8px 8px; min-height: 48px; }
  /* #kenarAgac .ad kurali (44px, ic bosluk) not basligina da uyuyordu: not
     satiri 82px'e sisiyordu. Not dugmesinin kendisi zaten 48px. */
  #kenarAgac .kenarNot .ad { font-size: 14px; min-height: 0; padding: 0; }
  .kenarNot .ne { font-size: 12px; }
  .kenarKlasor .icerik { margin-left: 12px; padding-left: 2px; }
  .secKutu { width: 22px; height: 22px; margin: 0 6px 0 4px; }
  .kenarIpucu { font-size: 13px; }
  .kenarBos { font-size: 14px; }
  .klasorSec { min-height: 44px; font-size: 15px; }
  .klasorSec input { width: 20px; height: 20px; }
  .a5dugmeler .btn { min-height: 44px; }
}

/* Klasor islem penceresi: buyuk, tek sutun secenekler. */
.islemListe { display: grid; gap: 8px; }
.islemListe button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 10px 14px; text-align: left; font: inherit; font-size: 15px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r2);
}
.islemListe button:hover { border-color: var(--cut); }
.islemListe button.tehlike { color: var(--cut); }
.islemListe .simge { width: 22px; text-align: center; font-size: 17px; flex: 0 0 auto; }

/* ---- TELEFON CEKMECESI: arka sayfa kilidi ------------------------------
   Cekmece acikken arkadaki sayfa da kayiyordu (olculdu): liste sonuna
   gelince kaydirma arkaya geciyor, ortuye dokunup surukleyince sayfa
   kayiyordu. overscroll-behavior zinciri keser; govde kilidi ve ortunun
   touch-action'i arka sayfanin kendisini sabitler. Cekmece telefonda biraz
   genisledi: 288px'te ic ice klasor adlarina yer kalmiyordu. */
@media (max-width: 900px) {
  #kenar { width: min(340px, 88vw); }
  #kenarAgac { overscroll-behavior: contain; }
  html:not(.kenarKapali) body { overflow: hidden; }
  #kenarOrtu { touch-action: none; }
}