/* =========================================================
   TRUSTLINE TRADING - HOME PAGE
   File: /ClientFiles/Default.css
   Design moved from Default.aspx so the page stays clean.
   ========================================================= */

/* =========================================================
           TRUSTLINE TRADING - DEFAULT.ASPX
           updated full page
           - restored hero title + long description from slideshow
           - theme color fully bridged from Public.Master
           - dark/light mode preserved
           - section IDs added for master-page menu scrolling
           ========================================================= */

        * { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
        img { max-width: 100%; display: block; }
        a { text-decoration: none; color: inherit; }
        button, input, textarea { font-family: inherit; }

        :root {
            --tt-theme: var(--theme-color, #f97316);
            --tt-theme-rgb: var(--theme-rgb, 249, 115, 22);

            --tt-accent: #6ec8ff;
            --tt-accent-rgb: 110, 200, 255;

            --tt-radius-sm: 16px;
            --tt-radius: 24px;
            --tt-radius-lg: 34px;

            --tt-container: 1480px;
            --tt-pad: 28px;

            --tt-shadow-soft: 0 12px 38px rgba(0,0,0,.10);
            --tt-shadow-md: 0 18px 50px rgba(0,0,0,.14);
            --tt-shadow-lg: 0 24px 80px rgba(0,0,0,.20);

            --tt-fast: .22s ease;
            --tt-slow: .48s cubic-bezier(.2,.8,.2,1);
        }

        @media (max-width: 900px) {
            :root { --tt-pad: 16px; }
        }

        /* =========================
           MODE COLORS
           ========================= */
        body,
        body[data-mode="light"],
        body.light-mode,
        body.theme-light,
        body.light {
            --tt-bg: #f6f8fc;
            --tt-bg2: #edf3fb;
            --tt-surface: rgba(255,255,255,.55);
            --tt-surface-strong: rgba(255,255,255,.76);
            --tt-card: rgba(255,255,255,.70);
            --tt-stroke: rgba(15,23,42,.10);
            --tt-stroke-strong: rgba(15,23,42,.16);
            --tt-text: #112033;
            --tt-text-soft: rgba(17,32,51,.78);
            --tt-text-muted: rgba(17,32,51,.58);
            --tt-hero-overlay: linear-gradient(90deg, rgba(246,248,252,.58) 0%, rgba(246,248,252,.22) 42%, rgba(246,248,252,.05) 100%);
            color: var(--tt-text);
        }

        body[data-mode="dark"],
        body.dark-mode,
        body.theme-dark,
        body.dark {
            --tt-bg: #09111d;
            --tt-bg2: #0d1521;
            --tt-surface: rgba(13,21,33,.50);
            --tt-surface-strong: rgba(13,21,33,.72);
            --tt-card: rgba(255,255,255,.08);
            --tt-stroke: rgba(255,255,255,.11);
            --tt-stroke-strong: rgba(255,255,255,.18);
            --tt-text: #f7fbff;
            --tt-text-soft: rgba(247,251,255,.78);
            --tt-text-muted: rgba(247,251,255,.58);
            --tt-hero-overlay: linear-gradient(90deg, rgba(8,13,22,.58) 0%, rgba(8,13,22,.28) 45%, rgba(8,13,22,.08) 100%);
            color: var(--tt-text);
        }

        /* =========================
           PAGE SHELL
           ========================= */
.tt-hero {
    position: relative;
    min-height: auto;
    overflow: hidden;
    padding: 18px 0 70px;
}

        .tt-home::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(900px 520px at 8% 0%, rgba(var(--tt-theme-rgb), .14), transparent 58%),
                radial-gradient(900px 520px at 92% 0%, rgba(var(--tt-accent-rgb), .10), transparent 58%);
        }

        body[data-mode="dark"] .tt-home::before,
        body.dark-mode .tt-home::before,
        body.theme-dark .tt-home::before,
        body.dark .tt-home::before {
            background:
                radial-gradient(900px 520px at 8% 0%, rgba(var(--tt-theme-rgb), .18), transparent 58%),
                radial-gradient(900px 520px at 92% 0%, rgba(var(--tt-accent-rgb), .12), transparent 58%);
        }

        .tt-home::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
            opacity: .9;
        }

        .tt-container {
            width: 100%;
            max-width: var(--tt-container);
            margin: 0 auto;
            padding-left: var(--tt-pad);
            padding-right: var(--tt-pad);
            position: relative;
            z-index: 2;
        }

        .tt-section {
            position: relative;
            padding: 74px 0;
        }

        .tt-section::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .95;
            z-index: 0;
        }

        .tt-section.soft::before {
            background:
                radial-gradient(800px 300px at 12% 0%, rgba(var(--tt-theme-rgb), .08), transparent 64%),
                radial-gradient(800px 300px at 88% 0%, rgba(var(--tt-accent-rgb), .08), transparent 64%);
        }

        .tt-section.deep::before {
            background:
                radial-gradient(860px 320px at 10% 0%, rgba(var(--tt-theme-rgb), .11), transparent 64%),
                radial-gradient(860px 320px at 90% 0%, rgba(var(--tt-accent-rgb), .10), transparent 64%);
        }

        .tt-section-head {
            margin: 0 0 28px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .tt-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--tt-text-muted);
            margin-bottom: 14px;
        }

        .tt-eyebrow::before,
        .tt-eyebrow::after {
            content: "";
            width: 34px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(var(--tt-theme-rgb), .55), transparent);
        }

        .tt-title {
            margin: 0 0 14px;
            font-size: clamp(34px, 4vw, 64px);
            line-height: 1.02;
            letter-spacing: -.04em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-subtitle {
            max-width: 900px;
            margin: 0 auto;
            color: var(--tt-text-soft);
            font-size: 17px;
            line-height: 1.85;
            font-weight: 600;
        }

        /* =========================
           HERO
           ========================= */
.tt-hero {
    position: relative;
    min-height: auto;
    overflow: hidden;
    padding: calc(var(--tl-stack-h) + 18px) 0 70px;
}


        .tt-hero-bg {
            position: absolute;
            inset: 0;
            z-index: 1;
        }

        .tt-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
            transform: scale(1.06);
            animation: ttHeroFade 24s infinite ease-in-out;
        }

        .tt-slide::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.08)),
                var(--tt-hero-overlay);
        }

        @keyframes ttHeroFade {
            0%   { opacity: 0; transform: scale(1.06); }
            8%   { opacity: 1; transform: scale(1); }
            31%  { opacity: 1; transform: scale(1.02); }
            41%  { opacity: 0; transform: scale(1.06); }
            100% { opacity: 0; transform: scale(1.06); }
        }

        #heroParticles {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            opacity: .45;
        }

        .tt-hero-glow {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background:
                radial-gradient(820px 320px at 10% 18%, rgba(var(--tt-theme-rgb), .12), transparent 65%),
                radial-gradient(760px 280px at 88% 12%, rgba(var(--tt-accent-rgb), .12), transparent 65%);
        }

.tt-hero-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: 42px;
    align-items: start;
    min-height: auto;
}

@media (max-width: 1100px) {
    .tt-home {
        padding-top: calc(var(--tl-stack-h) + 4px);
    }

    .tt-hero {
        padding: 14px 0 50px;
    }

    .tt-hero-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        min-height: auto;
        align-items: start;
    }
}

        .tt-hero-copy { max-width: 860px; }

        .tt-hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 11px 16px;
            border-radius: 999px;
            background: rgba(255,255,255,.40);
            border: 1px solid rgba(255,255,255,.45);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--tt-text);
            box-shadow: var(--tt-shadow-soft);
            margin-bottom: 18px;
        }

        body[data-mode="dark"] .tt-hero-kicker,
        body.dark-mode .tt-hero-kicker,
        body.theme-dark .tt-hero-kicker,
        body.dark .tt-hero-kicker {
            background: rgba(13,21,33,.52);
            border-color: rgba(255,255,255,.12);
        }

        .tt-hero-title {
            margin: 0 0 16px;
            font-size: clamp(44px, 5.8vw, 92px);
            line-height: .94;
            letter-spacing: -.055em;
            font-weight: 1000;
            color: var(--tt-text);
            text-shadow: 0 8px 28px rgba(255,255,255,.08);
        }

        .tt-hero-desc {
            max-width: 760px;
            margin: 0 0 24px;
            font-size: 17px;
            line-height: 1.85;
            font-weight: 600;
            color: var(--tt-text-soft);
        }

        .tt-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 26px;
        }

        .tt-btn-primary,
        .tt-btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 52px;
            padding: 0 20px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 900;
            border: 1px solid transparent;
            transition: transform var(--tt-fast), box-shadow var(--tt-fast), background var(--tt-fast), border-color var(--tt-fast);
            cursor: pointer;
        }

        .tt-btn-primary {
            color: #fff;
            background: linear-gradient(135deg, rgba(var(--tt-theme-rgb), .96), rgba(var(--tt-accent-rgb), .82));
            box-shadow: 0 14px 34px rgba(var(--tt-theme-rgb), .25);
        }

        .tt-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 22px 42px rgba(var(--tt-theme-rgb), .32);
        }

        .tt-btn-secondary {
            color: var(--tt-text);
            background: rgba(255,255,255,.44);
            border-color: rgba(255,255,255,.48);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        body[data-mode="dark"] .tt-btn-secondary,
        body.dark-mode .tt-btn-secondary,
        body.theme-dark .tt-btn-secondary,
        body.dark .tt-btn-secondary {
            background: rgba(13,21,33,.54);
            border-color: rgba(255,255,255,.10);
        }

        .tt-btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: var(--tt-shadow-soft);
        }

        .tt-hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .tt-hero-tag {
            display: inline-flex;
            align-items: center;
            min-height: 40px;
            padding: 0 14px;
            border-radius: 999px;
            background: rgba(255,255,255,.34);
            border: 1px solid rgba(255,255,255,.42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            color: var(--tt-text);
            font-size: 13px;
            font-weight: 850;
        }

        body[data-mode="dark"] .tt-hero-tag,
        body.dark-mode .tt-hero-tag,
        body.theme-dark .tt-hero-tag,
        body.dark .tt-hero-tag {
            background: rgba(13,21,33,.48);
            border-color: rgba(255,255,255,.10);
        }

        .tt-hero-side {
            position: relative;
            display: flex;
            justify-content: flex-end;
        }

        .tt-hero-panel {
            width: min(510px, 100%);
            padding: 26px;
            border-radius: 34px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.26)),
                radial-gradient(340px 180px at 15% 10%, rgba(var(--tt-theme-rgb), .14), transparent 70%),
                radial-gradient(340px 180px at 85% 10%, rgba(var(--tt-accent-rgb), .14), transparent 70%);
            border: 1px solid rgba(255,255,255,.46);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: var(--tt-shadow-lg);
        }

        body[data-mode="dark"] .tt-hero-panel,
        body.dark-mode .tt-hero-panel,
        body.theme-dark .tt-hero-panel,
        body.dark .tt-hero-panel {
            background:
                linear-gradient(180deg, rgba(13,21,33,.64), rgba(13,21,33,.42)),
                radial-gradient(340px 180px at 15% 10%, rgba(var(--tt-theme-rgb), .18), transparent 70%),
                radial-gradient(340px 180px at 85% 10%, rgba(var(--tt-accent-rgb), .16), transparent 70%);
            border-color: rgba(255,255,255,.10);
        }

        .tt-hero-panel-top {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .tt-mini-pill {
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(255,255,255,.46);
            border: 1px solid rgba(255,255,255,.40);
            font-size: 11px;
            font-weight: 900;
            color: var(--tt-text);
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        body[data-mode="dark"] .tt-mini-pill,
        body.dark-mode .tt-mini-pill,
        body.theme-dark .tt-mini-pill,
        body.dark .tt-mini-pill {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.10);
        }

        .tt-hero-panel h2 {
            margin: 0 0 10px;
            font-size: clamp(28px, 3vw, 44px);
            line-height: 1.05;
            letter-spacing: -.04em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-hero-panel p {
            margin: 0 0 18px;
            color: var(--tt-text-soft);
            font-size: 15px;
            line-height: 1.85;
            font-weight: 600;
        }

        .tt-hero-points { display: grid; gap: 12px; }

        .tt-hero-point {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 14px;
            align-items: start;
        }

        .tt-hero-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(var(--tt-theme-rgb), .18), rgba(var(--tt-accent-rgb), .16));
            border: 1px solid rgba(var(--tt-theme-rgb), .18);
            font-size: 18px;
            box-shadow: var(--tt-shadow-soft);
        }

        .tt-hero-point strong {
            display: block;
            margin-bottom: 4px;
            font-size: 16px;
            font-weight: 900;
            color: var(--tt-text);
        }

        .tt-hero-point span {
            display: block;
            color: var(--tt-text-soft);
            line-height: 1.7;
            font-size: 14px;
            font-weight: 600;
        }

        /* =========================
           FLOW STRIP
           ========================= */
        .tt-promise-strip {
            position: relative;
            margin-top: -18px;
            z-index: 5;
        }

        .tt-promise-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            align-items: stretch;
        }

        @media (max-width: 980px) {
            .tt-promise-row { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 640px) {
            .tt-promise-row { grid-template-columns: 1fr; }
        }

        .tt-promise-item {
            position: relative;
            padding: 20px 18px 20px 78px;
            min-height: 120px;
            border-radius: 22px;
            background: rgba(255,255,255,.30);
            border: 1px solid rgba(255,255,255,.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 10px 24px rgba(0,0,0,.06);
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }

        .tt-promise-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 34px rgba(0,0,0,.10);
            border-color: rgba(var(--tt-theme-rgb), .28);
        }

        body[data-mode="dark"] .tt-promise-item,
        body.dark-mode .tt-promise-item,
        body.theme-dark .tt-promise-item,
        body.dark .tt-promise-item {
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.10);
            box-shadow: 0 10px 24px rgba(0,0,0,.18);
        }

        .tt-promise-icon {
            position: absolute;
            left: 18px;
            top: 18px;
            width: 50px;
            height: 50px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(var(--tt-theme-rgb), .18), rgba(var(--tt-accent-rgb), .16));
            border: 1px solid rgba(var(--tt-theme-rgb), .16);
            box-shadow: var(--tt-shadow-soft);
            font-size: 20px;
        }

        .tt-promise-item h3 {
            margin: 0 0 6px;
            font-size: 18px;
            line-height: 1.1;
            font-weight: 900;
            color: var(--tt-text);
        }

        .tt-promise-item p {
            margin: 0;
            color: var(--tt-text-soft);
            font-size: 14px;
            line-height: 1.75;
            font-weight: 600;
        }

        /* =========================
           CATEGORIES
           ========================= */
        .tt-scroll-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 2;
        }

        .tt-scroll-btn {
            width: 50px;
            height: 50px;
            flex: 0 0 auto;
            border-radius: 16px;
            border: 1px solid var(--tt-stroke);
            background: rgba(255,255,255,.50);
            color: var(--tt-text);
            font-size: 22px;
            font-weight: 900;
            cursor: pointer;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            transition: transform var(--tt-fast), box-shadow var(--tt-fast);
            box-shadow: var(--tt-shadow-soft);
        }

        body[data-mode="dark"] .tt-scroll-btn,
        body.dark-mode .tt-scroll-btn,
        body.theme-dark .tt-scroll-btn,
        body.dark .tt-scroll-btn {
            background: rgba(255,255,255,.06);
        }

        .tt-scroll-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--tt-shadow-md);
        }

        .tt-category-track {
            flex: 1;
            display: flex;
            gap: 18px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 10px 4px 20px;
        }

        .tt-category-track::-webkit-scrollbar { height: 10px; }
        .tt-category-track::-webkit-scrollbar-thumb {
            background: rgba(var(--tt-theme-rgb), .24);
            border-radius: 999px;
        }

        .tt-category-card {
            min-width: 310px;
            max-width: 310px;
            position: relative;
            overflow: hidden;
            border-radius: 28px;
            background: rgba(255,255,255,.18);
            border: 1px solid rgba(255,255,255,.42);
            box-shadow: var(--tt-shadow-md);
            transition: transform var(--tt-fast), box-shadow var(--tt-fast), border-color var(--tt-fast);
        }

        body[data-mode="dark"] .tt-category-card,
        body.dark-mode .tt-category-card,
        body.theme-dark .tt-category-card,
        body.dark .tt-category-card {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.10);
        }

        .tt-category-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--tt-shadow-lg);
            border-color: rgba(var(--tt-theme-rgb), .28);
        }

        .tt-category-media {
            height: 210px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(220px 120px at 16% 16%, rgba(var(--tt-theme-rgb), .14), transparent 70%),
                linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
        }

        .tt-category-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--tt-slow);
        }

        .tt-category-card:hover .tt-category-media img { transform: scale(1.08); }

        .tt-category-media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
        }

        .tt-category-label {
            position: absolute;
            left: 16px;
            top: 16px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(255,255,255,.76);
            border: 1px solid rgba(255,255,255,.58);
            color: #112033;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .tt-category-body { padding: 18px 18px 20px; }

        .tt-category-title {
            margin: 0 0 10px;
            font-size: 24px;
            line-height: 1.08;
            letter-spacing: -.03em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-category-copy {
            margin: 0 0 14px;
            color: var(--tt-text-soft);
            line-height: 1.75;
            font-size: 14px;
            font-weight: 600;
            min-height: 72px;
        }

        .tt-category-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 900;
            color: var(--tt-theme);
        }

        /* =========================
           KAHRAMAN
           ========================= */
        .tt-kahraman {
            position: relative;
            display: grid;
            grid-template-columns: 1.04fr .96fr;
            gap: 30px;
            align-items: center;
            z-index: 2;
        }

        @media (max-width: 980px) {
            .tt-kahraman { grid-template-columns: 1fr; }
        }

        .tt-kahraman-visual {
            position: relative;
            min-height: 470px;
            border-radius: 36px;
            overflow: hidden;
            box-shadow: var(--tt-shadow-lg);
            border: 1px solid rgba(255,255,255,.42);
            background:
                radial-gradient(420px 220px at 18% 15%, rgba(var(--tt-theme-rgb), .20), transparent 65%),
                radial-gradient(420px 220px at 85% 18%, rgba(var(--tt-accent-rgb), .16), transparent 65%),
                rgba(255,255,255,.14);
        }

        body[data-mode="dark"] .tt-kahraman-visual,
        body.dark-mode .tt-kahraman-visual,
        body.theme-dark .tt-kahraman-visual,
        body.dark .tt-kahraman-visual {
            background:
                radial-gradient(420px 220px at 18% 15%, rgba(var(--tt-theme-rgb), .22), transparent 65%),
                radial-gradient(420px 220px at 85% 18%, rgba(var(--tt-accent-rgb), .16), transparent 65%),
                rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.10);
        }

        .tt-kahraman-visual img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            padding: 26px 26px 110px 26px;
            z-index: 1;
        }

        .tt-kahraman-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)),
                radial-gradient(640px 240px at 16% 18%, rgba(var(--tt-theme-rgb), .16), transparent 65%);
        }

        .tt-kahraman-stamp {
            position: absolute;
            left: 22px;
            top: 22px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 0 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(var(--tt-theme-rgb), .92), rgba(var(--tt-accent-rgb), .76));
            color: #fff;
            font-size: 13px;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            box-shadow: 0 18px 40px rgba(var(--tt-theme-rgb), .28);
        }

        .tt-kahraman-overlay {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 22px;
            z-index: 3;
            padding: 20px;
            border-radius: 24px;
            background: rgba(255,255,255,.42);
            border: 1px solid rgba(255,255,255,.42);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        body[data-mode="dark"] .tt-kahraman-overlay,
        body.dark-mode .tt-kahraman-overlay,
        body.theme-dark .tt-kahraman-overlay,
        body.dark .tt-kahraman-overlay {
            background: rgba(13,21,33,.52);
            border-color: rgba(255,255,255,.10);
        }

        .tt-kahraman-overlay strong {
            display: block;
            margin-bottom: 6px;
            font-size: 22px;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-kahraman-overlay span {
            display: block;
            color: var(--tt-text-soft);
            line-height: 1.7;
            font-size: 14px;
            font-weight: 600;
        }

        .tt-kahraman-copy .tt-title { font-size: clamp(34px, 4vw, 58px); }

        .tt-kahraman-copy p {
            margin: 0 0 16px;
            color: var(--tt-text-soft);
            line-height: 1.9;
            font-size: 16px;
            font-weight: 600;
        }

        .tt-kahraman-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 14px;
            margin-top: 20px;
        }

        @media (max-width: 640px) {
            .tt-kahraman-list { grid-template-columns: 1fr; }
        }

        .tt-kahraman-item {
            padding: 14px 14px 14px 16px;
            border-left: 3px solid rgba(var(--tt-theme-rgb), .70);
            background: linear-gradient(90deg, rgba(var(--tt-theme-rgb), .07), transparent 72%);
            border-radius: 0 18px 18px 0;
        }

        .tt-kahraman-item strong {
            display: block;
            margin-bottom: 4px;
            font-size: 16px;
            font-weight: 900;
            color: var(--tt-text);
        }

        .tt-kahraman-item span {
            display: block;
            color: var(--tt-text-soft);
            line-height: 1.7;
            font-size: 14px;
            font-weight: 600;
        }

        /* =========================
           ARRIVALS
           ========================= */
        .tt-arrivals-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 26px;
            align-items: start;
            position: relative;
            z-index: 2;
        }

        @media (max-width: 980px) {
            .tt-arrivals-layout { grid-template-columns: 1fr; }
        }

        .tt-arrivals-copy h3 {
            margin: 0 0 14px;
            font-size: clamp(32px, 3.5vw, 50px);
            line-height: 1.02;
            letter-spacing: -.04em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-arrivals-copy p {
            margin: 0 0 16px;
            color: var(--tt-text-soft);
            line-height: 1.88;
            font-size: 15px;
            font-weight: 600;
        }

        .tt-arrivals-bullets { display: grid; gap: 10px; }

        .tt-arrivals-bullets div {
            color: var(--tt-text-soft);
            font-size: 14px;
            line-height: 1.7;
            font-weight: 700;
        }

        .tt-arrivals-scroller-wrap { position: relative; }

        .tt-arrivals-track {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 8px 4px 18px;
        }

        .tt-arrivals-track::-webkit-scrollbar { height: 10px; }
        .tt-arrivals-track::-webkit-scrollbar-thumb {
            background: rgba(var(--tt-theme-rgb), .24);
            border-radius: 999px;
        }

        .tt-arrival-card {
            min-width: 280px;
            max-width: 280px;
            border-radius: 28px;
            overflow: hidden;
            background: rgba(255,255,255,.26);
            border: 1px solid rgba(255,255,255,.42);
            box-shadow: var(--tt-shadow-md);
            transition: transform var(--tt-fast), box-shadow var(--tt-fast), border-color var(--tt-fast);
        }

        body[data-mode="dark"] .tt-arrival-card,
        body.dark-mode .tt-arrival-card,
        body.theme-dark .tt-arrival-card,
        body.dark .tt-arrival-card {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.10);
        }

        .tt-arrival-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--tt-shadow-lg);
            border-color: rgba(var(--tt-theme-rgb), .28);
        }

        .tt-arrival-media {
            position: relative;
            height: 220px;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(220px 120px at 16% 16%, rgba(var(--tt-theme-rgb), .14), transparent 70%),
                rgba(255,255,255,.20);
        }

        body[data-mode="dark"] .tt-arrival-media,
        body.dark-mode .tt-arrival-media,
        body.theme-dark .tt-arrival-media,
        body.dark .tt-arrival-media {
            background:
                radial-gradient(220px 120px at 16% 16%, rgba(var(--tt-theme-rgb), .16), transparent 70%),
                rgba(255,255,255,.03);
        }

        .tt-arrival-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 16px;
            transition: transform var(--tt-slow);
        }

        .tt-arrival-card:hover .tt-arrival-media img { transform: scale(1.08); }

        .tt-arrival-badge {
            position: absolute;
            left: 14px;
            top: 14px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            min-height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            background: rgba(255,255,255,.84);
            border: 1px solid rgba(255,255,255,.58);
            color: #112033;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .tt-arrival-body { padding: 18px 18px 20px; }

        .tt-arrival-title {
            margin: 0 0 10px;
            min-height: 52px;
            color: var(--tt-text);
            font-size: 17px;
            line-height: 1.4;
            font-weight: 900;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .tt-arrival-meta {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 14px;
        }

        .tt-arrival-price {
            color: var(--tt-text);
            font-size: 18px;
            font-weight: 950;
        }

        .tt-arrival-unit {
            color: var(--tt-text-muted);
            font-size: 12px;
            font-weight: 800;
        }

        .tt-arrival-btn {
            width: 100%;
            min-height: 46px;
            border: 0;
            border-radius: 999px;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
            background: linear-gradient(135deg, rgba(var(--tt-theme-rgb), .94), rgba(var(--tt-accent-rgb), .80));
            cursor: pointer;
            box-shadow: 0 12px 28px rgba(var(--tt-theme-rgb), .22);
        }

        .tt-carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 52px;
            height: 52px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,.42);
            background: rgba(255,255,255,.70);
            color: var(--tt-text);
            font-size: 22px;
            font-weight: 900;
            cursor: pointer;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: var(--tt-shadow-soft);
        }

        body[data-mode="dark"] .tt-carousel-btn,
        body.dark-mode .tt-carousel-btn,
        body.theme-dark .tt-carousel-btn,
        body.dark .tt-carousel-btn {
            background: rgba(13,21,33,.70);
            border-color: rgba(255,255,255,.10);
        }

        .tt-carousel-btn.left { left: -8px; }
        .tt-carousel-btn.right { right: -8px; }

        /* =========================
           BRANDS
           ========================= */
        .tt-brand-intro {
            max-width: 960px;
            margin: 0 auto 26px;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .tt-brand-strip {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            padding: 8px 4px 18px;
            position: relative;
            z-index: 2;
        }

        .tt-brand-strip::-webkit-scrollbar { height: 10px; }
        .tt-brand-strip::-webkit-scrollbar-thumb {
            background: rgba(var(--tt-theme-rgb), .24);
            border-radius: 999px;
        }

        .tt-brand-card {
            min-width: 230px;
            max-width: 230px;
            border-radius: 24px;
            overflow: hidden;
            background: rgba(255,255,255,.22);
            border: 1px solid rgba(255,255,255,.40);
            box-shadow: var(--tt-shadow-soft);
            transition: transform var(--tt-fast), box-shadow var(--tt-fast), border-color var(--tt-fast);
        }

        body[data-mode="dark"] .tt-brand-card,
        body.dark-mode .tt-brand-card,
        body.theme-dark .tt-brand-card,
        body.dark .tt-brand-card {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.10);
        }

        .tt-brand-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--tt-shadow-md);
            border-color: rgba(var(--tt-theme-rgb), .28);
        }

        .tt-brand-card.kahraman {
            min-width: 280px;
            max-width: 280px;
            background:
                linear-gradient(180deg, rgba(var(--tt-theme-rgb), .16), rgba(255,255,255,.24)),
                rgba(255,255,255,.22);
            border-color: rgba(var(--tt-theme-rgb), .34);
        }

        body[data-mode="dark"] .tt-brand-card.kahraman,
        body.dark-mode .tt-brand-card.kahraman,
        body.theme-dark .tt-brand-card.kahraman,
        body.dark .tt-brand-card.kahraman {
            background:
                linear-gradient(180deg, rgba(var(--tt-theme-rgb), .18), rgba(255,255,255,.05)),
                rgba(255,255,255,.05);
            border-color: rgba(var(--tt-theme-rgb), .34);
        }

        .tt-brand-media {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(220px 110px at 20% 15%, rgba(var(--tt-theme-rgb), .14), transparent 70%),
                rgba(255,255,255,.16);
            padding: 14px;
        }

        body[data-mode="dark"] .tt-brand-media,
        body.dark-mode .tt-brand-media,
        body.theme-dark .tt-brand-media,
        body.dark .tt-brand-media {
            background:
                radial-gradient(220px 110px at 20% 15%, rgba(var(--tt-theme-rgb), .16), transparent 70%),
                rgba(255,255,255,.03);
        }

        .tt-brand-media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .tt-brand-body { padding: 16px; }

        .tt-brand-name {
            margin: 0 0 8px;
            color: var(--tt-text);
            font-size: 18px;
            line-height: 1.2;
            font-weight: 950;
        }

        .tt-brand-copy {
            margin: 0;
            color: var(--tt-text-soft);
            font-size: 13px;
            line-height: 1.7;
            font-weight: 600;
        }

        /* =========================
           STORY
           ========================= */
        .tt-story {
            display: grid;
            grid-template-columns: .96fr 1.04fr;
            gap: 34px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        @media (max-width: 980px) {
            .tt-story { grid-template-columns: 1fr; }
        }

        .tt-story-copy h3 {
            margin: 0 0 14px;
            font-size: clamp(34px, 4vw, 56px);
            line-height: 1.02;
            letter-spacing: -.04em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-story-copy p {
            margin: 0 0 16px;
            color: var(--tt-text-soft);
            font-size: 16px;
            line-height: 1.9;
            font-weight: 600;
        }

        .tt-story-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 16px;
            margin-top: 18px;
        }

        @media (max-width: 640px) {
            .tt-story-grid { grid-template-columns: 1fr; }
        }

        .tt-story-item {
            padding: 16px;
            border-radius: 22px;
            background: rgba(255,255,255,.26);
            border: 1px solid rgba(255,255,255,.40);
            box-shadow: var(--tt-shadow-soft);
        }

        body[data-mode="dark"] .tt-story-item,
        body.dark-mode .tt-story-item,
        body.theme-dark .tt-story-item,
        body.dark .tt-story-item {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.10);
        }

        .tt-story-item strong {
            display: block;
            margin-bottom: 6px;
            color: var(--tt-text);
            font-size: 16px;
            font-weight: 900;
        }

        .tt-story-item span {
            display: block;
            color: var(--tt-text-soft);
            font-size: 14px;
            line-height: 1.7;
            font-weight: 600;
        }

        .tt-story-visual {
            min-height: 460px;
            position: relative;
            overflow: hidden;
            border-radius: 36px;
            border: 1px solid rgba(255,255,255,.42);
            box-shadow: var(--tt-shadow-lg);
            background:
                radial-gradient(420px 220px at 18% 15%, rgba(var(--tt-theme-rgb), .18), transparent 65%),
                radial-gradient(420px 220px at 85% 18%, rgba(var(--tt-accent-rgb), .14), transparent 65%),
                rgba(255,255,255,.14);
        }

        body[data-mode="dark"] .tt-story-visual,
        body.dark-mode .tt-story-visual,
        body.theme-dark .tt-story-visual,
        body.dark .tt-story-visual {
            background:
                radial-gradient(420px 220px at 18% 15%, rgba(var(--tt-theme-rgb), .20), transparent 65%),
                radial-gradient(420px 220px at 85% 18%, rgba(var(--tt-accent-rgb), .14), transparent 65%),
                rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.10);
        }

        .tt-story-visual img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .tt-story-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.26));
        }

        /* =========================
           CTA
           ========================= */
        .tt-cta {
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .tt-cta-title {
            margin: 0 0 14px;
            font-size: clamp(34px, 4vw, 62px);
            line-height: 1.02;
            letter-spacing: -.04em;
            font-weight: 950;
            color: var(--tt-text);
        }

        .tt-cta-copy {
            max-width: 860px;
            margin: 0 auto 24px;
            color: var(--tt-text-soft);
            font-size: 17px;
            line-height: 1.85;
            font-weight: 600;
        }

        .tt-cta-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* =========================
           REVEAL
           ========================= */
        .tt-reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .75s ease, transform .75s ease;
        }

        .tt-reveal.in {
            opacity: 1;
            transform: translateY(0);
        }

        /* =========================
           MOBILE
           ========================= */
@media (max-width: 768px) {
    .tt-home {
        padding-top: calc(var(--tl-stack-h) + 2px);
        padding-bottom: 155px;
    }

    .tt-hero {
        min-height: auto;
        padding: 10px 0 42px;
    }

    .tt-title,
    .tt-cta-title {
        font-size: clamp(30px, 8vw, 46px);
    }

    .tt-hero-title {
        font-size: clamp(42px, 11vw, 64px);
    }

    .tt-hero-panel {
        padding: 22px 18px;
    }

    .tt-carousel-btn.left { left: 0; }
    .tt-carousel-btn.right { right: 0; }
}