/* web/assets/site.css
 * ------------------------------------------------------------------
 * FinAgent herkese açık web sitesi (anasayfa.php, nasil-calisir.php,
 * fiyatlandirma.php, sss.php, guvenlik.php, iletisim.php, basari.php)
 * için PAYLAŞILAN stil dosyası. Admin panelin web/assets/style.css'i
 * ile KARIŞTIRILMAMALI — o girişli/korunan sayfalar için, bu ise
 * herkese açık tanıtım siteleri için.
 *
 * 2026-08 revizyon (kurumsal çok sayfalı yapı): ÖNCEDEN her sayfa
 * kendi <style> bloğunu taşıyordu ve ÜÇ farklı font ailesi
 * (Newsreader serif + IBM Plex Sans + IBM Plex Mono) başlık/gövde/
 * etiket arasında sürekli değişiyordu — kullanıcı talebi: "yazı fontu
 * sayfanın içinde sürekli değişmemeli". Artık TEK font ailesi
 * kullanılıyor, hiyerarşi ağırlık (weight) ve boyutla kuruluyor.
 * Mono SADECE tablo/gerçek sayısal veri (oy sayımı gibi) için, çok
 * kısıtlı kullanılıyor.
 *
 * 2026-08-28 revizyon (kullanıcı talebi: "sayfayı app'teki aydınlık
 * moda benzer tema mimarisine getir"): renk paleti ve font artık
 * lib/theme.dart'taki AppPalette.light ile BİREBİR eşleşiyor (aynı
 * arkaplan/kart/kenarlık/metin/vurgu renkleri, aynı Manrope fontu —
 * bkz. Task #257'de uygulamanın "GitHub paleti" izlenimini kırmak için
 * geçtiği eflatun/indigo tonlar). Web sitesi ve uygulama artık aynı
 * marka kimliğini paylaşıyor; --premium sadece web'e özgü kalıyor
 * (uygulamanın paletinde "premium" alanı yok, kendi mor vurgusu
 * korunuyor ama arkaplanı --card ile aynı yapıldı ki lavanta tonuyla
 * uyumlu kalsın).
 * ------------------------------------------------------------------
 */
:root{
  --paper:#faf8ff;
  --card:#f1edfb;
  --ink:#211d2e;
  --ink2:#6b6280;
  --ink3:#948bab;
  --rule:#ddd4f0;
  --rule2:#ece4f7;
  --yes:#12946b;
  --yes-bg:#e3f4ee;
  --no:#d23f3f;
  --no-bg:#fbe9e9;
  --blue:#3568d4;
  --flag:#b8860b;
  --flag-bg:#faf1db;
  --premium:#7c3aed;
  --premium-bg:#f1edfb;
  --shadow:0 1px 2px rgba(33,29,46,.05), 0 12px 28px -18px rgba(33,29,46,.35);
  /* TEK font ailesi — app'in Manrope'una eşleşiyor (bkz. yukarıdaki not). */
  --font:"Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px}
/* 2026-09-01: İngilizce dil seçeneği (Task #373) — bkz. assets/site-i18n.js
   dosya başlığındaki "FLASH ÖNLEME" notu. _site_head.php'deki senkron
   inline script, localStorage'da 'en' varsa bu sınıfı <html>'e ekler;
   site-i18n.js çeviriyi bitirince kaldırır. */
html.fa-lang-loading body{visibility:hidden}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* ---------- eyebrow / ortak başlık düzeni (artık mono DEĞİL, sans + harf aralığı) ---------- */
.eyebrow{
  font-family:var(--font); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink3);
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)}

h1,h2,h3,h4{font-family:var(--font); margin:0; color:var(--ink)}
h1{font-weight:700; font-size:clamp(32px,5.2vw,50px); line-height:1.1; letter-spacing:-.02em; margin:0 0 18px}
h2{font-weight:700; font-size:clamp(24px,3.2vw,32px); line-height:1.2; letter-spacing:-.01em; margin:0 0 10px}
h3{font-weight:600; font-size:16px; margin:0 0 6px}
.sec-lead{color:var(--ink2); font-size:15.5px; max-width:60ch; margin:0 0 28px}
.page-lead{color:var(--ink2); font-size:17px; max-width:64ch; margin:0 0 8px; line-height:1.6}

/* ---------- üst şerit (marka gradyanı) ---------- */
.topbar-accent{height:3px; background:linear-gradient(90deg,var(--ink),var(--blue) 55%,var(--yes))}

/* ---------- sol panel navigasyonu (2026-08 revizyon #3) ----------
 * ÖNCEDEN yatay bir topbar'dı (sekmeler üstte). Kullanıcı talebi:
 * "diğer sayfa hreflerini üstte değil solda bir panel içinde
 * görmek isterim". Masaüstünde (>=900px) kalıcı/sabit bir sol panel
 * (aside.sidebar); mobilde (<900px) ince bir üst şerit + hamburger ile
 * açılan soldan kayan (off-canvas) panel. .site-shell = flex konteyner
 * (sidebar + site-main); .site-main içinde her sayfanın kendi içeriği
 * (hero, section'lar, footer) akar — bkz. _site_nav.php / _site_foot.php.
 * ------------------------------------------------------------------ */
.site-shell{display:flex; align-items:flex-start}
.brand{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-family:var(--font); font-weight:700; font-size:16px;
  letter-spacing:.02em; text-decoration:none; color:var(--ink);
}
.brand-logo{width:26px; height:26px; border-radius:7px; display:block; box-shadow:0 2px 6px rgba(33,29,46,.18)}
.brand i{font-style:normal; color:var(--yes)}

/* mobil üst şerit — sadece <900px'te görünür (bkz. medya sorgusu) */
.sidebar-topbar{
  display:none; align-items:center; justify-content:space-between;
  height:58px; padding:0 18px; position:sticky; top:3px; z-index:45;
  background:rgba(238,242,247,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.nav-toggle{
  flex:none; width:38px; height:38px; border-radius:9px;
  border:1px solid var(--rule); background:var(--card); font-size:18px; cursor:pointer; color:var(--ink);
}
.sidebar-backdrop{display:none}

.sidebar{
  flex:0 0 260px; width:260px; position:sticky; top:3px;
  height:calc(100vh - 3px); overflow-y:auto;
  display:flex; flex-direction:column;
  padding:26px 16px 20px; border-right:1px solid var(--rule);
  background:linear-gradient(180deg,var(--card),var(--paper) 60%);
}
.sidebar-brand-block{padding:2px 10px 20px; margin-bottom:6px; border-bottom:1px solid var(--rule2)}
.sidebar-brand{margin-bottom:6px}
.sidebar-tagline{
  margin:0; font-size:11.5px; font-weight:500; color:var(--ink3);
  letter-spacing:.03em;
}
.sidebar-nav{display:flex; flex-direction:column; gap:3px}
.sidebar-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; color:var(--ink2); text-decoration:none;
  font-size:14.5px; font-weight:500; white-space:nowrap;
  border-left:3px solid transparent;
  transition:background .13s ease, color .13s ease, border-color .13s ease;
}
.sidebar-nav-ico{flex:none; font-size:15px; width:20px; text-align:center; line-height:1}
.sidebar-nav a:hover{background:var(--rule2); color:var(--ink)}
.sidebar-nav a.active{
  background:var(--card); color:var(--ink); font-weight:600;
  border-left-color:var(--blue); box-shadow:var(--shadow);
}
/* 2026-09-01: İngilizce dil seçeneği (Task #373) — kullanıcı talebi:
   "iletişim yazan yerin hemen alt kısmına bir buton koy". .sidebar-nav'ın
   HEMEN ALTINDA, .sidebar-cta-block'un (margin-top:auto ile en alta
   yapışan) ÜSTÜNDE duruyor — bkz. _site_nav.php'deki yerleşim. */
/* 2026-09-04: kullanıcı talebi — "İngilizce butonunu güzelleştir". Düz
   dikdörtgen çerçeveden, marka mavisiyle vurgulanan bir hap (pill) anahtara
   geçildi; aria-pressed="true" (İngilizce aktif) durumunda dolgu renk
   tersine döner ki buton kendi durumunu da anlatsın, sadece dekor olmasın. */
.sidebar-lang-toggle{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:12px 4px 0; padding:10px 14px; border-radius:999px; width:calc(100% - 8px);
  border:1.5px solid var(--rule); background:var(--card); color:var(--ink2);
  font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:.01em;
  cursor:pointer; box-shadow:var(--shadow);
  transition:background .15s ease, color .15s ease, border-color .15s ease,
             transform .12s ease, box-shadow .15s ease;
}
.sidebar-lang-toggle::before{
  content:"🌐"; font-size:13px; line-height:1; transition:transform .2s ease;
}
.sidebar-lang-toggle:hover{
  background:var(--paper); color:var(--ink); border-color:var(--blue);
  transform:translateY(-1px);
}
.sidebar-lang-toggle:hover::before{transform:rotate(-14deg) scale(1.08)}
.sidebar-lang-toggle:active{transform:translateY(0)}
.sidebar-lang-toggle[aria-pressed="true"]{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.sidebar-lang-toggle[aria-pressed="true"]:hover{
  background:#2c56b3; border-color:#2c56b3; color:#fff;
}
.sidebar-cta-block{margin-top:auto; padding-top:18px}
.sidebar-cta{width:100%; justify-content:center; text-align:center}
.site-main{flex:1; min-width:0}

@media (max-width:899px){
  .site-shell{display:block}
  .sidebar-topbar{display:flex}
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(33,29,46,.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .sidebar-backdrop.open{opacity:1; pointer-events:auto}
  .sidebar{
    position:fixed; top:0; left:0; z-index:60; width:82%; max-width:300px;
    height:100vh;
    background:var(--paper); border-right:1px solid var(--rule);
    box-shadow:20px 0 40px rgba(33,29,46,.18);
    transform:translateX(-100%); transition:transform .22s ease;
    padding-top:24px;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-brand-block{display:none}
  .site-main{width:100%}
}

/* ---------- ortak buton ---------- */
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:999px; text-decoration:none;
  font-family:var(--font); font-size:14.5px; font-weight:600; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:linear-gradient(100deg,var(--ink) 0%,var(--blue) 62%,var(--yes) 130%); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--rule); color:var(--ink)}
.btn-ghost:hover{background:var(--card); border-color:var(--rule)}

/* ---------- hero ---------- */
.hero{padding:56px 0 20px}
.hero-grid{display:grid; gap:38px; align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr .9fr; gap:54px} }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--yes);
  background:var(--yes-bg); border:1px solid rgba(18,148,107,.22);
  border-radius:999px; padding:6px 14px; margin:0 0 18px;
}
h1 em{font-style:normal; color:var(--yes)}
.lead{color:var(--ink2); font-size:17px; line-height:1.65; max-width:48ch; margin:0 0 28px}

/* örnek bir gün: sayım rayı */
.rail{margin-top:34px; padding-top:20px; border-top:1px solid var(--rule)}
.rail-label{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin:0 0 12px}
.rail-row{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.rail-num{font-family:var(--mono); font-size:26px; font-weight:600; line-height:1}
.rail-num.pass{color:var(--yes)}
.rail-cap{font-size:13.5px; color:var(--ink2)}
.rail-arrow{color:var(--ink3); font-size:15px}

/* telefon çerçevesi
 * 2026-08 bug fix: bu sınıf hem <div class="phone"> (hero) hem de
 * <span class="phone"> (galeri, .shot button içinde) olarak kullanılıyordu.
 * display TANIMLANMAMIŞTI, yani span hali varsayılan "inline" kalıyordu —
 * inline kutularda width/max-width UYGULANMAZ (CSS spec), ama padding ve
 * background YİNE DE boyanır ve satır kutusunun üstüne/altına taşarak
 * "garip siyahlıklar" olarak görünür. Kullanıcı ekran görüntüsünde
 * bildirdiği sorunun kök nedeni buydu. Çözüm: .phone'u her zaman block
 * yap + img'yi object-fit:cover ile çerçeveye tam oturt (gerçek ekran
 * görüntüsü boyutu HTML width/height niteliğiyle tam eşleşmese bile
 * artık boşluk kalmaz, taşan kısım kırpılır).
 */
.phone{
  display:block; position:relative; width:100%; max-width:270px; margin:0 auto;
  aspect-ratio:560/1156;
  padding:9px; border-radius:30px;
  background:linear-gradient(160deg,#2e2a42,#171522);
  box-shadow:0 30px 60px -30px rgba(33,29,46,.65), 0 2px 6px rgba(33,29,46,.15);
}
.phone::before{
  content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:52px; height:4px; border-radius:99px; background:rgba(255,255,255,.22); z-index:2;
}
.phone img{border-radius:22px; width:100%; height:100%; object-fit:cover; display:block}
.hero-phone{position:relative}
.hero-phone .phone{max-width:286px}

/* ---------- genel section düzeni ---------- */
section{padding:52px 0}
.section-border{border-top:1px solid var(--rule)}
.section-tint{background:linear-gradient(180deg,var(--card),var(--paper))}

/* ---------- App Store tanıtım şeridi ---------- */
/* 2026-09-09 (kullanıcı talebi): "anasayfa.php ye app store linkimizi
   güzel bir görselle koy" — hero'nun hemen altına eklenen tek görsellik
   duyuru şeridi (bkz. anasayfa.php ".appstore-cta"). Görsel kendi
   başlık/rozet/telefon illüstrasyonunu barındırdığı için burada sadece
   çerçeve + hover efekti tanımlı. */
.appstore-cta-link{
  display:block; border-radius:28px; overflow:hidden;
  box-shadow:0 20px 45px -22px rgba(33,29,46,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.appstore-cta-link:hover, .appstore-cta-link:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 26px 55px -18px rgba(33,29,46,.34);
}
.appstore-cta-link img{display:block; width:100%; height:auto}

/* ---------- yolculuk / adımlar ---------- */
.steps{display:grid; gap:0}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:20px;
  padding:22px 0; border-bottom:1px solid var(--rule2);
}
.step:last-child{border-bottom:0}
.step-no{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink3);
  padding-top:3px; letter-spacing:.04em;
}
.step p{margin:0; color:var(--ink2); font-size:14.5px; max-width:64ch; line-height:1.6}
.step-body{min-width:0}
.step-detail{
  margin-top:10px; font-size:13.5px; color:var(--ink2); background:var(--rule2);
  border-radius:10px; padding:12px 14px; max-width:64ch; line-height:1.55;
}

/* ---------- oy pusulası (imza öğe) ---------- */
.ballot{
  margin-top:18px; background:var(--card); border:1px solid var(--rule);
  border-radius:14px; padding:20px; box-shadow:var(--shadow); max-width:620px;
}
.ballot-head{display:flex; align-items:flex-start; gap:12px; justify-content:space-between}
.ballot-head h4{font-size:15.5px; font-weight:600; margin:0 0 4px; line-height:1.35}
.ballot-src{font-size:11.5px; color:var(--ink3); letter-spacing:.02em}
.tag{
  flex:none; font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--flag);
  background:var(--flag-bg); border:1px solid rgba(184,134,11,.25);
  padding:4px 9px; border-radius:6px;
}

.votes{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 0; padding:0}
.vote{
  display:flex; align-items:center; gap:6px; padding:6px 10px 6px 9px;
  border-radius:999px; font-size:12.5px; border:1px solid var(--rule);
  background:var(--card); color:var(--ink2);
}
.vote b{font-weight:600}
.vote.yes{background:var(--yes-bg); border-color:rgba(18,148,107,.28); color:var(--yes)}
.vote.no{background:var(--no-bg); border-color:rgba(210,63,63,.25); color:var(--no)}
/* 2026-09-23: bes rozet varken sabit repeat(5,1fr) sutunlari icerikten
   dar olamadigi icin son rozet kartin disina tasiyordu. minmax(0,1fr)
   sutunun kuculmesine izin verir; rozet icindeki metin gerekirse alt
   satira gecer, tasma olmaz. */
@media (min-width:680px){
  .votes{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
  .vote{
    justify-content:center; flex-wrap:wrap; text-align:center; min-width:0;
    padding:6px 6px; font-size:11.5px; line-height:1.35; white-space:normal;
  }
  .vote b{white-space:nowrap}
}

.tally{margin-top:16px}
.bar{display:flex; height:7px; border-radius:99px; overflow:hidden; background:var(--rule2)}
.bar span{display:block; height:100%}
.bar .b-yes{background:var(--yes)}
.bar .b-no{background:var(--no)}
.tally-row{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.03em;
}
.tally-row .t-yes{color:var(--yes)}
.tally-row .t-no{color:var(--no)}

.verdict{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--rule2);
}
.stamp{
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--yes);
  border:1.5px solid var(--yes); border-radius:6px; padding:5px 10px;
  transform:rotate(-2deg);
}
.stamp.no{color:var(--no); border-color:var(--no)}

/* ---------- nasil-calisir.php: oylama bölümü illüstrasyonu ---------- */
.council-illustration{
  margin:22px 0 26px; max-width:640px; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--rule);
}
.council-illustration img{width:100%; height:auto; display:block}
.council-illustration figcaption{
  padding:12px 16px; font-size:12.5px; color:var(--ink2); background:var(--card);
  border-top:1px solid var(--rule2);
}
.verdict-meta{font-size:13px; color:var(--ink2)}
.verdict-meta code{font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--rule2); padding:1px 5px; border-radius:4px}
.reason{
  margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink2);
  padding-left:14px; border-left:2px solid var(--rule);
}

/* ---------- ekran galerisi ---------- */
.strip{
  display:flex; gap:20px; overflow-x:auto; padding:4px 20px 26px;
  margin:0 -20px; scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.shot{flex:0 0 232px; margin:0; scroll-snap-align:center}
@media (min-width:700px){ .shot{flex-basis:250px} }
.shot button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  font:inherit; color:inherit;
}
.shot figcaption{margin-top:16px}
.shot h3{margin:0 0 4px}
.shot p{margin:0; font-size:13px; color:var(--ink2); line-height:1.5}
.strip-hint{font-size:12px; letter-spacing:.04em; color:var(--ink3); margin:0}

/* ---------- kart ızgaraları (özellikler / karşılaştırma / SSS) ---------- */
.grid-cards{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:14px; overflow:hidden}
@media (min-width:620px){ .grid-cards.cols-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:940px){ .grid-cards.cols-3{grid-template-columns:repeat(3,1fr)} }
.card-cell{background:var(--card); padding:22px}
.card-cell h3{display:flex; align-items:center; gap:9px}
.card-cell h3 span{font-size:16px}
.card-cell p{margin:0; font-size:13.5px; color:var(--ink2); line-height:1.55}

/* ---------- fiyatlandırma tablosu ---------- */
.plans{display:grid; gap:18px; margin-top:28px}
@media (min-width:760px){ .plans{grid-template-columns:1fr 1fr} }
/* 2026-08-28: fiyatlandirma.php'ye üçüncü kart (Premium Yıllık) eklendi —
   .plans'ın varsayılan 2 sütunlu kuralını DEĞİŞTİRMEDEN (anasayfa.php hâlâ
   2 kart kullanıyor) sadece bu değiştirici sınıfla 3 sütuna geçiyor. */
.plans.cols-3{grid-template-columns:1fr}
@media (min-width:760px){ .plans.cols-3{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .plans.cols-3{grid-template-columns:repeat(3,1fr)} }
.plan{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--rule); border-radius:16px;
  padding:28px; box-shadow:var(--shadow);
}
/* Free: düz beyaz zemin — "sade, temel" hissi. 2026-08-28: kullanıcı
   talebiyle var(--card) (lavanta tonlu) yerine saf beyaz yapıldı, ki
   Premium kartlarının lavanta/eflatun vurgusundan bilinçli olarak
   ayrışsın. */
.plan-free{
  background:
    linear-gradient(160deg, rgba(53,104,212,.05), rgba(53,104,212,.01) 60%),
    #ffffff;
}
/* Premium: mavi neon + kırmızı + yeşil, saydam bir üçlü gradyan —
   diğer iki rengi konseyin "kabul/red" oy renkleriyle (bilinçli) eşleştirip
   markanın kendi paletinden çıkıyor, rastgele renk değil. */
.plan.highlight{
  border-color:rgba(53,104,212,.35);
  background:
    linear-gradient(135deg, rgba(53,104,212,.14), rgba(210,63,63,.05) 45%, rgba(18,148,107,.12)),
    var(--card);
  box-shadow:
    0 1px 2px rgba(33,29,46,.05),
    0 20px 40px -20px rgba(53,104,212,.35),
    0 0 0 1px rgba(53,104,212,.10) inset;
}
.plan.highlight::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:220px; height:220px;
  background:radial-gradient(circle, rgba(53,104,212,.22), transparent 70%);
  pointer-events:none;
}
/* Yıllık Premium: aylık karttan (mavi/kırmızı/yeşil oy paleti) bilinçli
   olarak ayrışan, eflatun + altın "elite" bir zemin — kullanıcı talebi:
   "yıllık fiyatın arkaplanını daha elit bir renk paletiyle boya".
   --premium (eflatun) + --flag (altın) markanın kendi vurgu renkleri,
   rastgele seçilmedi. */
.plan-annual{
  border-color:rgba(124,58,237,.4);
  background:
    linear-gradient(135deg, rgba(124,58,237,.18), rgba(184,134,11,.11) 55%, rgba(124,58,237,.05)),
    var(--card);
  box-shadow:
    0 1px 2px rgba(33,29,46,.05),
    0 22px 44px -20px rgba(124,58,237,.42),
    0 0 0 1px rgba(124,58,237,.14) inset;
}
.plan-annual::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:220px; height:220px;
  background:radial-gradient(circle, rgba(184,134,11,.24), transparent 70%);
  pointer-events:none;
}
.plan-annual .plan-name{color:var(--premium)}
.plan-name{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:0 0 6px}
.plan.highlight .plan-name{color:var(--premium)}
.plan-price{font-size:28px; font-weight:700; margin:0 0 4px}
.plan-price small{font-size:14px; font-weight:500; color:var(--ink3)}
.plan-sub{font-size:13.5px; color:var(--ink2); margin:0 0 20px}
.plan-list{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:14px}
/* 2026-08-28: kullanıcı raporu — sarılan (wrap eden) satırların bir
   önceki maddenin devamı mı yoksa yeni bir madde mi olduğu belli
   olmuyordu. Kök neden: satır-içi line-height (gövdeden miras 1.6) ile
   maddeler arası boşluk (eskiden 11px) neredeyse aynıydı, göz ikisini
   ayırt edemiyordu. Artık madde-içi satırlar SIKI (line-height:1.35),
   maddeler arası boşluk ise BELİRGİN ŞEKİLDE DAHA GENİŞ (gap:14px) —
   sarılan bir satır kendi maddesine yapışık dururken, yeni madde
   görünür bir boşlukla ayrılıyor. */
.plan-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.35; color:var(--ink)}
.plan-list li.no{color:var(--ink3)}
.plan-list .ico{flex:none; width:18px; text-align:center; font-weight:700}
.plan-list li:not(.no) .ico{color:var(--yes)}
.plan-list li.no .ico{color:var(--ink3)}
.plan-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--premium); background:var(--premium-bg); border-radius:999px; padding:4px 10px; margin-bottom:14px;
}

/* ---------- SSS akordeon ---------- */
.faq{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:14px; overflow:hidden; margin-top:8px}
.faq-item{background:var(--card)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; font-weight:600; font-size:15px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex:none; color:var(--ink3); font-size:20px; font-weight:400; transition:transform .15s ease}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px; margin:0; font-size:14px; color:var(--ink2); line-height:1.65; max-width:70ch}

/* ---------- güvenlik sayfası: madde listesi ---------- */
.trust-grid{display:grid; gap:16px; margin-top:26px}
@media (min-width:760px){ .trust-grid{grid-template-columns:repeat(2,1fr)} }
.trust-item{
  background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:22px;
  display:flex; gap:14px; align-items:flex-start;
}
.trust-ico{
  flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--yes-bg); color:var(--yes); font-size:18px;
}
.trust-item h3{margin:0 0 4px}
.trust-item p{margin:0; font-size:13.5px; color:var(--ink2); line-height:1.6}

/* ---------- uyarı kutusu (paylaşılan) ---------- */
.disclaimer{
  background:var(--flag-bg); border:1px solid rgba(184,134,11,.28);
  border-radius:12px; padding:18px 20px; font-size:13.5px; line-height:1.6; color:#6b4c00;
  max-width:800px;
}
.disclaimer b{color:#4d3700}
.note-box{
  background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:18px 20px;
  font-size:13.5px; line-height:1.6; color:var(--ink2); max-width:800px;
}

/* ---------- iletişim ---------- */
/* 2026-08: iletişim kutusu tek başına dar/boş kalıyordu — kullanıcı
   isteğiyle yanına ikinci bir kutu ("Hızlı Bağlantılar") eklendi,
   .contact-grid ile iki kutu yan yana. */
.contact-grid{display:grid; gap:20px; grid-template-columns:1fr; max-width:900px}
@media (min-width:760px){ .contact-grid{grid-template-columns:1.05fr .95fr} }
.contact-card{
  background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:30px;
  box-shadow:var(--shadow); max-width:560px;
}
.contact-grid .contact-card{max-width:none; width:100%}
.contact-card-title{margin:0 0 4px}
.contact-card-sub{margin:0 0 16px; font-size:13.5px; color:var(--ink2)}
.contact-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--rule2)}
.contact-row:last-child{border-bottom:0}
.contact-ico{
  flex:none; width:40px; height:40px; border-radius:10px; background:var(--rule2);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.contact-row h3{margin:0 0 2px}
.contact-row p{margin:0; font-size:13.5px; color:var(--ink2)}
.contact-row a.mail{color:var(--blue); text-decoration:none; font-weight:600}
.contact-row a.mail:hover{text-decoration:underline}

/* ---------- iletişim formu (2026-08-26: mailto: yerine gerçek form) ---------- */
.form-field{margin:0 0 16px}
.form-field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 6px}
.form-input,.form-textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--rule);
  background:var(--card); color:var(--ink); font-family:var(--font); font-size:14.5px;
  transition:border-color .15s ease;
}
.form-input:focus,.form-textarea:focus{outline:none; border-color:var(--blue)}
.form-textarea{resize:vertical; min-height:120px; line-height:1.5}
.form-submit{border:0; cursor:pointer; width:100%; justify-content:center}
.form-msg{margin:14px 0 0; font-size:13.5px; line-height:1.5; padding:12px 14px; border-radius:10px; display:none}
.form-msg.ok{display:block; background:var(--yes-bg); color:var(--yes); border:1px solid rgba(18,148,107,.25)}
.form-msg.err{display:block; background:var(--no-bg); color:var(--no); border:1px solid rgba(210,63,63,.25)}

/* ---------- alt bilgi ---------- */
.foot{
  border-top:1px solid var(--rule); padding:30px 0 44px;
  display:flex; flex-direction:column; gap:22px;
}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px}
.foot-brand img{width:22px; height:22px; border-radius:6px}
.foot-cols{display:flex; gap:44px; flex-wrap:wrap}
.foot-col h4{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin:0 0 10px}
.foot-col a{display:block; font-size:13.5px; color:var(--ink2); text-decoration:none; margin:0 0 8px}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--rule2);
  font-size:12px; color:var(--ink3);
}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}

/* ---------- büyütme (lightbox) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none;
  background:rgba(33,29,46,.88);
  align-items:center; justify-content:center; padding:26px 20px;
}
.lightbox[open]{display:flex}
.lightbox img{max-height:82vh; width:auto; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lightbox p{margin:14px 0 0; text-align:center; color:#e6e0f5; font-size:13px; letter-spacing:.03em}
.lb-close{
  position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff;
  font-size:18px; cursor:pointer; line-height:1;
}

/* ---------- hareket ---------- */
.anim .vote{opacity:0; transform:translateY(6px)}
.anim .stamp{opacity:0; transform:scale(1.3) rotate(-12deg)}
.anim .ballot.in .vote{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease}
.anim .ballot.in .vote:nth-child(2){transition-delay:.12s}
.anim .ballot.in .vote:nth-child(3){transition-delay:.24s}
.anim .ballot.in .vote:nth-child(4){transition-delay:.36s}
.anim .ballot.in .vote:nth-child(5){transition-delay:.48s}
/* 2026-09-23: eskiden .b-yes/.b-no genisligi 60/40 olarak !important ile
   sabitleniyordu -- HTML'deki gercek oy oranlarini (or. 80/20, 100/0)
   eziyordu. Artik oranlara dokunmadan cubugun tamami soldan buyuyor. */
.anim .ballot .bar{transform:scaleX(0); transform-origin:left center}
.anim .ballot.in .bar{transform:scaleX(1); transition:transform .7s cubic-bezier(.22,.7,.3,1) .6s}
.anim .ballot.in .stamp{opacity:1; transform:rotate(-2deg); transition:opacity .35s ease 1.2s, transform .45s cubic-bezier(.2,1.3,.4,1) 1.2s}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ==================================================================
 * 2026-09-20 — EKLENENLER
 *   1. Açılış animasyonları (scroll reveal)
 *   2. İndirme (App Store) çağrıları
 *   3. Canlı Piyasalar sayfası (piyasalar.php + assets/piyasalar.js)
 * ================================================================== */

/* ---------- 1. AÇILIŞ ANİMASYONLARI ----------
 * TASARIM KARARI: animasyon SADECE bir iyileştirme katmanı. JS çalışmazsa,
 * IntersectionObserver desteklenmiyorsa ya da kullanıcı hareket azaltma
 * istiyorsa içerik TAM GÖRÜNÜR kalır. Bu yüzden başlangıç durumu
 * .reveal üzerinde DEĞİL, <html class="fa-anim"> altında tanımlı —
 * o sınıfı da site-anim.js ekliyor. JS yoksa sınıf yok, gizlenme yok. */
.fa-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.fa-anim .reveal.gorundu {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Kademeli giriş: aynı kapsayıcıdaki kartlar sırayla gelsin */
.fa-anim .reveal[data-gecikme="1"].gorundu { transition-delay: .07s }
.fa-anim .reveal[data-gecikme="2"].gorundu { transition-delay: .14s }
.fa-anim .reveal[data-gecikme="3"].gorundu { transition-delay: .21s }
.fa-anim .reveal[data-gecikme="4"].gorundu { transition-delay: .28s }
.fa-anim .reveal[data-gecikme="5"].gorundu { transition-delay: .35s }

/* Hero: ilk ekranda observer beklemeden, yüklenir yüklenmez aksın */
.fa-anim .hero .eyebrow,
.fa-anim .hero h1,
.fa-anim .hero .page-lead,
.fa-anim .hero .cta-row {
  animation: faYukari .6s cubic-bezier(.22,.61,.36,1) both;
}
.fa-anim .hero h1          { animation-delay: .06s }
.fa-anim .hero .page-lead  { animation-delay: .12s }
.fa-anim .hero .cta-row    { animation-delay: .18s }
@keyframes faYukari {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}

/* ERİŞİLEBİLİRLİK: hareket azaltma tercihi MUTLAK — hepsini kapat. */
@media (prefers-reduced-motion: reduce) {
  .fa-anim .reveal,
  .fa-anim .reveal.gorundu,
  .fa-anim .hero .eyebrow, .fa-anim .hero h1,
  .fa-anim .hero .page-lead, .fa-anim .hero .cta-row {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 2. İNDİRME ÇAĞRILARI ---------- */

/* Sol menüdeki birincil indir butonu */
.sidebar-indir {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--premium), #9b5cf6);
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(124,58,237,.75);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sidebar-indir:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(124,58,237,.85) }
.sidebar-indir-ikon { font-size: 19px; line-height: 1 }
.sidebar-indir-yazi { display: flex; flex-direction: column; line-height: 1.15 }
.sidebar-indir-ust  { font-size: 10.5px; opacity: .85; letter-spacing: .04em; text-transform: uppercase }
.sidebar-indir-alt  { font-size: 14px; font-weight: 700 }

/* Footer indirme satırı */
.foot-indir {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--paper) !important;
  font-weight: 700; font-size: 14px; text-decoration: none;
  transition: transform .15s ease;
}
.foot-indir:hover { transform: translateY(-1px) }

/* Mobilde ekranın altına yapışan indirme çubuğu.
   Masaüstünde GÖSTERİLMEZ — orada sol menüdeki buton zaten sürekli görünür. */
.mobil-indir { display: none }
@media (max-width: 900px) {
  .mobil-indir {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
    padding: 10px 12px 10px 16px;
    background: var(--ink); color: var(--paper);
    border-radius: 14px;
    box-shadow: 0 10px 30px -10px rgba(33,29,46,.6);
    animation: faCubuk .5s .8s cubic-bezier(.22,.61,.36,1) both;
  }
  .mobil-indir-metin { font-size: 13px; line-height: 1.3 }
  .mobil-indir-metin b { display: block; font-size: 14px }
  .mobil-indir-btn {
    flex-shrink: 0; padding: 9px 15px; border-radius: 9px;
    background: var(--premium); color: #fff !important;
    font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap;
  }
  .mobil-indir-kapat {
    background: none; border: 0; color: var(--paper); opacity: .55;
    font-size: 17px; cursor: pointer; padding: 0 2px; line-height: 1;
  }
  /* Yapışkan çubuk son bölümün üstünü kapatmasın */
  .site-main { padding-bottom: 86px }
}
@keyframes faCubuk { from { opacity: 0; transform: translateY(120%) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .mobil-indir { animation: none } }

/* ---------- 3. CANLI PİYASALAR ---------- */
.pz-sec { padding: 26px 0 }
.pz-sec:first-of-type { padding-top: 10px }

/* Durum satırı (BIST açık/kapalı + gecikme) */
.pz-gecikme {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 14px 0 0; padding: 7px 14px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink2);
  font-size: 13px;
}
.pz-gecikme b { color: var(--ink) }
.pz-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); flex-shrink: 0 }
.pz-acik   .pz-nokta { background: var(--yes); box-shadow: 0 0 0 4px rgba(18,148,107,.16) }
.pz-kapali .pz-nokta { background: var(--ink3) }

/* Endeks kartları */
.pz-endeks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.pz-endeks {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; padding: 15px 16px;
}
.pz-endeks-ad     { font-size: 12px; font-weight: 700; color: var(--ink2); letter-spacing: .03em; text-transform: uppercase }
.pz-endeks-deger  { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums }
.pz-endeks-degisim{ font-size: 13.5px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums }

/* Yön renkleri — renk TEK BAŞINA anlam taşımıyor; yanında her zaman
   ▲/▼ işareti ve işaretli sayı var (bkz. piyasalar.js yuzdeMetin). */
.pz-arti  { color: var(--yes) }
.pz-eksi  { color: var(--no) }
.pz-notr  { color: var(--ink3) }

/* Mobil uygulama uyarısı — sayfanın en dikkat çeken bloğu olmalı */
.pz-app-uyari {
  border-radius: 18px; padding: 2px;
  background: linear-gradient(135deg, var(--premium), #4f46e5 55%, var(--blue));
  box-shadow: 0 18px 40px -22px rgba(79,70,229,.8);
}
.pz-app-uyari-ic {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--paper); border-radius: 16px; padding: 22px 24px;
}
.pz-app-uyari-metin { flex: 1 1 380px; min-width: 0 }
.pz-app-uyari-kicker {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--premium);
}
.pz-app-uyari-baslik { margin: 0 0 8px; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.25 }
.pz-app-uyari-alt { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.6 }
.pz-app-indir {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 13px 26px; border-radius: 12px;
  background: var(--ink); color: var(--paper) !important;
  text-decoration: none; transition: transform .15s ease;
}
.pz-app-indir:hover { transform: translateY(-2px) }
.pz-app-indir-ust { font-size: 11px; opacity: .8; letter-spacing: .04em; text-transform: uppercase }
.pz-app-indir-alt { font-size: 17px; font-weight: 800 }

/* Tablo */
.pz-tablo-sar {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden;
}
.pz-tablo { width: 100%; border-collapse: collapse; font-size: 14px }
.pz-tablo th {
  text-align: left; padding: 11px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink2); background: var(--rule2); border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.pz-tablo td { padding: 10px 14px; border-bottom: 1px solid var(--rule2) }
.pz-tablo tbody tr:last-child td { border-bottom: 0 }
.pz-satir { cursor: pointer; transition: background .12s ease }
.pz-satir:hover, .pz-satir:focus-visible { background: var(--rule2); outline: none }
.pz-satir:focus-visible { box-shadow: inset 3px 0 0 var(--premium) }
.pz-sag { text-align: right } .pz-orta { text-align: center }
.pz-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.pz-kod { font-weight: 800; letter-spacing: .02em }
.pz-ac { color: var(--premium); font-weight: 700; font-size: 12.5px; white-space: nowrap }
.pz-bos { text-align: center; padding: 30px; color: var(--ink3) }
@media (max-width: 720px) { .pz-gizle-dar { display: none } }

/* Sparkline — 2px ince çizgi, dolgu yok (satır içinde gürültü yapmasın) */
.pz-spark { width: 120px; height: 30px; vertical-align: middle }
.pz-spark path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.pz-s-arti path { stroke: var(--yes) }
.pz-s-eksi path { stroke: var(--no) }

/* Döviz / maden kartları */
.pz-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px }
.pz-kart-liste { display: grid; gap: 10px }
.pz-kart {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; padding: 13px 16px;
}
.pz-kart-ad      { font-weight: 700; font-size: 14px }
.pz-kart-deger   { font-size: 17px; font-weight: 700 }
.pz-kart-degisim { font-size: 13px; font-weight: 700; min-width: 76px; text-align: right }

.pz-dipnot { margin: 12px 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.6 }

/* Grafik paneli */
/* ÖNEMLİ: [hidden] niteliğinin varsayılan display:none'ı, yazar
   stilindeki display:flex tarafından EZİLİR. Bu kural olmadan panel
   "gizliyken" bile sayfanın üstünde durur ve TÜM tıklamaları yutar
   (testte yakalandı: tabloya tıklanamıyordu). */
.pz-panel[hidden] { display: none !important }
.pz-panel {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(33,29,46,.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; backdrop-filter: blur(3px);
  animation: faSolma .2s ease both;
}
@media (min-width: 760px) { .pz-panel { align-items: center; padding: 24px } }
@keyframes faSolma { from { opacity: 0 } to { opacity: 1 } }
.pz-panel-ic {
  background: var(--paper); width: 100%; max-width: 760px; max-height: 92vh;
  overflow-y: auto; border-radius: 20px 20px 0 0;
  padding: 20px 20px 24px;
  animation: faPanel .28s cubic-bezier(.22,.61,.36,1) both;
}
@media (min-width: 760px) { .pz-panel-ic { border-radius: 20px } }
@keyframes faPanel { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .pz-panel, .pz-panel-ic { animation: none }
}
.pz-panel-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px }
.pz-panel-ust h3 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em }
.pz-panel-alt { margin: 3px 0 0; font-size: 14px; color: var(--ink2) }
.pz-panel-kapat {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--card);
  color: var(--ink2); font-size: 15px; cursor: pointer; line-height: 1;
}
.pz-panel-kapat:hover { background: var(--rule2); color: var(--ink) }

.pz-grafik-blok { margin-bottom: 20px }
.pz-grafik-baslik {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--ink2);
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 6px;
}
.pz-grafik-not { font-family: var(--mono); font-size: 12px; text-transform: none; letter-spacing: 0 }
.pz-grafik { position: relative; width: 100%; height: 210px }
.pz-svg { width: 100%; height: 100% ; overflow: visible }
.pz-grafik-aciklama { margin: 8px 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.6 }
.pz-veri-yok { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink3); font-size: 13.5px; margin: 0 }

/* Grafik markları — ince çizgi, silik ızgara (veri öne çıksın) */
.pz-izgara    { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke }
.pz-sifir     { stroke: var(--ink3); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke }
.pz-eksen-yazi{ fill: var(--ink3); font-size: 11px; font-family: var(--mono) }
.pz-cizgi     { fill: none; stroke: var(--premium); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.pz-alan      { fill: rgba(124,58,237,.10); stroke: none }
.pz-cizgi-arti{ fill: none; stroke: var(--yes); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.pz-cizgi-eksi{ fill: none; stroke: var(--no);  stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke }
.pz-alan-arti { fill: rgba(18,148,107,.13); stroke: none }
.pz-alan-eksi { fill: rgba(210,63,63,.13); stroke: none }
.pz-imlec     { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke }
.pz-imlec-nokta { fill: var(--premium); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke }
.pz-imlec-nokta.pz-n-arti { fill: var(--yes) }
.pz-imlec-nokta.pz-n-eksi { fill: var(--no) }

.pz-ipucu {
  position: absolute; top: 8px; pointer-events: none;
  background: var(--ink); color: var(--paper);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 8px 22px -10px rgba(33,29,46,.8); white-space: nowrap;
}
.pz-ipucu b { display: block; font-weight: 700; opacity: .75; font-size: 11px }
.pz-ipucu span { font-family: var(--mono); font-weight: 700 }
.pz-ipucu .pz-arti { color: #5ee0aa } .pz-ipucu .pz-eksi { color: #ff9c9c }

.pz-panel-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 15px; margin-top: 4px;
  font-size: 13.5px; color: var(--ink2);
}
.pz-panel-cta a { color: var(--premium); font-weight: 700; text-decoration: none; white-space: nowrap }
.pz-panel-cta a:hover { text-decoration: underline }

/* Footer indirme satırı kapsayıcısı */
.foot-indir-satir {
  display: flex; justify-content: center;
  padding: 18px 0 4px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
