@charset "UTF-8";

/* HesapX tanitim sitesi - 2027 gorsel katmani  (HX_SITE_2027_V1)
   -------------------------------------------------------------
   site.css'in UZERINE binen katmandir; yapiyi degil gorunusu degistirir.
   Amac: uygulamadaki karsilama panelinin (auth-welcome-2027) gorsel dilini
   tanitim sitesine tasimak - koyu lacivert/indigo aurora zemin, cam yuzeyli
   kartlar, nane-turkuaz vurgu ve olculu hareket.

   Tasarim kararlari:
   - Marka renkleri (--c1/--c2/--c3) panelden geliyor; onlari EZMIYORUZ,
     yalnizca yaninda derinlik veren sabit bir lacivert/indigo palet var.
   - Dis kaynak istegi yok: font, ikon, resim eklenmedi (hiz puani korunuyor).
   - Hareket "prefers-reduced-motion" ile tamamen kapaniyor.
   - Kaldirilan efekt yok; her kural mevcut bir kuralin uzerine yaziliyor,
     bu dosya link'ten cikarilirsa site eski haline doner. */

:root {
    --hx27-navy:      #14213d;
    --hx27-navy-deep: #0d1730;
    --hx27-indigo:    #5450d8;
    --hx27-blue:      #3276dc;
    --hx27-mint:      #59dfbf;
    --hx27-cyan:      #58cbe7;

    --hx27-panel:     linear-gradient(136deg, #0d1730 0%, #252f68 52%, #5450d8 100%);
    --hx27-accent:    linear-gradient(105deg, #8ff3d8 0%, #7fd8ff 54%, #b7a8ff 100%);
    --hx27-r:         30px;
    --hx27-shadow:    0 38px 100px rgba(13, 23, 48, .26), 0 4px 16px rgba(13, 23, 48, .10);
}

/* Sayfa ici baglantilarda (ornegin "Nasil calistigini gor" -> #ozellikler)
   hedef baslik yapisik basligin altinda kalmasin. */
html { scroll-padding-top: 92px; }

/* ===================== BASLIK / MENU ===================== */

.hdr {
    background: color-mix(in srgb, var(--bg) 74%, transparent);
    backdrop-filter: saturate(1.8) blur(18px);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
}
.hdr.is-stuck { box-shadow: 0 10px 34px rgba(13, 23, 48, .09); }

/* Tam ekran karsilamasi olan sayfada baslik, sayfa tepesindeyken seffaf
   durur ve koyu zeminin uzerinde beyaz okunur; kaydirinca cam beyaza doner.
   :has() desteklemeyen tarayicida baslik her zaman beyaz kalir - bozulmaz. */
/* Karsilamasi olan sayfalarda baslik ASAGI KAYDIRINCA DA ayni menu kalir:
   koyu gradyan perde + degradeli sac teli cizgi. Beyaz cam surume gecis
   yok; yalnizca perde koyulasip golge kazanir, boylece acik renkli
   bolumlerin uzerinde de beyaz yazi okunur. Ic kap (.wrap) degismez. */
body:has(main > .hero:first-child) .hdr {
    background: linear-gradient(180deg,
                rgba(6, 11, 30, .58) 0%,
                rgba(6, 11, 30, .30) 52%,
                rgba(6, 11, 30, .08) 82%,
                rgba(6, 11, 30, 0) 100%);
    backdrop-filter: blur(7px) saturate(1.25);
    -webkit-backdrop-filter: blur(7px) saturate(1.25);
    transition: background 260ms ease, box-shadow 260ms ease;
}
/* Kaydirinca RENK ayni kalir (ayni lacivert perde) ama SAYDAMLIK biter:
   asagida beyaz bolumlerin uzerine gelince cubuk seffaf kalirsa yazilar
   zemine karisiyordu. Tepede sonen gradyan, kayarken duz dolguya doner. */
body:has(main > .hero:first-child) .hdr.is-stuck {
    background: linear-gradient(180deg, rgba(6, 11, 30, .94) 0%, rgba(9, 15, 38, .92) 100%);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 12px 30px rgba(6, 11, 30, .22);
    border-bottom-color: transparent;
}
body:has(main > .hero:first-child) .hdr::after {
    content: '';
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg,
                transparent 0%,
                rgba(143, 243, 216, .55) 26%,
                rgba(127, 216, 255, .50) 58%,
                rgba(183, 168, 255, .40) 78%,
                transparent 100%);
    pointer-events: none;
}

/* Karsilamasi olmayan sayfalarda (blog, yazi, 404) cubuk beyaz kalir;
   altindaki cizgi marka renginde surer. */
body:not(:has(main > .hero:first-child)) .hdr.is-stuck::after {
    content: '';
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c1), var(--c2), transparent);
    opacity: .5;
    pointer-events: none;
}
body:has(main > .hero:first-child) .hdr .logo { color: #fff; }

/* Menu baglantilari yalnizca genis ekranda beyaz olur; 820px altinda menu
   beyaz bir panele acildigi icin oradaki yazi rengine dokunulmaz. */
@media (min-width: 821px) {
    body:has(main > .hero:first-child) .hdr .nav > a { color: rgba(255, 255, 255, .84); }
    body:has(main > .hero:first-child) .hdr .nav > a:hover,
    body:has(main > .hero:first-child) .hdr .nav > a[aria-current="page"] {
        background: rgba(255, 255, 255, .14);
        color: #fff;
    }
}
/* "Giris yap" duz yaziydi ve koyu zeminde kayboluyordu: cam bir hap
   haline getirildi - birincil dugmeyle yarismadan gorunur oluyor. */
.hdr .btn-ghost {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(118deg, #e8fbf3 0%, #ddf6f2 100%);
    box-shadow: inset 0 0 0 1px rgba(16, 122, 95, .22);
    color: #0f6f57;
    font-weight: 650;
}
.hdr .btn-ghost:hover {
    background: linear-gradient(118deg, #dcf8ec 0%, #cff2ec 100%);
    color: #0b5745;
}
/* Koyu baslikta ayni yesil, cam yuzey uzerinde */
body:has(main > .hero:first-child) .hdr .btn-ghost {
    background: linear-gradient(118deg, rgba(110, 236, 200, .26) 0%, rgba(88, 203, 231, .18) 100%);
    box-shadow: inset 0 0 0 1px rgba(159, 246, 222, .45);
    color: #d6fff2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body:has(main > .hero:first-child) .hdr .btn-ghost:hover {
    background: linear-gradient(118deg, rgba(126, 244, 210, .36) 0%, rgba(104, 214, 238, .26) 100%);
    color: #fff;
}
body:has(main > .hero:first-child) .hdr .btn-1 {
    background: linear-gradient(118deg, #9ff6de 0%, #7fd8ff 100%);
    color: #10203f;
    box-shadow: 0 12px 28px rgba(58, 190, 214, .3);
}
body:has(main > .hero:first-child) .hdr .burger { background: rgba(255, 255, 255, .16); }
body:has(main > .hero:first-child) .hdr .burger span { background: #fff; }

.logo-mark {
    border-radius: 11px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 34%, transparent);
}

/* Marka kilidi: "Hesap" yazisi + logo.png'deki X ikonu. Yazinin yalniz ilk
   harfi buyuk; X'i yazi olarak DEGIL her zaman ikonla veriyoruz. Ikon renkli
   oldugu icin acik ve koyu zeminin ikisinde de okunur. */
.logo {
    align-items: center;          /* ikon yazinin ortasina hizalanir */
    gap: 0;                       /* yazi ile X bitisik */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.03em;
}
.logo .logo-word { line-height: 1; }
.logo .logo-x {
    width: auto;
    height: 48px;
    /* logo-x.png saydam payi kirpilmis surumdur; buradaki negatif pay
       yalnizca "p" harfinin sag bosluguyla X'in egik kolunu optik olarak
       bitistirmek icin. */
    margin-left: -5px;
    filter: drop-shadow(0 6px 12px rgba(10, 18, 43, .22));
}
.ftr .logo { font-size: 28px; }
.ftr .logo .logo-x { height: 42px; margin-left: -4px; filter: none; }

@media (max-width: 560px) {
    .logo { font-size: 27px; }
    .logo .logo-x { height: 41px; }
}

.nav a { font-weight: 600; }
.nav a:hover { background: color-mix(in srgb, var(--c1) 8%, transparent); color: var(--ink); }
.nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--c1) 11%, transparent);
    color: color-mix(in srgb, var(--c1) 78%, var(--ink));
}

/* ===================== DUGMELER ===================== */

.btn {
    transition: transform 200ms cubic-bezier(.2, .7, .2, 1),
                box-shadow 200ms ease, background 200ms ease, filter 200ms ease;
}
.btn-1 {
    box-shadow: 0 10px 26px color-mix(in srgb, var(--c1) 32%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-1:hover { filter: saturate(1.06); }
.btn-1:active, .btn-2:active { transform: translateY(0); }

/* ===================== KAHRAMAN (dis panel) ===================== */

/* Karsilama tam ekran: bolum bastan basa koyu aurora zemin, icerik
   dikeyde ortali. Yukseklik yapisik basligin (74px) altini doldurur;
   svh birimi mobil tarayici cubuklarinin acilip kapanmasinda ziplamayi
   onler, desteklemeyen tarayici vh degerinde kalir. */
/* Baslik "sticky" oldugu icin kendi yerini kapliyor; karsilama onun ALTINDAN
   baslarsa baslik beyaz sayfa zemininde kalir ve beyaz yazi okunmaz. Bolumu
   baslik yuksekligi kadar yukari cekip ayni kadar ic dolgu veriyoruz:
   gradyan basligin arkasindan gecer, ust ve alt tek parca gorunur. */
main > .hero:first-child {
    margin-top: -74px;
    padding-top: 74px;
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    color: #fff;
    background:
        radial-gradient(900px circle at 86% 10%, rgba(88, 203, 231, .24), transparent 56%),
        radial-gradient(760px circle at 6% 98%, rgba(89, 223, 191, .18), transparent 58%),
        radial-gradient(820px circle at 54% 116%, rgba(110, 89, 238, .46), transparent 62%),
        var(--hx27-panel);
}
.hero::before {
    /* ince izgara dokusu - auth-welcome ile ayni desen */
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    height: auto;
    filter: none;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 88%);
}

/* sag ustteki halkalar */
.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -170px;
    right: -150px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 70px rgba(255, 255, 255, .032), 0 0 0 140px rgba(255, 255, 255, .02);
    pointer-events: none;
}

.hero > .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(46px, 6vh, 88px);
    padding-bottom: clamp(38px, 5vh, 72px);
}

/* Tam ekran YALNIZCA ana sayfada; ic sayfalarda ayni gorsel dil ama
   kompakt yukseklik, boylece asil icerik ekranin altinda kalmaz. */
.hx-home .hero > .wrap {
    min-height: calc(100vh - 74px);
    min-height: calc(100svh - 74px);
    padding-top: clamp(46px, 7vh, 104px);
    padding-bottom: clamp(34px, 5vh, 74px);
}

/* Sayi seridi 23 Agustos 2026'da karsilamadan kaldirildi; metin blogu artik
   tek basina ortalanir (wrap zaten flex + justify-content:center). Eskiden
   `margin-top:auto` metni yukaridan itip serildi dibe yasliyordu. */
.hero-in { max-width: 940px; }

.hero .eyebrow {
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20);
    color: #eaf2ff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero .eyebrow::before {
    background: linear-gradient(120deg, var(--hx27-mint), var(--hx27-cyan));
    box-shadow: 0 0 0 4px rgba(89, 223, 191, .16);
}

/* Baslik tam ekranin tasiyicisi: daha buyuk punto, daha siki harf araligi,
   satirlar dengeli kirilir. Vurgulu kelime degradenin uzerine hafif isik
   birakir (text-shadow saydam dolguda calismadigi icin drop-shadow). */
.hero h1 {
    margin-bottom: clamp(18px, 2.4vh, 30px);
    font-size: clamp(2.45rem, 1.05rem + 4.6vw, 4.75rem);
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
    color: #fff;
}
.hero h1 .grad,
.hero .grad {
    background: var(--hx27-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(127, 216, 255, .28));
}
.hero .lead {
    font-size: clamp(1.06rem, .98rem + .45vw, 1.32rem);
    line-height: 1.62;
    max-width: 62ch;
}
.hero .lead { color: rgba(234, 241, 252, .84); }
.hero-note { color: rgba(234, 241, 252, .62); }

.hero .btn-1 {
    background: linear-gradient(118deg, #9ff6de 0%, #7fd8ff 100%);
    color: #10203f;
    box-shadow: 0 14px 34px rgba(58, 190, 214, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.hero .btn-1:hover { box-shadow: 0 18px 44px rgba(58, 190, 214, .44); }
.hero .btn-2 {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hero .btn-2:hover { background: rgba(255, 255, 255, .17); }

/* Rakam seridi: uc ayri kutu yerine TEK cam konsol.
   HX_HERO_STATS_V2 (16 Agustos 2026): serit "duz cam kutu" gorunumundeydi;
   asagidaki katmanlar eklendi - degrade cerceve halkasi (mask ile), altta
   nane-turkuaz isik havuzu, sutun basina animasyonlu ince olcum cizgisi,
   imlecin pesinden giden yumusak isik ve rakamlarin sayarak gelmesi
   (site-2027.js). Hepsi CSS/inline SVG; site kuralina uygun olarak
   DISARIDAN HICBIR KAYNAK ISTENMEZ. */
.hero-stats {
    position: relative;
    isolation: isolate;
    margin-top: clamp(32px, 4vh, 54px);
    padding: 10px;
    border-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-radius: 28px;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(120, 235, 205, .13), transparent 58%),
        radial-gradient(120% 160% at 92% 8%, rgba(122, 150, 255, .14), transparent 60%),
        rgba(255, 255, 255, .055);
    box-shadow: 0 30px 70px rgba(5, 11, 30, .34),
                inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* Degrade cerceve: kenarlik rengi tek dusuk kontrastli cizgi yerine
   nane -> mor gecisli bir halka. Mask ile yalnizca 1px kenar boyanir. */
.hero-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(169, 242, 223, .55), rgba(255, 255, 255, .10) 38%,
        rgba(255, 255, 255, .08) 62%, rgba(150, 162, 255, .48));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Seridin altindaki isik havuzu: konsolu zeminden ayirir. */
.hero-stats::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -22px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(60% 100% at 50% 0%, rgba(120, 235, 205, .30), transparent 72%);
    filter: blur(14px);
    opacity: .75;
    pointer-events: none;
    z-index: -1;
}

.hero-stats > div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(20px, 2.4vh, 28px) clamp(18px, 2vw, 30px);
    border-radius: 20px;
    transition: background 240ms ease, transform 240ms cubic-bezier(.2, .7, .2, 1),
                box-shadow 240ms ease;
}
/* Ayrac: duz cizgi degil, uclari sonen dikey degrade. */
.hero-stats > div + div::after {
    content: '';
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .20) 22%,
                rgba(255, 255, 255, .20) 78%, transparent);
    pointer-events: none;
}
/* Her sutunun ustunde cam bir ikon plaketi. Ikonlar SVG olarak CSS'in
   icine gomulu - ek dosya istegi yok, retina ekranda da keskin. */
.hero-stats > div::before {
    content: '';
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
    border-radius: 15px;
    background-color: rgba(146, 236, 213, .13);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    box-shadow: inset 0 0 0 1px rgba(169, 242, 223, .30),
                inset 0 1px 0 rgba(255, 255, 255, .30),
                0 8px 20px rgba(6, 12, 32, .28);
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1),
                background-color 240ms ease, box-shadow 240ms ease;
}
.hero-stats > div:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.8v3.7l2.4 1.6'/%3E%3Cpath d='M9.4 2.8h5.2'/%3E%3Cpath d='M12 2.8v3.2'/%3E%3Cpath d='m19.2 6.6 1.3-1.3'/%3E%3C/svg%3E"); }
.hero-stats > div:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.2' width='18.8' height='15.6' rx='2.6'/%3E%3Cpath d='M2.6 8.9h18.8'/%3E%3Ccircle cx='5.9' cy='6.6' r='.7' fill='%23a9f2df' stroke='none'/%3E%3Ccircle cx='8.3' cy='6.6' r='.7' fill='%23a9f2df' stroke='none'/%3E%3Cpath d='M6.6 12.6h7'/%3E%3Cpath d='M6.6 16h4.6'/%3E%3C/svg%3E"); }
.hero-stats > div:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.3 18.4h9.5a3.7 3.7 0 0 0 .5-7.36 5.4 5.4 0 0 0-10.2-1.5A3.94 3.94 0 0 0 7.3 18.4Z'/%3E%3Cpath d='M10.2 13.9h3.6'/%3E%3Cpath d='M12 12.3v3.2'/%3E%3C/svg%3E"); }
.hero-stats > div:hover {
    /* Imlecin bulundugu noktada yumusak isik (--mx/--my site-2027.js'den). */
    background:
        radial-gradient(220px 160px at var(--mx, 50%) var(--my, 0%), rgba(169, 242, 223, .16), transparent 70%),
        rgba(255, 255, 255, .07);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(5, 11, 30, .32);
}
.hero-stats > div:hover::before {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 10px 22px rgba(6, 12, 32, .3);
}

.hero-stats b {
    margin-bottom: 10px;
    font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.85rem);
    letter-spacing: -.035em;
    /* Sayarken genislik oynamasin: rakamlar esit genislikte. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    background: var(--hx27-accent);
}
/* Rakamin altinda ince olcum cizgisi: serit gorunur olunca soldan dolar.
   Sayfa acilisinda dolu baslar (JS yoksa da eksik gorunmesin). */
.hero-stats > div > b + span::before {
    content: '';
    display: block;
    width: 100%;
    max-width: 88px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(169, 242, 223, .95), rgba(150, 162, 255, .55));
    transform-origin: left center;
    transform: scaleX(var(--hx-stat-fill, 1));
    transition: transform 900ms cubic-bezier(.2, .7, .2, 1) var(--hx-stat-delay, 0ms);
}
.hero-stats.is-armed > div > b + span::before { --hx-stat-fill: 0; }
.hero-stats.is-filled > div > b + span::before { --hx-stat-fill: 1; }
.hero-stats span {
    color: rgba(234, 241, 252, .74);
    font-size: .95rem;
    line-height: 1.45;
    max-width: 22ch;
}

/* ===================== BOLUM ZEMINLERI ===================== */

.tint {
    position: relative;
    background:
        radial-gradient(680px circle at 88% 6%, color-mix(in srgb, var(--c2) 9%, transparent), transparent 58%),
        radial-gradient(620px circle at 4% 96%, color-mix(in srgb, var(--c1) 8%, transparent), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #f3f6fc 100%);
}

.sec-head .eyebrow { margin-bottom: 16px; }

/* ===================== KARTLAR ===================== */

.card {
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(13, 23, 48, .05), 0 16px 38px rgba(13, 23, 48, .07);
    transition: transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms ease;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: var(--grad);
    opacity: 0;
    transition: opacity 260ms ease;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 4px rgba(13, 23, 48, .06), 0 30px 62px rgba(13, 23, 48, .13);
}
.card:hover::before { opacity: 1; }

.ico {
    border-radius: 14px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--c1) 22%, transparent);
}

/* ===================== ADIMLAR ===================== */

.step::before {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--c1) 24%, transparent);
}

/* ===================== FIYAT KARTLARI ===================== */

.plan {
    border-radius: 24px;
    transition: transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms ease;
}
.plan:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(13, 23, 48, .13); }
/* One cikan pakette site.css zaten degradeli kenarlik ciziyor;
   burada yalnizca o kenarligin altina renkli bir isik ekleniyor. */
.plan.pop {
    box-shadow: 0 2px 6px rgba(13, 23, 48, .07),
                0 34px 70px color-mix(in srgb, var(--c1) 22%, rgba(13, 23, 48, .16));
}
.plan-price b {
    background: linear-gradient(115deg, var(--ink) 0%, color-mix(in srgb, var(--c1) 72%, var(--ink)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ===================== SSS ===================== */

.faq details {
    border-radius: 16px;
    transition: background 200ms ease, box-shadow 200ms ease;
}
.faq details[open] {
    background: color-mix(in srgb, var(--c1) 4%, var(--bg));
    box-shadow: 0 14px 34px rgba(13, 23, 48, .07);
}
.faq summary { transition: color 160ms ease; }

/* ===================== GORSEL BLOK ===================== */

.split-visual {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(13, 23, 48, .16);
}

/* ===================== KAPANIS SERIDI ===================== */

.cta-box {
    border-radius: var(--hx27-r);
    background:
        radial-gradient(600px circle at 84% 6%, rgba(88, 203, 231, .28), transparent 56%),
        radial-gradient(520px circle at 12% 100%, rgba(89, 223, 191, .22), transparent 58%),
        var(--hx27-panel);
    box-shadow: var(--hx27-shadow);
}
.cta-box::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -120px;
    right: -110px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 54px rgba(255, 255, 255, .03);
    pointer-events: none;
}
/* halka en sona uretildigi icin icerigin ustune binmesin */
.cta-box > * { z-index: 1; }
.cta-box .grad { opacity: 1; background: var(--hx27-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cta-box p { color: rgba(234, 241, 252, .84); }
.cta-box .btn-1 {
    background: linear-gradient(118deg, #9ff6de 0%, #7fd8ff 100%);
    color: #10203f;
    box-shadow: 0 14px 34px rgba(58, 190, 214, .32);
}
.cta-box .btn-1:hover { background: linear-gradient(118deg, #aef8e4 0%, #92dfff 100%); }
.cta-box .btn-2 {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

/* ===================== HAREKET ===================== */

@media (prefers-reduced-motion: no-preference) {

    /* kahraman icerigi sirayla acilir */
    .hero .eyebrow,
    .hero h1,
    .hero .lead,
    .hero-btns,
    .hero-note,
    .hero-stats > div {
        animation: hx27-up 760ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .hero h1          { animation-delay: 70ms; }
    .hero .lead       { animation-delay: 140ms; }
    .hero-btns        { animation-delay: 210ms; }
    .hero-note        { animation-delay: 270ms; }
    .hero-stats > div:nth-child(1) { animation-delay: 320ms; }
    .hero-stats > div:nth-child(2) { animation-delay: 380ms; }
    .hero-stats > div:nth-child(3) { animation-delay: 440ms; }
    .hero-stats > div:nth-child(n+4) { animation-delay: 500ms; }

    /* halkalar cok yavas nefes alir */
    .hero > .wrap::after { animation: hx27-float 16s ease-in-out infinite; }

    /* gorunume giren bolumler (site-2027.js sinifi ekler) */
    .hx-rv {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 720ms cubic-bezier(.2, .7, .2, 1),
                    transform 720ms cubic-bezier(.2, .7, .2, 1);
        transition-delay: var(--hx-rv-delay, 0ms);
    }
    .hx-rv.is-in { opacity: 1; transform: none; }
}

@keyframes hx27-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hx27-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-14px, 16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hx-rv { opacity: 1; transform: none; }
}

/* ===================== KUCUK EKRAN ===================== */

/* Telefon menusundeki iki dugme (Giris yap + Ucretsiz deneme) alt alta ve
   tam genislikte durur; yan yana gelince ikisi de daralip okunmuyordu.
   Giris dugmesi 23 Agustos 2026'da eklendi - oncesinde telefonda uygulamaya
   giris baglantisi hicbir yerde gorunmuyordu. */
@media (max-width: 820px) {
    .nav .m-cta { flex-direction: column; gap: 10px; }
    .nav .m-cta .btn { width: 100%; justify-content: center; }
    .nav .m-cta .m-login { order: -1; }
}


@media (max-width: 760px) {
    .hero::after { top: -190px; right: -200px; }
    .hero > .wrap { padding-top: clamp(38px, 6vh, 70px); padding-bottom: clamp(28px, 4vh, 52px); }

    /* TELEFON KARSILAMASI (23 Agustos 2026). Sayi seridi kalkinca metin
       blogu tek basina kaldi; olculer telefona gore yeniden ayarlandi:
       paragraf 7 satira yayilip dugmeleri ekran disina itiyordu. */
    .hero h1 { margin-bottom: 16px; }
    .hero .lead {
        margin-bottom: 26px;
        font-size: 1.02rem;
        line-height: 1.5;
        max-width: 46ch;
    }
    /* Iki dugme de tam genislik: farkli genislikte iki hap yan yana
       gelince hizasiz gorunuyordu. */
    .hero-btns { gap: 10px; }
    .hero-btns .btn { flex: 1 1 100%; justify-content: center; }
    .hero-note { margin-top: 14px; }
    .hero-showcase { margin-top: 26px; }
    /* Serit dar ekranda alt alta: ayrac soldan uste doner. */
    .hero-stats { grid-template-columns: 1fr; padding: 6px; border-radius: 22px; }
    .hero-stats > div { padding: 16px 18px; }
    .hero-stats > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .hero-stats > div::before { width: 36px; height: 36px; margin-bottom: 10px; background-size: 19px 19px; }
    .hero-stats b { font-size: 1.7rem; }
    .hero-stats span { max-width: none; }
    .cta-box { border-radius: 24px; }
}

/* Cok kisa ekranlarda (yatay telefon) tam ekran zorlamasi icerigi
   sikistirmasin - yukseklik serbest birakilir. */
/* tam ekranda serit dibe yaslanir; kendi ic dolgusu degismez */
.hx-home .hero-stats { margin-top: auto; }

@media (max-height: 560px) {
    .hx-home .hero > .wrap { min-height: 0; padding-top: 56px; padding-bottom: 44px; }
}


/* ===================== ILETISIM SAYFASI ===================== */

/* Solda yukseltilmis form karti, sagda kahramanla ayni dilde koyu panel.
   Kolonlarin genisligi ve .wrap degismedi; yalnizca yuzeyler eklendi. */
#form .form-grid { gap: clamp(24px, 3vw, 40px); align-items: stretch; }

#form .form-grid > div:first-child {
    padding: clamp(26px, 3vw, 44px);
    border: 1px solid var(--hair);
    border-radius: 26px;
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(13, 23, 48, .05), 0 24px 56px rgba(13, 23, 48, .08);
}
#form .form-grid > div:first-child h2 { letter-spacing: -.03em; }

/* --- alanlar --- */
.field > span {
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.field input, .field textarea {
    min-height: 54px;
    padding: 15px 17px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-2) 62%, var(--bg));
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--c1) 34%, var(--hair)); }
.field input:focus, .field textarea:focus {
    background: var(--bg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 14%, transparent),
                0 8px 20px rgba(13, 23, 48, .06);
}
.field textarea { min-height: 148px; }
.form-2 { gap: 0 18px; }

/* --- KVKK onayi --- */
.onay {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: color-mix(in srgb, var(--c1) 4%, var(--bg-2));
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.onay input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c1); flex: 0 0 auto; }
.onay a { color: var(--c1); font-weight: 620; }

/* --- sozlesme onaylari --- */
.onaylar { display: grid; gap: 10px; margin: 6px 0 22px; }
.onaylar .onay { margin: 0; }
.onay b { color: var(--c1); }
.onay-ops {
    background: var(--bg);
    border-style: dashed;
    color: var(--ink-3);
}
.onay-ops small { display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-3); }

#form form .btn-1 { min-width: 210px; }

/* --- sonuc mesaji --- */
.note { border-radius: 16px; border-left: 4px solid currentColor; }

/* --- koyu iletisim paneli --- */
.info-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.6vw, 36px);
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(520px circle at 88% 8%, rgba(88, 203, 231, .24), transparent 58%),
        radial-gradient(460px circle at 4% 104%, rgba(89, 223, 191, .18), transparent 58%),
        var(--hx27-panel);
    box-shadow: 0 26px 60px rgba(13, 23, 48, .22);
}
.info-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -120px;
    right: -110px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255, 255, 255, .03);
}
.info-kicker {
    display: inline-block;
    margin-bottom: 22px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(234, 241, 252, .6);
}
.info-card dl { display: grid; gap: 4px; }
.info-card dt {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 11.5px;
    letter-spacing: .12em;
    color: rgba(234, 241, 252, .58);
}
.info-card dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.info-card dt::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .09);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    flex: 0 0 auto;
}
.info-card dt.ic-mail::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.8' width='18.8' height='14.4' rx='2.6'/%3E%3Cpath d='m3.4 7 8.6 6 8.6-6'/%3E%3C/svg%3E"); }
.info-card dt.ic-tel::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.6h3l1.5 3.8-2 1.4a11.4 11.4 0 0 0 5.4 5.4l1.4-2 3.8 1.5v3a1.8 1.8 0 0 1-2 1.8A16.4 16.4 0 0 1 4.5 5.6a1.8 1.8 0 0 1 1.8-2Z'/%3E%3C/svg%3E"); }
.info-card dt.ic-adres::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9f2df' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.info-card dd {
    margin: 8px 0 0 39px;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #fff;
}
.info-card a { color: #a9f2df; font-weight: 600; }
.info-card a:hover { color: #cffaf0; }

.wa-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    margin-top: auto;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(118deg, #9ff6de 0%, #7fd8ff 100%);
    color: #10203f !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(58, 190, 214, .28);
    transition: transform 200ms cubic-bezier(.2, .7, .2, 1), box-shadow 200ms ease;
}
.wa-cta { margin-top: 30px; }
.wa-cta::before {
    content: '';
    width: 19px;
    height: 19px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310203f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 0-7.4 13l-1.1 4 4.1-1.1A8.6 8.6 0 1 0 12 3.4Z'/%3E%3Cpath d='M8.9 8.4c.3-.1.6 0 .8.3l.8 1.3c.1.2.1.5 0 .7l-.5.6c.6 1.1 1.5 2 2.6 2.6l.6-.5c.2-.2.5-.2.7-.1l1.3.8c.3.2.4.5.3.8-.3.8-1.1 1.3-2 1.2-2.9-.4-5.2-2.7-5.6-5.6-.1-.9.3-1.7 1-2.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wa-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(58, 190, 214, .36); }

@media (max-width: 900px) {
    #form .form-grid { grid-template-columns: 1fr; }
    .info-card { border-radius: 22px; }
}
@media (max-width: 560px) {
    #form form .btn-1 { width: 100%; }
}

/* ===================== URUN VINYETI ===================== */

/* Gorsel yuklenmemis split bloklarinda beliren, tamamen CSS ile cizilmis
   program penceresi. Ekran goruntusu degildir; amaci sayfanin bos
   gorunmemesi ve urunun ne yaptigini bir bakista anlatmasidir. */
.split-visual.empty {
    aspect-ratio: 4 / 3.1;
    background:
        radial-gradient(560px circle at 84% 6%, rgba(88, 203, 231, .26), transparent 58%),
        radial-gradient(460px circle at 6% 102%, rgba(89, 223, 191, .2), transparent 58%),
        var(--hx27-panel);
    box-shadow: 0 30px 70px rgba(13, 23, 48, .22);
}
.split-visual.empty::after { content: none; }

.hx-vignette {
    position: absolute;
    inset: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 40px rgba(4, 9, 26, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
}

.hxv-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
}
.hxv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.hxv-bar i:first-child { background: #ff7a72; }
.hxv-bar i:nth-child(2) { background: #ffcc6b; }
.hxv-bar i:nth-child(3) { background: #8ff3d8; }
.hxv-bar span { margin-left: 8px; font-size: 11.5px; letter-spacing: .04em; color: rgba(234, 241, 252, .72); }

.hxv-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 1.25fr .75fr;
    grid-template-rows: 1fr auto;
    gap: 10px;
    padding: 12px;
}
.hxv-card {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}
.hxv-invoice { grid-row: span 2; display: flex; flex-direction: column; }
.hxv-row { display: flex; align-items: baseline; justify-content: space-between; }
.hxv-head { margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(234, 241, 252, .6); }
.hxv-head b { font-size: 12px; letter-spacing: 0; text-transform: none; color: #8ff3d8; }

.hxv-line {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .12);
    color: rgba(234, 241, 252, .72);
    font-variant-numeric: tabular-nums;
}
.hxv-line b { color: #fff; font-weight: 620; }
.hxv-total { border-bottom: 0; margin-top: auto; padding-top: 12px; font-size: 14px; }
.hxv-total b {
    font-size: 17px;
    background: var(--hx27-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hxv-chip {
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(143, 243, 216, .18);
    box-shadow: inset 0 0 0 1px rgba(143, 243, 216, .35);
    font-size: 11px;
    font-weight: 650;
    color: #b8ffe9;
}

.hxv-chart { display: flex; flex-direction: column; }
.hxv-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1 1 auto; min-height: 76px; }
.hxv-bars i {
    flex: 1 1 0;
    height: var(--h);
    border-radius: 5px 5px 3px 3px;
    background: linear-gradient(180deg, rgba(143, 243, 216, .95), rgba(127, 216, 255, .45));
}
.hxv-bars i:last-child { background: linear-gradient(180deg, #9ff6de, #7fd8ff); }

.hxv-mini span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(234, 241, 252, .6); }
.hxv-mini b { display: block; margin: 4px 0 10px; font-size: 15px; }
.hxv-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.hxv-track i { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--hx27-accent); }

@media (prefers-reduced-motion: no-preference) {
    .hxv-bars i { animation: hxv-grow 900ms cubic-bezier(.2, .7, .2, 1) both; transform-origin: bottom; }
    .hxv-bars i:nth-child(2) { animation-delay: 80ms; }
    .hxv-bars i:nth-child(3) { animation-delay: 160ms; }
    .hxv-bars i:nth-child(4) { animation-delay: 240ms; }
    .hxv-bars i:nth-child(5) { animation-delay: 320ms; }
    .hxv-bars i:nth-child(6) { animation-delay: 400ms; }
}
@keyframes hxv-grow { from { transform: scaleY(.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 620px) {
    .hx-vignette { inset: 12px; font-size: 12px; }
    .hxv-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .hxv-invoice { grid-row: auto; }
}

/* ===================== BASKI ===================== */

@media print {
    .hero > .wrap, .cta-box { background: none; color: #000; box-shadow: none; }
    .hero h1, .hero .lead, .hero-note, .cta-box p { color: #000; }
    .hero .grad, .cta-box .grad, .hero-stats b { -webkit-text-fill-color: #000; color: #000; background: none; }
}

/* ===================== VINYET SAYI SERIDI (HX_SPLIT_STATS_V1) =====================
   Gorselsiz iki sutun blogunda vinyetin altina eklenen UC kutuluk serit.
   Kahraman bolumun `hero-stats` dilini (cam plaket, ikon, degrade sayi)
   aynen kullanir; yalnizca vinyetin icine sigacak kadar kucultulur.
   Serit her zaman uc kutudur, bu yuzden sutun sayisi sabit yazildi. */
.split-visual.empty { aspect-ratio: 4 / 3.55; }

.hxv-stats.hero-stats {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 12px 12px;
    padding: 6px;
    padding-top: 6px;
    border-top: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.hxv-stats.hero-stats > div {
    padding: 10px 12px;
    border-radius: 11px;
}
.hxv-stats.hero-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .12); }
/* Vinyet seridi kucuk: kahraman seridinin yeni sus katmanlari (degrade halka,
   isik havuzu, olcum cizgisi, ayrac degradesi) burada yer kaplar - kapatilir. */
.hxv-stats.hero-stats::before,
.hxv-stats.hero-stats::after,
.hxv-stats.hero-stats > div + div::after,
.hxv-stats.hero-stats > div > b + span::before { display: none; content: none; }
.hxv-stats.hero-stats > div:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }
.hxv-stats.hero-stats > div::before {
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    border-radius: 9px;
    background-size: 15px 15px;
}
.hxv-stats.hero-stats b {
    margin-bottom: 2px;
    font-size: clamp(1.02rem, .82rem + .55vw, 1.38rem);
}
.hxv-stats.hero-stats span {
    max-width: 17ch;
    font-size: .74rem;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .hxv-stats.hero-stats { margin: 0 10px 10px; }
    .hxv-stats.hero-stats > div { padding: 9px 10px; }
}

/* Dar ekranda kahraman seridi tek sutuna dusuyor; vinyetin icindeki serit
   ucte kalmali, yoksa pencere yuksekliginden tasar. */
@media (max-width: 560px) {
    .hxv-stats.hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 5px;
        border-radius: 13px;
    }
    .hxv-stats.hero-stats > div { padding: 8px 7px; }
    .hxv-stats.hero-stats > div + div { border-left: 1px solid rgba(255, 255, 255, .12); border-top: 0; }
    .hxv-stats.hero-stats > div::before { width: 22px; height: 22px; margin-bottom: 6px; background-size: 13px 13px; }
    .hxv-stats.hero-stats b { font-size: .95rem; }
    .hxv-stats.hero-stats span { font-size: .66rem; max-width: 14ch; }
}


/* ============================================================================
   HX_HERO_SHOWCASE_V2 (22 Agustos 2026) — KARSILAMADA URUN GORSELI

   Karsilama masaustunde tek sutundu: solda metin, altta sayi seridi, saginda
   bosluk. Artik >=1024px'te iki sutun; sagda uygulamanin panosunu temsil eden
   arayuz cizimi durur. Cizim EKRAN GORUNTUSU DEGIL, tamamen CSS + inline SVG
   (site kurali: disaridan tek kaynak bile istenmez).

   V2 farklari: hafif 3B egim ve derinlik, pencerenin iki yaninda yuzen cam
   bildirim kartlari, grafige trend cizgisi + alan dolgusu, panonun ust satiri,
   altta isik havuzu. Isaretleme: core/blocks.php > hx_block_hero().
   ========================================================================== */

.hero-showcase {
    position: relative;
    margin-top: clamp(30px, 4vh, 48px);
}

.hxs-stage {
    position: relative;
    perspective: 1600px;
}
/* Pencerenin altindaki isik havuzu — cizimi zeminden ayirir. */
.hxs-stage::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -26px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(60% 100% at 50% 0%, rgba(120, 235, 205, .26), transparent 72%);
    filter: blur(18px);
    opacity: .8;
    pointer-events: none;
    z-index: -1;
}

/* ---- pencere govdesi ---- */
.hxs-window {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(21, 31, 62, .94), rgba(12, 19, 42, .97));
    box-shadow: 0 50px 110px rgba(3, 7, 22, .58),
                0 0 0 1px rgba(255, 255, 255, .09),
                inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform 700ms cubic-bezier(.2, .7, .2, 1), box-shadow 700ms ease;
}
.hxs-window::after {
    /* cam parlamasi */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(128deg, rgba(255, 255, 255, .12) 0%, transparent 42%);
    pointer-events: none;
}

.hxs-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
}
.hxs-dots { display: inline-flex; gap: 6px; }
.hxs-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}
.hxs-dots i:first-child { background: rgba(255, 128, 128, .5); }
.hxs-dots i:nth-child(2) { background: rgba(255, 202, 120, .5); }
.hxs-dots i:last-child   { background: rgba(139, 233, 190, .5); }
.hxs-url {
    flex: 1;
    max-width: 260px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
    color: rgba(232, 240, 255, .6);
    font-size: .74rem;
    text-align: center;
}
.hxs-avatar {
    width: 22px;
    height: 22px;
    margin-left: auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #a9f2df, #7f9dff);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}

.hxs-body { display: flex; min-height: 0; }

/* ---- sol kenar cubugu (temsili) ---- */
.hxs-side {
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    gap: 9px;
    padding: 16px 12px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
}
.hxs-side-brand {
    height: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(169, 242, 223, .85), rgba(150, 162, 255, .7));
}
.hxs-side-item {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
}
.hxs-side-item.is-on {
    background: linear-gradient(90deg, rgba(169, 242, 223, .62), rgba(169, 242, 223, .18));
}
.hxs-side-item.is-short { width: 60%; }

/* ---- sag govde ---- */
.hxs-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.hxs-head {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.hxs-head b {
    color: #fff;
    font-size: .92rem;
    font-weight: 750;
    letter-spacing: -.01em;
}
.hxs-head span {
    color: rgba(232, 240, 255, .5);
    font-size: .72rem;
}

.hxs-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.hxs-kpi {
    position: relative;
    overflow: hidden;
    padding: 12px 13px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}
.hxs-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #a9f2df, rgba(150, 162, 255, .5));
}
.hxs-kpi span {
    display: block;
    color: rgba(232, 240, 255, .58);
    font-size: .68rem;
    letter-spacing: .02em;
}
.hxs-kpi b {
    display: block;
    margin: 5px 0 4px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.hxs-kpi em {
    font-size: .66rem;
    font-style: normal;
    font-weight: 700;
}
.hxs-kpi em.is-up   { color: #8fe9c4; }
.hxs-kpi em.is-warn { color: #ffcf8a; }

/* ---- mini sutun grafik + trend cizgisi ---- */
.hxs-chart {
    position: relative;
    height: 96px;
    padding: 12px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .035) 100%),
        rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.hxs-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100%;
}
.hxs-bars span {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, rgba(169, 242, 223, .55), rgba(120, 150, 255, .25));
    transform-origin: bottom center;
    animation: hxs-grow 900ms cubic-bezier(.2, .7, .2, 1) both;
}
.hxs-bars span:nth-child(1) { animation-delay: 60ms; }
.hxs-bars span:nth-child(2) { animation-delay: 110ms; }
.hxs-bars span:nth-child(3) { animation-delay: 160ms; }
.hxs-bars span:nth-child(4) { animation-delay: 210ms; }
.hxs-bars span:nth-child(5) { animation-delay: 260ms; }
.hxs-bars span:nth-child(6) { animation-delay: 310ms; }
.hxs-bars span:nth-child(7) { animation-delay: 360ms; }
.hxs-bars span:nth-child(8) { animation-delay: 410ms; }
.hxs-bars span:nth-child(9) { animation-delay: 460ms; }
.hxs-bars span:nth-child(10) { animation-delay: 510ms; }
.hxs-bars span:nth-child(11) { animation-delay: 560ms; }
.hxs-bars span:nth-child(12) {
    animation-delay: 610ms;
    background: linear-gradient(180deg, rgba(169, 242, 223, .95), rgba(127, 216, 255, .45));
}
@keyframes hxs-grow {
    from { transform: scaleY(.04); opacity: .2; }
    to   { transform: scaleY(1); opacity: 1; }
}
.hxs-trend {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    overflow: visible;
    filter: drop-shadow(0 4px 14px rgba(127, 216, 255, .32));
    animation: hxs-trend-in 1100ms cubic-bezier(.2, .7, .2, 1) 420ms both;
    pointer-events: none;
}
@keyframes hxs-trend-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- son hareketler ---- */
.hxs-rows { display: flex; flex-direction: column; gap: 7px; }
.hxs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.hxs-pill {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .02em;
}
.hxs-pill.is-sale  { background: rgba(143, 233, 196, .16); color: #8fe9c4; }
.hxs-pill.is-stock { background: rgba(150, 162, 255, .16); color: #a9b4ff; }
.hxs-pill.is-cash  { background: rgba(127, 216, 255, .16); color: #7fd8ff; }
.hxs-row b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: rgba(240, 246, 255, .88);
    font-size: .76rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hxs-row em {
    color: #fff;
    font-size: .78rem;
    font-style: normal;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* ---- pencerenin iki yaninda yuzen cam kartlar ---- */
.hxs-card {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 15px;
    background: rgba(15, 24, 50, .74);
    box-shadow: 0 22px 46px rgba(4, 9, 26, .48), inset 0 0 0 1px rgba(255, 255, 255, .14);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    color: #fff;
}
.hxs-card b {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.hxs-card span {
    display: block;
    margin-top: 2px;
    color: rgba(232, 240, 255, .62);
    font-size: .68rem;
}
.hxs-card-ico {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(143, 233, 196, .18);
    color: #8fe9c4;
    box-shadow: inset 0 0 0 1px rgba(143, 233, 196, .32);
}
.hxs-card-ico.is-alt {
    background: rgba(127, 216, 255, .16);
    color: #7fd8ff;
    box-shadow: inset 0 0 0 1px rgba(127, 216, 255, .3);
}
.hxs-card-ico svg { width: 15px; height: 15px; }
.hxs-card.is-a {
    left: -18px;
    top: 24%;
    animation: hxs-float-a 7.5s ease-in-out infinite;
}
.hxs-card.is-b {
    right: -18px;
    bottom: 12%;
    animation: hxs-float-b 8.5s ease-in-out infinite;
}
@keyframes hxs-float-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -9px, 0); }
}
@keyframes hxs-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, 8px, 0); }
}

/* ---- pencerenin altindaki zincir rozeti ---- */
.hxs-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 28px auto 0;
    padding: 10px 16px;
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 34px rgba(5, 11, 30, .32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(234, 241, 252, .84);
    font-size: .78rem;
    font-weight: 650;
}
.hxs-flow i {
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, rgba(169, 242, 223, .9), rgba(150, 162, 255, .5));
}

/* ---- IKI SUTUNLU KARSILAMA (yalniz ana sayfa, >=1024px) ---- */
@media (min-width: 1024px) {
    .hx-home .hero > .wrap {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        grid-template-areas: "copy shot";
        align-content: center;
        column-gap: clamp(34px, 3.8vw, 68px);
    }
    /* Metin sutunu gorselin hizasinda DIKEY ORTADA durur. Serit varken
       "copy" ustte (align-self:end) + "stats" altta iki satirdi; serit
       kalkinca tek satir kaldi. */
    .hx-home .hero-in {
        grid-area: copy;
        max-width: none;
        margin-top: 0;
        align-self: center;
    }
    .hx-home .hero-showcase {
        grid-area: shot;
        margin-top: 0;
        align-self: center;
    }

    /* Hafif 3B: pencere sag sutunda hafifce iceri doner, imlec uzerine
       gelince duzlesir. Cok kucuk aci — metin okunurlugu bozulmasin. */
    .hx-home .hxs-window { transform: perspective(1600px) rotateY(-7deg) rotateX(2.5deg); }
    .hx-home .hero-showcase:hover .hxs-window {
        transform: perspective(1600px) rotateY(-2deg) rotateX(.8deg) translateY(-4px);
        box-shadow: 0 60px 120px rgba(3, 7, 22, .6), 0 0 0 1px rgba(255, 255, 255, .12);
    }

    /* Metin sutunu daraldi: baslik ona gore kuculur. */
    .hx-home .hero h1 { font-size: clamp(2.3rem, .9rem + 2.9vw, 3.7rem); }
    .hx-home .hero .lead { max-width: 54ch; font-size: clamp(1rem, .94rem + .28vw, 1.16rem); }

    /* Asagidaki olculer eskiden karsilamadaki serit icindi; serit kalkti ve
       ayni sinif adini tasiyan TEK yer degerler bolumundeki vinyet seridi
       kaldi (.hxv-stats.hero-stats). Kural oraya baglandi - masaustunde
       gorunum degismesin diye silinmedi, yalnizca dogru hedefe yazildi. */
    .hx-home .hxv-stats.hero-stats > div { padding: 15px 16px; }
    .hx-home .hxv-stats.hero-stats > div::before {
        width: 34px;
        height: 34px;
        margin-bottom: 9px;
        border-radius: 12px;
        background-size: 18px 18px;
    }
    .hx-home .hxv-stats.hero-stats b {
        margin-bottom: 5px;
        font-size: clamp(1.35rem, .9rem + .9vw, 1.9rem);
    }
    .hx-home .hxv-stats.hero-stats > div > b + span::before { max-width: 54px; height: 2px; margin-bottom: 8px; }
    .hx-home .hxv-stats.hero-stats span { font-size: .8rem; max-width: 18ch; }
}

@media (min-width: 1400px) {
    .hx-home .hero > .wrap { column-gap: 78px; }
    .hxs-main { padding: 20px; gap: 14px; }
    .hxs-chart { height: 108px; }
    .hxs-card.is-a { left: -34px; }
    .hxs-card.is-b { right: -30px; }
}

/* Kucuk ekran: pencere metnin altinda, ortalanmis ve kompakt. */
@media (max-width: 1023px) {
    .hero-showcase { max-width: 560px; margin-left: auto; margin-right: auto; }
    .hxs-card.is-a { left: 6px; }
    .hxs-card.is-b { right: 6px; }
}
@media (max-width: 700px) {
    .hxs-card { display: none; }
}
@media (max-width: 560px) {
    .hxs-side { flex-basis: 44px; padding: 12px 9px; }
    .hxs-kpis { grid-template-columns: 1fr 1fr; }
    .hxs-kpis .hxs-kpi:last-child { display: none; }
    .hxs-chart { height: 76px; }
    .hxs-bars { gap: 4px; }
    .hxs-rows .hxs-row:last-child { display: none; }
    .hxs-flow { font-size: .72rem; gap: 8px; padding: 9px 13px; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hxs-bars span,
    .hxs-trend,
    .hxs-card { animation: none; }
    .hx-home .hxs-window { transform: none; }
}