/* Kok font boyutu — SITENIN TAMAMININ olcegi. Tailwind ve site CSS'i rem
   tabanli oldugu icin buradaki deger basliklari, govde metnini, bosluklari ve
   kart olculerini birlikte orantili buyutur/kucultur. Masaustu 16px'ten 14px'e
   cekildi — sitedeki her yazi %12.5 kuculur, mobil ile ayni kompakt olcek.
   Ultra-genis kademeleri (1920/2560) asagida ayni oranda dusuruldu. */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

/* ── Site fontu: Inter (self-host) ──────────────────────────────────────────
   Tum site TEK bir profesyonel yazi tipi kullanir: Inter. Tema (SiteTheme)
   zaten body ve h1-h6 icin font-family'yi "Inter, system-ui, sans-serif"
   olarak veriyor (bkz. ThemeCssHelper) ve diger tum ogeler bunu miras alir;
   burada yalnizca Inter'i yukluyoruz ki sistem fontuna dusmesin. Boylece
   basliklar/paragraflar/butonlar/menu vb. hepsi ayni yazi tipinde olur —
   ancak boyut ve kalinlik hiyerarsisi (text-4xl, font-bold, text-sm ...)
   oldugu gibi korunur: baslik yine baslik, metin yine metin gorunur.

   Degisken (variable) woff2 kullaniyoruz: tek dosyada tum kalinliklar
   (100-900). Turkce karakterler (g, s, i, I, c, o, u) icin latin + latin-ext
   alt kumeleri yeterlidir. Harici CDN yok — dosyalar wwwroot/lib/inter
   altinda barinir (public sitenin diger varliklariyla ayni yaklasim). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/lib/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/lib/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Yazi tipleri gelene kadar kullanilan yedekler: Arial, Inter ve Plus Jakarta
   Sans (ana sayfa basliklari) ile ayni genislige olceklenir (size-adjust; site
   metinleriyle olculdu). Eskiden yedek daha dar oldugu icin yazi tipi gelince
   ana sayfa girisindeki paragraf bir satir uzuyor, altindaki her sey ~30px
   asagi kayiyordu. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT");
    font-weight: 100 500;
    size-adjust: 105.5%;
    ascent-override: 91.8%;
    descent-override: 22.9%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 900;
    size-adjust: 100.8%;
    ascent-override: 96.1%;
    descent-override: 24%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Plus Jakarta Sans Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 100 900;
    size-adjust: 99%;
}

/* Guvenlik agi: aktif tema font-family ayarlamasa bile (ThemeCssHelper bosa
   duserse) site yine Inter kullansin. Yalniz yazi tipini belirler; boyut ve
   kalinligi (hiyerarsiyi) Tailwind siniflari yonetmeye devam eder. Tema CSS'i
   _Layout'ta bu dosyadan SONRA yuklendiginden, gecerli bir tema degeri (yine
   Inter) bunun uzerine yazar. Form ogeleri Tailwind'de font:inherit ile
   body'yi izler, ayrica belirtmeye gerek yok. */
:root {
    --site-font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

body,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--site-font-sans);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Kayan bant (ticker): kayma artik JS (requestAnimationFrame) ile suruluyor —
   market-ticker.js 'transform: translateX(...)' degerini her karede gunceller.
   Boylece saf-CSS animasyonunun tarayici/isletim sistemi "hareketi azalt"
   ayarina takilma sorunu (Edge'de durup Chrome'da kaymasi) ortadan kalkar ve
   tum Chromium tarayicilarinda ayni sekilde calisir. Icerik zaten JS ile
   uretildiginden ek bir bagimlilik olusmaz. */
.ticker-slide {
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transform: translateX(0);
}

/* ── Hero slider olcusu ─────────────────────────────────────────────────────
   TEK kaynak: hem CmsService.RenderHeroSliderAsync (yayindaki slider) hem
   _HeroSlider.cshtml (CMS anasayfasi seed edilmemisse devreye giren yedek)
   bu sinifi kullanir. Eskiden ikisinin kendi olcusu vardi — partial'da
   16/10 -> 2/1 -> 1530/475 (kirilma 640/1024), burada 1/1 -> 1530/475
   (kirilma 767) — ve ayni slider iki farkli sekilde gozukuyordu.

   Mobil (<768px): 1/1 kare. Genis banner 375px'lik bir ekranda ~117px'e
   dusup okunmaz hale geliyor; kare ayrica 1080x1080 mobil gorselle birebir
   ortusur.

   >=768px: yukseklik viewport ile SUREKLI degisir (clamp) — adim adim degil.
   calc(100vw * 475 / 1530) tam olarak tasarim oranini verir, yani ~1095px ile
   1920px arasinda oran hic sapmadan 1530/475 kalir; altinda 340px taban,
   ustunde 596px tavan devreye girer. Sabit kirilma noktalari kalkti: tarayici
   yakinlastirip uzaklastirdiginda banner artik aniden kisalip uzamiyor,
   yumusak sekilde olcekleniyor.

   max-width 1920px: 3440x1440 gibi ultra-genis bir ekranda oran 1068px
   yuksekliginde bir banner uretiyordu — ekranin dortte ucunu kapliyor ve
   1530px'lik kaynak gorsel 2.25 kat buyutuldugu icin bulaniklasiyordu.
   1920'de durdurunca hem oran tam korunuyor (1920x596 = 1530/475) hem gorsel
   en fazla 1.25 kat buyutuluyor, yani net kaliyor. */
.hero-slider-aspect {
    aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
    .hero-slider-aspect {
        aspect-ratio: auto;
        height: clamp(340px, calc(100vw * 475 / 1530), 596px);
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Cok genis (ultra-wide) ekranlar ────────────────────────────────────────
   Tailwind'in `container` sinifi 1536px'te duruyor ve kok font boyutu 768px
   ustunde 16px'te sabit kaliyordu. 3440x1440 gibi bir ekranda bunun sonucu:
   tum sayfa ekranin ~%45'ine sikisan bir "ada" gibi kaliyor, iki yaninda
   genis bos alan olusuyor ve yazilar ekran buyuklugune gore kucuk duruyor.

   Iki kademede hem satir genisligini hem tipografiyi buyutuyoruz. Tailwind
   olculeri rem tabanli oldugu icin kok font boyutunu artirmak yaziyla
   birlikte bosluk/padding/kart olculerini de orantili buyutur — tek
   kaldiracla sayfanin tamami olceklenir.

   Container'i bilerek tam ekrana yaymiyoruz: satir uzunlugu okunabilirlik
   sinirini (~90 karakter) astiginda goz satir basini kaybediyor. */
@media (min-width: 1920px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 1720px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 16px;
    }

    .container {
        max-width: 1860px;
    }
}

/* Anasayfa Urun/Hizmet kartlari: mobilde (<=767px) tek sutun yerine 2 yan yana
   ve aralarinda 6px bosluk. Masaustu (md+) Tailwind flex-1 davranisi aynen
   kalir — bu kurallar yalniz dar ekranda gecerli. .pc-grid > .pc-card
   secicisi w-full'u gecersiz kilar (daha yuksek ozgulluk). */
@media (max-width: 767px) {
    .pc-grid {
        gap: 6px;
    }

    .pc-grid > .pc-card {
        width: calc(50% - 3px);
    }
}

/* Ust menu logosu: header cubugu sabit 80px (h-20) idi ve logo onu tam
   doldurdugundan buyuyemiyordu. Logoyu biraz buyutuyoruz; cubuk yuksekligini
   de orantili artiriyoruz (min-height = taban, icerik gerekirse buyutur).
   Tailwind md:h-24 derlenmis CSS'te olmadigindan ozel sinif kullaniyoruz. */
.site-nav-bar {
    min-height: 6rem; /* 96px (mobil) */
}

/* Ust menu sayfa kaydikca ustte kalir (_Navigation: sticky top-0); sayfa ici
   baglantilar (#bulletins gibi) menunun altinda kalmasin. */
html {
    scroll-padding-top: 6.5rem;
}

@media (min-width: 768px) {
    html {
        scroll-padding-top: 7.5rem;
    }
}

.site-logo {
    height: 5rem;     /* 80px (mobil) — onceki 64px'ten buyuk */
    width: auto;
}

@media (min-width: 768px) {
    .site-nav-bar {
        min-height: 7rem; /* 112px (masaustu) */
    }

    .site-logo {
        height: 6rem;     /* 96px (masaustu) — onceki 80px'ten buyuk */
    }
}
/* ── Model Portföy widget (bağımsız) ──────────────────────────────────────
   Ana sayfadaki Canlı Piyasa Panosu'ndaki model portföy kartının bağımsız
   sürümü. model-portfolio.js ile beslenir; [data-model-portfolio] taşıyan
   her kapsayıcıda çalışır (ör. Araştırma sayfası). Renkler site temasından
   (hsl(var(--...))) gelir; yeşil/kırmızı değişim renkleri sabittir. Açık/koyu
   tema uyumludur. lmt- (panodaki) sürümle görsel olarak eşleşir. */
.mp-widget {
    --mp-up: #089981;
    --mp-down: #f23645;
    --mp-up-bg: rgba(8, 153, 129, .12);
    --mp-down-bg: rgba(242, 54, 69, .12);
    --mp-card: hsl(var(--card));
    --mp-bd: hsl(var(--border) / .7);
    --mp-fg: hsl(var(--foreground));
    --mp-mut: hsl(var(--muted-foreground));
    --mp-pri: hsl(var(--primary));
    /* Arastirma sayfasinda widget'in kenarlari hemen ustundeki Gunluk/Teknik
       Bulten kartlariyla ayni cizgide bitmeli. O grid max-w-6xl (72rem) icinde
       duruyor; 900px'te birakinca model portfoy iki yanindan iceride kalip
       hizasiz gorunuyordu. Deger degisirse arastirma.html'deki sarmalayici
       (max-w-6xl) ile birlikte guncellenmeli. */
    max-width: 72rem;
    margin: 0 auto;
    background: var(--mp-card);
    border: 1px solid var(--mp-bd);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 48px -30px rgba(15, 23, 42, .45);
    overflow: hidden;
    text-align: left;
}
.mp-widget * { box-sizing: border-box; }
.mp-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Baslik/getiri puntolari panodaki .lmt-portfolio-* ile birebir ayni
   (bkz. _LiveMarketTable.cshtml) — veri paneli olculu durur, afis gibi degil. */
.mp-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.5rem .95rem; }
.mp-eyebrow { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mp-pri); margin-bottom: .3rem; }
.mp-name { margin: 0; font-size: .95rem; font-weight: 700; color: var(--mp-fg); letter-spacing: -.015em; }
.mp-perf { text-align: right; }
.mp-perf > span { display: block; font-size: .7rem; color: var(--mp-mut); font-weight: 600; }
.mp-change { font-size: 1rem; font-weight: 700; color: var(--mp-fg); }

.mp-alloc { padding: 0 1.5rem 1.1rem; }
.mp-alloc-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: hsl(var(--muted)); box-shadow: inset 0 0 0 1px hsl(var(--border) / .6); }
.mp-alloc-seg { height: 100%; transition: opacity .18s, filter .18s; }
.mp-alloc-bar:hover .mp-alloc-seg { opacity: .55; }
.mp-alloc-bar .mp-alloc-seg:hover { opacity: 1; filter: brightness(1.08); }

.mp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--mp-bd); }
.mp-holding { display: flex; align-items: center; gap: .7rem; padding: .58rem 1.5rem; border-top: 1px solid hsl(var(--border) / .45); }
.mp-list .mp-holding:nth-child(1), .mp-list .mp-holding:nth-child(2) { border-top: none; }
.mp-logo { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mp-holding-mid { flex: 1; min-width: 0; }
.mp-holding-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.mp-holding-sym { font-weight: 700; color: var(--mp-fg); font-size: .82rem; }
.mp-holding-w { font-size: .72rem; color: var(--mp-mut); font-weight: 700; }
.mp-wbar { height: 4px; border-radius: 3px; background: hsl(var(--muted)); margin-top: .34rem; overflow: hidden; }
.mp-wbar i { display: block; height: 100%; border-radius: 3px; }
.mp-holding-right { text-align: right; flex: 0 0 auto; }
.mp-holding-price { font-size: .76rem; font-weight: 600; color: var(--mp-fg); }
.mp-pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: .06rem .44rem; border-radius: 8px; margin-top: .1rem; }
.mp-pill.up { color: var(--mp-up); background: var(--mp-up-bg); }
.mp-pill.down { color: var(--mp-down); background: var(--mp-down-bg); }
.mp-skel { padding: 1.1rem 1.5rem; color: var(--mp-mut); font-size: .85rem; }
.mp-disclaimer { padding: .8rem 1.5rem; font-size: .7rem; color: var(--mp-mut); border-top: 1px solid var(--mp-bd); background: hsl(var(--muted) / .4); margin: 0; }

@media (max-width: 720px) {
    .mp-list { grid-template-columns: 1fr; }
    .mp-list .mp-holding:nth-child(2) { border-top: 1px solid hsl(var(--border) / .45); }
    .mp-perf { text-align: left; }
}

/* ─── WhatsApp dugmesi (Site Ayarlari > WhatsApp Dugmesi) ─────────────────
   Sag alt kose, sayfa iceriginin ustunde ama tum acilir pencerelerin altinda:
   ust menu (z 40), yukleme ekrani (50), dolandiricilik uyarisi (60), goruntulu
   gorusme penceresi (9999) ve cerez bandi (10000) acikken dugmenin ustunde
   kalir; kapatilinca dugme gorunur. Bilgisayarda dugme once karekod
   penceresini acar (site.js). */
.ab-wa-btn { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; }
.ab-wa-btn:hover { color: #fff; transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.ab-wa-btn:focus-visible { outline: 3px solid #00205b; outline-offset: 3px; }
.ab-wa-btn svg { width: 30px; height: 30px; }
/* Karekod penceresi: ana sayfadaki goruntulu gorusme penceresiyle (_VideoCallPopup)
   ayni kart, rozet, ikon kutusu, dugmeler ve acilis animasyonu. */
.ab-wa-pop { position: fixed; right: 20px; bottom: 88px; z-index: 41; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 108px); overflow-y: auto; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 20px 50px rgba(15, 23, 42, .16), 0 6px 18px rgba(15, 23, 42, .08); animation: abWaPopIn .28s cubic-bezier(.2, .8, .2, 1); }
.ab-wa-pop[hidden] { display: none; }
.ab-wa-pop-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #f8fafc; color: #334155; cursor: pointer; transition: all .18s ease; }
.ab-wa-pop-close:hover { background: #eef2f7; color: #0f172a; }
.ab-wa-pop-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; margin-bottom: 16px; border-radius: 9999px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.ab-wa-pop-badge-dot { width: 8px; height: 8px; border-radius: 9999px; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .14); }
.ab-wa-pop-content { display: flex; align-items: flex-start; gap: 14px; }
.ab-wa-pop-icon { width: 56px; height: 56px; min-width: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; box-shadow: 0 10px 20px rgba(16, 185, 129, .22); }
.ab-wa-pop-text h3 { margin: 2px 0 8px; font-size: 20px; line-height: 1.2; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.ab-wa-pop-text p { margin: 0; font-size: 14px; line-height: 1.6; color: #475569; }
.ab-wa-pop-qr { display: flex; justify-content: center; margin-top: 16px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.ab-wa-pop-qr img { display: block; width: 168px; height: 168px; }
.ab-wa-pop-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.ab-wa-pop-primary, .ab-wa-pop-secondary { min-height: 48px; border-radius: 16px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: all .18s ease; }
.ab-wa-pop-primary { border: 0; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; box-shadow: 0 12px 24px rgba(16, 185, 129, .22); }
.ab-wa-pop-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 28px rgba(16, 185, 129, .28); }
.ab-wa-pop-secondary { border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; cursor: pointer; }
.ab-wa-pop-secondary:hover { background: #f1f5f9; color: #0f172a; }
/* Pencere acilinca odak X'e gider (klavye kullananlar icin); halka yalniz klavyeyle gezinirken gorunur. */
.ab-wa-pop-primary:focus-visible, .ab-wa-pop-secondary:focus-visible, .ab-wa-pop-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, .35); }

@keyframes abWaPopIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ab-wa-pop, .ab-wa-pop-primary, .ab-wa-pop-secondary, .ab-wa-pop-close, .ab-wa-btn { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
    .ab-wa-btn { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media print {
    .ab-wa-btn, .ab-wa-pop { display: none !important; }
}