/* =========================================================================
   StokX — stokxpro.com tanıtım sitesi
   Tasarım turu: ChatGPT (2026-09-19) · masaüstü + tablet + mobil
   Kaynak kareler: docs/tasarim/site/tasarim/*.png
   Gerçek bilgi envanteri: docs/SITE_GERCEK_BILGI_ENVANTERI.md

   ⛔ Kurallar:
   - Gölge ve gradyan yok denecek kadar az; yükseklik 1 px kenarlıkla anlatılır.
   - Punto ölçeği aşağıdaki --fs-* kademeleridir; gövdeye elle px yazma.
   - Marka renkleri uygulamanın temasıyla aynı (app_theme.dart).
   ========================================================================= */

:root {
    /* Marka — lib/app/theme/app_theme.dart ile aynı */
    --c-blue:        #005DA9;
    --c-blue-dark:   #00457E;
    --c-blue-deep:   #063B67;
    --c-cyan:        #00AEEF;
    --c-orange:      #F58220;
    --c-green:       #12855B;
    --c-red:         #D93A3A;
    --c-amber:       #B7791F;

    --primary:       var(--c-blue);
    --primary-dark:  var(--c-blue-dark);
    --accent:        var(--c-orange);

    /* Yüzeyler */
    --bg:            #FFFFFF;
    --bg-soft:       #F4F8FC;
    --bg-tint:       #EAF2FA;
    --bg-dark:       #0C2947;
    --border:        #E3EAF2;
    --border-strong: #CFDCEA;

    /* Metin */
    --text:          #12233D;
    --text-body:     #35485F;
    --text-muted:    #6B7C90;
    --text-onblue:   rgba(255,255,255,.86);

    /* Pastel ikon kutuları */
    --tint-blue:   #E8F1FB;  --ink-blue:   #1866B0;
    --tint-orange: #FDF0E3;  --ink-orange: #C9661A;
    --tint-green:  #E6F5EE;  --ink-green:  #12855B;
    --tint-violet: #EFECFB;  --ink-violet: #5B47C0;
    --tint-sky:    #E4F5FD;  --ink-sky:    #0288B5;
    --tint-rose:   #FCEAEC;  --ink-rose:   #C43B4C;

    /* Ölçüler */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-pill: 999px;

    --shadow-card: 0 1px 2px rgba(18,35,61,.04);
    --shadow-pop:  0 10px 30px rgba(12,41,71,.10);

    --header-h: 74px;
    --wrap: 1200px;
    --gutter: 24px;
    --sec-y: 88px;

    /* Punto kademeleri — tek kaynak */
    --fs-display: 46px;
    --fs-h2:      32px;
    --fs-h3:      20px;
    --fs-card:    17px;
    --fs-lead:    17px;
    --fs-body:    15.5px;
    --fs-sm:      14px;
    --fs-xs:      12.5px;
    --fs-eyebrow: 12px;

    --ease: .18s ease;

    /* Eski şablondan kalan değişken adları — alt sayfalardaki gömülü stiller
       (style="…var(--radius)…") bunları çağırıyor. Silinirse o satırlar sessizce
       geçersiz olur ve kutu köşesiz/renksiz çizilir. */
    --radius:      var(--r);
    --radius-lg:   var(--r-lg);
    --radius-pill: var(--r-pill);
    --bg-alt:      #FFFFFF;
    --primary-light: var(--bg-tint);
    --shadow:      var(--shadow-pop);
    --shadow-sm:   var(--shadow-card);
    --transition:  var(--ease);
    --gradient-hot: var(--primary);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.62;
    color: var(--text-body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 { color: var(--text); line-height: 1.22; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-card); }

p { margin: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--primary-dark); }

::selection { background: var(--c-cyan); color: #fff; }

:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

/* Eski şablondan kalan süs öğeleri — tasarım dilinde yok, gizli tutulur */
.blob, .sunburst, .sun, .smile, .wave, .bg-icon, .quote-mark { display: none !important; }

.hl { color: var(--primary); }

/* ============================ DÜĞMELER ============================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 11px 20px;
    border: 1px solid transparent; border-radius: var(--r);
    font-family: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn i { font-size: .95em; }

.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-outline   { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--bg-soft); color: var(--text); border-color: var(--primary); }

.btn-secondary { background: var(--bg-tint); color: var(--primary); }
.btn-secondary:hover { background: #DCE9F7; color: var(--primary-dark); }

.btn-yellow    { background: var(--accent); color: #fff; }
.btn-yellow:hover { background: #DE7016; color: #fff; }

.btn-lg { min-height: 50px; padding: 13px 26px; font-size: var(--fs-card); }
.btn-ghost { background: transparent; color: var(--primary); border-color: transparent; padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { color: var(--primary-dark); }

/* Koyu bant içindeki düğmeler */
.on-dark .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.on-dark .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ============================ ÜST ÇUBUK ============================ */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand-text { font-size: 22px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
    padding: 8px 12px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-body);
}
.nav-link:hover { background: var(--bg-soft); color: var(--text); }
.nav-link.active { color: var(--primary); font-weight: 800; }

.nav-cta { margin-left: 8px; }
.nav-cta + .nav-cta { margin-left: 6px; }
.main-nav .btn { min-height: 40px; padding: 9px 16px; }

.nav-toggle {
    display: none; margin-left: auto;
    width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: #fff; cursor: pointer; padding: 11px 10px;
    flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--ease), opacity var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ BÖLÜM BAŞLIKLARI ============================ */
section { position: relative; }

.section-tag {
    display: inline-block; margin-bottom: 12px;
    font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary);
}
.section-head { max-width: 720px; margin: 0 0 40px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head-row {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    max-width: none; flex-wrap: wrap;
}

/* ============================ KAHRAMAN (HERO) ============================ */
.hero { padding: 72px 0 0; background: linear-gradient(180deg, #FAFCFF 0%, #FFFFFF 62%); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 44px; align-items: center; }

.hero-eyebrow {
    display: block; margin-bottom: 14px;
    font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
}
.hero h1 { margin-bottom: 18px; letter-spacing: -.025em; }
.hero h1 .accent { color: var(--primary); display: block; }
.hero-sub { font-size: var(--fs-lead); color: var(--text-body); max-width: 520px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { margin-top: 14px; font-size: var(--fs-xs); color: var(--text-muted); }

/* Mağaza rozetleri */
.store-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px; min-height: 50px;
    background: #101B2A; color: #fff; border-radius: var(--r);
    transition: background var(--ease);
}
.store-badge:hover { background: #000; color: #fff; }
.store-badge i { font-size: 24px; line-height: 1; }
.store-badge span { display: block; font-size: 10.5px; line-height: 1.25; opacity: .78; letter-spacing: .04em; text-transform: uppercase; }
.store-badge strong { display: block; font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; }

.store-badge.light { background: #fff; color: var(--text); border: 1px solid var(--border-strong); }
.store-badge.light:hover { background: var(--bg-soft); color: var(--text); border-color: var(--primary); }
.store-badge.light i { color: var(--primary); }

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kip başına kahraman görseli: geniş ekranda dizüstü, telefonda telefon karesi */
.only-narrow { display: none; }

.device-phone {
    width: min(262px, 72%); margin: 0 auto;
    border: 8px solid #101B2A; border-radius: 26px; overflow: hidden; background: #101B2A;
    box-shadow: var(--shadow-pop);
}
.device-phone img { width: 100%; display: block; }

/* Dizüstü çerçevesi */
.device-laptop { position: relative; }
.device-laptop .screen {
    border: 10px solid #1B2A3D; border-bottom-width: 12px; border-radius: 14px;
    background: #1B2A3D; overflow: hidden; box-shadow: var(--shadow-pop);
}
.device-laptop .screen img { width: 100%; display: block; }
.device-laptop .base {
    height: 12px; margin: 0 -26px; border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #C9D3DF 0%, #9FAEC0 100%);
}
.device-laptop .base::after {
    content: ""; display: block; width: 88px; height: 4px; margin: 0 auto;
    border-radius: 0 0 4px 4px; background: rgba(0,0,0,.18);
}

/* ============================ PLATFORM ŞERİDİ ============================ */
.platform-band { padding: 26px 0 0; }
/* 8 öğe: 4 platform + 4 doğrulanabilir vaat (Windows kurulumu 2026-09-19'da kalktı) */
.platform-strip {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden;
}
.platform-item { padding: 20px 8px; text-align: center; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-start; }
.platform-item:first-child { border-left: 0; }
.platform-item i { font-size: 22px; color: var(--primary); }
.platform-item strong { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.platform-item span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.platform-item.claim strong { margin-top: 12px; }

/* ============================ ÖZELLİK KARTLARI ============================ */
.features { padding: var(--sec-y) 0; }
.features.soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.feature-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 22px; display: flex; gap: 16px; align-items: flex-start;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.feature-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.feature-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r);
    display: grid; place-items: center; font-size: 19px;
    background: var(--tint-blue); color: var(--ink-blue);
}
.feature-card h3 { font-size: var(--fs-card); margin-bottom: 6px; }
.feature-card p { font-size: var(--fs-sm); color: var(--text-muted); }

.feature-card:nth-child(6n+2) .feature-icon { background: var(--tint-orange); color: var(--ink-orange); }
.feature-card:nth-child(6n+3) .feature-icon { background: var(--tint-green);  color: var(--ink-green); }
.feature-card:nth-child(6n+4) .feature-icon { background: var(--tint-violet); color: var(--ink-violet); }
.feature-card:nth-child(6n+5) .feature-icon { background: var(--tint-sky);    color: var(--ink-sky); }
.feature-card:nth-child(6n+6) .feature-icon { background: var(--tint-rose);   color: var(--ink-rose); }

/* ============================ ÜRÜN VİTRİNİ (sekmeli) ============================ */
.showcase { padding: var(--sec-y) 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.showcase-grid { display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: 28px; align-items: start; }

.showcase-tabs { display: flex; flex-direction: column; gap: 8px; }
.showcase-tab {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--r);
    background: #fff; cursor: pointer; text-align: left;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text-body);
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.showcase-tab i { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-tint); color: var(--primary); font-size: 14px; }
.showcase-tab:hover { border-color: var(--border-strong); }
.showcase-tab.active { border-color: var(--primary); color: var(--primary); background: #fff; }
.showcase-tab.active i { background: var(--primary); color: #fff; }

.showcase-stage { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; }
.showcase-stage img { border-radius: var(--r); border: 1px solid var(--border); width: 100%; }
.showcase-pane { display: none; }
.showcase-pane.active { display: block; }
.showcase-note { margin-top: 14px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* ============================ İKİ KOLONLU ANLATIM ============================ */
.highlights { padding: var(--sec-y) 0; }
.highlight-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px; align-items: center;
    padding: 0 0 56px;
}
.highlight-row:last-child { padding-bottom: 0; }
/* .reverse satırında görsel DOM'da zaten önce gelir — ayrıca order verilmez,
   yoksa iki satır da görseli sağa alır (2026-09-19'da ölçüldü). */
.highlight-text h3 { font-size: 27px; margin-bottom: 14px; }
.highlight-text p { color: var(--text-muted); }

.check-list { margin-top: 20px; display: grid; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--text-body); }
.check-list li i { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-green); color: var(--ink-green); font-size: 10px; }

.shot { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.shot img { width: 100%; }

/* ============================ MOBİL BÖLÜMÜ ============================ */
.mobile-band { padding: var(--sec-y) 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mobile-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.phones { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.phone {
    flex: 0 0 auto; width: 190px;
    border: 8px solid #101B2A; border-radius: 26px; overflow: hidden; background: #101B2A;
    box-shadow: var(--shadow-pop);
}
.phone.small { width: 164px; }
.phone img { width: 100%; display: block; }

/* ============================ FİYATLANDIRMA ============================ */
.pricing { padding: var(--sec-y) 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }

.price-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 22px;
}
.price-card.featured { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,93,169,.08); }
.price-tag {
    position: absolute; top: -11px; left: 22px;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--tint-green); color: var(--ink-green);
    font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
.price-card.featured .price-tag { background: var(--primary); color: #fff; }
.price-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.price-amount { margin: 10px 0 2px; font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.price-amount small { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.price-desc { font-size: var(--fs-xs); color: var(--text-muted); }
.price-card ul { margin: 16px 0 0; display: grid; gap: 9px; }
.price-card ul li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); }
.price-card ul li i { color: var(--ink-green); margin-top: 4px; font-size: 11px; }
.price-card .btn { margin-top: auto; }
.price-card .btn:first-of-type { margin-top: 18px; }

.pricing-note { max-width: 820px; margin: 22px auto 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

/* ============================ SSS ============================ */
.faq { padding: var(--sec-y) 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; position: relative;
    font-size: var(--fs-card); font-weight: 700; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px;
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); transition: transform var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq-item[open] summary { color: var(--primary); }
.faq-body { padding: 0 20px 18px; font-size: var(--fs-sm); color: var(--text-muted); }
.faq-body a { font-weight: 700; }

/* ============================ KAPANIŞ BANDI ============================ */
.cta-band { padding: 72px 0; background: var(--c-blue-deep); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: var(--text-onblue); max-width: 620px; margin: 0 auto; font-size: var(--fs-lead); }
.cta-band .store-buttons { justify-content: center; margin-top: 28px; }
.cta-band .store-badge { background: #fff; color: var(--text); }
.cta-band .store-badge:hover { background: var(--bg-soft); color: var(--text); }
.cta-band .cta-foot { margin-top: 18px; font-size: var(--fs-sm); color: var(--text-onblue); }
.cta-band .cta-foot a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.45); }

/* ============================ BÜLTEN ============================ */
.newsletter-band { padding: 56px 0; background: var(--bg-soft); border-top: 1px solid var(--border); }
.newsletter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.newsletter-text h3 { font-size: 24px; margin-bottom: 8px; }
.newsletter-text p { color: var(--text-muted); font-size: var(--fs-sm); }
.newsletter-input { display: flex; gap: 10px; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r); padding: 6px; align-items: center; }
.newsletter-input > i { margin-left: 10px; color: var(--text-muted); }
.newsletter-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--text); padding: 10px 4px; }
.newsletter-note { margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); }
.nl-status { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.nl-success { background: var(--tint-green); color: var(--ink-green); }
.nl-error { background: var(--tint-rose); color: var(--ink-rose); }

/* ============================ İLETİŞİM ============================ */
.contact-section { padding: var(--sec-y) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }

.contact-info-card { background: var(--c-blue-deep); color: #fff; border-radius: var(--r-lg); padding: 30px; }
.contact-info-card h3 { color: #fff; margin-bottom: 10px; }
.contact-info-card > p { color: var(--text-onblue); font-size: var(--fs-sm); }
.contact-info-card ul { margin-top: 22px; display: grid; gap: 18px; }
.contact-info-card li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-onblue); }
.contact-info-card li i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; }
.contact-info-card strong { color: #fff; font-weight: 800; }
.contact-info-card a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }

.contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }

/* ============================ FORMLAR ============================ */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 800; color: var(--text); letter-spacing: .02em; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: var(--fs-sm); color: var(--text);
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-sm); outline: 0;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group textarea { min-height: 132px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,93,169,.10);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #9AA8B8; }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: 18px; }
.alert-success { background: var(--tint-green); color: var(--ink-green); }
.alert-error { background: var(--tint-rose); color: var(--ink-rose); }

/* ============================ İÇ SAYFA BAŞLIĞI ============================ */
.page-hero { padding: 54px 0 46px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: 38px; margin-bottom: 12px; }
.page-hero p { color: var(--text-muted); font-size: var(--fs-lead); max-width: 720px; }

.breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: var(--fs-xs); color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); font-weight: 700; }
.breadcrumbs a:hover { color: var(--primary); }

.download-hero { padding: 54px 0 46px; background: var(--c-blue-deep); color: #fff; }
.download-hero h1 { color: #fff; font-size: 38px; margin-bottom: 12px; }
.download-hero p { color: var(--text-onblue); max-width: 720px; font-size: var(--fs-lead); }
.download-hero .breadcrumbs, .download-hero .breadcrumbs a { color: rgba(255,255,255,.75); }
.download-hero .store-badge { background: #fff; color: var(--text); }
.download-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-size: var(--fs-sm); color: var(--text-onblue); }
.download-meta i { margin-right: 6px; }

/* ============================ KARTLI IZGARALAR ============================ */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.panel-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.panel-card h3 { font-size: var(--fs-card); margin-bottom: 8px; }
.panel-card p { font-size: var(--fs-sm); color: var(--text-muted); }

.req-card, .value-card, .team-card, .screen-card, .blog-card, .release-item, .timeline-item {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px;
}
.req-card h4, .value-card h3, .team-card h3 h3, .screen-card h4 { margin-bottom: 8px; font-size: var(--fs-card); }
.req-card ul { display: grid; gap: 8px; margin-top: 12px; }
.req-card li { display: flex; gap: 9px; font-size: var(--fs-sm); color: var(--text-muted); }
.req-card li::before { content: "•"; color: var(--primary); font-weight: 900; }
.req-card > i, .value-card > i > i, .screen-card > i {
    display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px;
    border-radius: var(--r); background: var(--tint-blue); color: var(--ink-blue); font-size: 18px;
}
.requirements, .values-grid, .team-grid, .screens-grid, .blog-grid, .release-list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.release-list { grid-template-columns: 1fr; gap: 16px; }
.release-item .ver { font-size: var(--fs-card); font-weight: 900; color: var(--primary); }
.release-item .date { font-size: var(--fs-xs); color: var(--text-muted); }
.release-item ul { margin-top: 12px; display: grid; gap: 8px; }
.release-item li { display: flex; gap: 9px; font-size: var(--fs-sm); color: var(--text-muted); }
.release-item li::before { content: "—"; color: var(--border-strong); }

.screen-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Blog */
.blog-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.blog-card .img { display: grid; place-items: center; height: 168px; background: var(--bg-tint); color: var(--primary); font-size: 34px; }
.blog-card .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card .cat { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.blog-card h3 { font-size: var(--fs-card); line-height: 1.35; }
.blog-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.blog-card .meta { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border); }

.blog-featured { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 26px; }

/* Destek */
.support-detail-grid { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
.support-sidebar { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; position: sticky; top: calc(var(--header-h) + 18px); }
.support-sidebar h4 { font-size: var(--fs-sm); margin-bottom: 12px; }
.support-sidebar a:not(.btn) { display: block; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-body); }
.support-sidebar a:not(.btn):hover, .support-sidebar a:not(.btn).active { background: var(--bg-tint); color: var(--primary); }
/* Kenar çubuğundaki düğme mavi zemin üstünde mavi yazıyla görünmez kalıyordu */
.support-sidebar .btn { display: flex; width: 100%; margin-top: 14px; }
.support-sidebar .btn-primary { color: #fff; }
.filter-btn { padding: 8px 14px; border: 1px solid var(--border-strong); background: #fff; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--text-body); cursor: pointer; }
.filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Hakkımızda */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center; }
.about-story p + p { margin-top: 14px; }
.timeline { display: grid; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.timeline-item .yr { font-size: var(--fs-card); font-weight: 900; color: var(--primary); }
.timeline-item h4 { margin-bottom: 4px; }
.timeline-item p { font-size: var(--fs-sm); color: var(--text-muted); }
.team-card { text-align: center; }
.team-card .avatar { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--bg-tint); color: var(--primary); display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.team-card .role { font-size: var(--fs-xs); color: var(--primary); font-weight: 800; }
.team-card .bio { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 8px; }

/* Yasal sayfalar — tek akış: üstte içindekiler kutusu, altında madde metni.
   ⚠️ `.legal-section` sayfanın <section> sarmalayıcısıdır, kart DEĞİLDİR;
   `.legal-wrap` de ızgara değildir (2026-09-19'da ızgara yapılınca başlıklar
   sol kolona, metin sağ kolona düşmüştü). */
.legal-section { padding: 44px 0 var(--sec-y); }
.legal-wrap { max-width: 840px; margin: 0 auto; }
.legal-wrap > h2 {
    font-size: 24px; margin: 34px 0 12px; padding-top: 22px;
    border-top: 1px solid var(--border);
}
.legal-wrap > h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-wrap > h3 { font-size: var(--fs-card); margin: 20px 0 8px; }
.legal-wrap > p, .legal-wrap li { font-size: var(--fs-body); color: var(--text-body); }
.legal-wrap > p { margin-bottom: 12px; }
.legal-wrap ul, .legal-wrap ol { margin: 10px 0 14px 20px; display: grid; gap: 7px; }
.legal-wrap ul li { list-style: disc; }
.legal-wrap ol li { list-style: decimal; }
.legal-wrap .updated { font-size: var(--fs-xs); color: var(--text-muted); }
.legal-wrap table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: var(--fs-sm); }
.legal-wrap th, .legal-wrap td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-wrap th { background: var(--bg-soft); font-weight: 800; color: var(--text); }

.legal-toc {
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 20px 24px; margin: 18px 0 30px;
}
.legal-toc h4 { font-size: var(--fs-sm); margin-bottom: 10px; }
.legal-toc ol { margin: 0 0 0 18px; display: grid; gap: 6px; }
.legal-toc li { list-style: decimal; }
.legal-toc a { font-size: var(--fs-sm); color: var(--text-body); }
.legal-toc a:hover { color: var(--primary); }

/* 404 */
.err-section { padding: 110px 0; text-align: center; }
.err-code { font-size: 96px; font-weight: 900; color: var(--primary); line-height: 1; }
.err-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* Makale */
.article-hero { padding: 48px 0 32px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.article-body { max-width: 780px; margin: 0 auto; padding: 44px 0 var(--sec-y); }
.article-body h2 { font-size: 26px; margin: 32px 0 12px; }
.article-body h3 { font-size: var(--fs-card); margin: 24px 0 8px; }
.article-body p { margin-bottom: 14px; }
.article-body ul, .article-body ol { margin: 0 0 14px 20px; display: grid; gap: 7px; }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid var(--primary); background: var(--bg-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--text-body); }

/* ============================ ALT BİLGİ ============================ */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr .9fr .9fr 1.05fr 1.25fr; gap: 32px; }
.brand-footer { margin-bottom: 14px; }
.footer-desc { font-size: var(--fs-sm); color: var(--text-muted); max-width: 320px; }
.footer-col h4 { font-size: var(--fs-sm); margin-bottom: 14px; letter-spacing: .04em; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col ul a { font-size: var(--fs-sm); color: var(--text-body); }
.footer-col ul a:hover { color: var(--primary); }
.contact-list li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); }
.contact-list li i { color: var(--primary); margin-top: 4px; font-size: 12px; }
.footer-bottom { margin-top: 44px; border-top: 1px solid var(--border); padding: 18px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }

/* ============================ YÜZEN ÖĞELER ============================ */
.whatsapp-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; font-size: 25px;
    background: #25D366; color: #fff; box-shadow: var(--shadow-pop);
}
.whatsapp-fab:hover { background: #1EB955; color: #fff; }
.wa-tooltip {
    position: absolute; right: 64px; white-space: nowrap;
    background: var(--text); color: #fff; font-size: var(--fs-xs); font-weight: 700;
    padding: 6px 11px; border-radius: var(--r-sm); opacity: 0; pointer-events: none; transition: opacity var(--ease);
}
.whatsapp-fab:hover .wa-tooltip { opacity: 1; }
.wa-pulse { display: none; }

.scroll-top {
    position: fixed; right: 20px; bottom: 86px; z-index: 80;
    width: 42px; height: 42px; border-radius: var(--r);
    display: grid; place-items: center;
    background: #fff; color: var(--text); border: 1px solid var(--border-strong);
    opacity: 0; pointer-events: none; transition: opacity var(--ease);
}
.scroll-top.show { opacity: 1; pointer-events: auto; }
.scroll-top:hover { border-color: var(--primary); color: var(--primary); }

/* ============================ GİRİŞ ANİMASYONU ============================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* =========================================================================
   TABLET  (≤ 1024 px)
   ========================================================================= */
@media (max-width: 1024px) {
    :root { --fs-display: 36px; --fs-h2: 27px; --sec-y: 64px; --header-h: 66px; }

    .nav-toggle { display: flex; }
    .main-nav {
        position: fixed; inset: var(--header-h) 0 auto 0; z-index: 88;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: #fff; border-bottom: 1px solid var(--border);
        padding: 14px var(--gutter) 20px; margin: 0;
        max-height: calc(100vh - var(--header-h)); overflow-y: auto;
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: opacity var(--ease), transform var(--ease);
        box-shadow: var(--shadow-pop);
    }
    .main-nav.open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-link { padding: 12px 10px; font-size: var(--fs-card); }
    .nav-cta, .nav-cta + .nav-cta { margin: 6px 0 0; }
    .main-nav .btn { width: 100%; min-height: 46px; }

    .hero { padding-top: 48px; }
    .hero-sub { max-width: none; }

    .platform-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .platform-item:nth-child(5) { border-left: 0; }
    .platform-item:nth-child(n+5) { border-top: 1px solid var(--border); }

    .features-grid, .cards-3, .requirements, .values-grid, .team-grid, .screens-grid, .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .showcase-grid { grid-template-columns: 1fr; gap: 20px; }
    .showcase-tabs { flex-direction: row; flex-wrap: wrap; }
    .showcase-tab { width: auto; flex: 1 1 calc(33.333% - 6px); }

    .highlight-row { gap: 28px; padding-bottom: 44px; }

    .mobile-grid { grid-template-columns: 1fr; gap: 32px; }
    .phones { order: 2; }

    .contact-grid, .newsletter-grid, .about-grid, .cards-2 { grid-template-columns: 1fr; }
    .support-detail-grid, .legal-wrap { grid-template-columns: 1fr; }
    .support-sidebar, .legal-toc { position: static; }

    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
    .footer-desc { max-width: none; }
}

/* =========================================================================
   DAR TABLET / GENİŞ TELEFON  (≤ 860 px)
   ========================================================================= */
@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .highlight-row { grid-template-columns: 1fr; }
    .highlight-row.reverse .highlight-visual { order: 0; }
    .faq-cols { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .platform-item { border-left: 1px solid var(--border); }
    .platform-item:nth-child(3n+1) { border-left: 0; }
    .platform-item:nth-child(n+4) { border-top: 1px solid var(--border); }
}

/* =========================================================================
   MOBİL  (≤ 640 px)
   ========================================================================= */
@media (max-width: 640px) {
    :root {
        --fs-display: 30px; --fs-h2: 23px; --fs-h3: 18px; --fs-card: 16px;
        --fs-lead: 15.5px; --fs-body: 15px; --fs-sm: 14px;
        --sec-y: 48px; --gutter: 16px;
    }

    .hero { padding-top: 34px; }
    .hero-cta { gap: 10px; }
    .hero-cta .store-badge, .hero-cta .btn { flex: 1 1 100%; justify-content: flex-start; }
    .store-buttons .store-badge { flex: 1 1 100%; }

    .platform-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-item { border-left: 1px solid var(--border); border-top: 1px solid var(--border); padding: 16px 8px; }
    .platform-item:nth-child(odd) { border-left: 0; }
    .platform-item:nth-child(-n+2) { border-top: 0; }

    .features-grid, .cards-3, .cards-2, .pricing-grid,
    .requirements, .values-grid, .team-grid, .screens-grid, .blog-grid {
        grid-template-columns: 1fr;
    }

    .showcase-tab { flex: 1 1 100%; }
    .showcase-stage { padding: 8px; }

    .phones { gap: 10px; }
    .phone { width: 46%; border-width: 6px; border-radius: 20px; }
    .phone.small { width: 42%; }
    /* Üç telefon 390 px'e sığmaz (40+46+40 = %126) → üçüncüsü gizlenir. */
    .phones .phone:last-child { display: none; }

    .section-head { margin-bottom: 28px; }
    .section-head-row { flex-direction: column; align-items: flex-start; }

    .highlight-row { padding-bottom: 34px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }

    .contact-info-card, .contact-form, .legal-section, .panel-card { padding: 20px; }
    .price-card { padding: 20px 18px; }
    .price-amount { font-size: 28px; }

    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom .container { flex-direction: column; gap: 6px; }

    .only-wide { display: none; }
    .only-narrow { display: block; }

    .whatsapp-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; font-size: 23px; }
    .scroll-top { right: 14px; bottom: 74px; }
    .wa-tooltip { display: none; }

    .err-code { font-size: 68px; }
    .download-meta { gap: 10px; flex-direction: column; }
}

/* Çok dar telefonlar */
@media (max-width: 380px) {
    :root { --fs-display: 27px; }
    .brand-text { font-size: 19px; }
}

/* Yazdırma */
@media print {
    .site-header, .site-footer, .whatsapp-fab, .scroll-top, .cta-band, .newsletter-band { display: none !important; }
    body { color: #000; }
}

/* =========================================================================
   EK BİLEŞENLER — masaüstü alt yarı tasarımından (docs/tasarim/site/tasarim/masaustu_alt.png)
   ========================================================================= */

/* Ekran görüntüsü + üstüne binen KPI kartları */
.shot-kpi { position: relative; }
.shot-kpi .kpi-float {
    position: absolute; right: 16px; top: 16px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(62%, 330px);
}
.kpi-mini {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    padding: 11px 13px; box-shadow: var(--shadow-pop);
}
.kpi-mini i { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: 14px; background: var(--tint-blue); color: var(--ink-blue); }
.kpi-mini span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.3; }
.kpi-mini strong { display: block; font-size: var(--fs-card); font-weight: 900; color: var(--text); line-height: 1.25; }
.kpi-mini.warn i  { background: var(--tint-orange); color: var(--ink-orange); }
.kpi-mini.good i  { background: var(--tint-green);  color: var(--ink-green); }
.kpi-mini.alert i { background: var(--tint-rose);   color: var(--ink-rose); }

/* SSS — solda başlık, sağda iki kolon akordeon */
.faq-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-aside h2 { margin-bottom: 10px; }
.faq-aside .section-tag { margin-bottom: 10px; }

/* Kapanış bandı — yuvarlatılmış mavi kart */
.cta-card {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
    background: var(--primary); color: #fff; border-radius: var(--r-xl); padding: 34px 36px;
}
.cta-card h2 { color: #fff; font-size: 28px; margin-bottom: 6px; }
.cta-card p { color: var(--text-onblue); font-size: var(--fs-sm); }
.cta-card .store-buttons { justify-content: flex-end; }
.cta-card .store-badge { background: #0B1B2D; color: #fff; }
.cta-card .store-badge:hover { background: #000; color: #fff; }
.cta-card .store-badge.light { background: #fff; color: var(--text); border-color: #fff; }
.cta-card .store-badge.light:hover { background: var(--bg-soft); color: var(--text); }
.cta-wrap { padding: 12px 0 var(--sec-y); }

/* Bölüm başlığı yanındaki açıklama */
.head-note { max-width: 420px; font-size: var(--fs-xs); color: var(--text-muted); }

/* Ürün vitrini — etkin sekmede sağ ok */
.showcase-tab .chev { margin-left: auto; font-size: 11px; opacity: 0; }
.showcase-tab.active .chev { opacity: 1; }
.showcase-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.showcase-tab.active i { background: rgba(255,255,255,.18); color: #fff; }

@media (max-width: 1024px) {
    .faq-grid { grid-template-columns: 1fr; gap: 20px; }
    .shot-kpi .kpi-float { position: static; width: auto; margin-top: 14px; }
    .cta-card { padding: 28px; }
    .cta-card .store-buttons { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .shot-kpi .kpi-float { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi-mini { padding: 10px; gap: 9px; }
    .kpi-mini i { width: 28px; height: 28px; font-size: 12px; }
    .cta-card { padding: 24px 20px; border-radius: var(--r-lg); }
    .cta-card h2 { font-size: 22px; }
}

/* =========================================================================
   ESKİ ŞABLON SINIFLARININ KARŞILIKLARI
   (alt sayfalar bu adları kullanıyor — tek tek HTML değiştirmek yerine
    aynı görsel dili buradan veriyoruz)
   ========================================================================= */

/* İkon kutusu: <div class="ic"><i …></i></div> */
.ic {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
    border-radius: var(--r); background: var(--tint-blue); color: var(--ink-blue); font-size: 19px;
}
.feature-card .ic, .value-card .ic, .req-card .ic .ic { flex: 0 0 auto; }

/* Eski indirme düğmesi — yeni rozet diliyle aynı */
.store-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 14px; min-height: 50px;
    background: #101B2A; color: #fff; border-radius: var(--r);
    transition: background var(--ease);
}
.store-btn:hover { background: #000; color: #fff; }
.store-btn i { font-size: 24px; line-height: 1; }
.store-btn span { display: block; font-size: 10.5px; line-height: 1.25; opacity: .78; letter-spacing: .04em; text-transform: uppercase; }
.store-btn strong { display: block; font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; }
.cta-band .store-btn, .download-hero .store-btn { background: #fff; color: var(--text); }
.cta-band .store-btn:hover, .download-hero .store-btn:hover { background: var(--bg-soft); color: var(--text); }

/* Eski kart ızgaraları tek kolonlu değil — tanımlı olmayanlara taban ver */
.about-story, .visual { position: relative; }
.stat-pill {
    display: inline-flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    padding: 12px 16px; margin: 0 10px 10px 0;
}
.stat-pill strong { font-size: var(--fs-h3); font-weight: 900; color: var(--text); }
.stat-pill span { font-size: var(--fs-xs); color: var(--text-muted); }

/* Eski istatistik bandı (kullanımdan kalktı ama sayfada kalırsa bozulmasın) */
.stats-band { padding: 48px 0; background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; text-align: center; }
.stat-item strong { display: block; font-size: 28px; font-weight: 900; color: var(--primary); }
.stat-item span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Ekran kartları ızgarası içindeki metin */
.screens-grid .screen-card { text-align: left; }

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .store-btn { flex: 1 1 100%; }
}

/* =========================================================================
   MODÜL KATALOĞU  (features.php)
   ========================================================================= */

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; min-height: 40px;
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-body);
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip i { font-size: 13px; color: var(--primary); }
.chip-count {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--bg-tint); color: var(--primary);
    font-size: 11px; font-weight: 800;
}

.modul-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }

.modul-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.modul-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }

.modul-shot {
    position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: var(--bg-tint); border-bottom: 1px solid var(--border);
    aspect-ratio: 16 / 10; overflow: hidden;
}
.modul-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .3s ease; }
.modul-shot:hover img { transform: scale(1.03); }
.modul-shot .zoom {
    position: absolute; right: 10px; bottom: 10px;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 12px;
    background: rgba(255,255,255,.94); color: var(--text); border: 1px solid var(--border);
    opacity: 0; transition: opacity var(--ease);
}
.modul-shot:hover .zoom, .modul-shot:focus-visible .zoom { opacity: 1; }

.modul-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.modul-baslik { display: flex; align-items: center; gap: 10px; }
.modul-ikon {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 14px;
    background: var(--tint-blue); color: var(--ink-blue);
}
.modul-card h3 { font-size: var(--fs-card); line-height: 1.3; }
.modul-body p { font-size: var(--fs-sm); color: var(--text-muted); }

.modul-card:nth-child(6n+2) .modul-ikon { background: var(--tint-orange); color: var(--ink-orange); }
.modul-card:nth-child(6n+3) .modul-ikon { background: var(--tint-green);  color: var(--ink-green); }
.modul-card:nth-child(6n+4) .modul-ikon { background: var(--tint-violet); color: var(--ink-violet); }
.modul-card:nth-child(6n+5) .modul-ikon { background: var(--tint-sky);    color: var(--ink-sky); }
.modul-card:nth-child(6n+6) .modul-ikon { background: var(--tint-rose);   color: var(--ink-rose); }

/* Büyütme katmanı */
.shot-lightbox {
    position: fixed; inset: 0; z-index: 120;
    display: grid; place-items: center; padding: 28px;
    background: rgba(8, 21, 38, .88);
}
.shot-lightbox[hidden] { display: none; }
.shot-lightbox figure { max-width: min(1280px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.shot-lightbox img { width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--r); background: #fff; }
.shot-lightbox figcaption { color: #fff; font-size: var(--fs-sm); font-weight: 700; text-align: center; }
.lb-close {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px; border-radius: var(--r); cursor: pointer;
    display: grid; place-items: center; font-size: 17px;
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.lb-close:hover { background: rgba(255,255,255,.24); }

@media (max-width: 1024px) {
    .modul-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .modul-grid { grid-template-columns: 1fr; }
    .shot-lightbox { padding: 14px; }
    .lb-close { top: 10px; right: 10px; }
}

/* Bilgi kutusu — indir.php Windows kurulum özeti (.vbox / .bar) */
.vbox { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.vbox h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: var(--fs-card); }
.vbox h4 i { color: var(--primary); }
.vbox .bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0; border-top: 1px solid var(--border); font-size: var(--fs-sm);
}
.vbox .bar:first-of-type { border-top: 0; }
.vbox .bar span { color: var(--text-muted); }
.vbox .bar strong { color: var(--text); font-weight: 800; }

/* Destek kartı bir <a> olduğu için metin mavi kalıyordu — düzelt */

/* Destek arama kutusu: ikon input'un İÇİNDE dursun */

/* Blog — öne çıkan yazı bloğu */
.blog-featured { padding: 26px 28px; display: grid; gap: 10px; }
.blog-featured > i { font-size: 22px; color: var(--primary); }
.blog-featured .cat { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.blog-featured h2 { font-size: 27px; }
.blog-featured p { color: var(--text-muted); }
.blog-featured .meta { display: flex; gap: 16px; font-size: var(--fs-xs); color: var(--text-muted); }
.blog-featured .btn { justify-self: start; margin-top: 6px; }

/* Blog kategori süzgeci */
.filter-btn { min-height: 40px; }

/* =========================================================================
   BLOG — kapak görselleri (ChatGPT ile üretilir), yazı sayfası
   ========================================================================= */

.blog-card .img, .blog-featured .img { overflow: hidden; }
.blog-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .img img { transform: scale(1.04); }

.blog-featured { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: 0; overflow: hidden; }
.blog-featured .img { display: block; aspect-ratio: 16 / 10; background: var(--bg-tint); }
.blog-featured .img img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured .img > i { display: grid; place-items: center; width: 100%; height: 100%; font-size: 44px; color: var(--primary); }
.blog-featured .body { padding: 28px 30px; display: grid; gap: 10px; }

/* Yazı sayfası */
.yazi-meta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: var(--fs-sm); color: var(--text-muted); }
.yazi-meta i { color: var(--primary); margin-right: 6px; }

.yazi-govde { padding: 44px 0 var(--sec-y); }
.yazi-kapak {
    margin: 0 0 36px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-tint);
    aspect-ratio: 16 / 10;
}
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; }
.yazi-kapak > i { display: grid; place-items: center; width: 100%; height: 100%; font-size: 72px; color: var(--primary); }

.etiketler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.etiket {
    padding: 6px 13px; border-radius: var(--r-pill);
    background: var(--bg-tint); color: var(--primary);
    font-size: var(--fs-xs); font-weight: 800;
}

.yazar-kutusu {
    margin-top: 30px; padding: 22px 24px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.yazar { display: flex; align-items: center; gap: 14px; }
.yazar-rozet {
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 900; font-size: var(--fs-card);
    background: var(--primary); color: #fff;
}
.yazar strong { display: block; font-size: var(--fs-sm); color: var(--text); }
.yazar span { font-size: var(--fs-xs); color: var(--text-muted); }

.paylas { display: flex; gap: 8px; }
.paylas a {
    width: 38px; height: 38px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 15px; color: #fff;
    transition: opacity var(--ease);
}
.paylas a:hover { opacity: .85; color: #fff; }
.paylas .wa { background: #25D366; }
.paylas .x  { background: #101B2A; }
.paylas .fb { background: #1877F2; }
.paylas .li { background: #0A66C2; }

@media (max-width: 860px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured .body { padding: 22px; }
}
@media (max-width: 640px) {
    .yazar-kutusu { flex-direction: column; align-items: flex-start; }
}

/* Modül kartı ikonu — uygulamanın kendi 3D ikonu (ChatGPT üretimi, tam renkli).
   ⛔ Bunlar `filter`/`color` ile boyanmaz; tuvalin kendi rengi kullanılır. */
.modul-ikon.ikon3d { background: transparent; width: 38px; height: 38px; }
.modul-ikon.ikon3d img { width: 100%; height: 100%; object-fit: contain; }

/* Ana sayfa özellik kartı ve vitrin sekmesi — uygulamanın 3D ikonları */
.feature-icon.ikon3d { background: transparent; width: 52px; height: 52px; }
.feature-icon.ikon3d img { width: 100%; height: 100%; object-fit: contain; }
.showcase-tab .sekme-ikon {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm);
    display: grid; place-items: center; background: transparent;
}
.showcase-tab .sekme-ikon img { width: 100%; height: 100%; object-fit: contain; }
.showcase-tab.active .sekme-ikon { background: rgba(255,255,255,.16); }

/* Destek kategori kartı ikonu — uygulamanın 3D ikonu */
.ic.ikon3d { background: transparent; width: 48px; height: 48px; }
.ic.ikon3d img { width: 100%; height: 100%; object-fit: contain; }

/* ============================ FİYATLANDIRMA — TASARIM TURU (2026-09-19) ======
   ChatGPT karesi: docs/tasarim/site/tasarim/fiyat_*.png
   Plan kartı: marka adı + dönem satırı ayrı; güven şeridi kartların altında;
   plan özeti iki kolon (liste + illüstrasyon); SSS iki kolon.
   ⛔ Gölge/gradyan eklenmez — yükseklik 1 px kenarlıkla anlatılır.            */
.price-card { padding: 26px 24px; }
.price-name   { font-size: var(--fs-h3); font-weight: 800; color: var(--text); text-transform: none; letter-spacing: 0; }
.price-period { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.price-amount { margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.price-card .price-desc strong { color: var(--text-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.price-card .btn:first-of-type { margin-top: 22px; }

/* Güven şeridi — dördü de doğrulanabilir bilgi (uydurma rozet değil) */
.guven-serit {
    margin-top: 22px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.guven-serit > div {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.guven-serit > div + div { border-left: 1px solid var(--border); }
.guven-serit i { color: var(--primary); font-size: 16px; }

/* Plan özeti — solda tik listesi, sağda illüstrasyon */
.plan-ozet {
    margin-top: 22px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 34px; display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px; align-items: center;
}
.plan-ozet h2 { font-size: 26px; margin: 10px 0 10px; }
.plan-ozet > div > p { color: var(--text-muted); font-size: var(--fs-body); }
.plan-ozet ul { margin-top: 22px; display: grid; gap: 13px; }
.plan-ozet li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.plan-ozet li i {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-pill);
    display: grid; place-items: center; font-size: 10px;
    background: var(--tint-green); color: var(--ink-green);
}
.plan-ozet-gorsel img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }

.pricing-note { max-width: none; margin: 22px 0 0; text-align: left; }

/* SSS — solda başlık + illüstrasyon, sağda açılır liste */
.faq-split { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); gap: 42px; align-items: start; }
.faq-split .faq-wrap { max-width: none; margin: 0; }
.faq-yan h2 { font-size: 28px; margin: 10px 0 12px; }
.faq-yan p { color: var(--text-muted); font-size: var(--fs-sm); }
.faq-yan img { width: 100%; max-width: 300px; height: auto; display: block; margin-top: 26px; }

/* ⚠️ Eşik 1024 DEĞİL 760: ChatGPT'nin 834 px dikey tablet karesinde plan özeti
   ve SSS hâlâ iki kolon duruyor (docs/tasarim/site/tasarim/fiyat_tablet.png).
   1024'te kırmak tablette tasarımdan sapardı. */
@media (max-width: 760px) {
    .plan-ozet { grid-template-columns: 1fr; padding: 28px; }
    .plan-ozet-gorsel { max-width: 560px; margin: 0 auto; }
    .faq-split { grid-template-columns: 1fr; gap: 26px; }
    .faq-yan img { max-width: 240px; margin: 20px auto 0; }
}
@media (max-width: 640px) {
    .guven-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guven-serit > div:nth-child(odd) { border-left: 0; }
    .guven-serit > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .guven-serit > div { justify-content: flex-start; padding: 14px 16px; }
    .plan-ozet { padding: 22px 18px; }
    .plan-ozet h2 { font-size: 22px; }
    .faq-yan h2 { font-size: 24px; }
}
/* İllüstrasyon henüz yoksa (site_gorsel null) kart tek kolona iner —
   yoksa sağ yarısı boş kalıyordu. */
.plan-ozet.tek { grid-template-columns: 1fr; }
.plan-ozet.tek > div { max-width: 820px; }

/* =========================================================================
   İLETİŞİM — TASARIM TURU (2026-09-19, stokx-ec)
   Kaynak kareler: docs/tasarim/site/tasarim/iletisim_{masaustu,tablet,mobil}.png
   Kural: gölge/gradyan yok · çıplak px yok (token) · punto --fs-* kademeleri.
   ========================================================================= */

/* — Kahraman: metin + illüstrasyon — */
.iletisim-hero { padding-bottom: 40px; }
.iletisim-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 32px; align-items: center;
}
.iletisim-hero-gorsel { display: flex; justify-content: flex-end; }
.iletisim-hero-gorsel img { width: 100%; max-width: 420px; }

.hero-fakt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-fakt li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-body); font-weight: 700;
}
.hero-fakt i { color: var(--primary); font-size: 13px; }

/* — Hızlı kanal kartları — */
.kanal-bolum { padding: 48px 0 0; }
.kanal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kanal-kart {
    display: flex; flex-direction: column; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 24px; color: var(--text); transition: border-color var(--ease);
}
.kanal-kart:hover { border-color: var(--border-strong); color: var(--text); }
.kanal-ikon {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px;
    border-radius: var(--r); font-size: 19px;
    background: var(--tint-blue); color: var(--ink-blue);
}
.kanal-kart.tint-green  .kanal-ikon { background: var(--tint-green);  color: var(--ink-green); }
.kanal-kart.tint-orange .kanal-ikon { background: var(--tint-orange); color: var(--ink-orange); }
.kanal-kart h3 { font-size: var(--fs-card); }
.kanal-kart p { font-size: var(--fs-sm); color: var(--text-muted); }
.kanal-deger {
    font-size: var(--fs-sm); font-weight: 800; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kanal-eylem {
    margin-top: auto; padding-top: 12px;
    font-size: var(--fs-sm); font-weight: 800; color: var(--primary);
    display: inline-flex; align-items: center; gap: 8px;
}
.kanal-eylem i { font-size: 11px; transition: transform var(--ease); }
.kanal-kart:hover .kanal-eylem i { transform: translateX(3px); }

/* — Form + yan sütun — */
.contact-section .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.contact-yan { display: grid; gap: 20px; align-content: start; }

.form-head { margin-bottom: 22px; }
.form-head h2 { font-size: 26px; margin-bottom: 8px; }
.form-head p { font-size: var(--fs-sm); color: var(--text-muted); }

.form-not { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.alert-list { margin: 6px 0 0 18px; list-style: disc; }
.alert-list li { font-size: var(--fs-sm); }

.onay-satiri {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 4px 0 20px; font-size: var(--fs-sm); color: var(--text-muted);
}
.onay-satiri input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--primary); flex: 0 0 auto; }
.onay-satiri a { font-weight: 700; }

/* Bal küpü — görünmez ama display:none DEĞİL (bazı botlar onu atlıyor). */
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.harita-link {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
    padding: 11px 16px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.12); color: #fff;
    font-size: var(--fs-sm); font-weight: 800; border-bottom: 0;
}
.harita-link:hover { background: rgba(255,255,255,.2); color: #fff; }

.yan-kart { display: grid; gap: 10px; justify-items: start; }
.yan-ikon {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: var(--r); background: var(--tint-blue); color: var(--ink-blue); font-size: 17px;
}
.yan-kart h4 { font-size: var(--fs-card); }
.yan-kart p { font-size: var(--fs-sm); color: var(--text-muted); }
.yan-kart .btn { margin-top: 4px; }

.faq-daha { margin-top: 22px; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); }
.faq-daha a { font-weight: 800; }

@media (max-width: 1024px) {
    .iletisim-hero-grid { grid-template-columns: 1fr; gap: 26px; }
    .iletisim-hero-gorsel { justify-content: center; }
    .iletisim-hero-gorsel img { max-width: 360px; }
    .kanal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .kanal-kart { padding: 20px; }
    .contact-section .contact-grid { grid-template-columns: 1fr; }
    .contact-yan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-yan .contact-info-card { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .iletisim-hero { padding-bottom: 32px; }
    .iletisim-hero-gorsel img { max-width: 280px; }
    .hero-fakt { gap: 8px; }
    .hero-fakt li { padding: 7px 12px; font-size: var(--fs-xs); }
    .kanal-bolum { padding-top: 34px; }
    .kanal-grid { grid-template-columns: 1fr; }
    .contact-yan { grid-template-columns: 1fr; }
    .form-head h2 { font-size: 22px; }
    .harita-link { width: 100%; justify-content: center; }
    .yan-kart .btn { width: 100%; justify-content: center; }
}

/* ============ YASAL BELGE DÜZENİ — TASARIM TURU (2026-09-19) ==============
   ChatGPT karesi: docs/tasarim/site/tasarim/yasal_*.png — 5 sayfa tek düzen:
   gizlilik-politikasi · kullanim-kosullari · kvkk · privacy-policy · terms-of-use.
   Kahraman bandında sağda "son güncelleme" rozeti, solda yapışkan içindekiler,
   sağda belge kartı. ⛔ Gölge/gradyan yok; hukuki METNE dokunulmadı.          */
.legal-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.legal-ust > div:first-child { flex: 1 1 520px; min-width: 0; }
.legal-rozet {
    flex: 0 0 auto; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 14px 18px; display: grid; gap: 6px;
}
.legal-rozet .updated { font-size: var(--fs-sm); color: var(--text-body); font-weight: 600; }
.legal-rozet .updated i { color: var(--primary); margin-right: 6px; }
.legal-rozet p a { font-size: var(--fs-sm); font-weight: 700; }

.legal-grid { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 24px; align-items: start; }

/* Yan kolon — sayfa kayarken yerinde kalır */
.legal-yan {
    position: sticky; top: calc(var(--header-h) + 16px);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px 16px; max-height: calc(100vh - var(--header-h) - 40px); overflow: auto;
}
.legal-katlanir > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    font-size: var(--fs-sm); font-weight: 800; color: var(--text); padding: 2px 4px 10px;
}
.legal-katlanir > summary::-webkit-details-marker { display: none; }
.legal-katlanir > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
    color: var(--text-muted); transition: transform var(--ease);
}
.legal-katlanir[open] > summary::after { transform: rotate(180deg); }
.legal-katlanir > ol { margin: 0; display: grid; gap: 2px; counter-reset: yasalmadde; }
.legal-katlanir > ol li { list-style: none; counter-increment: yasalmadde; }
.legal-katlanir > ol a {
    display: flex; gap: 9px; align-items: baseline; padding: 8px 10px;
    border-left: 2px solid transparent; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-body); line-height: 1.35;
}
.legal-katlanir > ol a::before { content: counter(yasalmadde) "."; color: var(--text-muted); min-width: 18px; font-weight: 700; }
.legal-katlanir > ol a:hover { background: var(--bg-soft); color: var(--text); }
.legal-katlanir > ol a.aktif { background: var(--tint-blue); border-left-color: var(--primary); color: var(--primary); }
.legal-katlanir > ol a.aktif::before { color: var(--primary); }

/* Belge kartı */
.legal-section .legal-wrap {
    max-width: none; margin: 0;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 30px 34px;
}
.legal-wrap > h2 { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-wrap > h3 { color: var(--primary); }

/* "Sorunuz mu var?" — belgenin altındaki yardım kartı */
.legal-yardim {
    margin-top: 30px; padding: 18px 20px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.legal-yardim strong { display: block; font-size: var(--fs-card); color: var(--text); }
.legal-yardim p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.legal-yardim-eylem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1024px) {
    /* Tablette içindekiler yan kolondan çıkar, belgenin üstünde katlanır karta iner
       ve maddeler İKİ SÜTUNA yayılır (ChatGPT tablet karesi:
       docs/tasarim/site/tasarim/yasal_tablet.png). Rozet de tek satır şeride döner. */
    .legal-grid { grid-template-columns: 1fr; gap: 16px; }
    .legal-yan { position: static; max-height: none; padding: 16px 18px; }
    /* ⚠️ `columns` kullanılır, iki kolonlu ızgara DEĞİL: ızgara satır-öncelikli
       doldurur (1|2 / 3|4) ve madde sırası kırılır; tasarımda numaralar SÜTUN
       boyunca iner (1–6 | 7–12). Madde sayısı sayfadan sayfaya değişiyor,
       `columns` buna kendiliğinden uyar. */
    .legal-katlanir > ol { display: block; columns: 2; column-gap: 18px; }
    .legal-katlanir > ol li { break-inside: avoid; }
    .legal-section .legal-wrap { padding: 26px 24px; }
    .legal-ust > div:first-child { flex: 1 1 100%; }
    .legal-rozet {
        width: 100%; grid-auto-flow: column; justify-content: start; align-items: center;
        gap: 16px; margin-top: 18px;
    }
    .legal-rozet p a { padding-left: 16px; border-left: 1px solid var(--border); }
}
@media (max-width: 640px) {
    /* Telefonda maddeler tek sütun, rozet alt alta (ChatGPT mobil karesi). */
    .legal-katlanir > ol { columns: 1; }
    .legal-rozet { width: 100%; grid-auto-flow: row; gap: 8px; }
    .legal-rozet p a { padding-left: 0; border-left: 0; }
    .legal-section .legal-wrap { padding: 20px 16px; border-radius: var(--r-lg); }
    .legal-yardim { flex-direction: column; align-items: flex-start; }
    .legal-yardim-eylem .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   404 — TASARIM TURU (2026-09-19, stokx-ec)
   Kayıp kullanıcıyı tek rakamla bırakmaz: arama + dört gerçek yol verir.
   ========================================================================= */
.err-section { padding: var(--sec-y) 0; text-align: left; background: var(--bg-soft); }
.err-kart {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 40px; max-width: 820px; margin: 0 auto 24px; text-align: center;
}
.err-rozet {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    padding: 7px 14px; border-radius: var(--r-pill);
    background: var(--tint-orange); color: var(--ink-orange);
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em;
}
.err-section .err-code {
    font-size: 88px; line-height: 1; font-weight: 900; color: var(--primary);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.err-kart h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.err-kart > p { color: var(--text-muted); font-size: var(--fs-lead); max-width: 560px; margin: 0 auto; }

.err-arama {
    display: flex; align-items: center; gap: 10px; margin: 26px auto 0; max-width: 520px;
    background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r); padding: 6px;
}
.err-arama > i { margin-left: 10px; color: var(--text-muted); font-size: 14px; }
.err-arama input {
    flex: 1; border: 0; outline: 0; background: transparent; font: inherit;
    font-size: var(--fs-sm); color: var(--text); padding: 10px 4px; min-width: 0;
}
.err-arama .btn { flex: 0 0 auto; }

.err-section .err-actions { margin-top: 20px; }

.err-yollar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    max-width: 820px; margin: 0 auto;
}
.err-yol {
    display: flex; align-items: center; gap: 16px; color: var(--text);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px 20px; transition: border-color var(--ease);
}
.err-yol:hover { border-color: var(--border-strong); color: var(--text); }
.err-yol h3 { font-size: var(--fs-card); margin-bottom: 4px; }
.err-yol p { font-size: var(--fs-sm); color: var(--text-muted); }
.err-yol > i { margin-left: auto; color: var(--primary); font-size: 13px; transition: transform var(--ease); }
.err-yol:hover > i { transform: translateX(3px); }

@media (max-width: 640px) {
    .err-kart { padding: 26px 20px; border-radius: var(--r-lg); }
    .err-section .err-code { font-size: 62px; }
    .err-arama { flex-wrap: wrap; }
    .err-arama input { flex: 1 1 100%; order: 2; }
    .err-arama .btn { flex: 1 1 100%; order: 3; justify-content: center; }
    .err-arama > i { display: none; }
    .err-yollar { grid-template-columns: 1fr; }
    .err-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* İletişim SSS'i tasarım karesinde sayfa genişliğini kullanıyor (dar 860 kolon değil). */
.faq-genis .faq-wrap { max-width: none; }
.faq-genis .faq-daha { text-align: left; }

/* ============================ DESTEK KONU SAYFASI — TASARIM TURU (2026-09-19) =
   ChatGPT kareleri: docs/tasarim/site/tasarim/destek_detay_{masaustu,tablet,mobil}.png
   Sayfa: destek-detay.php — solda konu menüsü + yardım kutusu, sağda numaralı
   açılır makale kartları, altta önceki/sonraki konu gezinmesi.
   Kategori ikonu = uygulamanın kendi 3D varlığı (assets/images/ikon/*.webp);
   ⛔ filter/color ile boyanmaz.
   ⛔ Gölge/gradyan eklenmez — yükseklik 1 px kenarlıkla anlatılır.             */

.konu-hero .breadcrumbs { margin-bottom: 14px; }
.konu-hero .section-tag { margin-bottom: 8px; }
.konu-hero h1 { margin-bottom: 10px; }   /* boy .page-hero h1 ile aynı (38) kalır */
.konu-hero-ic {
    display: grid; grid-template-columns: minmax(0, 1fr) 132px;
    gap: 28px; align-items: center;
}
.konu-hero-ikon img { width: 132px; height: 132px; object-fit: contain; }
.konu-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.konu-meta span {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 7px 14px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-body);
}
.konu-meta i { color: var(--primary); }

.konu-bolum { padding: 44px 0 var(--sec-y); }
.konu-yan { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 14px; }
.konu-yan .support-sidebar { position: static; top: auto; }

.konu-menu { display: grid; gap: 2px; }
.support-sidebar .konu-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-body);
}
.support-sidebar .konu-menu a:hover { background: var(--bg-soft); color: var(--primary); }
.support-sidebar .konu-menu a.aktif { background: var(--bg-tint); color: var(--primary); font-weight: 800; }
.konu-menu img { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
.konu-menu i { flex: 0 0 auto; width: 26px; text-align: center; color: var(--text-muted); }
.konu-menu span { flex: 1; min-width: 0; }
.konu-menu em {
    flex: 0 0 auto; font-style: normal; font-size: var(--fs-xs); font-weight: 700;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.support-sidebar .konu-menu a.aktif em { color: var(--primary); }

.konu-yardim {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px; display: grid; gap: 10px;
}
.konu-yardim h4 { font-size: var(--fs-sm); }
.konu-yardim p { font-size: var(--fs-xs); color: var(--text-muted); }
.konu-yardim .btn { width: 100%; justify-content: center; font-size: var(--fs-sm); }
.konu-saat { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.konu-saat i { color: var(--primary); }

.konu-icerik { display: grid; gap: 12px; }

/* Makale kartı — SSS kartıyla aynı dil, başında sıra rozeti var */
.makale { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.makale > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; font-size: var(--fs-card); font-weight: 700; color: var(--text);
}
.makale > summary::-webkit-details-marker { display: none; }
.makale-no {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-sm);
    display: grid; place-items: center; background: var(--bg-tint); color: var(--primary);
    font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums;
}
.makale-baslik { flex: 1; min-width: 0; }
.makale > summary > i { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); transition: transform var(--ease); }
.makale[open] > summary { color: var(--primary); border-bottom: 1px solid var(--border); }
.makale[open] > summary > i { transform: rotate(180deg); }
.makale[open] .makale-no { background: var(--primary); color: #fff; }

.makale-govde { padding: 20px 20px 18px 64px; }
.makale-govde > p, .makale-govde li { font-size: var(--fs-sm); color: var(--text-body); }
.makale-govde > p + p { margin-top: 10px; }
.makale-govde h3 { font-size: var(--fs-sm); color: var(--text); margin: 18px 0 8px; }
.makale-govde ol, .makale-govde ul { margin: 12px 0 0 2px; display: grid; gap: 9px; counter-reset: adim; }
.makale-govde ol > li {
    position: relative; padding-left: 34px; counter-increment: adim;
}
.makale-govde ol > li::before {
    content: counter(adim);
    position: absolute; left: 0; top: 1px;
    width: 22px; height: 22px; border-radius: var(--r-pill);
    display: grid; place-items: center;
    background: var(--bg-tint); color: var(--primary);
    font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.makale-govde ul > li { position: relative; padding-left: 20px; }
.makale-govde ul > li::before {
    content: ""; position: absolute; left: 6px; top: 9px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--c-cyan);
}
.makale-govde ol + p, .makale-govde ul + p { margin-top: 14px; }
.makale-govde a { font-weight: 700; }

.makale-alt {
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    font-size: var(--fs-xs); color: var(--text-muted);
}
.makale-alt-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.makale-alt .btn { min-height: 34px; padding: 7px 14px; font-size: var(--fs-xs); }

/* Önceki / sonraki konu */
.konu-gezinme { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.konu-gezinme a {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 16px 18px; display: flex; align-items: center; gap: 14px; color: var(--text);
}
.konu-gezinme a:hover { border-color: var(--primary); color: var(--primary); }
.konu-gezinme .sonraki { justify-content: flex-end; text-align: right; }
.konu-gezinme span { display: grid; gap: 2px; min-width: 0; }
.konu-gezinme em { font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 700; }
.konu-gezinme strong { font-size: var(--fs-sm); font-weight: 800; }
.konu-gezinme i { color: var(--primary); font-size: 13px; }

/* Tablet (834): menü üstte yatay şeride iner, içerik tam genişlik */
@media (max-width: 1024px) {
    /* minmax(0,1fr): düz `1fr` içeriğin min-content'inden küçülmediği için
       yatay kaydırmalı hap şeridi sayfayı 435 px'e genişletiyordu (390'da ölçüldü). */
    .support-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .konu-yan, .konu-yan .support-sidebar, .konu-icerik { min-width: 0; }
    .konu-yan { position: static; grid-template-columns: minmax(0, 1fr); }
    .konu-yan .support-sidebar { padding: 16px; }
    .konu-menu {
        grid-auto-flow: column; grid-auto-columns: max-content;
        gap: 8px; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .support-sidebar .konu-menu a { border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px 7px 8px; white-space: nowrap; }
    .support-sidebar .konu-menu a.aktif { border-color: var(--primary); }
    .konu-menu img, .konu-menu i { width: 22px; height: 22px; }
    .konu-menu em { display: none; }
    .konu-yardim { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 12px; }
    .konu-yardim h4 { grid-column: 1; grid-row: 1; }
    .konu-yardim p  { grid-column: 1; grid-row: 2; }
    .konu-saat      { grid-column: 1; grid-row: 3; }
    .konu-yardim .btn { width: auto; align-self: center; }
    .konu-yardim .btn:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 3; }
    .konu-yardim .btn:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 3; }
}

/* Mobil (390) */
@media (max-width: 720px) {
    .konu-hero-ic { grid-template-columns: minmax(0, 1fr) 76px; gap: 16px; }
    .konu-hero-ikon img { width: 76px; height: 76px; }
    .konu-hero h1 { font-size: 28px; }
    .konu-bolum { padding: 28px 0 var(--sec-y); }
    /* 1024 bloğundaki açık grid-column/grid-row yerleşimleri burada SIFIRLANMALI;
       yoksa üç kolon örtük olarak korunuyor ve sayfa 435 px'e taşıyordu. */
    .konu-yardim { grid-template-columns: minmax(0, 1fr); }
    .konu-yardim h4, .konu-yardim p, .konu-saat,
    .konu-yardim .btn:nth-of-type(1), .konu-yardim .btn:nth-of-type(2) { grid-column: 1; grid-row: auto; }
    .konu-yardim .btn { width: 100%; }
    .makale > summary { padding: 14px 16px; gap: 12px; font-size: var(--fs-body); }
    .makale-govde { padding: 16px 16px 16px 16px; }
    .konu-cta .store-btn { width: 100%; justify-content: center; }
}

/* İletişim — ChatGPT karesiyle (docs/tasarim/site/tasarim/iletisim_masaustu.png) hizalama:
   karede kahraman bandı daha sıkı, kanal kartlarıyla form arası tek nefes. */
.iletisim-hero { padding-top: 32px; padding-bottom: 30px; }
.iletisim-hero-gorsel img { max-width: 300px; }
.kanal-bolum + .contact-section { padding-top: 44px; }
@media (max-width: 1024px) { .iletisim-hero-gorsel img { max-width: 300px; } }
@media (max-width: 640px)  { .iletisim-hero-gorsel img { max-width: 200px; } }

/* Kare ile eşitleme (docs/tasarim/site/tasarim/destek_detay_masaustu.png):
   aktif satırın sol mavi çubuğu · WhatsApp yeşili · ok rozeti · ipucu kutusu. */
.support-sidebar .konu-menu a { border-left: 3px solid transparent; padding-left: 9px; }
.support-sidebar .konu-menu a.aktif { border-left-color: var(--primary); }

.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.btn-whatsapp:hover { background: #1FB855; color: #fff; border-color: #1FB855; }
.btn-outline.wa i { color: #25D366; }
.store-btn.wa { background: #25D366; color: #fff; }
.store-btn.wa:hover { background: #1FB855; color: #fff; }
.cta-band .store-btn.wa { background: #25D366; color: #fff; }
.cta-band .store-btn.wa:hover { background: #1FB855; color: #fff; }

.konu-gezinme i {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-pill);
    display: grid; place-items: center; background: var(--bg-tint); color: var(--primary);
}
.konu-gezinme a:hover i { background: var(--primary); color: #fff; }

.makale-ipucu {
    margin-top: 18px; display: flex; gap: 12px; align-items: flex-start;
    background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r);
    padding: 14px 16px;
}
.makale-ipucu i {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r-pill);
    display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 11px;
}
.makale-ipucu div { font-size: var(--fs-xs); color: var(--text-body); }
/* Yalnız kutunun BAŞLIĞI blok olur; gövdedeki <strong> satır içinde kalmalı
   (hepsine blok verilince "Demo Giriş" tek başına satıra düşüyordu). */
.makale-ipucu div > strong:first-child { display: block; color: var(--text); font-size: var(--fs-sm); margin-bottom: 2px; }
.makale-ipucu div strong { color: var(--text); }

/* İletişim — TABLET karesi (docs/tasarim/site/tasarim/iletisim_tablet.png):
   kahraman iki kolon kalır (834'te metin + küçük illüstrasyon), iletişim kartı
   formun ALTINDA yatay dört sütuna açılır. */
@media (min-width: 700px) and (max-width: 1024px) {
    .iletisim-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; }
    .iletisim-hero-gorsel { justify-content: flex-end; }
    .iletisim-hero-gorsel img { max-width: 240px; }
}
@media (min-width: 620px) and (max-width: 1024px) {
    .contact-yan .contact-info-card ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .contact-yan .contact-info-card li { flex-direction: column; gap: 8px; }
    .harita-link { margin-top: 18px; }
}

/* İletişim — MOBİL karesi (docs/tasarim/site/tasarim/iletisim_mobil.png):
   telefonda kanal kartları uzun kart değil, tek satırlık sıra olur (ikon · metin · ok).
   Eylem metni ekranda küçülür ama DOM'da kalır — ekran okuyucu bağlantının ne yaptığını
   söylemeye devam eder. */
@media (max-width: 640px) {
    .kanal-kart {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px;
    }
    .kanal-ikon { grid-row: 1 / span 3; grid-column: 1; margin-bottom: 0; width: 42px; height: 42px; font-size: 17px; }
    .kanal-kart h3, .kanal-kart p, .kanal-deger { grid-column: 2; }
    .kanal-eylem { grid-row: 1 / span 3; grid-column: 3; margin: 0; padding: 0; font-size: 0; }
    .kanal-eylem i { font-size: 13px; }
}

/* Tablet/mobil hap şeridi: sağ kenarda maskeyle sönümlenir — şeridin devam
   ettiği görünür (docs/tasarim/site/tasarim/destek_detay_tablet.png'de sağdaki
   "›" göstergesinin karşılığı). Maske, gölge/gradyan yasağının dışındadır. */
@media (max-width: 1024px) {
    .support-sidebar .konu-menu {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
}

/* Adım listesinde numaraları birleştiren ince çizgi (kareyle aynı) */
.makale-govde ol > li { position: relative; }
.makale-govde ol > li:not(:last-child)::after {
    content: ""; position: absolute; left: 11px; top: 25px; bottom: -10px;
    width: 1px; background: var(--border);
}

/* 404 — ChatGPT karesi (docs/tasarim/site/tasarim/404_masaustu.png): rakamın yanında
   açık koli + büyüteç illüstrasyonu durur; görsel yoksa rakam tek başına ortalanır. */
.err-kod-satiri { display: flex; align-items: center; justify-content: center; gap: 18px; }
.err-gorsel { width: 190px; max-width: 42%; }
@media (max-width: 640px) {
    .err-kod-satiri { gap: 10px; }
    .err-gorsel { width: 116px; }
}

/* Önceki/sonraki kartları kareyle aynı şekilde yan yana kalır; ancak 560 px
   altında iki kart da okunmaz daralıyor — orada alt alta iner. */
@media (max-width: 560px) {
    .konu-gezinme { grid-template-columns: 1fr; }
    .konu-gezinme .sonraki { justify-content: space-between; }
}

/* Ana sayfa dizüstü maketinin tabanı iki yana −26 px taşıyor; 834 px tablette bu
   sayfayı 2 px yatay kaydırılır yapıyordu (ölçüldü 2026-09-19). Dar ekranda taşma
   kaldırılır — masaüstündeki görünüm aynı kalır. */
@media (max-width: 1024px) { .device-laptop .base { margin: 0; } }

/* ============== HAKKIMIZDA — TASARIM TURU (2026-09-19) ===================
   ChatGPT karesi: docs/tasarim/site/tasarim/hakkimizda_*.png
   Kahramanda 3B illüstrasyon · "Neden StokX" tek kart (metin | 2×2 sayı) ·
   değerler dört ortalanmış kart · yayın geçmişi GERÇEK zaman çizelgesi
   (dikey çizgi + noktalar, son adım dolu + "Şu an").                        */
.hakkimizda-ust { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hakkimizda-ust > div:first-child { flex: 1 1 520px; min-width: 0; }
.hakkimizda-gorsel { flex: 0 0 auto; width: min(320px, 34%); }
.hakkimizda-gorsel img { width: 100%; height: auto; display: block; }

.neden-kart {
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 34px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center;
}
.neden-kart .about-story h2 { margin: 10px 0 12px; font-size: 26px; }
.neden-kart .about-story p { color: var(--text-muted); }
.neden-kart .about-story p + p { margin-top: 12px; }
.neden-kart .about-story strong { color: var(--text); }
.neden-kart .about-story .btn { margin-top: 20px; }

.sayi-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sayi-kart { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.sayi-ikon { display: block; width: 44px; height: 44px; margin-bottom: 12px; }
.sayi-ikon img { width: 100%; height: 100%; object-fit: contain; }
.sayi-deger { font-size: 28px; font-weight: 900; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sayi-kart p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }

/* Dört değer kartı TEK SATIRDA: varsayılan ızgara 3 kolon, dördüncü kart
   yetim kalıyordu (ChatGPT karesinde dördü yan yana). */
.features-grid.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Değer kartı — ikon üstte, metin ortalı (ana sayfadaki yan yana kart DEĞİL) */
.features-grid .deger-kart { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.deger-kart .feature-icon { width: 54px; height: 54px; }
.deger-kart h3 { margin-bottom: 6px; }

/* Zaman çizelgesi — tarih | çizgi+nokta | metin */
.timeline { position: relative; gap: 0; }
.timeline .timeline-item {
    position: relative; background: transparent; border: 0; border-radius: 0;
    /* ⚠️ İKİ kolon: işaretçi ve çizgi ::before/::after ile MUTLAK çizilir.
       Üç kolonlu ızgara denendi ve kırıldı — markup'ta iki çocuk var, metin
       28 px'lik nokta kolonuna düşüp kelime kelime sarıyordu. */
    grid-template-columns: 92px minmax(0, 1fr); gap: 0; padding: 0 0 26px;
}
.timeline .timeline-item:last-child { padding-bottom: 0; }
.timeline .timeline-item .yr {
    display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--primary);
    line-height: 1.35; padding-top: 1px; text-align: right; padding-right: 18px;
}
.timeline .timeline-item .yr em {
    display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: var(--r-pill);
    background: var(--tint-blue); color: var(--primary); font-style: normal;
    font-size: var(--fs-eyebrow); font-weight: 800;
}
/* nokta + çizgi ikinci kolonda çizilir */
.timeline .timeline-item::before {
    content: ""; position: absolute; left: 105px; top: 6px;
    width: 12px; height: 12px; border-radius: var(--r-pill);
    background: #fff; border: 2px solid var(--border-strong); z-index: 1;
}
.timeline .timeline-item::after {
    content: ""; position: absolute; left: 110px; top: 16px; bottom: -6px;
    width: 2px; background: var(--border);
}
.timeline .timeline-item:last-child::after { display: none; }
.timeline .timeline-item.simdi::before { background: var(--primary); border-color: var(--primary); }
.timeline .timeline-item > div { padding-left: 30px; }
.timeline .timeline-item h4 { margin-bottom: 4px; font-size: var(--fs-card); }

@media (max-width: 1024px) {
    .neden-kart { grid-template-columns: 1fr; padding: 28px; }
    .hakkimizda-gorsel { width: min(260px, 32%); }
    /* Tablet ve altında sayı kartı ikonu SOLA geçer (ChatGPT tablet karesi):
       kart alçalır, 2×2 ızgara sayfayı uzatmaz. */
    .sayi-kart { display: flex; align-items: center; gap: 14px; }
    .sayi-ikon { margin-bottom: 0; flex: 0 0 auto; }
    .sayi-govde { min-width: 0; }
    .features-grid.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    /* Telefonda değer kartı da ikon-SOLDA olur (ChatGPT mobil karesi):
       ortalanmış kart dört kez alt alta gelince sayfa gereksiz uzuyordu. */
    .features-grid.dort { grid-template-columns: 1fr; }
    .features-grid .deger-kart { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
    .deger-kart .feature-icon { width: 44px; height: 44px; }
    .hakkimizda-ust { gap: 18px; }
    .hakkimizda-gorsel { width: 200px; margin: 0 auto; }
    .neden-kart { padding: 22px 18px; }
    .sayi-izgara { grid-template-columns: 1fr; }
    /* Telefonda tarih kolonu üste çıkar; nokta ve çizgi solda kalır */
    .timeline .timeline-item { grid-template-columns: 76px minmax(0, 1fr); }
    .timeline .timeline-item > div { padding-left: 26px; }
    .timeline .timeline-item .yr { padding-right: 12px; font-size: var(--fs-xs); }
    .timeline .timeline-item::before { left: 84px; }
    .timeline .timeline-item::after { left: 89px; }
}

/* ============ DESTEK MERKEZİ — TASARIM TURU (2026-09-19) =================
   ChatGPT kareleri: docs/tasarim/site/tasarim/destek_{masaustu,tablet,mobil}.png
   Sayfa: destek.php — kahramanda arama, üç kanal kartı (iletişim sayfasının
   `kanal-kart` dili), 9 kategori kartı, numaralı popüler sorular, iki kolonlu
   SSS ve kapanış bandı.
   ⛔ Gölge/gradyan yok — yükseklik 1 px kenarlıkla anlatılır.
   ⛔ Kategori ikonu uygulamanın kendi 3B varlığıdır; filter/color ile boyanmaz. */

.dm-hero { padding-bottom: 38px; }
.dm-hero + .kanal-bolum { padding-top: 30px; }
.dm-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px; align-items: center;
}
.dm-hero .section-tag { margin-bottom: 8px; }
.dm-hero h1 { margin-bottom: 10px; }
.dm-hero > .container > .dm-hero-grid > .dm-hero-yazi > p { max-width: 560px; }
/* İllüstrasyon henüz üretilmediyse (site_gorsel null) kahraman tek kolona düşer —
   yarısı boş bir bant kalmasın. */
.dm-hero-tek { grid-template-columns: minmax(0, 1fr); }
.dm-hero-gorsel { justify-self: end; }
.dm-hero-gorsel img { width: 100%; max-width: 360px; height: auto; object-fit: contain; }

/* Arama — sayfanın ana eylemi: geniş, tek satır, düğmesi içeride. */
.dm-ara {
    display: flex; align-items: center; gap: 10px;
    margin-top: 22px; max-width: 620px;
    background: #fff; border: 1px solid var(--border-strong);
    border-radius: var(--r); padding: 6px 6px 6px 16px;
}
.dm-ara:focus-within { border-color: var(--primary); }
.dm-ara > i { color: var(--text-muted); font-size: 15px; }
.dm-ara input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--fs-body); color: var(--text); padding: 10px 0;
}
.dm-ara input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dm-ara .btn { flex: 0 0 auto; padding: 11px 24px; }

.dm-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dm-etiket {
    font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
    background: #fff; color: var(--text-body);
    border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 7px 14px; min-height: 32px;
}
.dm-etiket:hover { border-color: var(--primary); color: var(--primary); }

.dm-bolum { padding: 46px 0 0; }
.dm-bolum .section-head { margin-bottom: 22px; }
.dm-populer-bolum { padding-bottom: 6px; }

/* Kategori kartları — ikon solda, sayı sağ altta. */
.dm-kat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dm-kat {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
    align-items: center;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 20px; color: var(--text-body);
}
.dm-kat:hover { border-color: var(--border-strong); color: var(--text-body); }
.dm-kat[hidden] { display: none; }
.dm-kat-ikon { display: flex; align-items: center; justify-content: center; }
.dm-kat-ikon img { width: 64px; height: 64px; object-fit: contain; }
.dm-kat-yazi { display: grid; gap: 4px; min-width: 0; }
.dm-kat-yazi strong { font-size: var(--fs-card); color: var(--text); }
.dm-kat-aciklama { font-size: var(--fs-sm); color: var(--text-muted); }
.dm-kat-sayi {
    grid-column: 2; display: inline-flex; align-items: center; gap: 8px;
    margin-top: 10px; font-size: var(--fs-sm); font-weight: 800; color: var(--primary);
}
.dm-kat-sayi i { font-size: 11px; transition: transform var(--ease); }
.dm-kat:hover .dm-kat-sayi i { transform: translateX(3px); }

.dm-bos {
    margin-top: 18px; padding: 18px 20px; text-align: center;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    font-size: var(--fs-sm); color: var(--text-muted);
}
.dm-bos a { color: var(--primary); font-weight: 700; }

/* Popüler sorular — iki kolon, numaralı satırlar. */
.dm-soru-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dm-soru {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 12px;
    gap: 14px; align-items: center;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r);
    padding: 14px 18px; color: var(--text); min-height: 58px;
}
.dm-soru:hover { border-color: var(--border-strong); color: var(--text); }
.dm-soru[hidden] { display: none; }
.dm-no { font-size: var(--fs-sm); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.dm-soru-metin { font-size: var(--fs-sm); font-weight: 700; }
.dm-rozet {
    font-size: 11px; font-weight: 700; color: var(--ink-blue);
    background: var(--bg-tint); border-radius: var(--r-pill); padding: 5px 10px;
    white-space: nowrap;
}
.dm-soru > i { font-size: 11px; color: var(--text-muted); transition: transform var(--ease); }
.dm-soru:hover > i { transform: translateX(3px); color: var(--primary); }

/* SSS — solda anlatım + illüstrasyon, sağda akordiyon. */
.dm-sss { padding-top: 54px; }
.dm-sss-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 34px; align-items: start; }
.dm-sss-yazi .section-tag { margin-bottom: 8px; }
.dm-sss-yazi h2 { font-size: var(--fs-h2); margin-bottom: 12px; }
.dm-sss-yazi p { font-size: var(--fs-sm); color: var(--text-body); }
.dm-sss-gorsel { display: block; width: 100%; max-width: 280px; height: auto; margin-top: 20px; }
.dm-sss .faq-wrap { max-width: none; margin: 0; }

/* Kapanış bandı — başlık solda, iki düğme sağda. */
.dm-cta { padding: 54px 0; text-align: left; }
.dm-cta-ic { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.dm-cta h2 { margin-bottom: 6px; }
.dm-cta p { margin: 0; max-width: none; font-size: var(--fs-sm); }
.dm-cta-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.dm-cta .btn-light { background: #fff; color: var(--text); border: 1px solid #fff; }
.dm-cta .btn-light:hover { background: var(--bg-soft); color: var(--text); }
.dm-cta .btn-wa { background: var(--c-green); color: #fff; gap: 10px; }
.dm-cta .btn-wa:hover { background: #0E6E4B; color: #fff; }
.dm-cta .btn-wa span { display: grid; line-height: 1.15; text-align: left; }
.dm-cta .btn-wa em { font-style: normal; font-size: var(--fs-xs); opacity: .9; }

@media (max-width: 1024px) {
    .dm-hero-grid:not(.dm-hero-tek) { grid-template-columns: minmax(0, 1fr) 240px; gap: 22px; }
    .dm-hero-gorsel img { max-width: 240px; }
    .dm-ara { max-width: none; }

    /* Dokuz kart iki kolona iner; tek kalan sonuncusu tam genişlik olur. */
    .dm-kat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dm-kat-grid > .dm-kat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .dm-soru-grid { grid-template-columns: 1fr; }
    .dm-sss-grid { grid-template-columns: 1fr; gap: 22px; }
    .dm-sss-yazi { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; align-items: center; }
    .dm-sss-yazi .section-tag, .dm-sss-yazi h2, .dm-sss-yazi p { grid-column: 1; }
    .dm-sss-gorsel { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; justify-self: end; max-width: 200px; }
}

@media (max-width: 640px) {
    .dm-hero { padding-bottom: 26px; }
    .dm-hero-grid:not(.dm-hero-tek) { grid-template-columns: minmax(0, 1fr) 108px; gap: 12px; align-items: start; }
    .dm-hero-gorsel img { max-width: 108px; }
    .dm-hero-yazi > p { font-size: var(--fs-sm); }
    .dm-ara { padding: 5px 5px 5px 14px; }
    .dm-ara .btn { padding: 10px 18px; }
    .dm-etiketler { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .dm-etiketler::-webkit-scrollbar { display: none; }
    .dm-etiket { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; }

    .dm-bolum { padding-top: 34px; }
    .dm-kat-grid { grid-template-columns: 1fr; gap: 10px; }
    .dm-kat {
        grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px;
        padding: 14px 16px; align-items: center;
    }
    .dm-kat-ikon img { width: 44px; height: 44px; }
    .dm-kat-sayi { grid-column: 3; grid-row: 1; margin-top: 0; font-size: var(--fs-xs); }

    .dm-soru { grid-template-columns: 30px minmax(0, 1fr) 12px; gap: 10px; padding: 12px 14px; }
    .dm-rozet { grid-column: 2; justify-self: start; margin-top: 2px; }

    .dm-sss { padding-top: 34px; }
    .dm-sss-yazi { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
    .dm-sss-gorsel { max-width: 96px; }

    .dm-cta { padding: 38px 0; }
    .dm-cta-ic { flex-direction: column; align-items: stretch; gap: 18px; }
    .dm-cta-dugmeler { flex-direction: column; }
    .dm-cta-dugmeler .btn { justify-content: center; }
}

/* ============== BLOG YAZISI — TASARIM TURU (2026-09-19) ==================
   Dil kaynağı: yasal sayfa turu (yapışkan içindekiler) + destek/hakkımızda
   kart dili. ChatGPT görsel limiti dolduğu için kareler sonraki pencerede
   alınacak; yapı aynı dilden türetildi.
   Yeni: ince okuma çubuğu · iki kolon (yapışkan "Bu yazıda" + metin).      */
.okuma-cubugu {
    position: sticky; top: var(--header-h); z-index: 40;
    height: 3px; background: transparent; pointer-events: none;
}
.okuma-cubugu span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .08s linear; }

.yazi-govde .container { max-width: var(--wrap); }
.yazi-kapak { max-width: 880px; margin: 0 auto; }
.yazi-izgara { margin-top: 28px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.yazi-yan {
    position: sticky; top: calc(var(--header-h) + 20px);
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 16px 14px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto;
}
.yazi-icindekiler > ol a { font-size: var(--fs-xs); }
.yazi-ana { min-width: 0; }
.yazi-ana .article-body { max-width: 720px; margin: 0; padding-top: 0; padding-bottom: 32px; }
.yazi-ana .article-body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }

@media (max-width: 1024px) {
    /* İçindekiler metnin üstüne çıkar ve katlanır (ana.js 640 altında kapatır). */
    .yazi-izgara { grid-template-columns: 1fr; gap: 18px; }
    .yazi-yan { position: static; max-height: none; }
    .yazi-ana .article-body { max-width: none; }
}

/* ============== BLOG LİSTESİ — TASARIM TURU (2026-09-19) =================
   Öne çıkan yazı iki kolon (görsel | gövde), kart ızgarası 3'lü, süzgeç
   şeridi bölüm başlığının altında sola yaslı. ⛔ Gölge/gradyan yok.        */
.blog-suzgec { margin: -18px 0 26px; }

.blog-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.blog-featured .img { display: block; margin: 0; background: var(--bg-tint); min-height: 260px; }
.blog-featured .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured .body { padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.blog-featured .one-cikan {
    align-self: flex-start; padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--tint-orange); color: var(--ink-orange);
    font-size: var(--fs-eyebrow); font-weight: 800;
}
.blog-featured h2 { font-size: 27px; line-height: 1.25; }
.blog-featured .meta { display: flex; gap: 16px; font-size: var(--fs-xs); color: var(--text-muted); }
.blog-featured .btn { align-self: flex-start; margin-top: 6px; }

.blog-card .img { height: 186px; padding: 0; }
.blog-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .meta i { color: var(--text-muted); margin-right: 5px; font-size: 11px; }
.blog-card:hover .img img { opacity: .94; }

@media (max-width: 860px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured .img { min-height: 200px; height: 200px; }
    .blog-featured .body { padding: 22px; }
    .blog-featured h2 { font-size: 23px; }
}

/* ============ İNDİR SAYFASI — TASARIM TURU (2026-09-19) ==================
   ChatGPT kareleri: docs/tasarim/gpt/ham/indir_{masaustu,tablet}_tasarim.png
   Ölçümler 1024 px'lik tasarım karesinden 1440'a çevrildi (×1,40625):
     kahraman bandı 262 → 368 lp (canlı zaten 364 → dokunulmadı)
     panel bölümü üst payı  30 →  42     ekran görüntüsü kolonu 322 → 400
     bölüm arası            46 →  64     kart ızgara boşluğu     16 →  20
     sol/sağ kolon 590/310 (+31 ara) → %65,5 / %34,5, ara 38
     sistem gereksinimi kartı arası 9 → 12    kapanış bandı 103 → 145
   Düzeltilen kusurlar:
     1. Bulut kartlarında ikon+başlık+metin üç ayrı flex çocuğuydu; başlık dar
        sütuna sıkışıp üç satıra bölünüyordu → metin <div> ile sarıldı
        (index.php · fiyatlandirma.php zaten böyle).
     2. Sistem gereksinimleri 4 kart, ızgara 3 kolondu → 3+1 kırılıyordu.
     3. Sürüm notu maddelerinde `::before { content: "—" }` ile onay ikonu üst
        üste biniyor, kırık tire artığı çıkıyordu → ::before kapatıldı.
     4. Sayfa 4466 lp'ydi; sürüm notları sağ kolona alınınca ~2160'a indi.
   ⛔ Gölge/gradyan eklenmez — yükseklik 1 px kenarlıkla anlatılır.          */

/* Kahraman — metin solda, 3B cihaz illüstrasyonu sağda (sağ kenardan taşar).
   Görsel yoksa (site_gorsel null) ızgara tek kolona iner, düzen bozulmaz. */
.indir-hero { overflow: hidden; }
.indir-hero-ic { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; }
.indir-hero-ic.tek { grid-template-columns: 1fr; }
.indir-hero-metin p { max-width: 640px; }
.indir-hero .store-buttons { margin-top: 20px; }
.indir-hero-gorsel { margin-right: -70px; }
.indir-hero-gorsel img { width: 100%; max-height: 310px; object-fit: contain; object-position: right center; }

/* Panel bölümü — görsel kolonu ölçülen 322/931 oranında daralır */
.indir-panel { padding: 42px 0 0; }
.indir-panel-satir { grid-template-columns: 400px minmax(0, 1fr); gap: 40px; padding-bottom: 0; align-items: start; }
.indir-panel-dugme { margin-top: 18px; }

/* Gövde — solda kartlar, sağda sürüm notları */
.indir-govde-bolum { padding: 64px 0 44px; }
.indir-govde { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 30px; align-items: start; }
.indir-govde .section-head { margin-bottom: 26px; max-width: none; }
.indir-ara-baslik { margin-top: 36px; }

/* Bulut kartları — masaüstünde ikon ÜSTTE, başlık tek satır */
.indir-bulut { gap: 20px; }
.indir-bulut .feature-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
.indir-bulut .feature-card h3 { margin-bottom: 6px; }

/* Sistem gereksinimleri — dördü tek satırda */
.requirements.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.requirements.dort .req-card { padding: 16px 14px; }
.requirements.dort .req-card .ic { width: 40px; height: 40px; font-size: 17px; margin-bottom: 12px; }
.requirements.dort .req-card li { font-size: var(--fs-xs); gap: 7px; }
.requirements.dort .req-card ul { gap: 6px; margin-top: 10px; }
.requirements.dort .req-card h4 { margin-bottom: 6px; }

/* Sürüm notları — sağ kolon */
.indir-surum .release-list { gap: 14px; }
.indir-surum .release-item { padding: 18px 20px; }
.release-ust { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.release-item h4 { font-size: var(--fs-sm); margin-bottom: 4px; }
.release-item li::before { content: none; }
.release-item li i {
    flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
    display: grid; place-items: center; background: var(--tint-blue); color: var(--ink-blue); font-size: 9px;
}
.indir-surum .release-item li { font-size: var(--fs-xs); }

/* Kapanış bandı — ölçülen 145 lp'ye yaklaşacak kadar sıkıldı (eskisi 301) */
.indir-cta { padding: 30px 0 34px; }
.indir-cta h2 { font-size: 27px; }
.indir-cta p { font-size: var(--fs-body); }
.indir-cta .store-buttons { margin-top: 16px; }

/* ---- Tablet (≤1024): iki kolon alt alta, kart ızgaraları ikişerli ---- */
@media (max-width: 1024px) {
    .indir-hero-ic { grid-template-columns: 1fr; gap: 24px; }
    .indir-hero-gorsel { margin-right: 0; }
    .indir-hero-gorsel img { max-height: 280px; object-position: center; }

    .indir-panel-satir { grid-template-columns: 1fr; gap: 24px; }

    .indir-govde { grid-template-columns: 1fr; gap: 48px; }
    .indir-bulut .feature-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 22px; }
    .requirements.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .indir-surum .release-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* ---- Telefon (≤640): tek kolon, ikon solda 40 px ---- */
@media (max-width: 640px) {
    .indir-panel { padding: 34px 0 0; }
    .indir-govde-bolum { padding: 44px 0 32px; }
    .indir-ara-baslik { margin-top: 36px; }

    .indir-bulut .feature-card { gap: 13px; padding: 18px; }
    .indir-bulut .feature-icon { width: 40px; height: 40px; font-size: 17px; }
    .indir-bulut .feature-icon.ikon3d { width: 40px; height: 40px; }

    .requirements.dort { grid-template-columns: 1fr; }
    .indir-surum .release-list { grid-template-columns: 1fr; }
    .indir-cta { padding: 32px 0 36px; }
}