/* SkyDesk — ortak tasarim tokenlari
 *
 * Uc sayfa (landing, giris, panel) ayni sistemi kullanir. Once her sayfanin
 * kendi :root blogu vardi; landing yeni palete gecince digerleri eski turkuazda
 * kaldi ve ayni marka uc farkli renkle gorundu. Tek kaynak burasi.
 *
 * RENK BIR ROLDUR, SUS DEGIL:
 *   amber    tiklanan sey. Baglan / Giris yap / adim numarasi. Baska hicbir yerde.
 *   turkuaz  guven ve durum. Cevrimici rozeti, onay isareti, bolum cizgisi.
 *   lacivert koyu yuzeyler. Yan panel, ust serit, koyu bolumler.
 *   kemik    kagit. Zemin ve kart yuzeyleri.
 *
 * Ucu de ELPO kurumsal paleti: lacivert #004168, turkuaz #099FA5, amber #F59E0B.
 * Onceki eylem rengi sari (#FFF200) FixDesk'ten kalmaydi; SkyDesk logosunda sari
 * yok ve site ELPO ailesinden kopuyordu.
 *
 * Amber guclu bir renk; her yere serpilirse hicbir yerde dikkat cekmez.
 * Tek isi "buraya bas" demek.
 */

:root{
  /* --- eylem (ELPO amber) --- */
  --signal:#F59E0B;
  --signal-soft:#FCD34D;
  --signal-wash:#FEF6E7;

  /* --- guven / durum (ELPO turkuazi) ---
     teal-ink acik zeminde okunur (4.6:1), teal-lit koyu zeminde (6.2:1).
     Ham --teal beyaz uzerinde 3.0:1 kalir; metin icin kullanilmaz. */
  --teal:#099FA5;
  --teal-ink:#06767C;
  --teal-lit:#3FC9CF;

  /* --- koyu yuzeyler (ELPO lacivert ailesi) --- */
  --navy-950:#001A2C;
  --navy-900:#002B45;
  --navy-800:#003758;
  --navy-700:#004168;
  --navy-500:#195E91;
  --navy-100:#BFD3E3;
  --navy-50:#E6EFF5;

  /* --- metin (ELPO lacivert ailesi) ---
     Metin de siyaha calmaz. Beyaz uzerinde olculen kontrastlar:
     ink 17.8:1, char 14.6:1, mute 7.3:1, soft 5.5:1 — dordu de AA'nin
     ustunde, soft dahil (en acik olan, ipucu metinleri icin). */
  --ink:#001A2C;
  --mute:#3A5A70;
  --soft:#4E6D80;
  --char:#002B45;

  /* --- kagit --- */
  --surface:#FFFFFF;
  --alt:#F6F5EE;
  --bone:#FBFAF4;
  --line:#E4E1D4;

  /* --- durum renkleri (panel) ---
     Eylem rengiyle akraba olmamalari gerekiyor: amber "bas" demek, durum degil.
     busy eskiden koyu kehribardi; eylem rengi amber olunca ayni aileye dustu,
     bu yuzden belirgin sekilde koyu ve kirmiziya calan pas tonuna cekildi
     (beyaz uzerinde 7.4:1). Durumlar rozet olarak cikar, dugme olarak degil. */
  --state-on:#099FA5;
  --state-busy:#9A3412;
  --state-off:#78756A;

  /* --- olculer --- */
  --radius:12px;
  --radius-lg:16px;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04);
  --shadow-bold:0 1px 2px rgba(0,0,0,.05), 0 18px 44px -14px rgba(0,0,0,.20);
  --container:1600px;

  /* --- tipografi ---
     Barlow Condensed basliklarda: dar genislik uzun Turkce basliklari
     kirilmadan tasiyor. Govde Geist.

     --font-body bir sure "sistem yigini" yaziyordu, gerekcesi de "ek istek
     gerektirmez"di. Oysa fonts.css Geist'i zaten kendi sunucumuzdan servis
     ediyor ve ana sayfa onu kullaniyordu; giris ile panel token'i izleyip
     sistem yazi tipinde kaliyordu. Ayni marka iki farkli govde yazi tipiyle
     cikiyordu. Istek uc sayfada da yapiliyor, tasarruf yoktu — sadece sapma. */
  --font-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono","SFMono-Regular",ui-monospace,"Cascadia Mono","Consolas",monospace;
}

/* BURAYA NE GIRER, NE GIRMEZ
 *
 * Girer: uc sayfanin da ayni anlamda kullandigi seyler — tokenlar, dil secici,
 * odak halkasi, durum noktasi. Bunlar tek kaynak olmali, yoksa kayarlar.
 *
 * Girmez: sayfalarin duzen kurallari. 10.08.2026'da olculdu — index'te 164,
 * giris'te 64, panel'de 246 kural var ve bunlarin yalniz 5 + 9 + 5'inin adi
 * ortak; govdesi birebir ayni olan tek kural `*{box-sizing}`. Yani ortada
 * toplanacak tekrar yok. Ortak olan adlar (.side, .main, .nav, .wrap, .brand,
 * .connect) uc sayfada FARKLI seyleri anlatiyor: panel'de .side sol menu,
 * giris'te tanitim sutunu. Bunlari tek yaprakta toplamak tekrari kaldirmaz,
 * cakisma yaratir. Benzer gorunen ilgisiz kodu tek soyutlamaya zorlamak
 * tekrardan pahalidir.
 */

/* Yeni bir sayfa acilirken elle tekrar yazilmasin diye ortak parcalar. */

.fd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14px;font-weight:700;
  padding:13px 20px;border:0;border-radius:var(--radius);cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;
}
/* Birincil eylem. Amber zeminde koyu metin: beyaz metin amber uzerinde
   okunmaz (2.2:1), koyu metin 8.9:1 verir. */
.fd-btn--go{
  background:var(--signal);color:var(--ink);
  box-shadow:0 8px 20px -8px rgba(245,158,11,.55);
}
.fd-btn--go:hover{background:var(--navy-700);color:var(--signal);transform:translateY(-1px)}
.fd-btn--quiet{background:transparent;color:var(--teal-ink);box-shadow:none}
.fd-btn--quiet:hover{background:var(--signal-wash)}

/* Klavyeyle gezenler icin gorunur odak — her zaman turkuaz, hicbir zaman amber,
   cunku odak bir eylem degil bir konum bildirir. */
.fd-focus:focus-visible,
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--teal-ink);outline-offset:2px;
}

/* Durum noktasi */
.fd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.fd-dot--on{background:var(--state-on);box-shadow:0 0 0 3px rgba(9,159,165,.20)}
.fd-dot--busy{background:var(--state-busy);box-shadow:0 0 0 3px rgba(154,52,18,.18)}
.fd-dot--off{background:var(--state-off)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Dil secici — uc sayfada da ayni. Once index.html'in gomulu stil
 * blogundaydi; giris sayfasinda secici bicimsiz cikiyordu, cunku o blok
 * yalniz ana sayfada var. Ortak yaprak dogru yer. */
  .langpick{position:relative}
  .langpick-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
    border-radius:999px;background:var(--surface);color:var(--navy-700);
    font:600 13px var(--font-body);padding:7px 13px;cursor:pointer}
  .langpick-btn:hover{border-color:var(--ink)}
  .langpick-btn img,.langpick-grid img{width:20px;height:14px;border-radius:2px;
    object-fit:cover;box-shadow:0 0 0 1px rgba(0,26,44,.10);flex-shrink:0}
  .langpick-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;
    width:min(430px,calc(100vw - 2rem));max-height:70vh;overflow-y:auto;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 18px 44px rgba(0,26,44,.16);padding:6px}
  .langpick.up .langpick-list{top:auto;bottom:calc(100% + 8px)}
  /* Panelde dugme dar bir kenar cubugunun icinde: saga yaslanan liste ekranin
     soluna tasiyordu. Sigmadiginda sola yaslaniyor (yerlesim i18n.js'te olculuyor). */
  .langpick.left .langpick-list{left:0;right:auto}
  .langpick-ara{width:calc(100% - 12px);margin:2px 6px 6px;padding:8px 11px;
    border:1px solid var(--line);border-radius:9px;background:var(--surface);
    color:var(--ink);font:500 13.5px var(--font-body)}
  .langpick-ara:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
  .langpick-bos{font:500 13px var(--font-body);color:var(--soft);padding:14px 12px}
  .langpick-head{font:700 11px var(--font-body);letter-spacing:.09em;
    text-transform:uppercase;color:var(--soft);padding:10px 12px 6px}
  .langpick-group{font:700 10px var(--font-body);letter-spacing:.12em;
    text-transform:uppercase;color:var(--navy-500);padding:9px 12px 4px}
  .langpick-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .langpick-grid button{display:flex;align-items:center;gap:9px;width:100%;
    background:none;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;
    font:500 13.5px var(--font-body);color:var(--ink);text-align:left}
  .langpick-grid button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .langpick-grid button:hover{background:var(--navy-50)}
  .langpick-grid button.on{background:var(--navy-50);font-weight:700;color:var(--navy-700)}
  /* Cevirisi yarim kalan dil. Secilebilir ama ne kadar oldugu yaninda yazili;
     hicbir sey degistirmeyen bir secenek sunmak yaniltici olurdu. */
  .langpick-grid button.partial{color:var(--soft)}
  .langpick-grid button em{margin-left:auto;font:600 9.5px var(--font-body);
    font-style:normal;letter-spacing:.04em;color:var(--soft);
    border:1px solid var(--line);border-radius:4px;padding:1px 4px;flex-shrink:0}
  .langpick-note{font:400 11.5px/1.5 var(--font-body);color:var(--soft);
    border-top:1px solid var(--line);margin-top:6px;padding:9px 12px 6px}
  @media(max-width:520px){.langpick-list{width:calc(100vw - 2rem)}
    .langpick-grid{grid-template-columns:1fr}
    .langpick-btn span{display:none}}

/* Çerez şeridi — ölçüm izni. Ekranın altına oturur, içeriği örtmez;
   klavyeyle gezilebilir ve iki seçenek de aynı ağırlıkta durur:
   reddetmek kabul etmek kadar kolay olmalı (KVKK). */
.cerez-serit{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;padding:18px 24px;
  background:var(--char);color:#fff;
  border-top:1px solid rgba(255,255,255,.14)}
.cerez-serit p{margin:0;max-width:70ch;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.88)}
.cerez-serit a{color:#3FC9CF;text-underline-offset:3px}
.cerez-dugmeler{display:flex;gap:10px;flex-shrink:0}
.cerez-serit button{font:inherit;font-size:.92rem;cursor:pointer;
  padding:9px 18px;border-radius:6px;border:1px solid transparent}
.cerez-hayir{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cerez-hayir:hover{border-color:rgba(255,255,255,.6)}
.cerez-evet{background:var(--teal);color:#fff}
.cerez-evet:hover{background:#0BB3BA}
.cerez-serit button:focus-visible{outline:2px solid #3FC9CF;outline-offset:2px}
@media(max-width:640px){.cerez-serit{flex-direction:column;align-items:flex-start}
  .cerez-dugmeler{width:100%}.cerez-dugmeler button{flex:1}}