/* TAPS Fonts + Large Left Rail Main Menu V15.1 */

/*
    Font kararı:
    - Hero / büyük başlık: Saira Condensed
    - Menü / buton / kategori: Space Grotesk
    - Gövde: Inter
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Saira+Condensed:wght@500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --taps-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    --taps-font-heading: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif !important;
    --taps-hero-font: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif !important;
    --taps-font-menu: "Space Grotesk", "Inter", system-ui, sans-serif !important;

    --rail-w: 112px !important;
    --taps-rail-w: 112px;
    --taps-rail-active: var(--taps-color-primary, #00d6ff);
}

/* Genel font ailesi */
body,
.app-shell,
.service-detail-page,
.lead-form input,
.lead-form textarea {
    font-family: var(--taps-font-body) !important;
}

/* Büyük başlıklar */
.hero h1,
.hero-copy h1,
.detail-copy h1,
.intro-copy h1,
.home-card strong,
.split-card span,
.section-head h2,
.service-card h3,
.service-detail-hero h1,
.service-detail-section-title h2,
.form-card-head h2,
.service-detail-panel h3,
.related-services h3 {
    font-family: var(--taps-hero-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.012em !important;
    text-rendering: geometricPrecision !important;
}

/* Hero başlık daha teknik ama okunaklı */
.hero-copy h1,
.detail-copy h1,
.intro-copy h1 {
    line-height: .98 !important;
    letter-spacing: -0.01em !important;
}

/* Service detail başlıkları sıkışmasın */
.service-detail-panel h3,
.service-detail-hero h1 {
    line-height: 1.06 !important;
    letter-spacing: -0.008em !important;
    word-spacing: .035em !important;
}

/* Menü / buton fontu */
.top-nav a,
.top-nav button,
.top-detail-nav a,
.top-category-btn,
.top-actions a,
.top-actions button,
.theme-toggle,
.search-btn,
.btn,
.taps-btn,
.service-link,
.detail-cta-primary,
.detail-cta-secondary,
.hero-buttons a,
.hero-buttons button,
.lead-form .submit,
.drawer-menu a,
.drawer-menu button,
.quick-actions a,
.rail-tab {
    font-family: var(--taps-font-menu) !important;
    font-weight: 800 !important;
    text-rendering: geometricPrecision !important;
}

/* Top menü biraz daha modern ve okunabilir */
.top-nav a,
.top-nav button,
.top-detail-nav a,
.top-category-btn {
    font-size: clamp(12px, .76vw, 14px) !important;
    letter-spacing: .015em !important;
}

/* Kategori menülerinde aşırı blok görünümü azalt */
.top-category-menu a {
    font-family: var(--taps-font-body) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

/* Buton yazıları aynı karakterde net dursun */
.btn,
.taps-btn,
.service-link,
.detail-cta-primary,
.detail-cta-secondary,
.hero-buttons a,
.hero-buttons button,
.lead-form .submit {
    font-size: 12.5px !important;
    letter-spacing: .045em !important;
    font-weight: 850 !important;
}

/* Sol rail alanı büyütme */
.rail {
    width: var(--taps-rail-w) !important;
    min-width: var(--taps-rail-w) !important;
    border-right: 1px solid rgba(0,214,255,.16) !important;
    background:
        linear-gradient(180deg, rgba(4, 11, 23, .96), rgba(3, 8, 18, .98)),
        radial-gradient(circle at 50% 18%, rgba(0,214,255,.10), transparent 34%) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.025) inset,
        18px 0 50px rgba(0,0,0,.26) !important;
}

/* Hamburger alanı rail ile hizalı */
.hamburger {
    width: var(--taps-rail-w) !important;
    min-width: var(--taps-rail-w) !important;
}

/* Topbar marka alanı rail büyümesine göre rahatlasın */
.topbar {
    padding-left: 0 !important;
}

/* Main içerikler rail genişliğini kullansın */
main,
.service-detail-page {
    padding-left: var(--taps-rail-w) !important;
}

/* Hero alanlarında sol boşluk fazla daralmasın */
.hero {
    padding-left: var(--taps-rail-w) !important;
}

.hero-copy,
.intro-copy,
.detail-copy {
    margin-left: clamp(70px, 8vw, 150px) !important;
}

/* Sol ana bölüm butonları */
.rail-tab {
    position: relative !important;
    min-height: 50vh !important;
    padding: 26px 0 !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)) !important;
    color: rgba(255,255,255,.44) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition:
        color .24s ease,
        background .24s ease,
        box-shadow .24s ease,
        border-color .24s ease !important;
}

/* Sol rail yazı büyütme */
.rail-tab span {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: clamp(17px, 1.16vw, 22px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: currentColor !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

/* Sol rail numara büyütme */
.rail-tab small {
    font-size: clamp(16px, 1vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.34) !important;
    transition: color .24s ease, text-shadow .24s ease !important;
}

/* Aktif rail daha büyük ve net görünsün */
.rail-tab.active,
.rail-tab:hover {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(0,214,255,.18), rgba(0,214,255,.045)),
        radial-gradient(circle at 50% 50%, rgba(0,214,255,.16), transparent 58%) !important;
    border-color: rgba(0,214,255,.24) !important;
    box-shadow:
        inset 4px 0 0 var(--taps-rail-active),
        inset 0 0 42px rgba(0,214,255,.08),
        0 0 36px rgba(0,214,255,.12) !important;
}

.rail-tab.active::before,
.rail-tab:hover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 4px !important;
    background: var(--taps-rail-active) !important;
    box-shadow:
        0 0 18px var(--taps-rail-active),
        0 0 36px color-mix(in srgb, var(--taps-rail-active) 60%, transparent) !important;
}

.rail-tab.active::after,
.rail-tab:hover::after {
    content: "" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    width: 6px !important;
    height: 68px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, transparent, var(--taps-rail-active), transparent) !important;
    transform: translateY(-50%) !important;
    opacity: .95 !important;
    filter: blur(.2px) !important;
}

.rail-tab.active small,
.rail-tab:hover small {
    color: var(--taps-rail-active) !important;
    text-shadow: 0 0 18px color-mix(in srgb, var(--taps-rail-active) 50%, transparent) !important;
}

/* Sol rail link ise de button gibi davransın */
.rail a.rail-tab {
    text-decoration: none !important;
}

/* Light mod rail */
html[data-theme="light"] .rail {
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,251,.96)),
        radial-gradient(circle at 50% 18%, rgba(0,191,232,.10), transparent 34%) !important;
    border-right-color: rgba(7,17,31,.08) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.65) inset,
        18px 0 44px rgba(8,20,36,.12) !important;
}

html[data-theme="light"] .rail-tab {
    color: rgba(7,17,31,.50) !important;
    border-bottom-color: rgba(7,17,31,.08) !important;
}

html[data-theme="light"] .rail-tab small {
    color: rgba(7,17,31,.38) !important;
}

html[data-theme="light"] .rail-tab.active,
html[data-theme="light"] .rail-tab:hover {
    color: #07111f !important;
    background:
        linear-gradient(180deg, rgba(0,191,232,.16), rgba(0,191,232,.035)),
        radial-gradient(circle at 50% 50%, rgba(0,191,232,.12), transparent 58%) !important;
}

/* Büyük rail sonrası quick actions biraz içeri gelsin */
.quick-actions {
    right: 16px !important;
}

/* Header logo ve nav dengesi */
.brand {
    margin-left: 14px !important;
}

/* Detay sayfası özel */
.service-detail-page {
    --rail-w: var(--taps-rail-w) !important;
}

.service-detail-hero {
    padding-left: clamp(36px, 6vw, 110px) !important;
}

/* Responsive */
@media (max-width: 1280px) {
    :root {
        --rail-w: 100px !important;
        --taps-rail-w: 100px;
    }

    .rail-tab span {
        font-size: clamp(15px, 1.15vw, 19px) !important;
        letter-spacing: .16em !important;
    }

    .rail-tab small {
        font-size: 15px !important;
    }

    .hero-copy,
    .intro-copy,
    .detail-copy {
        margin-left: clamp(54px, 6vw, 110px) !important;
    }
}

@media (max-width: 920px) {
    :root {
        --rail-w: 82px !important;
        --taps-rail-w: 82px;
    }

    .rail-tab span {
        font-size: 13px !important;
        letter-spacing: .14em !important;
    }

    .rail-tab small {
        font-size: 13px !important;
    }

    .hero-copy,
    .intro-copy,
    .detail-copy {
        margin-left: clamp(28px, 5vw, 72px) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --rail-w: 0px !important;
        --taps-rail-w: 0px;
    }

    .rail {
        display: none !important;
    }

    main,
    .service-detail-page,
    .hero {
        padding-left: 0 !important;
    }

    .hamburger {
        width: 64px !important;
        min-width: 64px !important;
    }

    .hero-copy,
    .intro-copy,
    .detail-copy {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}