/* =============================================================================
   A5x2PDF — ust menu (her sayfada ayni) + genel tiklama/hover cilasi

   Eskiden her sayfanin kendi <style> blogunda kendi ust menu kopyasi vardi.
   Kopyalar zamanla birbirinden ayrildi: bir sayfada "Giris", otekinde "Hesap";
   bir sayfada API anahtarlari bagi yok; dar ekranda menu alt satira kayiyor ve
   marka yazisina yapisiyordu. Artik menuyu js/ustmenu.js uretiyor, stiller de
   tek yerde.

   Yerlesim:
     [kenar dugmesi] [A5x2PDF] ................ [baglantilar] [hesap] [arac]
   Sigmadigi anda (kenar cubugu acikken dar kalan ekranlarda da) baglantilar
   "Menu" dugmesinin altinda bir panele iniyor -- alt satira TASMIYOR.
   ============================================================================= */

.topbar{
  border-bottom:1.5px solid var(--ink);
  background:var(--panel);
  position:sticky;top:0;z-index:35;
}
/* Tam genislik: marka sayfanin sol kosesinde durur, baglantilar sag ucta.
   Ortalanmis dar bir kutu icinde dururken ikisi birbirine yapisiyordu. */
.topbar .inner{
  max-width:none;margin:0;
  padding:0 var(--pad);
  display:flex;align-items:center;gap:10px;
  min-height:52px;
  flex-wrap:nowrap;               /* tasma olursa panele iniyor, alta kaymiyor */
}

.brand{
  font-weight:700;font-size:17px;letter-spacing:-.02em;text-decoration:none;
  color:var(--ink);white-space:nowrap;margin-right:auto;
  padding:4px 2px;border-bottom:2px solid transparent;
  transition:color .14s ease,border-color .14s ease;
}
.brand span{color:var(--cut)}
.brand:hover{border-bottom-color:var(--cut)}
.brand:focus-visible{outline:2px solid var(--cut);outline-offset:3px}

.ustBaglar{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.ustBaglar a{
  text-decoration:none;color:var(--ink-soft);font-size:14px;
  padding:7px 11px;border:1px solid transparent;white-space:nowrap;
  transition:color .14s ease,background-color .14s ease,border-color .14s ease;
}
.ustBaglar a:hover{color:var(--ink);border-color:var(--rule);background:var(--paper)}
.ustBaglar a[aria-current=page]{color:var(--ink);font-weight:600;border-color:var(--ink)}
.ustBaglar a:focus-visible{outline:2px solid var(--cut);outline-offset:-2px}

/* Hesap: girisliyken ad, degilken "Giris". Genisligi degistigi icin
   kendi kutusu var; metin uzunsa kisaltiliyor, menu ziplamiyor. */
.ustHesap{
  display:inline-flex;align-items:center;gap:6px;max-width:12em;
  text-decoration:none;color:var(--ink-soft);font-size:14px;
  padding:7px 11px;border:1px solid var(--rule);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  transition:color .14s ease,background-color .14s ease,border-color .14s ease;
}
.ustHesap:hover{color:var(--ink);border-color:var(--ink);background:var(--paper)}
.ustHesap:focus-visible{outline:2px solid var(--cut);outline-offset:2px}
.ustHesap[aria-current=page]{color:var(--ink);font-weight:600;border-color:var(--ink)}
.ustHesap .simge{flex:0 0 auto;opacity:.8}
.ustHesap.girisli .simge{color:var(--ok)}

.ustAraclar{display:flex;align-items:center;gap:6px;flex:0 0 auto}

/* Tema dugmesi (js/tema.js uretiyor) */
.temaDugme{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft);
  font:inherit;font-size:12.5px;padding:5px 9px;cursor:pointer;
  transition:color .14s ease,border-color .14s ease,background-color .14s ease;
}
.temaDugme:hover{color:var(--ink);border-color:var(--ink)}
.temaDugme:focus-visible{outline:2px solid var(--cut);outline-offset:2px}
.temaDugme .simge{font-size:13px;line-height:1}

/* Kenar cubugu ac/kapat (js/kenar.js uretiyor) */
#kenarDugme{
  display:none;flex:0 0 auto;place-items:center;
  width:34px;height:34px;border:1px solid var(--rule);background:var(--paper);
  color:var(--ink-soft);cursor:pointer;
  transition:color .14s ease,border-color .14s ease;
}
#kenarDugme:hover{color:var(--cut);border-color:var(--cut)}
#kenarDugme:focus-visible{outline:2px solid var(--cut);outline-offset:2px}

/* ------------------------------------------------- dar ekran / sigmama */

.ustMenuDugme{
  display:none;align-items:center;gap:7px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  font:inherit;font-size:13.5px;padding:6px 10px;cursor:pointer;
  transition:border-color .14s ease,color .14s ease;
}
.ustMenuDugme:hover{border-color:var(--ink)}
.ustMenuDugme:focus-visible{outline:2px solid var(--cut);outline-offset:2px}

.topbar.dar .ustMenuDugme{display:inline-flex}
/* Yalniz UST SATIRDAKILER gizleniyor (dogrudan .inner cocugu). Once
   ".topbar.dar .ustBaglar" yaziyordu; o secici panele TASINAN kopyayi da
   gizliyordu (uc sinif, panelin iki sinifini yeniyor) ve menu bombos
   aciliyordu. */
.topbar.dar .inner > .ustBaglar,
.topbar.dar .inner > .ustAraclar{
  display:none;
}
.topbar.dar.acik .ustPanel{display:block}

.ustPanel{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--panel);border-bottom:1.5px solid var(--ink);
  box-shadow:var(--golge-b);padding:10px var(--pad) 14px;z-index:36;
}
.ustPanel .ustBaglar{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.ustPanel .ustBaglar a{padding:9px 10px;font-size:15px}
.ustPanel .ustAraclar{display:flex;margin-top:10px;padding-top:10px;
                      border-top:1px solid var(--rule);flex-wrap:wrap}
.topbar{position:sticky}
.topbar .inner{position:relative}

/* ------------------------------------------------------------ alt menu */

.sitefoot{border-top:1.5px solid var(--ink);background:var(--panel);margin-top:48px}
.sitefoot .inner{
  max-width:none;margin:0;padding:22px var(--pad);
  display:flex;gap:14px 30px;flex-wrap:wrap;align-items:baseline;
  font-size:13px;color:var(--ink-soft);
}
.sitefoot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
            transition:color .14s ease,border-color .14s ease}
.sitefoot a:hover{border-color:var(--cut);color:var(--cut)}
.sitefoot .grow{margin-left:auto}
@media(max-width:560px){ .sitefoot .grow{margin-left:0} }

/* ------------------------------------------- genel tiklama/hover cilasi

   Tiklanabilir seylerin tiklanabilir HISSETMESI icin kucuk ama tutarli bir
   geri bildirim: uzerine gelince renk/cerceve, basarken 1px cokme.          */

button, .btn, .go, .kucukDugme, .linkish, summary, a{
  transition:color .14s ease, background-color .14s ease,
             border-color .14s ease, transform .08s ease, opacity .14s ease;
}
button:not(:disabled):active,
.btn:not(:disabled):active,
.go:not(:disabled):active,
.kucukDugme:not(:disabled):active,
.linkish:not(:disabled):active{ transform:translateY(1px) }

/* Panel/kart gibi kutularda hafif vurgu: fareyle gezerken nerede oldugun belli */
.panel:hover{border-color:var(--rule)}
.kart{transition:border-color .14s ease,background-color .14s ease}
.kart:hover{border-color:var(--ink-soft)}
details.acilir > summary:hover{color:var(--cut)}

@media(prefers-reduced-motion:reduce){
  button, .btn, .go, .kucukDugme, .linkish, summary, a, .brand,
  .ustBaglar a, .ustHesap, .temaDugme, #kenarDugme, .kart{ transition:none }
  button:active, .btn:active, .go:active{ transform:none }
}