/*
 * Herkese açık sayfaların stili (tanıtım, araçlar, blog, kayıt/giriş).
 *
 * WEB-411 (2026-10-03): bu kurallar public-layout.php'nin satır içi <style>
 * bloğundaydı ve HER sayfa yanıtında ~21 KB olarak yeniden iniyordu. Artık
 * içerik özetli adresle (asset()) bir yıl önbelleklenen dosya.
 *
 * Inter yazı tipi Google Fonts'tan değil kendi sunucumuzdan, Türkçe karakterleri
 * kapsayan alt kümeyle gelir (scripts/build-web-fonts.py, SIL OFL 1.1).
 * Ziyaretçinin IP'si artık üçüncü tarafa gitmez. `?v=` dosyanın md5 özetidir;
 * WebFontSubsetTest dosyayla eşleştiğini doğrular.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-subset.woff2?v=f14bf984a3') format('woff2');
}

/* DENETİM BULGUSU UI-205: <main> landmark ve skip link YOKTU -- klavye
   kullanıcısı her sayfa yüklemesinde 8 maddelik gezinmeyi tab'lamak
   zorundaydı. Link yalnızca odaklandığında görünür. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#16804d;
color:#fff;padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none}
.skip-link:focus{left:0}

        :root {
            --ink:        #0b0f19;
            --ink-soft:   #2b3244;
            --muted:      #5f6672;
            --line:       #e6e8ec;
            --line-soft:  #f0f1f4;
            --paper:      #ffffff;
            --paper-alt:  #fafbfc;

            /* Tema rengi yeşil (2026-10-16, kullanıcı isteği: "mavi değil, diğer
               renk çoğunlukta olsun"): ana sayfa banner görselindeki yeşil
               (#2bb673, --accent-2). Metin ve beyaz yazılı düğme için koyu ton
               (#16804d beyaz zeminde 5,0:1). Durum yeşili --ok ayrı kalır. */
            --accent:      #16804d;
            --accent-dark: #11703f;
            --accent-bg:   #e8f8ef;

            /* Durum renkleri — yalnızca durum göstermek için. */
            --ok:      #067647;
            --warn:    #b54708;
            --danger:  #b42318;
            --ok-bg:     #ecfdf3;
            --warn-bg:   #fffaeb;
            --danger-bg: #fef3f2;
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--ink);
            background: var(--paper);
            font-size: 16px;
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
        }

        /* Sayısal veri hizalansın: gerçek ürünlerin gözden kaçırdığı ama
           tablolarda hemen fark edilen bir ayrıntı. */
        .tnum { font-variant-numeric: tabular-nums; }

        h1, h2, h3 { letter-spacing: -0.021em; font-weight: 600; }
        h1 { font-weight: 700; letter-spacing: -0.032em; }

        a { color: var(--accent); }
        a:hover { color: var(--accent-dark); }

        .text-muted-2 { color: var(--muted) !important; }
        .rule { border-top: 1px solid var(--line); }

        /* --- Navigasyon ---------------------------------------------------- */
        .nav-top {
            border-bottom: 1px solid var(--line);
            background: rgba(255,255,255,.88);
            backdrop-filter: saturate(180%) blur(6px);
        }
        .nav-top .navbar-brand { font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); }
        .nav-top .nav-link { color: var(--ink-soft); font-size: .925rem; font-weight: 500; }
        .nav-top .nav-link:hover { color: var(--ink); }

        /* --- Düğmeler ------------------------------------------------------ */
        .btn { font-weight: 500; border-radius: 8px; }
        .btn-accent {
            background: var(--accent); border-color: var(--accent); color: #fff;
        }
        .btn-accent:hover, .btn-accent:focus {
            background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
        }
        /* Google'ın marka kılavuzuna yakın: beyaz zemin, ince çerçeve, renkli G. */
        .btn-google {
            background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500;
        }
        .btn-google:hover, .btn-google:focus { background: #f8f9fa; color: #1f1f1f; border-color: #c6c9cc; }
        .btn-ghost {
            border: 1px solid var(--line); background: #fff; color: var(--ink);
        }
        .btn-ghost:hover { border-color: #d3d7de; background: var(--paper-alt); color: var(--ink); }

        /* --- Hero ---------------------------------------------------------- */
        .hero { padding: 4.5rem 0 3.5rem; }
        .hero h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.08; }
        .hero .sub { font-size: 1.06rem; color: var(--muted); max-width: 42ch; }
        .btn-lg-soft { padding-top: .65rem; padding-bottom: .65rem; font-size: .98rem; }
        .trust { font-size: .86rem; color: var(--muted); }
        .trust li { display: inline-flex; align-items: center; gap: .35rem; }
        .trust .bi { color: var(--ok); }

        /* Bildirim örneğinin parçaları (tanıtımda .mail-mock__next içinde). */
        .toast-mock__icon {
            flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--warn-bg); color: var(--warn);
        }
        .toast-mock__title { font-size: .84rem; font-weight: 600; }
        .toast-mock__body { font-size: .8rem; color: var(--muted); }

        /* Örnek bildirim e-postası (LND-010). Gövde düz metin e-postanın
           kendisi: satır sonları korunur. */
        .mail-mock {
            background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
            box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.16);
        }
        .mail-mock__head { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-soft); background: var(--paper-alt); }
        .mail-mock__row { display: flex; align-items: baseline; gap: .6rem; font-size: .84rem; }
        .mail-mock__row + .mail-mock__row { margin-top: .2rem; }
        .mail-mock__row > span:first-child { width: 3.6rem; flex-shrink: 0; color: var(--muted); font-size: .78rem; }
        .mail-mock__time { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 400; }
        .mail-mock__body {
            padding: 1rem 1.1rem; font-size: .86rem; line-height: 1.6; color: var(--ink-soft);
            white-space: pre-line; overflow-wrap: anywhere;
        }
        .mail-mock__next {
            display: flex; gap: .75rem; align-items: flex-start;
            padding: .8rem 1.1rem; border-top: 1px dashed var(--line); background: var(--paper-alt);
        }
        .mail-mock__next .toast-mock__icon { background: var(--ok-bg); color: var(--ok); }
        .mail-mock__next .toast-mock__title { display: flex; gap: .5rem; }
        .mail-mock__cap { padding: .55rem 1.1rem; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line-soft); margin: 0; }

        .eyebrow {
            font-size: .78rem; font-weight: 600; letter-spacing: .06em;
            text-transform: uppercase; color: var(--muted);
        }

        /* --- Ürün önizlemesi ------------------------------------------------
           Ekran görüntüsü yerine canlı HTML: her zaman güncel kalır, ek istek
           gerektirmez ve ürünün gerçek durum renklerini kullanır. */

        .app-frame__bar {
            display: flex; align-items: center; gap: .5rem;
            padding: .6rem .85rem; border-bottom: 1px solid var(--line-soft);
            background: var(--paper-alt);
        }
        .app-frame__dot { width: 9px; height: 9px; border-radius: 50%; background: #d5d8de; }
        .app-frame__title { font-size: .78rem; color: var(--muted); margin-left: .35rem; }

        /* --- Bölümler ------------------------------------------------------ */
        .section { padding: 4rem 0; }
        .section--alt { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

        .section-head { max-width: 640px; margin-bottom: 2.25rem; }
        .section-head p { font-size: .98rem; }

        .icon-badge {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 10px; font-size: 1.15rem;
            color: var(--accent); background: var(--accent-bg); margin-bottom: .9rem;
        }
        .icon-badge--danger { color: var(--danger); background: var(--danger-bg); }
        .icon-badge--warn   { color: var(--warn);   background: var(--warn-bg); }
        .free-band {
            padding: 1.75rem; border: 1px solid var(--line); border-radius: 14px;
            background: linear-gradient(180deg, var(--accent-bg), var(--paper) 70%);
        }

        .card-soft {
            background: #fff; border: 1px solid var(--line); border-radius: 12px;
            padding: 1.25rem;
        }
        .card-soft h3 { font-size: 1rem; margin-bottom: .35rem; }
        .card-soft p { font-size: .9rem; color: var(--muted); margin-bottom: .9rem; }

        .channels {
            display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
            padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px;
            background: var(--paper-alt); font-size: .9rem;
        }
        .channels__label { font-weight: 600; }
        .channels__item { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); }
        .channels__item .bi { color: var(--accent); }
        .channels__hint { color: var(--muted); margin-left: auto; }

        .step-card {
            background: #fff; border: 1px solid var(--line); border-radius: 12px;
            padding: 1.4rem 1.25rem;
        }
        .step-card__n {
            display: inline-flex; align-items: center; justify-content: center;
            width: 30px; height: 30px; border-radius: 50%; margin-bottom: .85rem;
            background: var(--accent); color: #fff; font-size: .85rem; font-weight: 600;
        }
        .step-card h3 { font-size: 1rem; margin-bottom: .35rem; }
        .step-card p { font-size: .9rem; color: var(--muted); margin: 0; }

        /* SSS: <details> -- JS gerektirmez, CSP'ye takılmaz, klavyeyle açılır. */
        .faq { border-top: 1px solid var(--line); }
        .faq__item { border-bottom: 1px solid var(--line); }
        .faq__item summary {
            list-style: none; cursor: pointer; padding: 1.1rem 0;
            display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            font-weight: 600; font-size: .98rem;
        }
        .faq__item summary::-webkit-details-marker { display: none; }
        .faq__item summary .bi { color: var(--muted); transition: transform .15s; flex-shrink: 0; }
        .faq__item[open] summary .bi { transform: rotate(45deg); }
        .faq__item p { color: var(--muted); font-size: .93rem; padding-bottom: 1.1rem; margin: 0; max-width: 68ch; }

        /* --- Kimlik doğrulama kartları -------------------------------------- */
        .auth-wrap { min-height: calc(100vh - 57px); display: flex; align-items: center; padding: 3rem 0; }
        .auth-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
        .form-control, .form-select { border-radius: 8px; border-color: var(--line); padding: .6rem .75rem; }
        .form-control:focus, .form-select:focus {
            border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,128,77,.12);
        }
        .form-label { font-size: .85rem; font-weight: 500; color: var(--ink-soft); margin-bottom: .35rem; }

        /* --- Footer -------------------------------------------------------- */
        /* Sayfa gri (--alt) bir bölümle bitiyorsa footer çizgisiyle çift
           çizgi oluşmasın. */
        main > .section--alt:last-child { border-bottom: 0; }
        .foot { border-top: 1px solid var(--line); background: var(--paper-alt); font-size: .875rem; }
        .foot__main { padding-top: 3rem; padding-bottom: 2.25rem; }
        .foot__brand { font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
        .foot__tagline { color: var(--muted); max-width: 34ch; margin: .6rem 0 0; }
        .foot__title {
            font-size: .75rem; font-weight: 600; letter-spacing: .06em;
            text-transform: uppercase; color: var(--ink); margin-bottom: .85rem;
        }
        .foot__links { list-style: none; padding: 0; margin: 0; }
        .foot__links li + li { margin-top: .5rem; }
        .foot__links a { color: var(--muted); text-decoration: none; }
        .foot__links a:hover { color: var(--ink); }
        /* 2026-10-16: altbilgideki izleme hizmetleri satırı yatay. */
        .foot__services { border-top: 1px solid var(--line); padding-top: 1.25rem; }
        .foot__services .foot__links li + li { margin-top: 0; }
        .foot__bottom { border-top: 1px solid var(--line); padding-block: 1.1rem; color: var(--muted); font-size: .8rem; }

        /* --- Blog (2026-09-12) ---------------------------------------------- */
        .crumbs { font-size: .82rem; color: var(--muted); }
        .crumbs a { color: var(--muted); text-decoration: none; }
        .crumbs a:hover { color: var(--ink); }
        .crumbs .sep { margin: 0 .4rem; color: #b6bbc4; }

        .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
        .chip {
            display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem;
            border: 1px solid var(--line); border-radius: 999px; background: #fff;
            font-size: .85rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
        }
        .chip:hover { border-color: #d3d7de; color: var(--ink); }
        .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
        .chip small { opacity: .7; }
        /* QA-307 (2026-10-03): seçili (mavi) çipte .7 opaklık sayıyı 3.55:1 yapıyordu. */
        .chip.is-active small { opacity: 1; }

        .post-card__cat { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }

        .post-card__more { margin-top: auto; font-size: .85rem; font-weight: 500; color: var(--accent); }

        .post-head h1 { font-size: clamp(1.75rem, 3.4vw, 2.45rem); line-height: 1.15; }
        .post-meta { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
        .post-meta .bi { margin-right: .25rem; }

        .toc { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; background: var(--paper-alt); font-size: .88rem; }
        .toc__title { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; }
        .toc ol { padding-left: 1.1rem; margin: 0; }
        .toc li + li { margin-top: .35rem; }
        .toc a { color: var(--ink-soft); text-decoration: none; }
        .toc a:hover { color: var(--accent); }

        /* Yazı gövdesi: okunur satır boyu ve ritim. */
        .prose { font-size: 1.04rem; line-height: 1.75; color: var(--ink-soft); max-width: 72ch; }
        .prose h2 { font-size: 1.45rem; margin: 2.4rem 0 .8rem; color: var(--ink); scroll-margin-top: 80px; }
        .prose h3 { font-size: 1.14rem; margin: 1.8rem 0 .6rem; color: var(--ink); scroll-margin-top: 80px; }
        .prose h4 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--ink); }
        .prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose .table-responsive { margin-bottom: 1.15rem; }
        .prose li + li { margin-top: .35rem; }
        .prose strong { color: var(--ink); font-weight: 600; }
        .prose a { text-underline-offset: 2px; }
        .prose code { font-size: .88em; background: var(--line-soft); color: #9b2c4f; padding: .1rem .35rem; border-radius: 5px; }
        .prose pre { background: #0f1422; color: #e7eaf2; border-radius: 10px; padding: 1rem 1.1rem; font-size: .86rem; line-height: 1.6; overflow-x: auto; }
        .prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
        .prose blockquote { border-left: 3px solid var(--accent); background: var(--accent-bg); padding: .85rem 1.1rem; border-radius: 0 10px 10px 0; color: var(--ink-soft); }
        .prose blockquote p:last-child { margin-bottom: 0; }
        .prose table { font-size: .92rem; margin: 0; }
        .prose th { background: var(--paper-alt); font-weight: 600; color: var(--ink); }
        .prose hr { margin: 2rem 0; border-color: var(--line); opacity: 1; }

        .cta-box { border: 1px solid #c6ead6; background: var(--accent-bg); border-radius: 14px; padding: 1.5rem; }
        .cta-box h2 { font-size: 1.2rem; margin-bottom: .4rem; }
        .cta-box p { color: var(--ink-soft); font-size: .95rem; }
        .preview-bar { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid #fedf89; font-size: .88rem; }

        @media (min-width: 992px) {
            .post-aside { position: sticky; top: 84px; }
        }

        @media (max-width: 991.98px) {
            .hero { padding: 3rem 0 2.5rem; }
            .hero .sub { max-width: none; }
            .section { padding: 3rem 0; }
            .channels__hint { margin-left: 0; width: 100%; }
        }

/* =====================================================================
 * GÖRSEL KATMAN (2026-10-09): tanıtım sayfası düz beyaz, tek tip gri
 * kartlar ve neredeyse görünmeyen marka rengiyle "zayıf" görünüyordu.
 * Bu blok yukarıdaki temel kuralların ÜZERİNE biner: içerik ve HTML
 * yapısı değişmez, yalnız derinlik, renk ve ritim eklenir. Her renk
 * değişkenden gelir; karanlık tema karşılıkları theme-dark.css'te.
 * Durum renkleri (ok/warn/danger) yine yalnız durum için kullanılır.
 * ===================================================================== */
:root {
    --accent-rgb: 22, 128, 77;
    --accent-2: #2bb673;                     /* gradyan ikinci tonu: banner yeşili */
    --glow: rgba(var(--accent-rgb), .14);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --shadow-md: 0 4px 10px -2px rgba(16,24,40,.08), 0 12px 32px -12px rgba(16,24,40,.18);
    --shadow-lg: 0 10px 24px -6px rgba(16,24,40,.12), 0 32px 64px -24px rgba(16,24,40,.28);
}

/* --- Üst menü ------------------------------------------------------ */
.nav-top { background: rgba(255,255,255,.82); box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(16,24,40,.25); }
.nav-top .navbar-brand { font-size: 1.05rem; }
.nav-top .navbar-brand .bi,
.foot__brand .bi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; font-size: 1rem;
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 10px -3px rgba(var(--accent-rgb), .55);
}
.nav-top .nav-link { position: relative; border-radius: 8px; transition: color .15s, background .15s; }
.nav-top .nav-link:hover, .nav-top .nav-link.active { background: var(--accent-bg); color: var(--accent-dark); }

/* --- Düğmeler ------------------------------------------------------ */
.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s, border-color .15s; }
.btn-accent {
    background: linear-gradient(180deg, #1c9158, var(--accent));
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 18px -8px rgba(var(--accent-rgb), .7);
}
.btn-accent:hover, .btn-accent:focus {
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(16,24,40,.1), 0 12px 24px -8px rgba(var(--accent-rgb), .75);
}
.btn-ghost { box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-lg-soft { padding-left: 1.4rem; padding-right: 1.4rem; border-radius: 10px; }

/* --- Hero: TAM GENİŞLİK koyu şerit + üstüne binen kontrol formu (2026-10-09)
   Şerit kenardan kenara; içinde iki blok (sol: vaat, sağ: önizleme paneli).
   Sayfanın kalanı beyaz. */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 3.5rem 0 4.5rem;
    color: #e6f4ec;
    background:
        radial-gradient(55% 90% at 100% 0%, rgba(43,182,115,.32), transparent 65%),
        radial-gradient(40% 70% at 0% 100%, rgba(var(--accent-rgb), .32), transparent 65%),
        linear-gradient(135deg, #0f3324, #0a2318);
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.banner { position: relative; }
.banner--main { padding-right: 1rem; }
.banner--main .eyebrow { color: #8fdcb3; background: rgba(143,220,179,.12); border-color: rgba(143,220,179,.25); }
.banner--main .eyebrow::before { background: #7fe0b0; box-shadow: 0 0 0 3px rgba(127,224,176,.2); }
.banner--main h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.06; }
.banner--main h1 .hl {
    background: linear-gradient(90deg, #9fe3bf, #4cc38a 55%, #c3ecd5);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.banner--main .sub { color: #b5d9c5; font-size: 1.06rem; line-height: 1.6; max-width: 56ch; }
.banner--main .btn-light { background: #fff; color: #0a2318; border-color: #fff; font-weight: 600; border-radius: 10px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); }
.banner--main .btn-light:hover { background: #e8f8ef; color: #0a2318; transform: translateY(-1px); }
.banner--main .hero-link { color: #c3ecd5; }
.banner--main .hero-link:hover { color: #fff; }
.banner__stats { font-size: .9rem; color: #b5d9c5; }
.banner__stats strong { color: #fff; }
.banner--main .trust { color: #b5d9c5; }
.banner--main .trust .bi { background: rgba(76,195,138,.18); color: #7fe0b0; }

/* Banner görselli hero (2026-10-16): görsel şeridi kaplar, metin boş sol yarıda.
   Görsel açık renkli; metin renkleri koyu şeridin yerine burada sabittir. */
.hero--art { background: #eaf2fd; color: #0a2318; padding: 4.5rem 0 5.5rem; }
.hero--art::before { display: none; }
.hero__art {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    object-fit: cover; object-position: right center;
}
/* Görselin sağa kaydığı ara genişliklerde metin okunur kalsın. */
.hero--art::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(234,242,253,.95) 0%, rgba(234,242,253,.8) 38%, rgba(234,242,253,0) 58%);
}
.hero--art .banner--main .eyebrow { color: var(--accent-dark); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .22); }
.hero--art .banner--main .eyebrow::before { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(43,182,115,.2); }
.hero--art .banner--main h1 { color: #0a2318; }
.hero--art .banner--main h1 .hl { background: linear-gradient(90deg, var(--accent-dark), var(--accent) 50%, #1c9158); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--art .banner--main .sub, .hero--art .banner__stats, .hero--art .banner--main .trust { color: #3a4566; }
.hero--art .banner__stats strong { color: #0a2318; }
.hero--art .banner--main .btn-light { background: linear-gradient(180deg, #1c9158, var(--accent)); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .6); }
.hero--art .banner--main .btn-light:hover { background: var(--accent-dark); color: #fff; }
.hero--art .banner--main .hero-link { color: #11703f; }
.hero--art .banner--main .hero-link:hover { color: #0a2318; }
.hero--art .banner--main .trust .bi { background: var(--accent-bg); color: var(--accent); }
.hero--art .banner--main .trust__link { color: #11703f; }
.hero--art .banner--main .trust__link:hover { color: #0a2318; }
/* 2026-10-17 (yeni banner "Modern İzleme Paneli ve Aktif Durumlar"): görselin kartları
   ortaya kadar uzanıyor; tam genişlikte başlığın üstüne biniyordu. Geniş ekranda görsel
   sağ %60'ta, tamamı görünür (contain); kenarları maskeyle zemine karışır, metin
   üstünde perde gerekmez. */
@media (min-width: 1200px) {
    .hero--art .hero__art {
        /* Kutu görselin kendisi kadar (letterbox yok): maske görselin GERÇEK kenarlarını eritir. */
        inset: auto 0 auto auto; top: 50%; width: 60%; height: auto; transform: translateY(-50%);
        /* 2026-10-17 (kullanıcı: "background değişimi gözü yoruyor"): düz şerit maskesi görseli
           zemin üstünde dikdörtgen kutu gibi bırakıyordu; oval maske kenarları her yönde eritir. */
        -webkit-mask-image: radial-gradient(ellipse 60% 58% at 54% 50%, #000 66%, transparent 100%);
        mask-image: radial-gradient(ellipse 60% 58% at 54% 50%, #000 66%, transparent 100%);
    }
    .hero--art::after { display: none; }
    /* Zemin görselin kenar tonlarıyla aynı (ölçüldü: sol #f2f9fe, sağ #d4e7fd). */
    /* Zemin görselin kendi tonlarına yakın (sol #f2f9fe; sağ yarı görselin mavisi). */
    .hero--art { background: var(--banner-bg); }
}
/* 1200 px altında görselin dizüstü kısmı metnin altına kayar: alt alta düzen. */
@media (max-width: 1199.98px) {
    .hero--art { padding: 2.5rem 0 4rem; display: flex; flex-direction: column-reverse; }
    .hero--art::after { display: none; }
    /* Görsel metnin altında; boş sol yarı kırpılır, dizüstü ve kartlar görünür. */
    .hero__art {
        position: static; z-index: auto; height: auto; aspect-ratio: 16 / 10; max-height: 520px;
        object-position: 92% center; margin-top: 1.5rem;
    }
}
@media (max-width: 575.98px) { .hero__art { aspect-ratio: 4 / 3; } }

/* Sağ blok: koyu şerit üstünde yarı saydam panel, içinde beyaz önizleme. */

/* Beyaz önizleme şeridin açık yazı rengini MİRAS ALMASIN. */

/* Dar panelde DNS sütunu sığmaz; Site/Kalan/SSL kalır. */

/* Kontrol formu: bannerların alt kenarına biner. */
.hero-check {
    padding: 1.15rem 1.35rem 1.1rem; border-radius: 16px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.hero-check--float { position: relative; z-index: 2; margin: -2.6rem auto 0; max-width: 880px; }
.hero-check__label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: .6rem; color: var(--ink); }
.hero-check__row { position: relative; display: flex; gap: .5rem; }
.hero-check__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hero-check .form-control { padding: .75rem .9rem .75rem 2.35rem; font-size: 1.02rem; background: #fff; min-width: 0; }
.hero-check .btn { white-space: nowrap; padding: .75rem 1.3rem; border-radius: 10px; font-weight: 600; }
.hero-check__hint { font-size: .8rem; color: var(--muted); margin-top: .55rem; line-height: 1.5; }
.hero-link { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .6rem; }
@media (max-width: 991.98px) {
    .hero { padding: 2.5rem 0 4rem; }
    .banner--main { padding-right: 0; }
    .hero-check--float { margin-top: -2.2rem; }
}
@media (max-width: 575.98px) {
    .hero-check__row { flex-direction: column; }
    .hero-check__icon { top: 1rem; transform: none; }   /* yalnız girdi satırının ortası */
    .hero-check .btn { width: 100%; }
}
.trust { font-size: .9rem; }
.trust .bi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; font-size: .72rem;
    background: var(--ok-bg); color: var(--ok);
}

/* Önizleme çerçevesi: hafif eğim, parıltı ve daha derin gölge. */

/* Doğrudan kontrol formu: sorunla gelen ziyaretçinin ilk adımı. */
.hero-check {
    padding: 1rem 1.1rem 1rem; border-radius: 14px;
    background: var(--paper-alt); border: 1px solid var(--line);
}
.hero-check__label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .6rem; color: var(--ink); }
.hero-check__row { position: relative; display: flex; gap: .5rem; }
.hero-check__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hero-check .form-control { padding: .7rem .9rem .7rem 2.35rem; font-size: 1rem; background: #fff; min-width: 0; }
.hero-check .btn { white-space: nowrap; padding: .7rem 1.15rem; border-radius: 10px; }
.hero-check__hint { font-size: .8rem; color: var(--muted); margin-top: .55rem; line-height: 1.5; }
.hero-link { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .6rem; }
@media (max-width: 575.98px) {
    .hero-check__row { flex-direction: column; }
    .hero-check__icon { top: 1rem; transform: none; }   /* yalnız girdi satırının ortası */
    .hero-check .btn { width: 100%; }
}
.app-frame__bar { padding: .7rem .95rem; }
.app-frame__dot { width: 10px; height: 10px; }
.app-frame__dot:nth-child(1) { background: #ff5f57; }
.app-frame__dot:nth-child(2) { background: #febc2e; }
.app-frame__dot:nth-child(3) { background: #28c840; }

.toast-mock__icon { border-radius: 10px; width: 36px; height: 36px; font-size: 1.05rem; }

/* --- Bölüm ritmi ---------------------------------------------------- */
.section { padding: 5rem 0; }
.section--alt {
    background:
        radial-gradient(50% 40% at 100% 0%, rgba(var(--accent-rgb), .06), transparent 70%),
        var(--paper-alt);
}
.section-head { margin-bottom: 2.75rem; }
.section-head h2, .section h2.h3 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); line-height: 1.2; }
.section-head .text-muted-2 { font-size: 1.02rem; }
.eyebrow { color: var(--accent); display: inline-flex; align-items: center; gap: .55rem; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent-2); }
.hero .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; }   /* hero'daki nokta kalır */
.section-head.text-center .eyebrow { justify-content: center; }

/* --- Kartlar: derinlik + hover ------------------------------------- */
.card-soft, .step-card {
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-soft, .step-card { border-radius: 14px; box-shadow: var(--shadow-sm); padding: 1.5rem 1.4rem; }
.card-soft:hover, .step-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), .3);
}
.card-soft h3, .step-card h3 { font-size: 1.05rem; }
.card-soft p { font-size: .92rem; }

.icon-badge {
    width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem;
    background: linear-gradient(135deg, var(--accent-bg), #fff);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .14), 0 4px 10px -6px rgba(var(--accent-rgb), .5);
}
.icon-badge--danger {
    background: linear-gradient(135deg, var(--danger-bg), #fff);
    box-shadow: inset 0 0 0 1px rgba(180,35,24,.14), 0 4px 10px -6px rgba(180,35,24,.4);
}
.icon-badge--warn {
    background: linear-gradient(135deg, var(--warn-bg), #fff);
    box-shadow: inset 0 0 0 1px rgba(181,71,8,.14), 0 4px 10px -6px rgba(181,71,8,.4);
}

/* Uyarı kanalları: hap şeklinde rozetler. */
.channels { border-radius: 14px; padding: 1.15rem 1.4rem; background: #fff; box-shadow: var(--shadow-sm); }
.channels__item {
    padding: .4rem .8rem; border-radius: 999px; background: var(--paper-alt);
    border: 1px solid var(--line); font-size: .86rem; font-weight: 500;
}
.channels__item .bi { font-size: .95rem; }

/* Adım kartları: büyük numara, aralarında bağlantı çizgisi. */
.step-card { padding-top: 1.75rem; }
.step-card__n {
    width: 40px; height: 40px; font-size: 1rem; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .7);
}
.step-card::after {
    content: ""; position: absolute; top: 2.95rem; left: calc(100% + 2px);
    width: var(--bs-gutter-x, 1.5rem); height: 2px;
    background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .45) 0 6px, transparent 6px 12px);
}
.col-md-4:last-child > .step-card::after { display: none; }
@media (max-width: 767.98px) { .step-card::after { display: none; } }

/* E-posta örneği. */
.mail-mock { border-radius: 16px; box-shadow: var(--shadow-lg); }
.mail-mock__head { padding: .95rem 1.2rem; }

/* --- "Tamamen ücretsiz": TAM GENİŞLİK koyu lacivert ara şerit (2026-10-09) --- */
.free-band {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 4rem 0; border: 0; border-radius: 0;
    color: #e6f4ec;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(43,182,115,.35), transparent 65%),
        radial-gradient(40% 60% at 0% 100%, rgba(var(--accent-rgb), .35), transparent 65%),
        linear-gradient(135deg, #0f3324, #0a2318);
}
.free-band::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.free-band .eyebrow { color: #8fdcb3; }
.free-band .eyebrow::before { background: #8fdcb3; }
.free-band h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.free-band .text-muted-2 { color: #b5d9c5 !important; }
.free-band strong { color: #fff; }

@media (max-width: 991.98px) { .free-band { padding: 3rem 0; } }

/* --- Sorununuz hangisi? (2026-10-09) --------------------------------- */
.section--fix { padding-top: 3.5rem; }
.fix-intro { position: sticky; top: 5.5rem; }
.fix-intro__chips li { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #1f5fbf; background: var(--sky-bg); border: 1px solid #d6e6fb; }

/* Sorun satırları (2026-10-17): sol şerit + etiket aciliyeti söyler; düğmeler sağda. */
.fix-list { display: flex; flex-direction: column; gap: .75rem; }
.fix-row {
    --tone: var(--muted); --tone-bg: var(--paper-alt);
    position: relative; display: flex; align-items: center; gap: 1.25rem;
    padding: 1.05rem 1.2rem 1.05rem 1.45rem; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fix-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone); }
.fix-row:hover { transform: translateX(3px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), .25); }
.fix-row--danger { --tone: var(--danger); --tone-bg: var(--danger-bg); }
.fix-row--warn   { --tone: var(--warn);   --tone-bg: var(--warn-bg); }
.fix-row--ok     { --tone: var(--accent); --tone-bg: var(--accent-bg); background: linear-gradient(90deg, var(--accent-bg), #fff 70%); border-color: #cdebd9; }
.fix-row__body { flex: 1 1 auto; min-width: 0; }
.fix-row__tag {
    display: inline-block; margin-bottom: .3rem; padding: .1rem .5rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--tone); background: var(--tone-bg);
}
.fix-row__title { font-size: 1rem; line-height: 1.3; margin: 0 0 .25rem; }
.fix-row__text { font-size: .87rem; color: var(--muted); margin: 0; }
.fix-row__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
.fix-row__actions .btn-sm { padding: .45rem .8rem; border-radius: 8px; white-space: nowrap; font-size: .84rem; }
@media (max-width: 991.98px) { .fix-intro { position: static; } }
@media (max-width: 575.98px) {
    .fix-row { flex-direction: column; align-items: stretch; gap: .75rem; }
    .fix-row__actions { flex-direction: row; flex-wrap: wrap; }
}

/* --- Neleri yakalar: ikonsuz satır listesi (2026-10-09) ---------------- */
/* Neleri yakalar (2026-10-17): haber süresine göre iki panel; satır listesi (kart / ikon yok). */
.catch-panel {
    --tone: var(--accent); --tone-bg: var(--accent-bg);
    background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.catch-panel--slow { --tone: #1f5fbf; --tone-bg: var(--sky-bg); }
.catch-panel__head { padding: 1.1rem 1.3rem; background: linear-gradient(180deg, var(--tone-bg), #fff); border-bottom: 1px solid var(--line-soft); }
.catch-panel__when {
    display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 700; color: var(--tone);
}
.catch-panel__when::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px rgba(0,0,0,.04); }
.catch-panel__why { font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.catch-item { padding: .9rem 1.3rem; border-top: 1px solid var(--line-soft); }
.catch-item:first-child { border-top: 0; }
.catch-item__title { font-size: .98rem; margin: 0 0 .2rem; }
.catch-item__text { font-size: .88rem; color: var(--muted); }
.catch-note { font-size: .86rem; color: var(--ink-soft); padding: .9rem 1.1rem; border-radius: 12px; background: #fff; border: 1px dashed #c9dcf5; }

/* --- Neler yapar: numaralı, çizgili ızgara (2026-10-09) ---------------- */
.feat-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.feat {
    display: flex; gap: 1rem; padding: 1.5rem 1.6rem;
    border-top: 1px solid var(--line-soft); transition: background .15s;
}
.feat:nth-child(-n+2) { border-top: 0; }
.feat:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.feat:hover { background: var(--paper-alt); }
.feat__n { flex-shrink: 0; font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; padding-top: .2rem; }
.feat h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.feat p { font-size: .92rem; color: var(--muted); margin: 0; }
.feat__detail { font-size: .78rem !important; margin-top: .45rem !important; }
@media (max-width: 767.98px) {
    .feat-grid { grid-template-columns: 1fr; }
    .feat { padding: 1.2rem 1.1rem; border-right: 0 !important; }
    .feat:nth-child(2) { border-top: 1px solid var(--line-soft); }
}

/* --- Güven bölümü ikonları ----------------------------------------- */
#guven .icon-badge { width: 52px; height: 52px; font-size: 1.45rem; border-radius: 14px; }

/* --- Rehber kartları ----------------------------------------------- */

.post-card__cat {
    display: inline-block; padding: .2rem .55rem; border-radius: 6px;
    background: var(--accent-bg); color: var(--accent-dark);
}

/* --- SSS: çizgili listeden kartlara ---------------------------------- */
.faq { border-top: 0; display: grid; gap: .65rem; }
.faq__item {
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    padding: 0 1.2rem; box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.faq__item:hover, .faq__item[open] { border-color: rgba(var(--accent-rgb), .3); box-shadow: var(--shadow-md); }
.faq__item summary { padding: 1rem 0; }
.faq__item summary .bi {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; font-size: .8rem;
    background: var(--accent-bg); color: var(--accent);
}

/* --- Altbilgi ---------------------------------------------------------- */
.foot { background: linear-gradient(180deg, var(--paper-alt), #f3f5f9); }
.foot__main { padding-top: 3.5rem; padding-bottom: 2.5rem; }
.foot__brand { font-size: 1.05rem; }
.foot__links a { transition: color .15s, padding-left .15s; }
.foot__links a:hover { color: var(--accent-dark); padding-left: .2rem; }

@media (max-width: 991.98px) {
    .section { padding: 3.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .card-soft, .step-card, .fix-row { transition: none; }
}

/* === 2026-10-16: site durumu aracı, özellikler sayfası, sade tanıtım ==== */

/* Marka + ne iş yaptığı (yalnız geniş ekranda). */
.brand-tag {
    font-size: .74rem; font-weight: 500; color: var(--muted);
    padding-left: .6rem; margin-left: .15rem; border-left: 1px solid var(--line);
}
.banner--main .trust__link {
    color: #c3ecd5; text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: center; gap: .25rem;
}
.banner--main .trust__link:hover { color: #fff; }

/* Araç ve özellikler başlığı: tanıtımın ilk ekranıyla aynı lacivert. */
.tool-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 3rem 0 3.25rem; color: #e6f4ec;
    background:
        radial-gradient(55% 90% at 100% 0%, rgba(43,182,115,.28), transparent 65%),
        radial-gradient(40% 70% at 0% 100%, rgba(var(--accent-rgb), .28), transparent 65%),
        linear-gradient(135deg, #0f3324, #0a2318);
}
.tool-hero .eyebrow { color: #8fdcb3; }
.tool-hero h1 { color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12; max-width: 30ch; }
.tool-hero__sub { color: #b5d9c5; font-size: 1.02rem; line-height: 1.6; max-width: 62ch; }
.tool-hero .hero-check { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }

.jump-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump-links a {
    color: #dfe7ff; text-decoration: none; font-size: .85rem; font-weight: 500;
    padding: .4rem .8rem; border-radius: 999px;
    background: rgba(143,220,179,.12); border: 1px solid rgba(143,220,179,.25);
    transition: background .15s, color .15s;
}
.jump-links a:hover { background: rgba(143,220,179,.24); color: #fff; }
/* Yapışkan üst menü bölüm başlığını örtmesin. */
#ozellikler, #url-izleme, #koruma, #sahiplik-korumasi, #guven, #ekipler { scroll-margin-top: 4.5rem; }

/* Durum kartı: tek bakışta açık / dikkat / kapalı. */
.status-card {
    --tone: var(--muted); --tone-bg: var(--paper-alt);
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    border-top: 4px solid var(--tone); box-shadow: var(--shadow-md);
    padding: 1.4rem 1.5rem 1.5rem;
}
.status-card--ok     { --tone: var(--ok);     --tone-bg: var(--ok-bg); }
.status-card--warn   { --tone: var(--warn);   --tone-bg: var(--warn-bg); }
.status-card--danger { --tone: var(--danger); --tone-bg: var(--danger-bg); }
.status-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.status-card__icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; font-size: 1.6rem;
    color: var(--tone); background: var(--tone-bg);
}
.status-card--ok .status-card__icon { animation: status-pulse 2.4s ease-out infinite; }
@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(6,118,71,.28); }
    70%  { box-shadow: 0 0 0 12px rgba(6,118,71,0); }
    100% { box-shadow: 0 0 0 0 rgba(6,118,71,0); }
}
.status-card__domain { font-size: .85rem; font-weight: 600; color: var(--muted); }
.status-card__label { font-size: 1.45rem; font-weight: 700; color: var(--tone); line-height: 1.2; }
.status-card__detail { color: var(--ink-soft); font-size: .97rem; line-height: 1.6; margin-bottom: 1.1rem; }
.status-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0;
}
.status-metrics > div {
    background: var(--paper-alt); border: 1px solid var(--line-soft); border-radius: 10px;
    padding: .65rem .8rem;
}
.status-metrics dt { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.status-metrics dd { margin: .15rem 0 0; font-size: 1.12rem; font-weight: 600; color: var(--ink); }
@media (max-width: 575.98px) {
    .status-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-card { padding: 1.15rem; }
}

.status-next {
    margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 12px;
    background: var(--accent-bg); border: 1px solid rgba(var(--accent-rgb), .18);
}
.status-next p { font-size: .93rem; color: var(--ink-soft); }

.status-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.3rem; border-radius: 14px; color: #e6f4ec;
    background: linear-gradient(135deg, #124030, #0a2318); box-shadow: var(--shadow-md);
}
.status-cta strong { color: #fff; font-size: 1.02rem; }
.status-cta p { color: #b5d9c5; font-size: .9rem; max-width: 58ch; }
.status-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.status-cta .btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.status-cta--wide { padding: 1.6rem 1.8rem; }

.status-more { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: 1.5rem; font-size: .88rem; color: var(--muted); }
.status-more a { text-decoration: none; font-weight: 500; }

/* Karşılaştırma: sol sütun sönük, bizim sütun vurgulu. */

/* Özellik özeti kartları (tanıtım → /ozellikler). */
.hl-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem;
    box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hl-card:hover { border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; }
.hl-card h3 { font-size: 1rem; margin-bottom: .35rem; color: var(--ink); }
.hl-card p { font-size: .88rem; color: var(--muted); margin-bottom: .9rem; flex-grow: 1; }
.hl-card__more { font-size: .84rem; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }

.phones__cap { text-align: center; font-size: .78rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .status-card--ok .status-card__icon { animation: none; }
    .hl-card { transition: none; }
}

/* =====================================================================
 * BANNER MAVİSİ (2026-10-17, kullanıcı isteği: "bannerdaki mavi rengi tasarımı
 * bozmayacak şekilde site tasarımı içinde bazı yerlere dağıt; banner içindeki
 * mavi renkler sırıtmasın"). Ana renk yeşil kalır (düğme, bağlantı, vurgu);
 * mavi yalnız İKİNCİ PLANDA: zemin tonları, köşe ışıkları, bazı ikon
 * rozetleri, adım numaraları, alt bilgi. Tonlar banner'dan ölçüldü (gökyüzü
 * #d4e7fd / #b5d9fe, ikon mavisi #2f7de1). Mavi metin rengi olarak
 * KULLANILMAZ (AA); ikon/çizgi 3:1 üstünde.
 * ===================================================================== */
:root {
    --sky:      #2f7de1;
    --sky-rgb:  47, 125, 225;
    --sky-bg:   #eaf3fe;
    --sky-soft: #d4e7fd;
}

/* Bölüm başlığının kısa çizgisi: yeşilden maviye. */
.eyebrow::before { background: linear-gradient(90deg, var(--accent-2), var(--sky)); }
.hero .eyebrow::before { background: var(--accent-2); }

/* Izgaradaki her üç rozetten biri mavi (yan yana kartlarda tek renk tekdüzeliği kırılır). */
.row > :nth-child(3n+2) > .card-soft .icon-badge {
    color: var(--sky);
    background: linear-gradient(135deg, var(--sky-bg), #fff);
    box-shadow: inset 0 0 0 1px rgba(var(--sky-rgb), .16), 0 4px 10px -6px rgba(var(--sky-rgb), .5);
}

/* Adım numaraları ve aralarındaki çizgi: yeşilden maviye. */
.step-card__n { background: linear-gradient(135deg, var(--accent), var(--sky)); box-shadow: 0 6px 14px -6px rgba(var(--sky-rgb), .6); }
.step-card::after { background: repeating-linear-gradient(90deg, rgba(var(--sky-rgb), .4) 0 6px, transparent 6px 12px); }

/* Kart üzerine gelince ince mavi ışık (çerçeve yeşil kalır). */
.card-soft:hover, .step-card:hover, .fix-row:hover {
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(var(--sky-rgb), .06);
}

/* "Tamamen ücretsiz" şeridi: koyu yeşilin bir köşesinde banner mavisi. */
.free-band {
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(43,182,115,.32), transparent 65%),
        radial-gradient(45% 70% at 0% 100%, rgba(var(--sky-rgb), .30), transparent 65%),
        linear-gradient(135deg, #0f3324, #0b2230);
}

/* --- Banner yazılarında mavi (2026-10-17, kullanıcı isteği: "banner kısmına da mavi
   renkleri serpiştir yazılara"). Düğme yeşil kalır. Metin maviler AA: #1f5fbf açık
   zeminde 5,9:1; başlık geçişi büyük yazı (3:1 yeter). */
.hero--art .banner--main h1 .hl {
    background: linear-gradient(90deg, var(--accent-dark), var(--accent) 40%, #1f6fd1 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--art .hl-sky { color: #1f5fbf; font-weight: 600; }
.hero--art .banner--main .eyebrow::before { background: var(--sky); box-shadow: 0 0 0 3px rgba(var(--sky-rgb), .2); }
.hero--art .banner--main .hero-link { color: #1f5fbf; }
.hero--art .banner--main .hero-link:hover { color: #164a96; }
.hero--art .banner--main .trust li:nth-child(even) .bi { background: var(--sky-bg); color: var(--sky); }
.hero--art .banner__stats strong { color: #1f5fbf; }

/* --- Neleri izliyoruz (2026-10-17): tam genişlikte başlık, altta renkli grup panelleri
   (mavi, mor, yeşil, lacivert, turuncu). */
.watch__hl { background: linear-gradient(90deg, var(--accent), #1f6fd1); -webkit-background-clip: text; background-clip: text; color: transparent; }

.watch-group {
    --tone: var(--sky); --tone-bg: #eef5fe; --tone-line: #d6e6fb;
    border-radius: 16px; padding: 1.15rem 1.2rem; background: linear-gradient(180deg, var(--tone-bg), #fff 75%);
    border: 1px solid var(--tone-line); box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.watch-group:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.watch-group--sky    { --tone: #1f6fd1; --tone-bg: #eef5fe; --tone-line: #d6e6fb; }
.watch-group--violet { --tone: #7a5af0; --tone-bg: #f3f0fe; --tone-line: #e1d9fc; }
.watch-group--mint   { --tone: #16804d; --tone-bg: #ecf8f1; --tone-line: #cdebd9; }
.watch-group--indigo { --tone: #4b5bd6; --tone-bg: #eff1fd; --tone-line: #dadffa; }
.watch-group--amber  { --tone: #a95408; --tone-bg: #fff5ea; --tone-line: #fbe0c3; }
.watch-group__title { display: flex; align-items: center; gap: .55rem; font-size: .98rem; font-weight: 700; margin-bottom: .85rem; color: var(--ink); }
.watch-group__title .bi {
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--tone); box-shadow: 0 6px 14px -8px var(--tone);
}
/* F2 (axe color-contrast): gök ve kehribar tonları beyaz zeminde 4.5:1'in altındaydı (4.08 / 4.16). */
.watch-group__count { margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--tone); background: #fff; border: 1px solid var(--tone-line); border-radius: 999px; padding: .1rem .55rem; }
.watch-item { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px dashed var(--tone-line); }
.watch-item:first-child { border-top: 0; padding-top: 0; }
.watch-item__icon { color: var(--tone); font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.watch-item__title { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); }
a.watch-item__title { text-decoration: none; }
a.watch-item__title:hover { color: var(--tone); text-decoration: underline; }
.watch-item__text { display: block; font-size: .8rem; color: var(--muted); }

/* Banner altı şeridinden sonraki ilk bölüm: şerit zaten boşluk verir (2026-10-17). */
#neleri-izliyoruz { padding-top: 3rem; }

/* --- Bölüm zeminleri (2026-10-17, kullanıcı isteği: "iki renk olsun sadece: banner arka
   plan rengi ve beyaz"). Açık bölümler banner'ın mavisi (#eaf2fd) ile beyaz arasında sırayla
   değişir; geçişler KESKİN (2026-10-17, kullanıcı isteği: "background geçişleri keskin olsun"). Sıra: banner (mavi) -> Neleri
   izliyoruz (beyaz) -> Sorununuz hangisi (mavi) -> Neleri yakalar (beyaz) -> Nasıl çalışır
   (mavi) -> [ücretsiz şeridi] -> Özellikler (beyaz) -> Mobil (mavi) -> Rehberler (beyaz) -> SSS (mavi). */
:root { --band-blue: #eaf2fd; }
/* 2026-10-17 (kullanıcı isteği: "banner background kullandığın rengi kullan, beyaz haricindeki yerler
   için"): beyaz olmayan her zemin banner'ın zeminiyle AYNI değişkenden -- geniş ekranda soldan
   sağa açıktan maviye, dar ekranda düz #eaf2fd (banner da öyle). Geçişler keskin. */
:root { --banner-bg: #eaf2fd; }
@media (min-width: 1200px) {
    :root { --banner-bg: linear-gradient(90deg, #f2f9fe 0%, #f2f9fe 40%, #e4f0fe 70%, #d6e8fd 100%); }
}
.section--alt, #sorun, #mobil { border: 0; background: var(--banner-bg); }
#neleri-izliyoruz, #neden { background: #fff; }
/* Banner altı (2026-10-17, kullanıcı isteği: "arama kısmı banner ile altındaki kısım arasında
   olsun, ortalansın"): şerit alttaki bölümün beyazı; form kendi yüksekliğinin yarısı kadar
   yukarı çekilir (site.js), sınır tam formun ortasından geçer. Betik yoksa -2.6rem bindirme. */
.hero-check-band { background: #fff; }
/* İkinci renk yok: alt bilgi ve küçük rozet zeminleri de beyaz / banner mavisi. */
.foot { background: #fff; border-top-color: #e3edf9; }
.channels__item { background: var(--band-blue); border-color: #d6e6fb; }

/* --- Uyarı böyle görünür (2026-10-17): kesintinin akışı, zaman çizelgesi. Noktalar durumu
   söyler: kırmızı kapandı, turuncu sürüyor, yeşil açıldı, gri kayıt. */
.alert-flow { position: relative; margin: 0; padding: 0; }
.alert-flow::before { content: ""; position: absolute; left: 1.95rem; top: 2.75rem; bottom: 2.75rem; width: 2px; background: linear-gradient(180deg, var(--danger), var(--warn) 40%, var(--accent) 70%, #98a2b3); opacity: .35; }
.alert-flow__step { --dot: var(--muted); position: relative; display: flex; gap: .9rem; align-items: center; padding: .6rem .9rem .6rem 0; }   /* 2026-10-17: saat etiketi kutunun ortasında */
.alert-flow__step + .alert-flow__step { margin-top: .35rem; }
.alert-flow__step--down { --dot: var(--danger); }
.alert-flow__step--wait { --dot: var(--warn); }
.alert-flow__step--up   { --dot: var(--accent); }
.alert-flow__step--log  { --dot: #667085; }
.alert-flow__time {
    position: relative; z-index: 1; flex: 0 0 3.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--dot); background: #fff; border: 2px solid var(--dot);
}
.alert-flow__step > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .85rem; flex: 1 1 auto; box-shadow: var(--shadow-sm); }
.alert-flow__step strong { display: block; font-size: .93rem; color: var(--ink); }
.alert-flow__step span:not(.alert-flow__time) { display: block; font-size: .84rem; color: var(--muted); margin-top: .1rem; }
.alert-flow__note { font-size: .84rem; color: var(--ink-soft); padding: .55rem .8rem; border-radius: 10px; background: rgba(255,255,255,.7); border: 1px dashed #c9dcf5; }

/* "Tamamen ücretsiz" şeridi de banner zemininde (2026-10-17): koyu yeşil yerine; yazılar koyu. */
.free-band { background: var(--banner-bg); color: var(--ink); }
.free-band::before { display: none; }
.free-band .eyebrow { color: var(--accent); }
.free-band .eyebrow::before { background: linear-gradient(90deg, var(--accent-2), var(--sky)); }
.free-band h2 { color: var(--ink); }
.free-band .text-muted-2 { color: var(--muted) !important; }
.free-band strong { color: var(--ink); }
.free-band .hero-link { color: #1f5fbf; }

/* --- Paket yok (2026-10-17, 4. tur): kenardan kenara koyu lacivert zemin, içerik 1120 px hizasında,
       sağda temsili "hesabınız" kartı. */
.free-band { position: relative; overflow: hidden; isolation: isolate; padding: 4.5rem 0; color: #fff; background: linear-gradient(120deg, #0a1a33 0%, #0e2a52 55%, #123f73 100%); }
.free-band::before { content: ""; display: block; position: absolute; z-index: -1; inset: auto auto -40% -10%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(43,182,115,.28), transparent); pointer-events: none; }
.free-band::after { content: ""; position: absolute; z-index: -1; inset: -30% -8% auto auto; width: 50%; height: 120%; background: radial-gradient(closest-side, rgba(var(--sky-rgb), .35), transparent); pointer-events: none; }
.free-banner__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #bff0d5; background: rgba(43,182,115,.16); border: 1px solid rgba(43,182,115,.35); }
.free-band .free-banner__title { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 1rem; }
.free-banner__lead { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 32rem; margin-bottom: 1.4rem; }
.free-banner__grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.free-banner__grid li { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.free-banner__grid .bi { color: #7fd8a8; }
.free-banner__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.free-banner__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.6rem; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #1c9158, var(--accent)); border: 0; box-shadow: 0 12px 26px -12px rgba(43,182,115,.8); }
.free-banner__btn:hover, .free-banner__btn:focus-visible { color: #fff; background: var(--accent-dark); transform: translateY(-1px); }
.free-banner__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.45); }
.free-banner__link:hover { color: #fff; text-decoration-color: #fff; }
.free-visual { position: relative; max-width: 440px; margin-left: auto; padding: 0 0 2.2rem 2rem; }
.free-visual__card { padding: 1.25rem; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); }
.free-visual__head { display: flex; align-items: center; justify-content: space-between; padding: 0 .25rem .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.free-visual__head .bi { color: var(--muted); margin-right: .45rem; }
.free-visual__plan { padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; color: var(--accent-dark); background: #e8f8ef; }
.free-visual__card li { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; font-size: .9rem; }
.free-visual__card li + li { border-top: 1px dashed var(--line-soft, #eef0f3); }
.free-visual__ico { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; color: var(--sky); background: var(--sky-bg); }
.free-visual__card li:nth-child(even) .free-visual__ico { color: var(--accent); background: #e8f8ef; }
.free-visual__label { font-weight: 600; }
.free-visual__state { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--accent); }
.free-visual__toggle { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--accent); }
.free-visual__toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.free-visual__float { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }
.free-visual__float strong { display: block; font-size: .92rem; }
.free-visual__float small { display: block; font-size: .78rem; color: var(--muted); }
.free-visual__float-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--sky)); }
@media (max-width: 991.98px) {
    .free-band { padding: 3.25rem 0; }
    .free-visual { margin: 0 auto; }
}
@media (max-width: 479.98px) {
    .free-banner__title br { display: none; }
    .free-visual { padding-left: 0; }
}

/* --- Kesintinin ötesinde (2026-10-17): bento ızgara. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bento-card { display: flex; flex-direction: column; gap: .35rem; padding: 1.35rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bento-card:hover, .bento-card:focus-visible { color: var(--ink); border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bento-card h3 { font-size: 1rem; font-weight: 700; margin: .35rem 0 0; }
.bento-card p { font-size: .87rem; color: var(--muted); margin: 0; }
.bento-card__ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; color: var(--accent); background: var(--accent-bg, #e8f8ef); }
.bento-card:nth-child(3n) .bento-card__ico { color: var(--sky); background: var(--sky-bg); }
.bento-card--lead { grid-column: span 2; grid-row: span 2; padding: 1.75rem; background: var(--banner-bg); border-color: #d4e7fd; }
.bento-card--lead h3 { font-size: 1.3rem; }
.bento-card--lead p { font-size: .95rem; max-width: 30rem; }
.bento-card--lead .bento-card__ico { width: 50px; height: 50px; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--sky)); }
.bento-checks { display: grid; gap: .5rem; margin: 1.1rem 0 1rem; }
.bento-checks li { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 12px; background: #fff; border: 1px solid rgba(16,24,40,.06); font-size: .85rem; }
.bento-checks code { color: var(--ink); font-size: .82rem; background: none; padding: 0; }
.bento-checks li > span:last-child { margin-left: auto; color: var(--muted); }
.bento-checks__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bento-checks__dot.is-ok { background: var(--accent-2, #2bb673); box-shadow: 0 0 0 4px rgba(43,182,115,.15); }
.bento-checks__dot.is-bad { background: #e5484d; box-shadow: 0 0 0 4px rgba(229,72,77,.15); }
.bento-card__more { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--accent); }
.bento-card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.1rem; }
.bento-card--wide h3 { margin-top: 0; }
.bento-channels { display: flex; flex: none; flex-wrap: nowrap; gap: .4rem; margin-left: auto; }
.bento-channels li { padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #1f5fbf; background: var(--sky-bg); border: 1px solid var(--sky-soft); }
@media (max-width: 991.98px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento-card--wide { flex-wrap: wrap; }
    .bento-channels { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
    .bento { grid-template-columns: 1fr; }
    .bento-card--lead { grid-column: auto; grid-row: auto; }
}

/* --- Mobil bölümü (2026-10-17): dizüstü + tablet + telefon. Bütün ölçüler em;
   sahnenin yazı boyu kapsayıcı genişliğine bağlı (cqw), böylece üçlü her
   genişlikte aynı oranla küçülür. Sahne 42em genişliğinde. */
.devices { container-type: inline-size; padding: 1rem 0 1.25rem; position: relative; }
.devices::before { content: ""; position: absolute; inset: 10% 8%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--sky-rgb), .22), transparent); filter: blur(8px); }
.devices__stage { position: relative; font-size: 2.38cqw; width: 42em; height: 29em; margin: 0 auto; color: var(--ink); line-height: 1.25; }
.devices__stage i { font-style: normal; }
.dev-laptop { position: absolute; left: 6em; top: 0; width: 34em; }
.dev-laptop__screen { height: 21.5em; padding: .55em; border-radius: .9em .9em .3em .3em; background: #0b0f19; box-shadow: 0 1.6em 3em -1.4em rgba(16,24,40,.45), inset 0 0 0 .12em #2b3244; display: flex; flex-direction: column; }
.dev-laptop__base { position: relative; left: -2em; width: 38em; height: 1.1em; border-radius: .2em .2em 1em 1em; background: linear-gradient(180deg, #d9dee7, #aeb6c4); box-shadow: 0 .8em 1.5em -.8em rgba(16,24,40,.5); }
.dev-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 5em; height: .35em; transform: translateX(-50%); border-radius: 0 0 .4em .4em; background: #9aa3b2; }
.dev-browser { display: flex; align-items: center; gap: .3em; padding: .35em .6em; border-radius: .45em .45em 0 0; background: #eef1f6; font-size: .55em; }
.dev-browser span { width: .7em; height: .7em; border-radius: 50%; background: #f87171; }
.dev-browser span:nth-child(2) { background: #fbbf24; }
.dev-browser span:nth-child(3) { background: #34d399; }
.dev-browser em { margin-left: 1.2em; padding: .15em 1.2em; border-radius: 1em; background: #fff; color: var(--muted); font-style: normal; }
.dev-app { flex: 1; display: flex; min-height: 0; overflow: hidden; border-radius: 0 0 .45em .45em; background: #f6f8fb; }
.dev-app__side { width: 7em; flex: none; display: flex; flex-direction: column; gap: .25em; padding: .6em .45em; background: #fff; border-right: 1px solid var(--line); font-size: .62em; }
.dev-app__side b { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-bottom: .5em; border-radius: .5em; color: #fff; background: var(--accent); }
.dev-app__side span { display: flex; align-items: center; gap: .4em; padding: .35em .45em; border-radius: .45em; color: var(--muted); }
.dev-app__side .is-active { color: var(--accent-dark); background: #e8f8ef; font-weight: 600; }
.dev-app__main { flex: 1; min-width: 0; padding: .7em .8em; }
.dev-app__title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55em; font-size: .85em; font-weight: 700; }
.dev-app__title span { padding: .25em .7em; border-radius: .45em; font-size: .7em; color: #fff; background: var(--accent); }
.dev-table { border-radius: .5em; background: #fff; border: 1px solid var(--line); overflow: hidden; font-size: .56em; }
.dev-table__head, .dev-table__row { display: grid; grid-template-columns: 2.2fr 1.1fr .9fr .9fr 1.2fr; align-items: center; gap: .5em; padding: .62em .9em; }
.dev-table__head { color: var(--muted); font-weight: 600; background: #f9fafb; }
.dev-table__row { border-top: 1px solid var(--line-soft, #eef0f3); }
.dev-table__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dev-table__row > span:last-child { color: var(--muted); }
.dev-tag { display: inline-block; padding: .12em .55em; border-radius: 1em; font-size: .92em; font-weight: 600; white-space: nowrap; }
.dev-tag--ok { color: var(--ok); background: rgba(22,128,77,.1); }
.dev-tag--warn { color: var(--warn); background: rgba(217,119,6,.12); }
.dev-tag--danger { color: var(--danger); background: rgba(220,38,38,.1); }
.dev-c--ok { color: var(--ok); }
.dev-c--warn { color: var(--warn); }
.dev-c--danger { color: var(--danger); }
.dev-tablet, .dev-phone { position: absolute; bottom: 0; background: #0b0f19; box-shadow: 0 1.4em 2.8em -1em rgba(16,24,40,.55), inset 0 0 0 .12em #2b3244; }
.dev-tablet { left: 0; width: 14em; height: 18.5em; padding: .6em; border-radius: 1.3em; }
.dev-phone { right: 0; width: 9.2em; height: 18.5em; padding: .45em; border-radius: 1.5em; }
.dev-screen { position: relative; height: 100%; overflow: hidden; padding: .8em .7em; border-radius: .8em; background: #f6f8fb; }
.dev-phone .dev-screen { border-radius: 1.15em; padding: 1.5em .55em .6em; }
.dev-phone__notch { position: absolute; top: .4em; left: 50%; width: 3em; height: .75em; transform: translateX(-50%); border-radius: 1em; background: #0b0f19; }
.dev-screen__title { margin-bottom: .55em; font-size: .9em; font-weight: 700; }
.dev-screen__label { margin: .7em 0 .35em; font-size: .5em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dev-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.dev-stat { padding: .45em .5em; border-radius: .5em; background: #fff; border: 1px solid var(--line); border-left: .2em solid var(--accent); }
.dev-stat strong { display: block; font-size: 1em; }
.dev-stat span { display: block; font-size: .48em; color: var(--muted); white-space: nowrap; }
.dev-stat--ok { border-left-color: var(--ok); }
.dev-stat--warn { border-left-color: var(--warn); }
.dev-stat--danger { border-left-color: var(--danger); }
.dev-note { display: flex; gap: .45em; align-items: flex-start; margin-bottom: .35em; padding: .45em .5em; border-radius: .5em; background: #fff; border: 1px solid var(--line); font-size: .55em; }
.dev-note strong { display: block; font-weight: 600; }
.dev-note span { color: var(--muted); }
.dev-note--bad > .bi { color: var(--danger); }
.dev-note--ok > .bi { color: var(--ok); }
.dev-search { margin-bottom: .5em; padding: .35em .55em; border-radius: .6em; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .52em; }
.dev-item { display: flex; flex-direction: column; gap: .3em; align-items: flex-start; margin-bottom: .4em; padding: .5em .55em; border-radius: .6em; background: #fff; border: 1px solid var(--line); font-size: .52em; }
.dev-item strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dev-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: .5em .3em .6em; background: #fff; border-top: 1px solid var(--line); font-size: .62em; color: var(--muted); }
.dev-tabs .is-active { color: var(--accent); }
.bento-all { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.5rem; border-radius: 12px; font-weight: 600; color: var(--accent-dark); background: #fff; border: 1px solid rgba(var(--accent-rgb), .35); }
.bento-all:hover, .bento-all:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); }

/* --- Rehberler (2026-10-17): solda kategori bağlantıları, sağda öne çıkan yazı + iki kart. */
.guides-intro { position: sticky; top: 6rem; }
.guides-cats { display: grid; gap: .35rem; margin: 0 0 1.5rem; }
.guides-cats a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 12px; font-weight: 600; font-size: .93rem; color: var(--ink); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.guides-cats a:hover, .guides-cats a:focus-visible { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); color: var(--ink); }
.guides-cats .bi-chevron-right { font-size: .8rem; color: var(--muted); }
.guides-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; font-size: 1rem; }
.guides-ico--green { color: var(--accent); background: #e8f8ef; }
.guides-ico--sky { color: var(--sky); background: var(--sky-bg); }
@media (max-width: 991.98px) { .guides-intro { position: static; } }
.guides-cats a, .bento-all { text-decoration: none; }
.guides-cats { margin: -.55rem -.7rem 1.5rem; }
/* Cihaz üçlüsü inceltildi (2026-10-17, kullanıcı: "çok kaba duruyor"): ince çerçeveler,
   gümüş tablet, ince alüminyum taban, daha yumuşak gölgeler; tablet ve telefon küçüldü,
   dizüstü öne çıkar. */
.dev-laptop { left: 5em; width: 35em; }
.dev-laptop__screen { height: 21.5em; padding: .35em; border-radius: .75em .75em .2em .2em; background: #1d2230; box-shadow: 0 2.2em 3.2em -2.2em rgba(16,24,40,.38), inset 0 0 0 .06em #4a5266; }
.dev-laptop__base { left: -2em; width: 39em; height: .65em; border-radius: .1em .1em .9em .9em; background: linear-gradient(180deg, #eef1f5 0%, #d3d8e0 55%, #b9c0cb 100%); box-shadow: 0 1em 1.6em -1em rgba(16,24,40,.35); }
.dev-laptop__base::before { width: 5em; height: .22em; background: #c3c9d3; }
.dev-browser { border-radius: .4em .4em 0 0; }
.dev-tablet, .dev-phone { box-shadow: 0 1.6em 2.6em -1.4em rgba(16,24,40,.4); }
.dev-tablet { left: 0; width: 12.5em; height: 16.5em; padding: .45em; border-radius: 1.1em; background: linear-gradient(160deg, #f4f6f9, #dfe3ea); box-shadow: 0 1.6em 2.6em -1.4em rgba(16,24,40,.4), inset 0 0 0 .06em #c9cfd8; }
.dev-tablet .dev-screen { border-radius: .7em; box-shadow: inset 0 0 0 .06em rgba(16,24,40,.08); }
.dev-phone { right: 0; width: 8.2em; height: 16.5em; padding: .28em; border-radius: 1.35em; background: #1d2230; box-shadow: 0 1.6em 2.6em -1.4em rgba(16,24,40,.45), inset 0 0 0 .06em #4a5266; }
.dev-phone .dev-screen { border-radius: 1.1em; }
.dev-phone__notch { top: .35em; width: 2.6em; height: .6em; background: #1d2230; }
.dev-stat, .dev-note, .dev-item, .dev-search, .dev-table { border-color: #edf0f4; }
.dev-stat { border-left-width: .14em; }
.devices::before { background: radial-gradient(closest-side, rgba(var(--sky-rgb), .14), transparent); }

/* Rehberler sağ taraf (2026-10-17, 3. tur): en yeni yazı büyük kart, diğer ikisi yanında üst üste. */
.guide-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: 1fr; gap: 1rem; }
.guide-post { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s; }
.guide-post::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--sky)); opacity: 0; transition: opacity .15s; }
.guide-post:hover, .guide-post:focus-visible { color: var(--ink); border-color: rgba(var(--accent-rgb), .4); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.guide-post:hover::before, .guide-post:focus-visible::before { opacity: 1; }
.guide-post h3 { font-size: 1.02rem; font-weight: 700; line-height: 1.4; margin: 0; }
.guide-post p { font-size: .92rem; color: var(--muted); margin: 0; }
.guide-post__more { margin-top: auto; padding-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--accent); }
.guide-post--lead { grid-row: span 2; padding: 1.9rem; background: var(--banner-bg); border-color: #d4e7fd; }
.guide-post--lead h3 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -.01em; }
.guide-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.guide-pill--green { color: var(--accent-dark); background: #e8f8ef; }
.guide-pill--sky { color: #1f5fbf; background: var(--sky-bg); }
.guide-post--lead .guide-pill { background: #fff; }
@media (max-width: 767.98px) {
    .guide-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .guide-post--lead { grid-row: auto; }
}

/* Altbilgi izleme hizmetleri satırı (2026-10-17): başlıksız, ortalı, az boşluk. */
.foot__services { margin-top: 1.25rem; padding: .85rem 0; }
.foot__services .foot__links { row-gap: .35rem !important; }
.foot__main:has(.foot__services) { padding-bottom: .4rem; }

/* ===== İçerik sayfaları (2026-10-17, kullanıcı: "tüm içerik sayfaları yeni tasarım çizgisinde")
   Kurallar: zemin yalnız banner zemini ya da beyaz (keskin geçiş); üst bant banner zemininde,
   koyu yazı; kapanış bandı "Paket yok" ara banner'ının lacivertiyle aynı; düğmeler yeşil. */
.tool-hero, .page-hero {
    position: relative; isolation: isolate; overflow: hidden; color: var(--ink);
    padding: 3rem 0 3.25rem; background: var(--banner-bg);
}
.tool-hero .eyebrow, .page-hero .eyebrow { color: var(--accent); }
.tool-hero h1, .page-hero h1 { color: #0a2318; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; max-width: 32ch; }
.tool-hero h1 .hl, .page-hero h1 .hl { background: linear-gradient(90deg, var(--accent-dark), var(--accent) 45%, var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-hero__sub, .page-hero__sub { color: var(--ink-soft, #3a4566); font-size: 1.05rem; line-height: 1.65; max-width: 64ch; }
.tool-hero .crumbs, .page-hero .crumbs, .tool-hero .crumbs a, .page-hero .crumbs a { color: var(--muted); }
.tool-hero .crumbs a:hover, .page-hero .crumbs a:hover { color: var(--accent-dark); }
.tool-hero .hero-check { box-shadow: 0 24px 48px -28px rgba(16,24,40,.35); }
.tool-hero .btn-ghost, .page-hero .btn-ghost { background: #fff; }
.page-hero__meta { color: var(--muted); font-size: .85rem; }
/* F2 (kimliksiz axe kapısı, /terms ve /privacy): sürüm kodu Bootstrap pembesiyle zeminde 4.5:1 altındaydı. */
.page-hero__meta code { color: var(--ink); }

/* Kapanış bandı: koyu yeşil yerine "Paket yok" lacivertisi (parıltılı). */
.status-cta, .cta-box {
    position: relative; overflow: hidden; isolation: isolate; color: #e9f0fb; border: 0;
    background:
        radial-gradient(45% 120% at 0% 100%, rgba(43,182,115,.30), transparent 70%),
        radial-gradient(40% 120% at 100% 0%, rgba(var(--sky-rgb), .38), transparent 70%),
        linear-gradient(120deg, #0a1a33 0%, #0e2a52 55%, #123f73 100%);
    border-radius: 20px; box-shadow: 0 24px 48px -28px rgba(10,26,51,.6);
}
.status-cta strong, .cta-box h2, .cta-box strong { color: #fff; }
.status-cta p, .cta-box p { color: rgba(255,255,255,.78); }
.status-cta--wide, .cta-box { padding: 2rem 2.2rem; }
.status-cta .btn-ghost, .cta-box .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.status-cta .btn-ghost:hover, .cta-box .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.cta-box .btn-accent, .status-cta .btn-accent { box-shadow: 0 12px 26px -12px rgba(43,182,115,.8); }

/* Tanıtım yüzeyinde Bootstrap mavisi kalmasın: birincil düğme yeşil. */
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); font-weight: 600; }

/* Bilgi ve yasal sayfaların gövdesi: bölümler kart, başlıkta yeşil-mavi çizgi. */
.doc-body { padding: 2.5rem 0 3.5rem; }
.doc-card { padding: 1.5rem 1.6rem; margin-bottom: 1rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); scroll-margin-top: 6rem; }
.doc-card h2 { position: relative; padding-left: .9rem; margin: 0 0 .75rem; font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.doc-card h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--sky)); }
.doc-card p { line-height: 1.8; color: var(--ink-soft, #344054); }
.doc-card p:last-child { margin-bottom: 0; }
.doc-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.doc-card li { position: relative; padding-left: 1.6rem; line-height: 1.7; color: var(--ink-soft, #344054); }
.doc-card li::before { content: "\f272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .1em; color: var(--accent); }
.doc-card--contact { background: var(--banner-bg); border-color: #d4e7fd; }
.doc-toc { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.doc-toc a { padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--accent-dark); background: #fff; border: 1px solid #cdebd9; text-decoration: none; }
.doc-toc a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Özellikler başlığındaki bölüm bağlantıları açık zeminde (2026-10-17). */
.tool-hero .jump-links a { color: var(--accent-dark); background: #fff; border: 1px solid #cdebd9; text-decoration: none; }
.tool-hero .jump-links a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
/* Hizmet sayfası adımları: numaralı rozet. */
.svc-steps { list-style: none; padding: 0; display: grid; gap: .7rem; }
.svc-steps li { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.65; color: var(--ink-soft, #344054); }
.svc-steps__n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .82rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--sky)); }
.doc-card .svc-steps li { padding-left: 0; }
.doc-card .svc-steps li::before { content: none; }
/* Giriş, kayıt, parola ve onay sayfaları (2026-10-17): zemin banner zemini, kart gölgeli,
   üstte yeşil-mavi şerit; altbilgiye beyazla keskin geçiş. Sekiz şablon aynı iki sınıfı kullanır. */
.auth-wrap { background: var(--banner-bg); }
.auth-card { position: relative; overflow: hidden; border-radius: 20px; border-color: #dbe7f6; box-shadow: 0 30px 60px -36px rgba(16,24,40,.35); }
.auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--sky)); }
.auth-card h1 { font-weight: 800; letter-spacing: -.02em; }
.auth-card a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ===== Menü sayfaları (2026-10-17): /nasil-calisir, /mobil, /sss, /araclar (menu-page.php).
   Ana sayfanın bölümleri burada banner bandının hemen altına gelir; iki renk kuralı
   (banner zemini / beyaz, keskin geçiş) bozulmasın diye ilk bölüm beyaz. */
.menu-page #nasil-calisir, .menu-page #mobil, .menu-page #sss { background: #fff; }
.menu-page #neden { background: var(--banner-bg); }
.menu-page .page-hero h1 { max-width: 26ch; }
.tools-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tools-hub__card { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tools-hub__card:hover, .tools-hub__card:focus-visible { color: var(--ink); border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tools-hub__card h2 { font-size: 1.08rem; font-weight: 700; margin: .4rem 0 0; }
.tools-hub__card p { font-size: .9rem; color: var(--muted); margin: 0; }
.tools-hub__more { margin-top: auto; padding-top: .4rem; font-size: .9rem; font-weight: 600; color: var(--accent); }
.tools-hub__ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.25rem; }
.tools-hub__ico--green { color: var(--accent); background: #e8f8ef; }
.tools-hub__ico--sky { color: var(--sky); background: var(--sky-bg); }
.tools-hub__card--lead { grid-column: span 2; grid-row: span 2; justify-content: center; padding: 2.2rem; background: var(--banner-bg); border-color: #d4e7fd; }
.tools-hub__card--lead h2 { font-size: 1.35rem; }
.tools-hub__card--lead .tools-hub__ico { width: 56px; height: 56px; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--sky)); }
.tools-hub__note { margin-top: 1.25rem; text-align: center; font-size: .9rem; color: var(--muted); }
@media (max-width: 991.98px) { .tools-hub { grid-template-columns: repeat(2, 1fr); } .tools-hub__card--lead { grid-row: auto; } }
@media (max-width: 575.98px) { .tools-hub { grid-template-columns: 1fr; } .tools-hub__card--lead { grid-column: auto; } }
/* Menü sayfasında bölümün kendi başlığı üst bantla yinelenir (SSS); bant yeter. */
.menu-page #sss .section-head { display: none; }
.menu-page #sss { padding-top: 3rem; }
.menu-page #mobil h2.h3 { display: none; }
/* Kontrast (2026-10-17, axe color-contrast): banner zemininin mavi ucunda --accent yeşili
   4.5:1'in altına düşüyordu. Üst başlıklar ve kart sonu bağlantıları bir ton koyu yeşil. */
.eyebrow, .tool-hero .eyebrow, .page-hero .eyebrow, .free-band .eyebrow { color: var(--accent-dark); }
.bento-card__more, .guide-post__more, .tools-hub__more, .hl-card__more { color: var(--accent-dark); }
.tools-hub__card--lead h2 a { color: inherit; text-decoration: none; }
.tools-hub__card--lead h2 a:hover { color: var(--accent-dark); }
.tools-hub__card--lead p { font-size: 1rem; max-width: 52ch; }
.tools-hub__card--lead .hero-check { box-shadow: 0 18px 36px -24px rgba(16,24,40,.35); }