/* SOLVEON PULSE — PANEL ORTAK KATMANI (UI-TUR, 9 Agu 2026)
 *
 * NEDEN AYRI DOSYA: tokens.css ve components.css sites/_shared/css/'in BIREBIR
 * kopyasidir (panel_v3_nav_test.sh bolum E bunu diff ile olcer; sites/ CANLI ve
 * dokunulmaz). Panelin kendi kabuk kurallari oraya yazilirsa ya kopya sapar
 * (nobetci kirmizi) ya da kurumsal siteye sizar. Bu dosya PANELE AITTIR:
 * tokens + components'ten SONRA, sayfa <style>'indan ONCE yuklenir.
 *
 * Icerik: 1 sayfa genisligi (tek kaynak) · 2 kontrol yuksekligi token'i
 * (--ctl-h) · 3 form satiri (.frow) · 4 hero iskeleti (ilk cizim yer tutucusu).
 *
 * KURAL: sayfa <style> bloklarina yeniden max-width / height / min-height
 * yamasi YAZILMAZ — yogunlugu degisen yerler --ctl-h'i kendi kapsaminda
 * ezer (ornek: ayarlar.html tarife tablosu 36 px). Nobetci: panel_v3_nav_test.sh.
 */

/* ─────────────────────────────────────────────────────────────────────
   1. SAYFA GENISLIGI — TEK KAYNAK
   Onceden her sayfanin <style>'inda elle yaziliydi ve uc ayri deger
   dolasiyordu (1440 / 1100 / 960). Onur (9 Agu turu): "hepsi sayfanin
   tamaminin kullanmali". Sidebar 236 px zaten body padding-left ile
   dusulur; main kalan alanda ortalanir.
   ───────────────────────────────────────────────────────────────────── */
main {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-5);
}

/* ─────────────────────────────────────────────────────────────────────
   2. KONTROL YUKSEKLIGI — TEK TOKEN
   Sorun (Onur, 9 Agu): ayni satirdaki input ~50 px, select ~25 px.
   Sebep WebKit'te `select`/`date` gibi native kontrollerin `min-height`i
   YOK SAYIP kendi yuksekligini dayatmasi. Cozum: her kontrol ayni
   token'dan SABIT height alir. min-height ile karisik kullanilmaz —
   height kazanir, min-height sessizce olur.
   Yogunlugu farkli bir alan (hucre-ici tablo) --ctl-h'i kendi kapsaminda
   ezer; boylece "sayfaya ozel yukseklik yamasi" diye bir sey kalmaz.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --ctl-h-base: 44px;   /* Apple HIG dokunma alani — panel varsayilani */
  --ctl-h-sm: 36px;     /* yogun baglam: tablo hucresi, satir ici rozet buton */
  /* Yururlukteki yukseklik. Kapsam bunu ezer, sayi yeniden YAZILMAZ. */
  --ctl-h: var(--ctl-h-base);
}

.s-input,
.s-select,
.s-btn {
  height: var(--ctl-h);
  /* min-height SIFIRLANIR (olcumle yakalandi, 9 Agu): components.css bu uc
     kontrole min-height:44px veriyor ve min-height, height'i EZER. Sifirlanmazsa
     --ctl-h'i kucuk degere ceken her kapsam (tarife tablosu, kurulum tablosu)
     sessizce 44 px'te kalirdi — token bir ise yaramazdi. */
  min-height: 0;
}
/* Textarea tek satirlik degil: token TABANDIR, buyumesine izin verilir. */
.s-textarea {
  height: auto;
  min-height: calc(var(--ctl-h) * 2);
}
/* --sm bir YUKSEKLIK yamasi degil, token secimidir: .s-btn'deki
   height:var(--ctl-h) elemanin KENDI degerine bakar. */
.s-btn--sm {
  --ctl-h: var(--ctl-h-sm);
}
/* Devre disi buton: components.css'te karsiligi yok, sayfalar tek tek
   `opacity:.5` yaziyordu (raporlar .btn[disabled], kurulum button:disabled).
   Tek yerde. */
.s-btn:disabled,
.s-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* SELECT NATIVE GORUNUMDEN CIKARILIR (9 Agu turu).
   appearance:none olmadan WebKit yukseklik dayatmasi kirilamaz; ok isareti
   kaybolacagi icin kendi chevron'umuzu koyuyoruz. Renk data-URI'ye gomulu
   (SVG'de currentColor calismaz) — temaya gore iki kural. */
.s-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;   /* chevron'un yeri — metin okun altina girmesin */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
/* Tema KULLANICI SECIMIDIR (tokens.css: html.dark / .dark), sistem tercihi
   degil — prefers-color-scheme ile eslemek acik temada soluk ok birakirdi. */
html.dark .s-select,
.dark .s-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Tarih/saat kutulari da native yukseklik dayatir; ayrica WebKit'te ic
   alanlar dikeyde ortalanmaz — satir icinde asagi kaciyordu. */
.s-input[type="date"],
.s-input[type="month"],
.s-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}
.s-input[type="date"]::-webkit-date-and-time-value,
.s-input[type="month"]::-webkit-date-and-time-value,
.s-input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────
   3. FORM SATIRI (.frow)
   Dort sayfada birbirinin kopyasi olarak duruyordu (iso.css, raporlar,
   demand, yetkiler). Tek tanim: satirdaki HER kontrol ayni yukseklikte
   ve ayni taban hizasinda durur.
   ───────────────────────────────────────────────────────────────────── */
.frow {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
/* Satirda kutular icerigine gore daralir; genisligi sayfa verir.
   ust sinir (tur 4): select'e SABIT px genislik verilirse uzun secenek KIRPILIR
   ("Ozgul tuketim (kWh/birim uretim", "azalt (iyilesme" — canli ekranda
   goruldu). width:auto tarayiciya en uzun secenege gore olcturur; max-width
   ise tek bir alanin satiri yutmasini engeller. */
.frow .s-input,
.frow .s-select {
  width: auto;
  max-width: 420px;
}
/* Satir icindeki buton --sm rozetli olsa bile SATIR yuksekligine uyar:
   kabul kriteri "ayni satirdaki input/select/buton piksel-esit". */
.frow .s-btn {
  --ctl-h: var(--ctl-h-base);
}
/* Satir ici kisa etiket ("donem", "—", "termin"): tek basina anlasilmayan
   kutulara on-ek. Sayfa basindaki "Donem" etiketiyle ayni dil. */
.frow-lbl {
  font-size: var(--fz-sm);
  color: var(--text-muted);
  font-weight: var(--fw-semi);
}

/* ─────────────────────────────────────────────────────────────────────
   4. HERO ISKELETI — ilk cizimde yer tutucu
   Sorun (Onur, 9 Agu turu): genel bakis once kartsiz cizilip API donunce
   kartlar beliriyordu; arada bos bir an vardi. Iskelet BOS BLOKTUR —
   icinde sayi da, "—" de yoktur (CLAUDE.md: sahte veri yok). Veri gelince
   kartlarin yerini gercek deger alir, gelmezse hero tamamen gizlenir.
   ───────────────────────────────────────────────────────────────────── */
.hero-card.is-skeleton {
  border-left-color: var(--ink-200);
}
.skel {
  background: var(--ink-100);
  border-radius: 6px;
}
.skel--label { width: 42%; height: 10px; }
.skel--value { width: 64%; height: 26px; }
.skel--sub   { width: 78%; height: 9px; margin-top: auto; }

/* Shimmer opsiyoneldir: hareket tercihi kapaliysa sade gri blok kalir. */
@media (prefers-reduced-motion: no-preference) {
  .skel {
    background-image: linear-gradient(90deg,
      transparent 0%, var(--ink-200) 50%, transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.5s ease-in-out infinite;
  }
  @keyframes skel-shimmer {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
  }
}