/* ============================================================
   CIZGI.COM - HOME PAGE STYLESHEET
   Bölüm 1: Reset, Root Variables, Background, Body, Globals
   ============================================================ */

/* ---------- Reset ve temel etkileşimler ---------- */

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

html,
body {
    height: 100%;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

iframe {
    width: 100%;
    height: calc((100vw * 9) / 16);
}

/* ---------- Odak görünürlüğü (erişilebilirlik) ---------- */

:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

/* ---------- Skip Link ---------- */

.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.skip-link:focus-visible {
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    padding: 8px 14px;
    background: #000;
    color: #fff;
    border-radius: 999px;
    z-index: 2000;
}

/* ---------- Screen Reader Only ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ROOT VARIABLES (Dark Mode defaults)
   ============================================================ */

:root {
    --cizgi-primary: #004990;
    --cizgi-secondary: #B32017;

    --cizgi-bg: #020617;
    --cizgi-card: #020617;

    --cizgi-border-soft: rgba(148, 163, 184, 0.45);
    --cizgi-border-strong: rgba(248, 250, 252, 0.09);

    --cizgi-text: #E5E7EB;
    --cizgi-muted: #9CA3AF;

    --hero-parallax: -6px;
    --hero-hover-lift: 0px;

    /* Partner logo scale (tek yerden kontrol) */
    --partner-logo-scale: 0.82;
}

/* =========================================================
   LIGHT THEME (CIZGI INDEX) — Orange palette
   (search-page.css light theme ile birebir uyum)
   ========================================================= */
html.theme-light {
    /* Palette */
    --cizgi-primary: #f97316;
    /* orange-500 */
    --cizgi-secondary: #ea580c;
    /* orange-600 */

    /* Surfaces */
    --cizgi-bg: #fff7ed;
    /* orange-50 */
    --cizgi-card: #ffffff;

    /* Borders */
    --cizgi-border-soft: rgba(15, 23, 42, 0.08);
    --cizgi-border-strong: rgba(15, 23, 42, 0.14);

    /* Text */
    --cizgi-text: #0f172a;
    --cizgi-muted: #475569;
}

html.theme-light body {
    background: var(--cizgi-bg);
    color: var(--cizgi-text);
}

/* Light vignette: turuncu sıcak aura */
html.theme-light body::after {
    background: radial-gradient(circle at center,
            rgba(255, 237, 213, 0.00) 40%,
            rgba(249, 115, 22, 0.18) 100%);
}

/* ============================================================
   BACKGROUND STRUCTURE (responsive, dynamic)
   ============================================================ */

/* ---------- Dinamik Resim Arkaplan (PHP’den gelen) ---------- */

.has-image-bg {
    background: var(--cizgi-bg-image) center center / cover no-repeat fixed;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* ---------- Video Arkaplan Varsa ---------- */

.has-video-bg {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    background: radial-gradient(circle at 0% 0%, #020617 0, #020617 40%, #000 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Arka plan vignette efekt ---------- */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 0;
}

/* =========================================================
   LIGHT: Background aura (index) — Orange oriented
   ========================================================= */
html.theme-light #iIdentify {
    background:
        radial-gradient(900px 600px at 12% 12%, rgba(249, 115, 22, 0.28), transparent 60%),
        radial-gradient(900px 600px at 88% 18%, rgba(234, 88, 12, 0.22), transparent 60%),
        radial-gradient(800px 500px at 50% 100%, rgba(255, 237, 213, 0.55), transparent 70%);
    backdrop-filter: saturate(125%) blur(4px);
    -webkit-backdrop-filter: saturate(125%) blur(4px);
}

/* ---------- Video katmanı ---------- */

.banner-video {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.banner-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ---------- Spiders efekt (canvas) ---------- */

canvas#spiders {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.55;
}

/* ---------- Hareket Hassasiyeti Ayarı ---------- */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   CIZGI.COM - HOME PAGE STYLESHEET
   Bölüm 2: Layout, Hero, Searchbar, Featured Domains, Footer
   ============================================================ */

/* ---------- Sayfa shell / ana section ---------- */

/* Navbar safe offset (fixed header) */
:root {
    --nav-safe-top: 175px;
    /* desktop default */
    --nav-safe-extra: 52px;
    /* sloganı navbar altından tamamen kurtar */
}

/* Breakpoints: navbar + spacing */
@media (min-width: 1024px) {
    :root {
        --nav-safe-top: 190px;
        --nav-safe-extra: 56px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --nav-safe-top: 160px;
        --nav-safe-extra: 44px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --nav-safe-top: 135px;
        --nav-safe-extra: 34px;
    }
}

.section.full-height {
    position: relative !important;
    z-index: 3 !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: calc(var(--nav-safe-top) + var(--nav-safe-extra)) 16px 40px !important;
}

.page-shell {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 20px 28px;
    position: relative;
}

/* ---------- Hero kartı (cam, neon, parallax) ---------- */

.page-shell.hero-layout {
    border-radius: 32px;
    background:
        radial-gradient(circle at 0 0, rgba(0, 73, 144, 0.38), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(179, 32, 23, 0.40), transparent 55%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.70), rgba(15, 23, 42, 0.68));
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.85),
        0 0 80px rgba(0, 73, 144, 0.28),
        0 0 110px rgba(179, 32, 23, 0.30),
        0 0 0 1px rgba(15, 23, 42, 1);
    overflow: hidden;
    transform: translate3d(0, calc(var(--hero-parallax) + var(--hero-hover-lift)), 0);
    transition:
        transform .7s cubic-bezier(.15, .85, .35, 1),
        box-shadow .7s cubic-bezier(.15, .85, .35, 1);
}

/* Hover micro-lift */

.page-shell.hero-layout:hover {
    --hero-hover-lift: -6px;
    box-shadow:
        0 36px 110px rgba(0, 0, 0, 0.95),
        0 0 120px rgba(0, 73, 144, 0.38),
        0 0 150px rgba(179, 32, 23, 0.40),
        0 0 0 1px rgba(248, 250, 252, 0.04);
}

/* İç çerçeve */

.page-shell.hero-layout::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 24px;
    border: 1px solid var(--cizgi-border-strong);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9) inset;
    pointer-events: none;
}

/* Köşe çizgileri, neon hatlar */

.page-shell.hero-layout::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 73, 144, 0.7), transparent 70%) 6% 8% / 140px 2px no-repeat,
        linear-gradient(180deg, rgba(0, 73, 144, 0.7), transparent 70%) 6% 8% / 2px 90px no-repeat,
        linear-gradient(270deg, rgba(179, 32, 23, 0.7), transparent 70%) 94% 8% / 140px 2px no-repeat,
        linear-gradient(180deg, rgba(179, 32, 23, 0.7), transparent 70%) 94% 8% / 2px 90px no-repeat,
        linear-gradient(0deg, rgba(148, 163, 184, 0.38), transparent 70%) 6% 92% / 2px 70px no-repeat,
        linear-gradient(90deg, rgba(148, 163, 184, 0.38), transparent 70%) 6% 92% / 110px 2px no-repeat,
        linear-gradient(0deg, rgba(148, 163, 184, 0.38), transparent 70%) 94% 92% / 2px 70px no-repeat,
        linear-gradient(270deg, rgba(148, 163, 184, 0.38), transparent 70%) 94% 92% / 110px 2px no-repeat;
    opacity: 0.85;
    animation: softPulse 4.5s infinite ease-in-out;
}

/* İçerik üstte kalsın */

.page-shell.hero-layout>* {
    position: relative;
    z-index: 2;
}

/* ---------- Hero layout iç yerleşimi ---------- */

.hero-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    text-align: center;
}

.hero-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* Hero – Başlık + açıklama + arama için cam kart */
.hero-main-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 18px;
    padding: 20px 22px 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.20), transparent 65%),
        rgba(15, 23, 42, 0.90);
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: center;
}

/* Hero üst etiketi (kicker) */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cizgi-muted);
}

.hero-kicker span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-right: 6px;
    background: linear-gradient(135deg, var(--cizgi-primary), var(--cizgi-secondary));
    box-shadow:
        0 0 10px rgba(0, 73, 144, 0.9),
        0 0 14px rgba(179, 32, 23, 0.9);
}

/* Başlık ve alt başlık, kart içinde biraz sıkılaşsın */
.hero-main-shell .slogan-1 {
    margin-top: 4px;
    font-size: clamp(30px, 4vw, 44px);
}

.hero-main-shell .slogan-2 {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.92;
}

/* Arama çubuğu etrafındaki boşluk */
.hero-main-shell .searchbar-wrapper {
    margin-top: 12px;
}

.hero-search-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--cizgi-muted);
    opacity: 0.9;
}

/* =========================================================
   LIGHT: Hero shells (search-page.css turuncu hissi)
   ========================================================= */

/* Light tema için hero-main-shell’i turuncu aura ile yumuşat */
html.theme-light .hero-main-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.18), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, 0.14), transparent 65%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.98));
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(226, 232, 240, 0.9);
}

html.theme-light .hero-kicker {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    color: #6b7280;
}

/* ============================================================
   Başlıklar (Slogan) ve Metinler
   ============================================================ */

.hero-main .slogan-1,
.hero-stack .slogan-1 {
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .03em;
    text-wrap: balance;
    max-width: 28ch;
    font-size: clamp(26px, 6vw, 38px);
    text-shadow: 0 14px 36px rgba(0, 0, 0, 0.9);
}

.hero-main .slogan-1 span,
.hero-stack .slogan-1 span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Başlık altı neon çizgi */

.hero-main .slogan-1::after {
    content: "";
    display: block;
    height: 3px;
    margin: 14px auto 0;
    width: 82px;
    background: linear-gradient(90deg, var(--cizgi-primary), var(--cizgi-secondary), var(--cizgi-primary));
    background-size: 220% 220%;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(0, 73, 144, 0.85);
    animation: movingBar 5s linear infinite;
}

/* Alt başlık */

.hero-main .slogan-2,
.hero-stack .slogan-2 {
    display: block;
    margin: 4px 0 0;
    color: var(--cizgi-text);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .2px;
    font-size: 14px;
    max-width: 40rem;
    text-wrap: pretty;
    white-space: normal;
    word-break: break-word;
    opacity: 0.9;
}

/* H1 görünürlüğü (SEO / erişilebilirlik) */

.hero-stack .slogan-1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================================
   Arama Barı
   ============================================================ */

/* ============================================================
   HERO SEARCH CARD (Primary CTA Surface)
   ============================================================ */
.hero-search-card {
    width: 100%;
    max-width: 920px;
    margin: 22px auto 0;
    padding: 18px 18px 16px;
    border-radius: 28px;
    position: relative;
    z-index: 4;
    overflow: hidden;

    /* Dark default */
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .22), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, .18), transparent 58%),
        rgba(2, 6, 23, .62);

    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 40px 140px rgba(0, 0, 0, .85),
        0 0 0 1px rgba(148, 163, 184, .18);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hero-search-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 54px 170px rgba(0, 0, 0, .92),
        0 0 0 1px rgba(148, 163, 184, .24);
}

/* Light theme adaptation */
html.theme-light .hero-search-card {
    background:
        radial-gradient(circle at 20% 0%, rgba(249, 115, 22, .25), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, .18), transparent 58%),
        rgba(255, 255, 255, .92);

    border: 1px solid rgba(15, 23, 42, .18);

    box-shadow:
        0 30px 90px rgba(15, 23, 42, .18),
        0 0 0 1px rgba(226, 232, 240, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-search-card {
        transition: none !important;
        transform: none !important;
    }
}


.searchbar-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.searchbar {
    width: min(720px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid rgba(249, 115, 22, .75);
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, .25),
        0 22px 60px rgba(0, 0, 0, .90);
    position: relative;
    overflow: hidden;
    transition:
        box-shadow .16s ease-out,
        border-color .16s ease-out,
        transform .16s ease-out;
}

/* Glow overlay */

.searchbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 73, 144, 0.6),
            rgba(179, 32, 23, 0.6),
            rgba(0, 73, 144, 0.6));
    background-size: 200% 200%;
    opacity: .28;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity .18s ease-out;
}

/* Focus içindeyken */

.searchbar:focus-within {
    box-shadow: 0 28px 92px rgba(0, 0, 0, 1);
    border-color: rgba(249, 115, 22, 0.95);
    transform: translateY(-1px);
}

.searchbar:focus-within::before {
    opacity: 0.35;
    animation: movingBar 6s linear infinite;
}

.search_input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #f9fafb;
    padding: 12px 18px 12px 18px;
    font-size: 15px;
}

.search_input::placeholder {
    color: rgba(249, 250, 251, 0.65);
}

.search_icon {
    min-width: 58px;
    height: 44px;
    border-radius: 999px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cizgi-primary), var(--cizgi-secondary)) !important;
    color: #fff !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 1);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition:
        transform .12s ease-out,
        box-shadow .12s ease-out,
        filter .12s ease-out;
}

.search_icon i {
    font-size: 14px;
}

.search_icon:hover,
.search_icon:focus-visible {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 1);
    filter: brightness(1.08);
}

/* =========================================================
   LIGHT: Searchbar (search-page.css turuncu glow)
   ========================================================= */
html.theme-light .searchbar {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.6);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

/* Light’ta glow overlay turuncu olsun */
html.theme-light .searchbar::before {
    background: linear-gradient(90deg,
            rgba(249, 115, 22, 0.55),
            rgba(234, 88, 12, 0.50),
            rgba(249, 115, 22, 0.55));
    background-size: 200% 200%;
}

/* Light’ta odak state daha belirgin */
html.theme-light .searchbar:focus-within {
    border-color: rgba(249, 115, 22, 0.75);
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.22),
        0 18px 44px rgba(15, 23, 42, 0.16);
}


html.theme-light .search_input {
    color: #0f172a;
}

html.theme-light .search_input::placeholder {
    color: rgba(71, 85, 105, 0.75);
}

/* ============================================================
   Öne Çıkan Premium Domainler
   ============================================================ */

.hero-side {
    width: 100%;
}

.home-featured {
    width: 100%;
    margin-top: 26px;
    position: relative;
    z-index: 3;
    padding: 18px 16px 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(0, 73, 144, 0.55), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(179, 32, 23, 0.55), transparent 55%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.50);
    overflow: hidden;
}

.home-featured::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.home-featured .hf-sub {
    color: var(--cizgi-muted);
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin: 0 0 12px;
    opacity: 0.9;
}

/* Grid yapısı */

.home-featured .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 6px;
}

/* Domain pill kartı */

.home-featured .pill {
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: saturate(130%) blur(4px);
    -webkit-backdrop-filter: saturate(130%) blur(4px);
    color: #fff;
    border: 1px solid rgba(148, 163, 184, 0.80);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition:
        transform .16s ease-out,
        box-shadow .16s ease-out,
        border-color .16s ease-out,
        background .16s ease-out;
}

/* Neon overlay */

.home-featured .pill::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 180deg, rgba(0, 73, 144, 0.0), rgba(0, 73, 144, 0.7), rgba(179, 32, 23, 0.0));
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    pointer-events: none;
    transition: opacity .16s ease-out;
}

/* Hover efekti */

.home-featured .pill:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.95),
        0 0 26px rgba(0, 73, 144, 0.30);
    border-color: rgba(249, 115, 22, 0.95);
    background:
        radial-gradient(circle at 0 0, rgba(0, 73, 144, 0.5), transparent 60%),
        rgba(15, 23, 42, 0.98);
}

.home-featured .pill:hover::before {
    opacity: 0.7;
    animation: floatY 4s ease-in-out infinite;
}

/* Domain adı */

.home-featured .name {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .2px;
    color: #fff;
    white-space: normal;
    word-break: break-word;
}

.home-featured .name::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 8px;
    background: linear-gradient(90deg, var(--cizgi-primary), var(--cizgi-secondary));
    box-shadow:
        0 0 10px rgba(0, 73, 144, 0.95),
        0 0 18px rgba(179, 32, 23, 0.75);
}

/* CTA buton */

.home-featured .act {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cizgi-primary), var(--cizgi-secondary));
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.home-featured .act i {
    font-style: normal;
}

/* ============================================================
   Back-to-top Butonu
   ============================================================ */

.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
    z-index: 1500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform .14s ease-out,
        box-shadow .14s ease-out,
        background .14s ease-out,
        opacity .14s ease-out,
        visibility .14s ease-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

.back-to-top i {
    font-size: 14px;
}

.back-to-top:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   Tema Toggle Butonu
   ============================================================ */

.theme-toggle {
    position: fixed;
    left: 18px;
    bottom: 20px;
    z-index: 1500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.92);
    color: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        background .16s ease-out,
        transform .16s ease-out,
        box-shadow .16s ease-out,
        border-color .16s ease-out;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.98);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85);
    border-color: rgba(249, 115, 22, 0.95);
}

.theme-toggle-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    position: relative;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.12) 38%, transparent 45%),
        linear-gradient(135deg, #004990 0%, #B32017 100%);
}

/* Light mode’da toggle görseli */

html.theme-light .theme-toggle {
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20);
}

html.theme-light .theme-toggle-icon {
    background: radial-gradient(circle at 30% 30%, #fde68a 0, #fb923c 40%, #f97316 60%, #e5e7eb 61%);
    box-shadow: 0 0 0 1px rgba(234, 88, 12, 0.35);
}

/* ============================================================
   Logo Strip (GoDaddy, Atom, Spaceship, Sedo, Escrow)
   ============================================================ */

.logo-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 22px auto 4px;
}

.logo-link {
    flex: 1 1 0;
    min-width: 0;
}

.logo-link img {
    width: 100%;
    height: auto;
    max-height: 32px;
    object-fit: contain;
    transform: scale(var(--partner-logo-scale));
    transform-origin: center center;
}

/* Light theme’de logoların kontrastını artırmak için */
html.theme-light .logo-container img {
    filter: brightness(0) saturate(100%) invert(64%) sepia(12%) saturate(1134%) hue-rotate(181deg) brightness(101%) contrast(95%);
    opacity: 0.9;
}

/* Büyük ekranlarda scale otomatik biraz daha küçük */
@media (min-width: 1200px) {
    :root {
        --partner-logo-scale: 0.78;
    }
}

@media (min-width: 1600px) {
    :root {
        --partner-logo-scale: 0.72;
    }
}

/* ============================================================
   Footer (KVKK / Çerez linkleri)
   ============================================================ */

.cizgi-legal-footer {
    padding: 10px 0 16px;
    font-size: 13px;
    color: rgba(226, 232, 240, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cizgi-legal-footer a {
    color: #004990;
    font-weight: 500;
    text-decoration: none;
}

.cizgi-legal-footer a:hover {
    color: #B32017;
    text-decoration: underline;
}

/* Light mode footer renk uyumu */

html.theme-light .cizgi-legal-footer {
    color: #6b7280;
    text-shadow: none;
}

html.theme-light .cizgi-legal-footer a {
    color: var(--cizgi-primary);
}

html.theme-light .cizgi-legal-footer a:hover {
    color: #B32017;
}

/* ============================================================
   CIZGI.COM - HOME PAGE STYLESHEET
   Bölüm 3: Animations, Light Theme Overrides, Responsive
   ============================================================ */

/* =========================
   Animasyonlar
   ========================= */

@keyframes softPulse {
    0% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.35;
    }
}

@keyframes movingBar {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes floatY {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

/* =========================
   Light Theme Bileşen Override'ları
   (search-page.css light shell hissi)
   ========================= */

/* Hero kartı */
html.theme-light .page-shell.hero-layout {
    background:
        radial-gradient(circle at 0 0, rgba(249, 115, 22, 0.14), transparent 60%),
        radial-gradient(circle at 100% 0, rgba(234, 88, 12, 0.10), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.98));
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(226, 232, 240, 0.90);
}

html.theme-light .page-shell.hero-layout::before {
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.9) inset;
}

/* Light’ta köşe çizgileri turuncu uyum */
html.theme-light .page-shell.hero-layout::after {
    background:
        linear-gradient(90deg, rgba(249, 115, 22, 0.55), transparent 70%) 6% 8% / 140px 2px no-repeat,
        linear-gradient(180deg, rgba(249, 115, 22, 0.55), transparent 70%) 6% 8% / 2px 90px no-repeat,
        linear-gradient(270deg, rgba(234, 88, 12, 0.50), transparent 70%) 94% 8% / 140px 2px no-repeat,
        linear-gradient(180deg, rgba(234, 88, 12, 0.50), transparent 70%) 94% 8% / 2px 90px no-repeat,
        linear-gradient(0deg, rgba(15, 23, 42, 0.14), transparent 70%) 6% 92% / 2px 70px no-repeat,
        linear-gradient(90deg, rgba(15, 23, 42, 0.14), transparent 70%) 6% 92% / 110px 2px no-repeat,
        linear-gradient(0deg, rgba(15, 23, 42, 0.14), transparent 70%) 94% 92% / 2px 70px no-repeat,
        linear-gradient(270deg, rgba(15, 23, 42, 0.14), transparent 70%) 94% 92% / 110px 2px no-repeat;
}

/* Başlık & alt başlık */
html.theme-light .hero-main .slogan-1,
html.theme-light .hero-stack .slogan-1 {
    color: #0f172a;
    text-shadow: none;
}

html.theme-light .hero-main .slogan-2,
html.theme-light .hero-stack .slogan-2 {
    color: var(--cizgi-muted);
}

/* Featured domain kartları: light’ta turuncu aura */
html.theme-light .home-featured {
    background:
        radial-gradient(circle at 0 0, rgba(249, 115, 22, 0.14), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, 0.10), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 237, 0.98));
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
}

html.theme-light .home-featured::before {
    border-color: rgba(226, 232, 240, 0.9);
}

html.theme-light .home-featured .hf-sub {
    color: var(--cizgi-muted);
}

html.theme-light .home-featured .pill {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.10), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 247, 237, 0.98));
    border-color: rgba(203, 213, 225, 0.9);
    color: var(--cizgi-text);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}

html.theme-light .home-featured .pill::before {
    background: conic-gradient(from 180deg,
            rgba(249, 115, 22, 0.0),
            rgba(249, 115, 22, 0.45),
            rgba(234, 88, 12, 0.0));
}

html.theme-light .home-featured .pill:hover {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.14), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 237, 213, 0.95));
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

html.theme-light .home-featured .name {
    color: var(--cizgi-text);
}

/* CTA buton gölgesi light’ta daha soft */
html.theme-light .home-featured .act {
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}

/* Back to top - light görünüm */
html.theme-light .back-to-top {
    background: rgba(15, 23, 42, 0.80);
    color: #f9fafb;
}

html.theme-light .back-to-top:hover {
    background: rgba(15, 23, 42, 0.95);
}

/* =========================
   Responsive Kurallar
   ========================= */

/* 390px üstü: biraz daha rahat padding */
@media (min-width: 390px) {
    .section.full-height {
        padding-inline: 18px;
    }
}

/* 420px üstü: arama barı/pill micro iyileştirme */
@media (min-width: 420px) {
    .search_input {
        font-size: 15px;
    }

    .home-featured .pill {
        padding: 12px 16px;
    }
}

/* 576px üstü (small devices) */
@media (min-width: 576px) {
    .section.full-height {
        padding-top: calc(var(--nav-safe-top) + var(--nav-safe-extra));
    }

    .page-shell {
        max-width: 640px;
        padding-inline: 28px;
    }

    .home-featured .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* 768px–1023.98px (tablet yatay, iPad) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .section.full-height {
        min-height: auto !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: calc(var(--nav-safe-top) + var(--nav-safe-extra)) !important;
        padding-bottom: 40px;
    }

    .page-shell {
        max-width: 960px;
        padding: 38px 32px 30px;
    }

    .hero-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    .hero-main {
        align-items: center;
    }

    .hero-main .slogan-1 {
        font-size: clamp(30px, 3.6vw, 40px);
    }

    .home-featured .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        gap: 18px;
    }

    .home-featured .pill {
        padding: 12px 14px;
    }

    .home-featured .name {
        font-size: 14px;
    }

    .hero-main .domain-steps-box.domain-steps-home,
    .hero-main .logo-container,
    .hero-main .home-featured {
        max-width: 720px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-main .logo-container {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

/* 1024px üstü (klasik masaüstü) */
@media (min-width: 1024px) {
    .page-shell {
        max-width: 1120px;
    }

    .hero-layout {
        flex-direction: column;
    }

    .hero-main {
        align-items: center;
    }

    .hero-main .slogan-1 {
        font-size: clamp(32px, 3.4vw, 42px);
    }

    .home-featured .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        gap: 20px;
    }
}

/* 1280px üstü */
@media (min-width: 1280px) {
    .section.full-height {
        padding-top: calc(var(--nav-safe-top) + var(--nav-safe-extra));
    }

    .page-shell {
        max-width: 1200px;
        padding: 42px 40px 32px;
    }

    .hero-layout {
        flex-direction: column;
    }

    .hero-main .slogan-1 {
        font-size: clamp(34px, 3.6vw, 44px);
    }

    .home-featured .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 1440px üstü (büyük monitörler) */
@media (min-width: 1440px) {
    .section.full-height {
        padding-top: calc(var(--nav-safe-top) + var(--nav-safe-extra));
        padding-bottom: 64px;
    }

    .page-shell {
        max-width: 1300px;
    }

    .hero-main .slogan-1 {
        font-size: 46px;
    }

    .hero-main .slogan-2 {
        font-size: 15px;
    }
}

/* Mobil özel ayarlar: max 767.98px */
@media (max-width: 767.98px) {

    canvas#spiders,
    .banner-video {
        display: none !important;
    }

    .section.full-height {
        min-height: auto !important;
        align-items: flex-start !important;
        padding-top: calc(var(--nav-safe-top) + var(--nav-safe-extra)) !important;
        padding-bottom: 32px;
    }

    .page-shell {
        padding-top: 22px;
        padding-bottom: 26px;
    }

    .home-featured .grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .home-featured .pill {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 12px 14px;
        gap: 8px;
    }

    .home-featured .name {
        font-size: 15px;
    }

    .home-featured .act {
        align-self: flex-start;
        font-size: 11px;
        padding: 6px 12px;
    }

    .search_input {
        font-size: 13px;
        padding: 8px 14px;
    }

    .search_icon {
        min-width: 44px;
        height: 34px;
    }
}

/* ============================
   Home – Güvenli İşlem Şeridi
   ============================ */

.home-trust-strip {
    margin: 26px auto 10px;
    padding: 0 16px;
    max-width: 1040px;
    position: relative;
    z-index: 3;
}

.home-trust-shell {
    position: relative;
    border-radius: 22px;
    padding: 18px 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.14), transparent 60%),
        rgba(11, 16, 34, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.9),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
}

.domain-steps-box.domain-steps-home {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.domain-steps-box.domain-steps-home .domain-step-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.22), transparent 60%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.82));
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7);
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.domain-steps-box.domain-steps-home .domain-step-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(148, 163, 184, 0.35);
    opacity: 0.9;
    pointer-events: none;
}

.domain-steps-box.domain-steps-home .domain-step-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.9);
    transition:
        transform 160ms ease-out,
        box-shadow 160ms ease-out,
        background 160ms ease-out;
}

.domain-steps-box.domain-steps-home .domain-step-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 0%, rgba(248, 250, 252, 0.65), transparent 55%),
        linear-gradient(135deg, #1d4ed8, #f97316);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.9);
}

.domain-steps-box.domain-steps-home .domain-step-icon i {
    font-size: 16px;
    color: #0b1220;
}

.domain-steps-box.domain-steps-home .domain-step-text {
    display: block;
    font-weight: 500;
    color: #e5e7eb;
}

.domain-steps-box.domain-steps-home .domain-step-label {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Responsive kırılımlar */
@media (max-width: 991.98px) {
    .home-trust-strip {
        margin-top: 22px;
    }

    .home-trust-shell {
        padding: 16px 16px;
    }

    .domain-steps-box.domain-steps-home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .home-trust-strip {
        padding: 0 10px;
    }

    .home-trust-shell {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .domain-steps-box.domain-steps-home {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .domain-steps-box.domain-steps-home .domain-step-item {
        padding: 10px 10px;
        font-size: 12px;
    }

    .domain-steps-box.domain-steps-home .domain-step-icon {
        width: 30px;
        height: 30px;
    }
}

/* LIGHT: turuncu uyum (search-page.css ile aynı yaklaşım) */
html.theme-light .home-trust-shell {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, 0.14), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 237, 0.98));
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-item {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.14), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 237, 1));
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
    color: #0f172a;
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-item::before {
    border-color: rgba(15, 23, 42, 0.10);
    opacity: 1;
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-text {
    color: #0f172a;
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-icon {
    background:
        radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.90), transparent 55%),
        linear-gradient(135deg, var(--cizgi-primary), var(--cizgi-secondary));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-icon i {
    color: #0b1220;
}

html.theme-light .domain-steps-box.domain-steps-home .domain-step-item:hover {
    background:
        radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.18), transparent 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(255, 237, 213, 0.95));
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.12);
}

/* =========================================================
   FINAL LOCK — Icon circles centering
   (Bu blok EN ALTA bırakılmalı)
   ========================================================= */

/* Icon daireleri (home-trust-strip) tam ortalama — kilit */
.domain-steps-box.domain-steps-home .domain-step-icon {
    display: grid !important;
    place-items: center !important;
}

.domain-steps-box.domain-steps-home .domain-step-icon i,
.domain-steps-box.domain-steps-home .domain-step-icon i::before {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FontAwesome baseline optical fix */
.domain-steps-box.domain-steps-home .domain-step-icon i {
    transform: translateY(0.5px) !important;
}

/* =========================================================
   EXTRA SMALL FIX (<=360px) — Trust strip layout stabilize
   ========================================================= */
@media (max-width: 360px) {

    /* 2 kolon çok dar kalıyor; tek kolona düşür */
    .domain-steps-box.domain-steps-home {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Kart içini sıkılaştır */
    .domain-steps-box.domain-steps-home .domain-step-item {
        padding: 10px 12px !important;
        gap: 10px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        align-items: center !important;
        /* ikon+metin aynı hizada */
    }

    /* İkonu bir tık küçült */
    .domain-steps-box.domain-steps-home .domain-step-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .domain-steps-box.domain-steps-home .domain-step-icon i {
        font-size: 14px !important;
    }

    /* İkincil label çok uzuyorsa sıkıştır */
    .domain-steps-box.domain-steps-home .domain-step-label {
        font-size: 10px !important;
        margin-top: 1px !important;
        opacity: 0.65 !important;
    }
}

/* ============================================================
   PREMIUM DOMAIN MARQUEE – DARK & LIGHT MODE UYUMLU
   ============================================================ */

.premium-marquee {
    margin-top: 18px;
    width: 100%;
}

/* Başlık */
.premium-marquee .pm-title {
    margin: 0 0 10px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .75;
}

/* -----------------------------
   VIEWPORT (Ortak yapı)
------------------------------ */
.premium-marquee .pm-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 14px 12px;
    isolation: isolate;
}

/* -----------------------------
   DARK MODE
------------------------------ */
:root .premium-marquee .pm-viewport {
    background: rgba(2, 6, 23, .38);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* -----------------------------
   LIGHT MODE
------------------------------ */
.theme-light .premium-marquee .pm-viewport {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 0, 0, .08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* -----------------------------
   FADE KENARLAR
------------------------------ */
.premium-marquee .pm-viewport::before,
.premium-marquee .pm-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 2;
    pointer-events: none;
}

/* Dark */
:root .premium-marquee .pm-viewport::before {
    left: 0;
    background: linear-gradient(to right, rgba(2, 6, 23, .95), rgba(2, 6, 23, 0));
}

:root .premium-marquee .pm-viewport::after {
    right: 0;
    background: linear-gradient(to left, rgba(2, 6, 23, .95), rgba(2, 6, 23, 0));
}

/* Light */
.theme-light .premium-marquee .pm-viewport::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

.theme-light .premium-marquee .pm-viewport::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

/* -----------------------------
   TRACK + SETS (Seamless loop için A + A)
------------------------------ */
.premium-marquee .pm-track {
    display: flex;
    width: max-content;
    animation: pm-scroll var(--pm-duration, 28s) linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.premium-marquee .pm-set {
    display: flex;
    gap: 14px;
    width: max-content;
}

/* Hover & focus durdur */
.premium-marquee .pm-viewport:hover .pm-track,
.premium-marquee .pm-viewport:focus-within .pm-track {
    animation-play-state: paused;
}

/* -----------------------------
   ITEM (PILL)
------------------------------ */
.premium-marquee .pm-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    min-height: 44px;
    white-space: nowrap;
}

/* Dark item */
:root .premium-marquee .pm-item {
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

/* Light item */
.theme-light .premium-marquee .pm-item {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* Nokta */
.premium-marquee .pm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Dark dot */
:root .premium-marquee .pm-dot {
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

/* Light dot */
.theme-light .premium-marquee .pm-dot {
    background: rgba(0, 0, 0, .55);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .06);
}

/* Domain adı */
.premium-marquee .pm-name {
    font-weight: 700;
    letter-spacing: .02em;
}

/* -----------------------------
   DETAY BUTONU
------------------------------ */
.premium-marquee .pm-act {
    margin-left: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: all .2s ease;
}

/* Dark buton */
:root .premium-marquee .pm-act {
    background: linear-gradient(135deg, #2563eb, #f97316);
    color: #fff;
    border: none;
}

/* Light buton */
.theme-light .premium-marquee .pm-act {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    border: none;
}

/* Hover */
.premium-marquee .pm-act:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Focus */
.premium-marquee .pm-act:focus {
    outline: 2px solid rgba(255, 255, 255, .4);
    outline-offset: 2px;
}

/* -----------------------------
   ANİMASYON (Seamless: her zaman -50%)
------------------------------ */
@keyframes pm-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .premium-marquee .pm-track {
        animation: none !important;
        transform: none !important;
    }
}

/* ===============================
   DARK MODE – DOMAIN TEXT FIX
   =============================== */
:root .premium-marquee .pm-name {
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* ===============================
   MOBILE OPTIMIZATION
   =============================== */
@media (max-width: 768px) {

    .premium-marquee {
        margin-top: 14px;
    }

    .premium-marquee .pm-viewport {
        padding: 10px 8px;
        border-radius: 14px;
    }

    /* Fade alanlarını daralt */
    .premium-marquee .pm-viewport::before,
    .premium-marquee .pm-viewport::after {
        width: 32px;
    }

    /* Set gap küçült */
    .premium-marquee .pm-set {
        gap: 10px;
    }

    /* Pill küçült */
    .premium-marquee .pm-item {
        padding: 8px 12px;
        min-height: 38px;
    }

    /* Domain yazısı biraz küçülsün */
    .premium-marquee .pm-name {
        font-size: 13px;
    }

    /* Detaylar butonu mobilde daha kompakt */
    .premium-marquee .pm-act {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Mobilde hız (mesafeyi değil süreyi değiştiriyoruz) */
    .premium-marquee .pm-track {
        --pm-duration: 22s;
    }
}

/* =================================================
   DOMAIN TEXT COLOR – MODE AWARE (FINAL FIX)
   ================================================= */

/* DARK MODE → BEYAZ */
:root:not(.theme-light) .premium-marquee .pm-name {
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

/* LIGHT MODE → SİYAH */
.theme-light .premium-marquee .pm-name {
    color: #0f172a;
    /* koyu lacivert/siyah arası – tasarımla uyumlu */
    opacity: 1;
    text-shadow: none;
}

/* =================================================
   MOBILE HERO WIDTH FIX (CRITICAL)
   ================================================= */
@media (max-width: 768px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .section,
    .page-shell,
    .hero-layout,
    .hero-main,
    .hero-main-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* =================================================
   MARQUEE MOBILE ISOLATION
   ================================================= */
@media (max-width: 768px) {

    .premium-marquee {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }

    .premium-marquee .pm-viewport {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .premium-marquee .pm-track {
        will-change: transform;
        transform: translateZ(0);
    }
}

/* NOT: Eski mobil @keyframes pm-scroll (-60%) override kaldırıldı.
   Seamless loop için her ortamda -50% kullanılır. */

/* ============================================================
   PATCH V2 — HERO SEARCH (More prominent / more separation)
   Not: Bu blok dosyanın EN ALTINDA olmalıdır.
   ============================================================ */

/* 1) Kartı zeminden daha net ayır (opaklık + daha güçlü gölge) */
.hero-search-card {
    background:
        radial-gradient(circle at 30% 0%, rgba(56, 189, 248, .22), transparent 58%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, .18), transparent 62%),
        rgba(2, 6, 23, .68);
    border-color: rgba(255, 255, 255, .18);
    box-shadow:
        0 46px 160px rgba(0, 0, 0, .88),
        0 0 0 1px rgba(148, 163, 184, .18);
}

/* Kartın arkasına “spotlight” — hero karmaşasını kırar */
.hero-search-card::after {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(closest-side at 50% 40%, rgba(249, 115, 22, .18), transparent 62%),
        radial-gradient(closest-side at 25% 30%, rgba(56, 189, 248, .18), transparent 58%);
    filter: blur(22px);
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}

.hero-search-card>* {
    position: relative;
    z-index: 1;
}

/* 2) Searchbar’ı kart içinde “PRIMARY CTA” yap (kontrast + stroke + inset highlight) */
.searchbar {
    background: rgba(6, 11, 26, .96);
    border-color: rgba(249, 115, 22, .85);
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, .22),
        0 26px 86px rgba(0, 0, 0, .92);
}

/* Boştayken de hissedilir glow (ama taşmadan) */
.searchbar::before {
    opacity: .30;
}

/* İç highlight çizgisi (premium input hissi) */
.searchbar::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
    z-index: 1;
}

/* Focus state: çok net ama kontrollü */
.searchbar:focus-within {
    border-color: rgba(249, 115, 22, .98);
    box-shadow:
        0 0 0 2px rgba(249, 115, 22, .30),
        0 34px 120px rgba(0, 0, 0, 1);
}

/* 3) Input + buton ölçüleri (tıklanabilirlik + ağırlık) */
.search_input {
    padding: 13px 20px;
    font-size: 15px;
}

.search_icon {
    min-width: 62px;
    height: 46px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 1);
}

/* 4) Light mode: kart ve arama daha net okunur */
html.theme-light .hero-search-card {
    background:
        radial-gradient(circle at 30% 0%, rgba(249, 115, 22, .26), transparent 58%),
        rgba(255, 255, 255, .94);
    border-color: rgba(15, 23, 42, .18);
    box-shadow:
        0 28px 90px rgba(15, 23, 42, .18),
        0 0 0 1px rgba(226, 232, 240, 1);
}

html.theme-light .hero-search-card::after {
    opacity: .70;
    background:
        radial-gradient(closest-side at 50% 40%, rgba(249, 115, 22, .20), transparent 62%),
        radial-gradient(closest-side at 25% 30%, rgba(234, 88, 12, .16), transparent 58%);
}

html.theme-light .searchbar {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(249, 115, 22, .70);
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, .16),
        0 16px 46px rgba(15, 23, 42, .14);
}

html.theme-light .searchbar::after {
    border-color: rgba(15, 23, 42, .10);
}

/* ============================================================
   PATCH V3 — HERO MAIN SHELL (Headline+Search unified card)
   Amaç: Kartın arka plandan daha sert ayrışması + daha premium “surface”
   Not: Bu blok dosyanın EN ALTINDA olmalıdır.
   ============================================================ */

/* Kart (H1 + açıklama + arama) — daha opak, daha net border, daha derin shadow */
.hero-main-shell {
    background:
        radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .28), transparent 62%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, .22), transparent 66%),
        rgba(2, 6, 23, .72);
    border-color: rgba(148, 163, 184, .70);
    box-shadow:
        0 44px 160px rgba(0, 0, 0, .92),
        0 0 0 1px rgba(148, 163, 184, .14),
        0 0 0 1px rgba(2, 6, 23, .65) inset;
    position: relative;
    overflow: hidden;
}

/* Kart spotlight (hero karmaşasını kırar, odağı artırır) */
.hero-main-shell::after {
    content: "";
    position: absolute;
    inset: -38%;
    background:
        radial-gradient(closest-side at 45% 35%, rgba(249, 115, 22, .20), transparent 62%),
        radial-gradient(closest-side at 22% 28%, rgba(56, 189, 248, .18), transparent 60%);
    filter: blur(24px);
    opacity: .90;
    pointer-events: none;
    z-index: 0;
}

.hero-main-shell>* {
    position: relative;
    z-index: 1;
}

/* H1 altındaki neon çizgi: biraz daha “clean” (shadow yoğunluğunu düşür) */
.hero-main .slogan-1::after {
    box-shadow: 0 8px 18px rgba(0, 73, 144, 0.65);
}

/* Arama barı kartla daha dengeli olsun: kenar çizgisi biraz daha zarif */
.searchbar {
    border-color: rgba(249, 115, 22, .78);
}

.searchbar::before {
    opacity: .28;
}

/* V2: .30 -> daha kontrollü */

/* Light mode: hero-main-shell surface daha net */
html.theme-light .hero-main-shell {
    background:
        radial-gradient(circle at 18% 0%, rgba(249, 115, 22, .22), transparent 62%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, .16), transparent 66%),
        rgba(255, 255, 255, .96);
    border-color: rgba(15, 23, 42, .16);
    box-shadow:
        0 26px 90px rgba(15, 23, 42, .18),
        0 0 0 1px rgba(226, 232, 240, 1);
}

html.theme-light .hero-main-shell::after {
    opacity: .70;
    background:
        radial-gradient(closest-side at 45% 35%, rgba(249, 115, 22, .20), transparent 62%),
        radial-gradient(closest-side at 22% 28%, rgba(234, 88, 12, .16), transparent 60%);
}

/* Reduced motion: spotlight sabit kalsın */
@media (prefers-reduced-motion: reduce) {
    .hero-main-shell {
        transition: none !important;
    }
}

\n\n
/* ============================================================
   PATCH V4 — Subtitle centering + “more visible” deltas
   Not: Bu blok dosyanın EN ALTINDA olmalıdır.
   ============================================================ */

/* 1) İşaretlediğin alt metni (slogan-2) tam ortala */
.hero-main-shell .slogan-2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 52ch;
    /* satır uzunluğu daha okunur */
    display: block;
}

/* Bazı yapılarda .hero-stack üzerinden de gelebiliyor — güvenli override */
.hero-stack .slogan-2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 52ch;
}

/* 2) V3 etkisini gözle daha net görmek için çok hafif “edge highlight” ekle
      (Kart kenarını belirginleştirir; tasarımı bozmaz) */
.hero-main-shell::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .10);
    pointer-events: none;
    z-index: 0;
}

html.theme-light .hero-main-shell::before {
    border-color: rgba(15, 23, 42, .10);
}

/* Reduced motion uyumu */
@media (prefers-reduced-motion: reduce) {
    .hero-main-shell::after {
        filter: blur(24px);
    }
}

/* ============================================================
   PATCH V5 — Görünür fark + slogan-2 kesin ortalama (FIX)
   Not: Bu blok dosyanın EN ALTINDA olmalıdır.
   ============================================================ */

/* 1) Alt açıklama: kesin ortala (senin işaretlediğin satır) */
.hero-main .slogan-2,
.hero-stack .slogan-2,
.hero-main-shell .slogan-2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 56ch !important;
}

/* 2) “Elle tutulur” fark: hero-main-shell’i büyüt + daha opak yap
      (Bu, ekrandaki ana kartın daha net öne çıkmasını sağlar.) */
.hero-main-shell {
    max-width: 880px !important;
    /* 760 -> 880 (gözle görünür) */
    padding: 26px 26px 24px !important;
    /* biraz daha ferah */
    background:
        radial-gradient(circle at 18% 0%, rgba(56, 189, 248, .30), transparent 62%),
        radial-gradient(circle at 100% 100%, rgba(248, 113, 113, .24), transparent 66%),
        rgba(2, 6, 23, .80) !important;
    /* 0.72 -> 0.80 (daha opak) */
    border: 2px solid rgba(148, 163, 184, .65) !important;
    box-shadow:
        0 54px 190px rgba(0, 0, 0, .94),
        0 0 0 1px rgba(148, 163, 184, .16),
        0 0 0 1px rgba(2, 6, 23, .70) inset !important;
}

/* İç çerçeveyi daha net yap */
.hero-main-shell::before {
    inset: 12px !important;
    border-radius: 22px !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

/* 3) Searchbar: bir tık daha geniş ve “primary” */
.searchbar {
    width: min(760px, 100%) !important;
    /* 720 -> 760 */
}

/* Light mode: aynı görünür fark (opak + daha büyük) */
html.theme-light .hero-main-shell {
    max-width: 880px !important;
    padding: 26px 26px 24px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(249, 115, 22, .24), transparent 62%),
        radial-gradient(circle at 100% 100%, rgba(234, 88, 12, .18), transparent 66%),
        rgba(255, 255, 255, .98) !important;
    border: 2px solid rgba(15, 23, 42, .16) !important;
    box-shadow:
        0 30px 110px rgba(15, 23, 42, .20),
        0 0 0 1px rgba(226, 232, 240, 1) !important;
}

/* ============================================================
   home_V6 — Bordo/Mavi LED çerçeve (Hero kart + Searchbar)
   Amaç: Dikkati artıran ama profesyonelliği bozmayan “premium neon”
   Not: Bu blok dosyanın EN ALTINDA olmalıdır.
   ============================================================ */

/* LED renkleri (tek yerden kontrol) */
:root {
    --led-blue: rgba(56, 189, 248, 0.95);
    /* cyan/blue */
    --led-burg: rgba(179, 32, 23, 0.95);
    /* bordo */
    --led-white: rgba(248, 250, 252, 0.65);
}

/* -----------------------------
   HERO ANA KART (işaretlediğin çerçeve)
------------------------------ */
/* Mevcut border’ı “neon çerçeve”ye hazırlık için incelt */
.hero-main-shell {
    border-color: rgba(148, 163, 184, .35) !important;
}

/* Neon LED çerçeve: dıştan hafif glow + iç highlight */
.hero-main-shell::before {
    /* V5’te vardı; burada neon’a çeviriyoruz */
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 22px !important;
    padding: 1px !important;
    background: linear-gradient(90deg, var(--led-blue), var(--led-burg), var(--led-blue)) !important;
    opacity: .70 !important;
    pointer-events: none !important;
    z-index: 0 !important;

    /* “sadece border” mask */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    filter: drop-shadow(0 0 14px rgba(56, 189, 248, .25)) drop-shadow(0 0 18px rgba(179, 32, 23, .22));
}

/* Neon’ı canlı tutan çok hafif hareket (reduced-motion’da kapanır) */
.hero-main-shell {
    --led-shift: 0%;
}

.hero-main-shell::before {
    background-size: 220% 220% !important;
    animation: ledShift 6.5s ease-in-out infinite;
}

/* Dış glow (kartın dışında) — profesyonel soft halo */
.hero-main-shell::after {
    /* V3+ spotlight vardı; onu koruyup neon halo ekliyoruz */
    filter: blur(26px) !important;
    opacity: .88 !important;
}

/* -----------------------------
   SEARCHBAR — LED çerçeve
------------------------------ */
/* Border’ı daha “neon” yap */
.searchbar {
    border-color: rgba(148, 163, 184, .22) !important;
    /* gerçek border artık daha nötr */
}

/* Searchbar LED çerçeve (mask ile sadece kenar) */
.searchbar::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 999px !important;
    padding: 1px !important;
    background: linear-gradient(90deg, var(--led-burg), var(--led-blue), var(--led-burg)) !important;
    opacity: .78 !important;
    pointer-events: none !important;
    z-index: 1 !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    filter: drop-shadow(0 0 10px rgba(179, 32, 23, .22)) drop-shadow(0 0 12px rgba(56, 189, 248, .20));
    background-size: 220% 220% !important;
    animation: ledShift 5.8s ease-in-out infinite;
}

/* Focus’ta LED daha belirgin + “premium” */
.searchbar:focus-within::after {
    opacity: .95 !important;
    filter: drop-shadow(0 0 14px rgba(179, 32, 23, .28)) drop-shadow(0 0 16px rgba(56, 189, 248, .26));
}

/* Focus ring’i gölgeyle destekle (ama taşırma yok) */
.searchbar:focus-within {
    box-shadow:
        0 0 0 2px rgba(248, 250, 252, .12),
        0 34px 120px rgba(0, 0, 0, 1) !important;
}

/* Buton: gradient zaten var; kenarları daha “cam” hissettirelim */
.search_icon {
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 1),
        0 0 0 1px rgba(248, 250, 252, .10) inset !important;
}

/* -----------------------------
   LIGHT MODE — neon daha “zarif”
------------------------------ */
html.theme-light .hero-main-shell::before {
    opacity: .55 !important;
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, .16)) drop-shadow(0 0 14px rgba(179, 32, 23, .14));
}

html.theme-light .searchbar::after {
    opacity: .62 !important;
    filter: drop-shadow(0 0 10px rgba(179, 32, 23, .14)) drop-shadow(0 0 10px rgba(56, 189, 248, .12));
}

html.theme-light .searchbar:focus-within::after {
    opacity: .80 !important;
}

/* -----------------------------
   Animasyon
------------------------------ */
@keyframes ledShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Reduced motion: animasyonları kapat */
@media (prefers-reduced-motion: reduce) {

    .hero-main-shell::before,
    .searchbar::after {
        animation: none !important;
    }
}