/* ============================================================
   beta.erp.tr — kurumsal site
   Dark + Light tema, rdp.erp.tr aile-tasarımıyla.
   ============================================================ */

:root, html.theme-dark {
    --bg:           #15161A;
    --bg-elev:      #1A1B20;
    --bg-card:      #1F2128;
    --bg-soft:      #101115;
    --bg-deep:      #0E0F12;
    --border:       #2D3038;
    --border-soft:  #3A3D44;
    --text:         #F2F3F5;
    --text-mute:    #9AA0A8;
    --text-dim:     #6B7079;

    --accent:       #4F7CFF;
    --accent-2:     #6EA8FF;
    --accent-soft:  rgba(79,124,255,.14);
    --green:        #10B981;
    --green-soft:   rgba(16,185,129,.14);
    --whatsapp:     #25D366;
    --whatsapp-soft:rgba(37,211,102,.14);
    --cyan:         #34B7F1;
    --cyan-soft:    rgba(52,183,241,.14);
    --violet:       #A78BFA;
    --violet-soft:  rgba(167,139,250,.14);
    --amber:        #FBBF24;
    --amber-soft:   rgba(251,191,36,.14);
    --orange:       #F97316;
    --orange-soft:  rgba(249,115,22,.14);
    --red:          #F87171;

    --nav-bg:       rgba(21,22,26,.85);
    --shadow-card:  0 4px 14px rgba(0,0,0,.25);
    --shadow-lift:  0 18px 40px -16px rgba(79,124,255,.4);

    /* Durum/yuzey tokenlari: temaya gore degisen HER deger burada; kurallarda sabit renk YOK. */
    --nav-hover:       rgba(255,255,255,.06);
    --shadow-rest:     none;
    --shadow-pop:      0 20px 40px -12px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
    --shadow-logo:     0 4px 12px rgba(0,0,0,.25);
    --shadow-hover:    0 12px 30px rgba(0,0,0,.28);
    --shadow-art:      0 18px 50px rgba(0,0,0,.45);
    --shadow-carousel: 0 20px 50px -20px rgba(0,0,0,.5);
    --live-text:       #10B981;
    --soon:            #F59E0B;
    --soon-text:       #FBBF24;
    --glass:           rgba(21,22,26,.72);
    --track:           rgba(255,255,255,.05);
    --dot:             rgba(242,243,245,.28);
    --dot-hover:       rgba(242,243,245,.55);
    --cta-glow:        rgba(79,124,255,.20);
    --slide-glow:      rgba(79,124,255,.12);
    --focus-ring:      0 0 0 3px rgba(79,124,255,.35);

    /* Hareket: tek egri + iki sure; sert (.15s dogrusal) gecisler yerine */
    --ease:            cubic-bezier(.2,.7,.2,1);
    --ease-std:        cubic-bezier(.4,0,.2,1);
    --dur-fast:        .18s;
    --dur:             .28s;
    --dur-theme:       .45s;

    --mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
    --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display:      "Bricolage Grotesque", "Inter", -apple-system, "Segoe UI", sans-serif;
    --seal:         #E93E30;
    --maxw:         1180px;
    --base-fs:      17px;
}

@media (prefers-color-scheme: light) {
    html.theme-auto {
        --bg:           #F6F8FC;
        --bg-elev:      #FFFFFF;
        --bg-card:      #FFFFFF;
        --bg-soft:      #EEF2FA;
        --bg-deep:      #E3E9F3;
        --border:       #E3E9F3;
        --border-soft:  #CDD6E5;
        --text:         #0D1C33;
        --text-mute:    #56688A;
        --text-dim:     #8497B5;

        --accent:       #2456E0;
        --accent-2:     #4F7CFF;
        --accent-soft:  rgba(36,86,224,.10);
        --green-soft:   rgba(16,185,129,.10);
        --whatsapp-soft:rgba(37,211,102,.10);
        --cyan-soft:    rgba(52,183,241,.10);
        --violet-soft:  rgba(124,58,237,.10);
        --amber-soft:   rgba(202,138,4,.12);
        --orange-soft:  rgba(234,88,12,.12);
        --violet:       #7C3AED;
        --amber:        #B45309;
        --orange:       #EA580C;

        --nav-bg:       rgba(255,255,255,.85);
        --shadow-card:  0 1px 2px rgba(13,28,51,.04), 0 4px 12px rgba(13,28,51,.06);
        --shadow-lift:  0 16px 40px -16px rgba(36,86,224,.25);

        --nav-hover:       rgba(13,28,51,.05);
        --shadow-rest:     0 1px 2px rgba(13,28,51,.04), 0 4px 12px rgba(13,28,51,.06);
        --shadow-pop:      0 16px 36px -10px rgba(13,28,51,.20), 0 2px 6px rgba(13,28,51,.06);
        --shadow-logo:     0 1px 2px rgba(13,28,51,.08), 0 4px 12px rgba(13,28,51,.10);
        --shadow-hover:    0 14px 30px -10px rgba(13,28,51,.20);
        --shadow-art:      0 12px 36px rgba(13,28,51,.18);
        --shadow-carousel: 0 6px 24px rgba(13,28,51,.08);
        --live-text:       #0A7D4F;
        --soon-text:       #B45309;
        --glass:           rgba(255,255,255,.88);
        --track:           rgba(13,28,51,.06);
        --dot:             rgba(13,28,51,.18);
        --dot-hover:       rgba(13,28,51,.40);
        --cta-glow:        rgba(36,86,224,.10);
        --slide-glow:      rgba(36,86,224,.08);
        --focus-ring:      0 0 0 3px rgba(36,86,224,.28);
    }
}

html.theme-light {
    --bg:           #F6F8FC;
    --bg-elev:      #FFFFFF;
    --bg-card:      #FFFFFF;
    --bg-soft:      #EEF2FA;
    --bg-deep:      #E3E9F3;
    --border:       #E3E9F3;
    --border-soft:  #CDD6E5;
    --text:         #0D1C33;
    --text-mute:    #56688A;
    --text-dim:     #8497B5;

    --accent:       #2456E0;
    --accent-2:     #4F7CFF;
    --accent-soft:  rgba(36,86,224,.10);
    --green-soft:   rgba(16,185,129,.10);
    --whatsapp-soft:rgba(37,211,102,.10);
    --cyan-soft:    rgba(52,183,241,.10);
    --violet-soft:  rgba(124,58,237,.10);
    --amber-soft:   rgba(202,138,4,.12);
    --orange-soft:  rgba(234,88,12,.12);
    --violet:       #7C3AED;
    --amber:        #B45309;
    --orange:       #EA580C;

    --nav-bg:       rgba(255,255,255,.85);
    --shadow-card:  0 1px 2px rgba(13,28,51,.04), 0 4px 12px rgba(13,28,51,.06);
    --shadow-lift:  0 16px 40px -16px rgba(36,86,224,.25);

    --nav-hover:       rgba(13,28,51,.05);
    --shadow-rest:     0 1px 2px rgba(13,28,51,.04), 0 4px 12px rgba(13,28,51,.06);
    --shadow-pop:      0 16px 36px -10px rgba(13,28,51,.20), 0 2px 6px rgba(13,28,51,.06);
    --shadow-logo:     0 1px 2px rgba(13,28,51,.08), 0 4px 12px rgba(13,28,51,.10);
    --shadow-hover:    0 14px 30px -10px rgba(13,28,51,.20);
    --shadow-art:      0 12px 36px rgba(13,28,51,.18);
    --shadow-carousel: 0 6px 24px rgba(13,28,51,.08);
    --live-text:       #0A7D4F;
    --soon-text:       #B45309;
    --glass:           rgba(255,255,255,.88);
    --track:           rgba(13,28,51,.06);
    --dot:             rgba(13,28,51,.18);
    --dot-hover:       rgba(13,28,51,.40);
    --cta-glow:        rgba(36,86,224,.10);
    --slide-glow:      rgba(36,86,224,.08);
    --focus-ring:      0 0 0 3px rgba(36,86,224,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: var(--base-fs); }
body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--dur-theme) var(--ease-std), color var(--dur-theme) var(--ease-std);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Navbar ---------- */
.erp-header.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.erp-header .nav {
    display: flex; align-items: center; justify-content: space-between;
    max-width: var(--maxw); margin: 0 auto;
    padding: 16px 24px; gap: 16px;
}
.brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-weight: 700; font-size: 18px; color: var(--text);
    letter-spacing: -0.01em;
}
.brand-badge {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #2456e0);
    color: #fff; font-weight: 800; font-size: 17px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(79,124,255,.4);
}
/* Marka logosu (acik zemin) beyaz kutuda; ERP devre logosu (.logo-saydam, 1.2.108) saydam ve buyuk */
.brand-logo-img {
    height: 38px; width: auto;
    background: #fff; padding: 5px 10px; border-radius: 8px;
    display: block;
    box-shadow: var(--shadow-logo);
}
.brand-logo-img.logo-saydam {
    height: 52px; background: none; padding: 0; border-radius: 0; box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
@media (max-width: 600px) { .brand-logo-img.logo-saydam { height: 44px; } }
.nav-links {
    display: flex; align-items: center; gap: 4px;
    font-size: 14px;
}
.nav-links a {
    padding: 8px 14px; border-radius: 7px;
    color: var(--text-mute);
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Tek sayfa menusu 6 capa tasir; dar masaustunde satir kirilmasin diye bosluk daralir. */
@media (max-width: 1240px) { .nav-links a { padding: 8px 9px; } .nav-links { gap: 2px; } }
.nav-links a:hover { color: var(--text); background: var(--nav-hover); }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-links .lang-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-cta {
    background: var(--accent) !important;
    color: #fff !important;
    font-weight: 600;
}
.nav-cta:hover { background: var(--accent-2) !important; }
.nav-burger { display: none; }
@media (max-width: 1100px) {
    .nav-burger { display: inline-flex; padding: 8px 12px; border-radius: 7px; border: 1px solid var(--border); color: var(--text); cursor: pointer; background: transparent; }
    .nav-links { display: none; position: absolute; right: 12px; top: 64px; flex-direction: column; align-items: stretch; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-width: 220px; box-shadow: var(--shadow-pop); }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 10px 12px; }
}

/* ---------- Hero ---------- */
.hero {
    padding: 32px 24px 20px;
    max-width: 1020px; margin: 0 auto;
    text-align: center;
}
.hero-eyebrow-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.hero-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-mute);
    letter-spacing: .3px;
    background: var(--bg-elev);
}
.hero-eyebrow-mobile {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: transparent;
    text-decoration: none;
    font-weight: 600;
    transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-eyebrow-mobile:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: var(--accent);
}
.hero-eyebrow-mobile i { font-size: 11px; margin-left: 2px; }
.hero-eyebrow .dot {
    display: inline-block; width: 6px; height: 6px;
    background: var(--green); border-radius: 50%;
    margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(16,185,129,.2);
}
.hero-eyebrow strong { color: var(--text); }
.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700; letter-spacing: -0.025em;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
    margin: 0 auto 22px; max-width: 720px;
    font-size: 19.5px; color: var(--text-mute);
    line-height: 1.65;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-ctas {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 10px;
    font-weight: 600; font-size: 15px;
    border: 1px solid transparent; cursor: pointer;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-soft); }
.btn-ghost:hover { background: var(--bg-card); border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ---------- Stats ---------- */
.stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; max-width: var(--maxw);
    margin: 0 auto 56px; padding: 0 24px;
}
.stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 18px; text-align: center;
}
.stat-num {
    font-size: 26px; font-weight: 700;
    color: var(--accent); letter-spacing: -0.02em;
    line-height: 1.1;
}
.stat-label {
    margin-top: 6px; font-size: 12px;
    color: var(--text-mute); text-transform: uppercase;
    letter-spacing: .5px;
}

/* ---------- Section ---------- */
.section {
    padding: 64px 24px;
    max-width: var(--maxw); margin: 0 auto;
}
.section-alt {
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: none; padding-left: 0; padding-right: 0;
}
.section-alt > .inner {
    max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.section h2, .section-alt h2 {
    text-align: center;
    font-size: clamp(26px, 3.2vw, 34px);
    margin: 0 0 10px;
    font-weight: 700; letter-spacing: -0.02em;
}
.section .lead, .section-alt .lead {
    text-align: center;
    color: var(--text-mute);
    margin: 0 auto 40px;
    max-width: 680px;
    font-size: 17.5px;
    line-height: 1.65;
}
.section-kicker {
    display: block; width: fit-content; margin: 0 auto 12px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
}
.section-kicker.green { background: var(--green-soft); color: var(--green); }
.section-kicker.amber { background: var(--amber-soft); color: var(--amber); }
.section-kicker.violet { background: var(--violet-soft); color: var(--violet); }
.section-kicker.cyan { background: var(--cyan-soft); color: var(--cyan); }
.section-kicker.orange { background: var(--orange-soft); color: var(--orange); }

/* ---------- Features grid ---------- */
.features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.feature {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.feature-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 14px;
}
.feature-icon.green   { background: var(--green-soft);   color: var(--green); }
.feature-icon.whatsapp{ background: var(--whatsapp-soft);color: var(--whatsapp); }
.feature-icon.cyan    { background: var(--cyan-soft);    color: var(--cyan); }
.feature-icon.violet  { background: var(--violet-soft);  color: var(--violet); }
.feature-icon.amber   { background: var(--amber-soft);   color: var(--amber); }
.feature-icon.orange  { background: var(--orange-soft);  color: var(--orange); }
.feature h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.feature p  { margin: 0; color: var(--text-mute); font-size: 14.5px; line-height: 1.65; }
.feature .feature-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; font-size: 13px; color: var(--accent); font-weight: 600;
}
.feature .feature-cta i { transition: transform var(--dur) var(--ease); }
.feature:hover .feature-cta i { transform: translateX(3px); }

/* ---------- App tiles (link to other hosted apps) ---------- */
.app-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.app-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    display: flex; flex-direction: column;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    position: relative; overflow: hidden;
}
.app-tile:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}
/* Urun karti brosur kapagi (UrunKapak): her kartta ayni bant — aile tonlu degrade + dev imge
   + simge rozeti; ekran goruntusu varsa sagdan "brosur" gibi tasar. --h = HSL tonu (sunucu). */
.app-tile-cover {
    --h: 228;
    position: relative; height: 150px; margin: -24px -24px 18px; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(120% 95% at 0% 0%, hsl(var(--h) 90% 66% / .55), transparent 62%),
        linear-gradient(135deg, hsl(var(--h) 68% 38%), hsl(calc(var(--h) + 30) 62% 20%));
    border-bottom: 1px solid var(--border);
}
.app-tile-cover::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.2px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 65%); mask-image: linear-gradient(120deg, #000 0%, transparent 65%);
}
.app-tile-glyph {
    position: absolute; right: -8px; bottom: -30px; font-size: 138px; line-height: 1;
    color: rgba(255,255,255,.12); transform: rotate(-10deg);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.app-tile:hover .app-tile-glyph { transform: rotate(-4deg) scale(1.05); }
.app-tile-badge {
    position: absolute; left: 20px; bottom: 18px; z-index: 2;
    width: 58px; height: 58px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 27px; color: #fff;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.app-tile-badge--app { width: 72px; height: 72px; padding: 0; background: none; border: 0; overflow: hidden; }
.app-tile-badge--app img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-tile-shot {
    position: absolute; right: -10%; top: 20px; width: 70%; height: 150px;
    object-fit: cover; object-position: top left;
    border-radius: 10px; border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 20px 44px rgba(0,0,0,.38);
    transform: rotate(-4deg); transform-origin: bottom left;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.app-tile:hover .app-tile-shot { transform: rotate(-2deg) translateY(-6px); }
/* Hover: kapak aydinlanir, isik suzulur, rozet yukselir, ekran goruntusu one cikar; golge urun tonunda. */
.app-tile-cover { transition: filter .45s cubic-bezier(.2,.7,.2,1); }
.app-tile-cover::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
    transform: translateX(-120%);
}
.app-tile-badge { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1); }
.app-tile:has(.app-tile-cover):hover { box-shadow: 0 18px 40px -12px hsl(var(--tile-h, 228) 70% 40% / .45); }
.app-tile:hover .app-tile-cover { filter: saturate(1.15) brightness(1.08); }
.app-tile:hover .app-tile-cover::before { transform: translateX(120%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.app-tile:hover .app-tile-badge { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 32px rgba(0,0,0,.34); }
.app-tile:hover .app-tile-shot { transform: rotate(-1.5deg) translateY(-8px) scale(1.03); box-shadow: 0 26px 52px rgba(0,0,0,.45); }
.app-tile:focus-within { border-color: var(--accent); }
.app-tile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.app-tile-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
    background: var(--accent-soft); color: var(--accent);
}
.app-tile-icon.green   { background: var(--whatsapp-soft); color: var(--whatsapp); }
.app-tile-icon.cyan    { background: var(--cyan-soft);     color: var(--cyan); }
.app-tile-icon.violet  { background: var(--violet-soft);   color: var(--violet); }
.app-tile-icon.amber   { background: var(--amber-soft);    color: var(--amber); }
.app-tile-icon.orange  { background: var(--orange-soft);   color: var(--orange); }
.app-tile-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.app-tile-host { display: block; color: var(--text-dim); font-size: 12.5px; font-family: var(--mono); margin-top: 2px; }
.app-tile-desc { color: var(--text-mute); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; flex: 1; }
.app-tile-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent); font-weight: 600; font-size: 13.5px;
    margin-top: auto;
}
.app-tile:hover .app-tile-cta i { transform: translateX(3px); }
.app-tile-cta i { transition: transform var(--dur) var(--ease); }
.app-tile .live-dot {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; font-size: 11px; color: var(--live-text); font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase;
}
.app-tile .live-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}
/* Cok yakinda: yayinda olmayan urun karti — nabiz yerine amber halka */
.app-tile .soon-dot {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; font-size: 11px; color: var(--soon-text); font-weight: 600;
    letter-spacing: .4px; text-transform: uppercase;
}
.app-tile .soon-dot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--soon); box-shadow: 0 0 0 3px rgba(245,158,11,.25);
}

/* ---------- Carousel ---------- */
.carousel {
    position: relative;
    margin: 20px auto 40px;
    max-width: var(--maxw);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    box-shadow: var(--shadow-carousel);
}
.carousel-track {
    display: flex;
    transition: transform .75s cubic-bezier(.65,.05,.36,1);
    will-change: transform;
}
.carousel-slide {
    flex: 0 0 100%;
    min-height: 380px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
    padding: 48px 52px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elev) 100%);
    position: relative; overflow: hidden;
}
.carousel-slide::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 700px 400px at 85% 50%, var(--slide-glow), transparent 60%);
    opacity: 0;
    transition: opacity 1s ease;
}
.carousel-slide.is-active::before { opacity: 1; }
.carousel-slide > * { position: relative; z-index: 1; }

/* Content fades + lifts in when slide becomes active */
.carousel-slide .slide-body {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .65s ease .15s, transform .65s cubic-bezier(.2,.7,.2,1) .15s;
}
.carousel-slide.is-active .slide-body {
    opacity: 1;
    transform: translateY(0);
}
.carousel-slide .slide-art {
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    opacity: 0;
    transform: translateX(28px) scale(.95);
    transition: opacity .7s ease .2s, transform .8s cubic-bezier(.2,.7,.2,1) .2s;
}
.carousel-slide.is-active .slide-art {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.carousel-slide .slide-art img {
    width: 240px; height: 240px;
    max-width: 100%;
    border-radius: 28px;
    box-shadow: var(--shadow-art);
    transition: transform .6s ease;
}
.carousel-slide.is-active .slide-art img {
    animation: slowFloat 9s ease-in-out forwards;
}
@keyframes slowFloat {
    0%   { transform: scale(1)    rotate(0deg); }
    50%  { transform: scale(1.04) rotate(-1.5deg); }
    100% { transform: scale(1.02) rotate(.5deg); }
}

.carousel-slide .pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    margin-bottom: 14px;
}
.carousel-slide .pill.green  { background: var(--whatsapp-soft); color: var(--whatsapp); }
.carousel-slide .pill.cyan   { background: var(--cyan-soft);     color: var(--cyan); }
.carousel-slide .pill.violet { background: var(--violet-soft);   color: var(--violet); }
.carousel-slide h3 {
    font-size: clamp(24px, 2.8vw, 32px);
    margin: 0 0 14px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--text);
}
.carousel-slide p {
    color: var(--text-mute); font-size: 16.5px; line-height: 1.7;
    margin: 0 0 22px;
}

/* Progress bar that fills during auto-rotate dwell */
.carousel-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--track);
    z-index: 2; overflow: hidden;
}
.carousel-progress::after {
    content: ""; display: block;
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width var(--carousel-dwell, 6500ms) linear;
}
.carousel.is-running .carousel-progress::after { width: 100%; }
.carousel.is-paused  .carousel-progress::after { transition: none; }

.carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text); cursor: pointer; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    font-size: 16px;
}
.carousel-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel-nav.prev { left: 14px; }
.carousel-nav.next { right: 14px; }
.carousel-dots {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 2;
}
.carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--dot);
    border: none; padding: 0; cursor: pointer;
    transition: background .25s ease, width .35s cubic-bezier(.4,0,.2,1);
}
.carousel-dot:hover { background: var(--dot-hover); }
.carousel-dot.active {
    background: var(--accent); width: 28px; border-radius: 4px;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 820px) {
    .carousel-slide { grid-template-columns: 1fr; padding: 32px 24px 56px; gap: 18px; }
    .carousel-slide .slide-art { order: -1; }
    .carousel-slide .slide-art img { max-height: 160px; }
    .carousel-nav { display: none; }
}

/* ---------- Steps ---------- */
.steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px; margin-top: 32px;
}
.step {
    position: relative;
    padding: 24px 24px 24px 66px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.step-num {
    position: absolute; left: 18px; top: 22px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.step h4 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.step p { margin: 0; color: var(--text-mute); font-size: 14.5px; line-height: 1.65; }

/* ---------- Dinamik blok kartı: feature (Task 6 — ürün detay sayfası
   feature-grid'inde tek-öğe partial olarak kullanılır). media/timeline/metrics
   için Templates/default'a özel kart YOK — bunlar Pages/Shared/dynamic/'deki
   zengin ortak partial'lara düşer (bkz. BlockTypeRegistry.cs başlığı). ---------- */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.feature-card i {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 20px; margin-bottom: 14px;
}
.feature-card img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; margin-bottom: 14px; }
.feature-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--text); }
.feature-card p  { margin: 0; color: var(--text-mute); font-size: 14.5px; line-height: 1.65; }

/* ---------- Brand strip (references logos) ---------- */
.brand-strip {
    margin: 64px auto 32px;
    max-width: var(--maxw);
    padding: 0 24px;
    text-align: center;
}
.brand-strip-label {
    color: var(--text-dim);
    font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
    font-weight: 600; margin-bottom: 24px;
}
.brand-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: stretch;
}
.brand-logo {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    min-height: 140px;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.brand-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.brand-logo img {
    max-height: 96px; max-width: 100%;
    object-fit: contain;
}

/* ---------- Use case cards ---------- */
.use-cases {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.use-case {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px;
    display: flex; flex-direction: column;
}
.use-case-tag {
    display: inline-block; padding: 4px 10px; border-radius: 6px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; align-self: flex-start; margin-bottom: 14px;
}
.use-case h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.use-case p  { margin: 0; color: var(--text-mute); font-size: 14px; line-height: 1.65; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.qa {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.qa summary {
    cursor: pointer; padding: 18px 22px;
    font-weight: 600; font-size: 16px; color: var(--text);
    list-style: none; position: relative; padding-right: 44px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
    content: "+"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); font-size: 22px; color: var(--accent);
    transition: transform var(--dur) var(--ease);
}
.qa[open] summary::after { content: "−"; }
.qa-body { padding: 0 22px 18px; color: var(--text-mute); font-size: 15px; line-height: 1.7; }

/* ---------- CTA strip ---------- */
.cta-strip {
    margin: 80px auto 0;
    padding: 56px 32px;
    max-width: var(--maxw);
    border-radius: 18px;
    background:
        radial-gradient(ellipse 600px 300px at 50% 0%, var(--cta-glow), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border);
    text-align: center;
}
.cta-strip h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.cta-strip p {
    color: var(--text-mute); max-width: 560px; margin: 0 auto 26px;
    font-size: 16px;
}
.cta-strip .hero-ctas { margin-top: 0; }

/* ---------- Inner page hero ---------- */
.page-hero {
    padding: 60px 0 24px;
    max-width: var(--maxw); margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.page-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
    margin: 0 0 10px; font-weight: 800;
    letter-spacing: -0.02em;
}
.page-hero .lede {
    color: var(--text-mute); font-size: 17px;
    max-width: 680px; margin: 0 auto;
}

/* ---------- Ürün detay sayfası (Task 7 — /Products/{key}) ---------- */
.product-hero { padding-top: 40px; }

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-dim); font-size: 13.5px; font-weight: 600;
    margin-bottom: 20px;
    transition: color var(--dur) var(--ease);
}
.back-link:hover { color: var(--accent); }
.back-link i { font-size: 12px; }

.hero-actions {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    margin-top: 30px;
}

.btn-outline { background: transparent; color: var(--text); border-color: var(--border-soft); }
.btn-outline:hover { background: var(--bg-card); border-color: var(--accent); color: var(--accent); }

.product-section {
    max-width: var(--maxw); margin: 0 auto;
    padding: 48px 24px;
    border-top: 1px solid var(--border);
}
.product-section:first-of-type { border-top: none; }
.product-section h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 26px;
}

.feature-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.screenshot-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.screenshot-grid figure {
    margin: 0; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
}
.screenshot-grid img { width: 100%; display: block; }
.screenshot-grid figcaption {
    padding: 12px 16px; color: var(--text-mute); font-size: 13.5px;
    border-top: 1px solid var(--border);
}

.timeline {
    list-style: none; margin: 0; padding: 0;
    border-left: 2px solid var(--border-soft);
}
.timeline li {
    position: relative; padding: 0 0 28px 28px;
    font-weight: 600; color: var(--text);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: ""; position: absolute; left: -7px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.timeline li span { display: block; color: var(--accent); font-size: 13px; font-weight: 700; margin-top: 4px; }
.timeline li p { margin: 6px 0 0; color: var(--text-mute); font-size: 14.5px; font-weight: 400; line-height: 1.65; }

/* Urun dokumantasyonu (_docs): sol yapiskan icindekiler + sag bolumler; mobilde icindekiler ustte. */
.product-docs .docs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.docs-toc { position: sticky; top: 96px; font-size: 14px; }
.docs-toc-title { margin: 0 0 10px; color: var(--text-dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.docs-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-soft); }
.docs-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-mute); text-decoration: none; line-height: 1.35; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.docs-toc a:hover, .docs-toc a:focus-visible { color: var(--accent); border-left-color: var(--accent); }
.docs-body { min-width: 0; }
.doc-part { scroll-margin-top: 96px; padding: 0 0 34px; margin: 0 0 34px; border-bottom: 1px solid var(--border); color: var(--text-mute); font-size: 15.5px; line-height: 1.7; }
.doc-part:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.doc-part h3 { margin: 0 0 12px; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.doc-part h4 { margin: 22px 0 8px; color: var(--text); font-size: 16px; font-weight: 700; }
.doc-part .doc-sub { margin: -4px 0 14px; color: var(--accent); font-weight: 600; font-size: 14px; }
.doc-part .doc-shot { margin: 18px 0 4px; }
.doc-part .doc-shot a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border, rgba(0,0,0,.08)); box-shadow: 0 10px 30px -12px rgba(15,23,42,.25); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.doc-part .doc-shot a:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(15,23,42,.35); }
.doc-part .doc-shot a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.doc-part .doc-shot img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .doc-part .doc-shot a { transition: none; } .doc-part .doc-shot a:hover { transform: none; } }
.doc-part p { margin: 0 0 12px; }
.doc-part ul, .doc-part ol { margin: 0 0 14px; padding-left: 22px; }
.doc-part li { margin: 4px 0; }
.doc-part strong { color: var(--text); }
.doc-part a { color: var(--accent); }
.doc-part code { font-family: var(--mono); font-size: .9em; background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; color: var(--text); }
.doc-part .doc-table-wrap { overflow-x: auto; margin: 6px 0 16px; border: 1px solid var(--border); border-radius: 12px; }
.doc-part table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-part th, .doc-part td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.doc-part tr:last-child td { border-bottom: none; }
.doc-part th { background: var(--bg-soft); color: var(--text); font-weight: 700; font-size: 13px; }
.doc-part td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-part .doc-note { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; color: var(--text); font-size: 14.5px; }
@media (max-width: 991.98px) {
    .product-docs .docs-layout { grid-template-columns: 1fr; gap: 24px; }
    .docs-toc { position: static; }
    .docs-toc ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: none; }
    .docs-toc a { padding: 6px 12px; margin: 0; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 13px; }
    .docs-toc a:hover, .docs-toc a:focus-visible { border-color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .docs-toc a { transition: none; } }

.download-box {
    max-width: 720px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 44px 32px; text-align: center;
}
.download-box h2 { margin-bottom: 18px; }
.download-meta {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
    margin: 0 0 26px; color: var(--text-mute); font-size: 14.5px;
}
.download-meta span { display: inline-flex; align-items: center; gap: 6px; }
.download-meta strong { color: var(--text); }
.download-box .hash {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin: 20px 0 0; color: var(--text-dim); font-size: 12.5px;
}
.download-box .hash code {
    font-family: var(--mono); background: var(--bg-soft);
    padding: 4px 10px; border-radius: 6px; word-break: break-all;
}
.download-box .notes-link {
    display: inline-block; margin-top: 16px;
    color: var(--accent); font-weight: 600; font-size: 13.5px;
}
/* Surume sabitlenmis kalici adres — dugmenin hemen altinda, ikincil vurguda. */
.download-box .permalink {
    margin: 14px 0 0; color: var(--text-dim); font-size: 12.5px;
}
.download-box .permalink a { color: var(--text-mute); text-decoration: none; }
.download-box .permalink a:hover { color: var(--accent); }
.download-box .permalink code {
    font-family: var(--mono); background: var(--bg-soft);
    padding: 3px 8px; border-radius: 6px; word-break: break-all;
}
/* Kurulum adimlari: kart ortali ama METIN sola hizali — numarali yonergeler
   ortalandiginda okunmaz hale gelir. */
.download-box .install-title {
    margin: 30px 0 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.download-box .install-steps {
    max-width: 560px; margin: 14px auto 0; padding-left: 22px;
    text-align: start; color: var(--text-mute); font-size: 14px; line-height: 1.7;
}
.download-box .install-steps li { margin-bottom: 8px; }
.download-box .install-steps li:last-child { margin-bottom: 0; }
.download-box .smartscreen {
    display: flex; align-items: flex-start; justify-content: center; gap: 8px;
    max-width: 560px; margin: 16px auto 0; text-align: start;
    color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
}
.download-box .verify {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin: 10px 0 0; color: var(--text-dim); font-size: 12.5px;
}
.download-box .verify code {
    font-family: var(--mono); background: var(--bg-soft);
    padding: 4px 10px; border-radius: 6px; word-break: break-all;
}

.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
    margin-bottom: 10px; overflow: hidden;
}
.faq-item summary {
    cursor: pointer; padding: 18px 22px;
    font-weight: 600; font-size: 16px; color: var(--text);
    list-style: none; position: relative; padding-right: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%); font-size: 22px; color: var(--accent);
    transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item > div { padding: 0 22px 18px; color: var(--text-mute); font-size: 15px; line-height: 1.7; }

/* ---------- Content (DB-driven) blocks rendered nicely ---------- */
.content-stack {
    max-width: 820px; margin: 0 auto;
    padding: 40px 24px;
}
.content-stack .erp-block { margin: 0 0 36px; }
.content-stack h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700; letter-spacing: -0.015em; margin: 0 0 10px;
}
.content-stack .erp-block-subtitle { color: var(--text-mute); font-size: 16px; margin: 0 0 12px; }
.content-stack p, .content-stack li { color: var(--text-mute); line-height: 1.7; }
.content-stack strong { color: var(--text); }
.content-stack img {
    border-radius: 12px; border: 1px solid var(--border);
    margin: 18px 0; width: 100%;
}

/* about-grid (mission/vision/values cards w/ images) */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: var(--maxw); margin: 0 auto;
    padding: 40px 24px;
}
.about-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.about-card img {
    width: 100%; height: 160px; object-fit: cover;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
/* Hakkimizda kartlari urun kartlariyla ayni brosur kapagini ve hover dilini kullanir. */
.about-card { position: relative; transition: border-color var(--dur) var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.about-card .app-tile-cover { margin: 0; height: 160px; }
.about-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--slide-glow), transparent 60%);
    opacity: 0; transition: opacity .35s var(--ease);
}
.about-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.about-card:hover::after { opacity: 1; }
.about-card:hover .app-tile-cover { filter: saturate(1.15) brightness(1.08); }
.about-card:hover .app-tile-cover::before { transform: translateX(120%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.about-card:hover .app-tile-badge { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 32px rgba(0,0,0,.34); }
.about-card:hover .app-tile-glyph { transform: rotate(-4deg) scale(1.05); }
.about-card .body { padding: 22px 22px 26px; }
.about-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.about-card p  { margin: 0; color: var(--text-mute); font-size: 14px; line-height: 1.65; }

/* ---------- Refs page ---------- */
.refs-industry {
    max-width: var(--maxw); margin: 0 auto;
    padding: 32px 24px 0;
}
.refs-industry h3 {
    color: var(--accent); font-size: 12px;
    letter-spacing: .8px; text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px; margin-bottom: 18px;
    font-weight: 700;
}
.refs-grid {
    /* auto-fill: tek logolu sektörde kart tam genişliğe yayılmaz, kolon genişliğinde kalır */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.refs-grid .brand-logo {
    min-height: 170px; padding: 28px;
}
.refs-grid .brand-logo img { max-height: 120px; }
.refs-grid .brand-logo span {
    color: #0d1c33; font-weight: 600; font-size: 16px;
}
.refs-grid .brand-logo-case { align-items: flex-start; text-align: left; }
.reference-case { width: 100%; margin: 18px 0 0; display: grid; gap: 10px; }
.reference-case div { border-top: 1px solid var(--border); padding-top: 10px; }
.reference-case dt { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.reference-case dd { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.product-profile { max-width: var(--maxw); margin: 0 auto; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.profile-grid div { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.profile-grid strong { display: block; color: var(--accent); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.profile-grid span { display: block; margin-top: 6px; color: var(--text); line-height: 1.5; }

/* ---------- Contact ---------- */
.contact-wrap {
    max-width: var(--maxw); margin: 0 auto;
    padding: 40px 24px;
    display: grid; gap: 24px;
    grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 820px) { .contact-wrap { grid-template-columns: 1fr; } }
.contact-form, .contact-info, .quote-box form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
}
/* Teklif formu tek-kolon kart — contact form'un aynı sınıflarını (form-row/label/input/err)
   .quote-box form kapsamında yeniden kullanır, kural tekrarlamaz. */
.quote-box form { max-width: 640px; margin: 0 auto; }
.contact-form .form-row,
.quote-box form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) {
    .contact-form .form-row,
    .quote-box form .form-row { grid-template-columns: 1fr; }
}
.contact-form label,
.quote-box form label {
    display: block; font-size: 12.5px;
    color: var(--text-mute); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}
.contact-form input,
.contact-form textarea,
.quote-box form input,
.quote-box form textarea {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px 14px; border-radius: 10px;
    font-family: inherit; font-size: 14.5px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus,
.quote-box form input:focus,
.quote-box form textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.contact-form textarea,
.quote-box form textarea { min-height: 140px; resize: vertical; }
.contact-form .err,
.quote-box form .err { color: var(--red); font-size: 12.5px; margin-top: 4px; display: block; }
.contact-success {
    padding: 16px 20px; border-radius: 10px;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.3);
    color: var(--green); font-weight: 600;
}
.contact-info h3 {
    margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--text);
}
.contact-info .info-row {
    display: flex; align-items: flex-start; gap: 12px;
    color: var(--text-mute); margin-bottom: 12px; font-size: 14px;
}
.contact-info .info-row i { color: var(--accent); margin-top: 2px; }
.contact-info a { color: var(--text); }
.contact-info a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
footer.erp-footer {
    margin-top: 0;
    padding: 56px 24px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-mute);
}
/* 3-col now: brand+address | quick links | contact (live-products column dropped) */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
    max-width: var(--maxw); margin: 0 auto 32px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand-col .footer-company-name {
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    margin: 6px 0 6px;
    line-height: 1.4;
}
.footer-brand-col .footer-address { margin-top: 14px; }
.footer-col h5 {
    margin: 0 0 14px; font-size: 12px;
    color: var(--text); font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; font-size: 14.5px; }
.footer-col a {
    color: var(--text-mute);
    transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--accent); }
.footer-brand {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; font-weight: 700; color: var(--text);
    font-size: 17px;
}
/* 1.2.110: footer logosu — marka logosu beyaz kutuda, ERP devre logosu saydam */
.footer-logo-img {
    height: 67px; width: auto; max-width: 100%;
    background: #fff; padding: 6px 12px; border-radius: 10px;
}
.footer-logo-img.logo-saydam {
    height: 72px; background: none; padding: 0; border-radius: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}
.footer-tag { color: var(--text-dim); font-size: 13px; line-height: 1.65; max-width: 300px; }
/* Y-530: resmi dis profiller (seo.org.sameAs) — ikon-only, 36px dokunma hedefi. */
.footer-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    color: var(--text-dim); border: 1px solid var(--border, rgba(255,255,255,.12));
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.footer-social-link:hover { color: var(--accent, #6366f1); border-color: currentColor; transform: translateY(-1px); }
.footer-social-link:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .footer-social-link { transition: none; } .footer-social-link:hover { transform: none; } }
/* "ERP Ürün Ailesi" — heading + 3 rows × 5 cols grid, 15 products. */
.footer-family-section {
    max-width: var(--maxw); margin: 0 auto;
    padding: 22px 0 18px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.footer-family-title {
    color: var(--text);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 18px;
}
.footer-family-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 14px;
}
@media (max-width: 880px) { .footer-family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 540px) { .footer-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .footer-family-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-family-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-mute);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-family-item:hover {
    background: var(--bg-elev);
    border-color: var(--accent);
    color: var(--text);
}
.footer-family-icon {
    font-size: 17px;
    line-height: 1;
    flex: 0 0 auto;
}
.footer-family-name {
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.footer-bottom {
    max-width: var(--maxw); margin: 24px auto 0;
    padding-top: 20px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    color: var(--text-dim); font-size: 12.5px;
}
.footer-bottom .ver { font-family: var(--mono); }

/* ---------- Lang dropdown ---------- */
.lang-menu { position: relative; }
.lang-menu summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 14px; border-radius: 7px;
    color: var(--text-mute); font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { color: var(--text); background: var(--bg-card); }
.lang-menu .menu {
    position: absolute; right: 0; top: 110%;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px; min-width: 160px;
    box-shadow: var(--shadow-pop);
    z-index: 60;
}
.lang-menu .menu a {
    display: block; padding: 9px 12px; border-radius: 7px;
    color: var(--text-mute); font-size: 14px;
}
.lang-menu .menu a:hover, .lang-menu .menu a.active { background: var(--bg-card); color: var(--text); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-mute);
    cursor: pointer; padding: 0;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* Three-state toggle (dark → light → auto). Only the icon for the current state shows. */
.theme-toggle .theme-icon { display: none; }
html.theme-dark  .theme-toggle .theme-icon-dark  { display: block; }
html.theme-light .theme-toggle .theme-icon-light { display: block; }
html.theme-auto  .theme-toggle .theme-icon-auto  { display: block; }
html.theme-light .theme-toggle:hover { transform: rotate(20deg); }
html.theme-dark  .theme-toggle:hover { transform: rotate(-20deg); }

/* ---------- Tema-bagimsiz yuzey golgeleri (eskiden yalniz html.theme-light'ta; theme-auto'yu kaciriyordu) ---------- */
.carousel-nav:hover { color: #fff; }
a.app-tile, .feature, .step, .qa, .about-card, .contact-form, .contact-info, .quote-box form {
    box-shadow: var(--shadow-rest);
}

/* ---------- Tema değişimi: ani sıçrama yerine yumuşak geçiş ----------
   Destekleyen tarayıcıda site.js document.startViewTransition ile tüm sayfayı çapraz
   soldurur; desteklemeyende html.theme-switching sınıfı renk/gölge geçişini açar. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur-theme);
    animation-timing-function: var(--ease-std);
}
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color var(--dur-theme) var(--ease-std),
                color var(--dur-theme) var(--ease-std),
                border-color var(--dur-theme) var(--ease-std),
                box-shadow var(--dur-theme) var(--ease-std),
                fill var(--dur-theme) var(--ease-std) !important;
}

/* ---------- Klavye odağı: her etkileşimli öğede görünür halka ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}
.btn:focus-visible { border-radius: 10px; }

/* ---------- Mobil menü: açılış animasyonu ---------- */
@media (max-width: 880px) {
    .nav-links.open { animation: navDrop var(--dur) var(--ease); transform-origin: top right; }
}
.lang-menu[open] .menu { animation: navDrop var(--dur) var(--ease); transform-origin: top right; }
@keyframes navDrop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   Modern katman (1.2.19): tipografi, acilis sahnesi (paralaks),
   daralan ust bar, ilerleme cizgisi, bolum girisleri, kart isigi.
   Hareket JS'te (site.js); burada yalniz durumlar + gecisler.
   ============================================================ */

/* ---------- Yazi tipleri (self-hosted, OFL; /fonts) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url("/fonts/bricolage-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url("/fonts/bricolage-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
    src: url("/fonts/jbmono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
    src: url("/fonts/jbmono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body { font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }
.hero h1, .page-hero h1, .section h2, .section-alt h2, .cta-strip h2 {
    font-family: var(--display);
    font-variation-settings: "opsz" 96;
}

/* Capa hedefleri yapiskan ust barin altina gizlenmesin */
section[id], [id].section, div[id], header[id] { scroll-margin-top: 88px; }

/* ---------- Kaydirma ilerleme cizgisi ---------- */
.scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
    pointer-events: none;
}

/* ---------- Ust bar: kaydirinca daralir ---------- */
.erp-header .nav { transition: padding var(--dur) var(--ease); }
.erp-header.site-header { transition: box-shadow var(--dur) var(--ease), background-color var(--dur-theme) var(--ease-std), border-color var(--dur) var(--ease); }
.erp-header .brand-logo-img { transition: height var(--dur) var(--ease); }
.erp-header.is-scrolled { box-shadow: 0 8px 28px -18px rgba(0,0,0,.45); }
.erp-header.is-scrolled .nav { padding-top: 9px; padding-bottom: 9px; }
.erp-header.is-scrolled .brand-logo-img { height: 32px; }
.erp-header.is-scrolled .brand-logo-img.logo-saydam { height: 42px; }
.nav-links a { position: relative; }

/* ---------- Butonlar: yumusak kaldirma ---------- */
.btn { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-primary { box-shadow: 0 10px 24px -12px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--accent); }
.btn-ghost:hover { transform: translateY(-2px); }
.btn i { transition: transform var(--dur) var(--ease); }
.btn:hover .bi-arrow-right { transform: translateX(3px); }
.btn:hover .bi-arrow-down { transform: translateY(2px); }

/* ---------- Acilis: iki kolon + katmanli sahne ---------- */
/* Dekor katmanları (ızgara, sahne) yatay kaydırma çubuğu açmaz; clip, sticky üst barı bozmaz */
html, body { overflow-x: clip; }
.hero.hero-home {
    position: relative;
    max-width: var(--maxw);
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: 48px;
    padding: 72px 24px 88px;
    text-align: left;
    isolation: isolate;
}
.hero-home .hero-grid {
    position: absolute; inset: -40px -200px 0; z-index: -1;
    background-image:
        linear-gradient(var(--track) 1px, transparent 1px),
        linear-gradient(90deg, var(--track) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%);
    transform: translate3d(0, calc(var(--scroll, 0) * 0.25px), 0);
}
.hero-home::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 620px; height: 620px; right: -120px; top: -140px; border-radius: 50%;
    background: radial-gradient(circle, var(--cta-glow), transparent 65%);
    filter: blur(10px);
}
.hero-home .hero-eyebrow-row { justify-content: flex-start; margin-bottom: 26px; }
.hero-home .hero-eyebrow { font-size: 12.5px; letter-spacing: .02em; }
.hero-home h1 {
    font-size: clamp(40px, 5.4vw, 68px);
    line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
    margin: 0 0 22px;
    background: none; color: var(--text);
    text-wrap: balance;
}
.hero-home .hero-sub { margin: 0 0 30px; max-width: 560px; font-size: 18.5px; text-wrap: pretty; }
.hero-home .hero-ctas { justify-content: flex-start; }
.hero-textlink {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
    color: var(--text-mute); font-size: 14.5px; font-weight: 500;
    border-bottom: 1px solid var(--border-soft); padding-bottom: 2px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-textlink:hover { color: var(--accent); border-color: var(--accent); }

.hero-scene { position: relative; height: 470px; perspective: 1200px; }
.scene-card {
    --d: .5;
    position: absolute;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--border);
    border-radius: 16px; padding: 16px 18px;
    box-shadow: var(--shadow-pop);
    font-size: 13.5px; color: var(--text);
    transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc((var(--py, 0) * var(--d) - var(--scroll, 0) * var(--d) * .18) * 1px), 0) rotateX(calc(var(--py, 0) * -.35deg)) rotateY(calc(var(--px, 0) * .35deg));
    will-change: transform;
    animation: sceneIn .9s var(--ease) both;
}
.sc-kur    { top: 10px;  left: 4%;   width: 270px; animation-delay: .15s; }
.sc-defter { top: 228px; right: 0;   width: 290px; display: flex; gap: 14px; align-items: center; animation-delay: .3s; }
.sc-wa     { top: 326px; left: 12%;  width: 260px; animation-delay: .45s; }
.sc-beyan  { top: 384px; right: 6%;  width: 230px; animation-delay: .6s; }
@keyframes sceneIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

.sc-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.sc-head i { color: var(--accent); font-size: 15px; }
.sc-wa .sc-head i { color: var(--whatsapp); }
.sc-time { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.sc-rows { display: grid; gap: 6px; font-family: var(--mono); font-size: 12.5px; }
.sc-rows div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--track); }
.sc-rows span { color: var(--text-mute); }
.sc-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-foot { margin-top: 10px; font-size: 12.5px; color: var(--text-mute); display: flex; gap: 6px; align-items: center; }
.sc-foot.ok { color: var(--live-text); font-weight: 600; }
.sc-live {
    margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--live-text);
}
.sc-live::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(16,185,129,.5); animation: scLive 2s ease-out infinite;
}
@keyframes scLive { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } }
.sc-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.sc-meta i { margin-right: 3px; }
.sc-seal {
    flex: none; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--seal); color: #fff;
    font-family: var(--display); font-weight: 800; font-size: 26px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--seal) 22%, transparent), 0 10px 24px -8px var(--seal);
    transform: rotate(-12deg);
}
.sc-title { font-weight: 700; }
.sc-mono { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sc-defter .sc-foot { margin-top: 6px; }
.sc-bubble {
    margin: 0; padding: 10px 12px; border-radius: 4px 12px 12px 12px;
    background: var(--whatsapp-soft); line-height: 1.5;
}
.sc-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius: inherit; animation: barFill 1.6s .9s var(--ease) both; }
@keyframes barFill { from { width: 0; } }

@media (max-width: 980px) {
    .hero.hero-home { grid-template-columns: 1fr; gap: 12px; padding: 48px 20px 56px; }
    .hero-scene { height: 450px; max-width: 520px; width: 100%; justify-self: center; }
    .sc-kur { left: 0; } .sc-wa { left: 4%; top: 322px; } .sc-beyan { top: 370px; right: 0; }
}
@media (max-width: 560px) {
    .hero-scene { height: auto; display: grid; gap: 12px; }
    .scene-card { position: static; width: auto !important; transform: none; }
    .sc-wa, .sc-beyan { display: none; }
    .hero-home .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Urun acilisi: ana sayfa standardi (1.2.130) ----------
   Sahnesi olan urunde iki kolon + sagda katmanli kartlar (Seo.UrunSahnesi); sahnesiz urun ortali kalir. */
.product-hero.has-scene {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: 48px;
    padding: 40px 24px 64px;
    text-align: left;
    isolation: isolate;
}
.product-hero.has-scene .hero-grid {
    position: absolute; inset: -40px -200px 0; z-index: -1;
    background-image:
        linear-gradient(var(--track) 1px, transparent 1px),
        linear-gradient(90deg, var(--track) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 20%, transparent 75%);
    transform: translate3d(0, calc(var(--scroll, 0) * 0.25px), 0);
}
.product-hero.has-scene::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    width: 560px; height: 560px; right: -120px; top: -120px; border-radius: 50%;
    background: radial-gradient(circle, var(--cta-glow), transparent 65%);
    filter: blur(10px);
}
.product-hero.has-scene h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; text-wrap: balance; }
.product-hero.has-scene .lede { margin: 0; max-width: 560px; font-size: 18px; text-wrap: pretty; }
.product-hero.has-scene .hero-actions { justify-content: flex-start; }
.product-hero.has-scene .product-status { margin-left: 10px; }
.product-scene { height: 420px; }
.product-scene .sc-kur { width: 300px; }
.product-scene .sc-defter { top: 236px; }
.product-scene .sc-wa { top: 330px; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-list li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; background: var(--track); font-size: 13px; line-height: 1.3; }
.sc-list i { color: var(--accent); font-size: 14px; flex: none; }
.sc-seal-icon { font-size: 22px; transform: rotate(-8deg); }
.sc-surum .sc-rows div { justify-content: flex-start; gap: 6px; }

@media (max-width: 980px) {
    .product-hero.has-scene { grid-template-columns: 1fr; gap: 12px; padding: 32px 20px 48px; }
    .product-scene { height: 430px; max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
    .product-scene { height: auto; }
    .product-hero.has-scene .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .product-hero.has-scene .hero-grid { transform: none !important; }
}
/* ---------- Bolumler: daha cesur baslik, yumusak giris ---------- */
.section, .section-alt { padding-top: 96px; padding-bottom: 96px; }
.section-alt { position: relative; }
.section h2, .section-alt h2 {
    font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08;
    letter-spacing: -0.03em; margin-bottom: 14px; text-wrap: balance;
}
.section .lead, .section-alt .lead { text-wrap: pretty; margin-bottom: 48px; }
.section-kicker { letter-spacing: .12em; }

/* Kartlar: imleci izleyen isik + ince kaldirma */
.app-tile, .feature, .step, .use-case, .feature-card, .qa {
    border-radius: 16px;
    transition: border-color var(--dur) var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), background-color var(--dur-theme) var(--ease-std);
}
.app-tile::after, .feature::after, .use-case::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--slide-glow), transparent 60%);
    opacity: 0; transition: opacity .35s var(--ease);
}
.feature, .use-case { position: relative; overflow: hidden; }
.app-tile:hover::after, .feature:hover::after, .use-case:hover::after { opacity: 1; }
.app-tile:hover, .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.qa summary::after { transition: transform var(--dur) var(--ease); }
.qa[open] { border-color: var(--border-soft); }

.cta-strip {
    border-radius: 24px; padding: 72px 32px;
    background:
        radial-gradient(ellipse 700px 320px at 50% 0%, var(--cta-glow), transparent 65%),
        linear-gradient(var(--track) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--track) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--bg-card);
}
.cta-strip h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.1; }
.page-hero h1 { letter-spacing: -0.03em; font-weight: 700; }

/* Giris: site.js bolum ogelerine .kmp-rv takar (JS yoksa sinif yok -> hep gorunur); stagger --i */
.kmp-rv { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.kmp-rv.in { opacity: 1; transform: none; }

/* ---------- Hareket azaltma: sert kapatma YOK, hedefli sadelestirme ----------
   Paralaks, sahne kaymasi ve buyuk donusumler kapanir; kisa soluklasma + capa
   kaydirmasi (site.js, <=450 ms) kalir. RDP / "Animasyon efektleri: kapali"
   makinelerde de site canli ama sakin gorunur. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scene-card, .hero-home .hero-grid { transform: none !important; animation-name: fadeOnly; }
    .sc-bar i { animation: none; }
    .sc-live::before { animation: none; }
    .about-card:hover, .about-card:hover .app-tile-badge { transform: none; } .about-card:hover .app-tile-glyph { transform: rotate(-10deg); }
    .app-tile-cover::before { display: none; } .app-tile:hover .app-tile-badge { transform: none; }
    .app-tile:hover .app-tile-shot { transform: rotate(-4deg) !important; } .app-tile:hover .app-tile-glyph { transform: rotate(-10deg); }
    @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
    .app-tile:hover, .feature:hover, .btn:hover, .btn-primary:hover, .btn-ghost:hover,
    .brand-logo:hover, .feature-card:hover, .hero-eyebrow-mobile:hover { transform: none; }
    .kmp-rv { transform: none; transition: opacity .4s ease; transition-delay: calc(var(--i, 0) * 40ms); }
    .carousel-slide .slide-body, .carousel-slide .slide-art, .carousel-slide .slide-art img { transform: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}

/* ---------- Admin scope: ensure admin pages don't accidentally inherit ---------- */
body.admin-light {
    background: #f6f8fc; color: #0d1c33;
}
/* Ürün yaşam döngüsü: altı kart halkayı paylaşır; n5/n6 merkezleme dönüşümü hover'da ezilmez. */
.lifecycle-map{position:relative;max-width:980px;height:790px;margin:0 auto}.lifecycle-map:before{content:"";position:absolute;inset:84px 110px;border:2px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%}.life-core{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;display:grid;place-content:center;text-align:center;background:linear-gradient(145deg,var(--accent),#162b63);color:white;box-shadow:0 22px 60px color-mix(in srgb,var(--accent) 36%,transparent)}.life-core span{font-size:11px;letter-spacing:.14em}.life-core strong{font-size:25px;line-height:1.08;margin:10px 0}.life-core small{line-height:1.45}.life-node{position:absolute;z-index:3;width:220px;min-height:145px;padding:16px 18px;border:1px solid var(--border-soft);border-radius:18px;background:var(--bg-card);color:inherit;text-decoration:none;box-shadow:var(--shadow);display:grid;gap:5px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.life-node:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 34px color-mix(in srgb,var(--accent) 18%,transparent)}.life-node em{font-style:normal;color:var(--accent);font-weight:800}.life-node b{font-size:13px}.life-node strong{font-size:17px}.life-node span{font-size:13px;color:var(--text-dim);line-height:1.4}.n1{left:calc(50% - 110px);top:0}.n2{inset-inline-end:0;top:112px}.n3{inset-inline-end:0;top:332px}.n4{inset-inline-end:0;top:552px}.n5{left:calc(50% - 110px);bottom:0}.n6{inset-inline-start:0;top:552px}.n7{inset-inline-start:0;top:332px}.n8{inset-inline-start:0;top:112px}.life-sub{font-style:normal;font-size:11.5px;font-weight:600;color:var(--accent);margin-top:2px}@media(max-width:780px){.lifecycle-map{height:auto;display:grid;grid-template-columns:1fr;gap:14px}.lifecycle-map:before,.life-core{display:none}.life-node{position:static;width:auto;transform:none}.life-node:hover{transform:translateY(-3px)}}
.lifecycle-section .lead{max-width:760px;margin-inline:auto}.life-branches{max-width:980px;margin:22px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.life-branches a{position:relative;padding:16px;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);border:1px solid var(--border-soft);border-radius:14px;background:var(--bg-card);color:inherit;text-decoration:none;display:grid;gap:6px}.life-branches a:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lift)}.life-badge{position:absolute;top:12px;inset-inline-end:12px;font-style:normal;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}.life-badge--coming-soon{background:rgba(245,158,11,.14);color:var(--soon-text)}.life-branches a:has(.life-badge) strong{padding-inline-end:92px}.life-branches strong{font-size:16px}.life-branches span{font-size:12px;font-weight:700;color:var(--accent)}.life-branches small{font-size:12px;line-height:1.4;color:var(--text-dim)}@media(max-width:780px){.life-branches{grid-template-columns:1fr}}

.privacy-note{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--text-dim)}.privacy-note a{color:var(--accent);text-decoration:underline}

/* SEO uyumluluk satırı (ticari yazılım adları) — küçük, sönük */
.footer-compat { display:block; margin-top:4px; font-size:11px; line-height:1.4; opacity:.6; font-weight:400; }