/* custom.css — Projeye özel stiller */

/* ============================================
   TOPBAR + NAVBAR YENİDEN YAPILANDIRMASI
   ============================================ */
:root {
    --topbar-height: 38px;
    /* --header-height (72px) sadece navbar yüksekliği */
}

/* Header wrapper: topbar + navbar birlikte sabit */
.site-header {
    height: auto !important;         /* layout.css'deki 72px'i override et */
    top: 0;
}

/* Topbar */
.site-topbar {
    height: var(--topbar-height);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.topbar-left a,
.topbar-right a {
    color: rgba(255,255,255,0.8);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: color 0.2s;
}

.topbar-left a:hover,
.topbar-right a:hover { color: #fff; }

.topbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.25);
}

/* Navbar (logo + menü) — doğrudan site-header içinde */
.site-navbar {
    height: var(--header-height);    /* 72px */
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    transition: box-shadow var(--transition);
}

.site-header.scrolled .site-navbar {
    box-shadow: var(--shadow-md);
}

/* Eski border-bottom layout.css'ten geliyordu, navbar'da zaten var */
.site-header { border-bottom: none !important; }

/* Navbar: flex değil, container'ı serbest bırak */
.site-navbar {
    display: block !important;
}

.site-navbar .container {
    height: 100%;
}

/* Header-inner tam genişlik — logo sola, menü sağa */
.header-inner {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Dropdown: boşluk yerine padding ile köprü kur — fare arası düşmesin */
.nav-item .dropdown {
    top: 100% !important;
    padding-top: 10px !important;
    margin-top: 0 !important;
    transform: translateY(-4px) !important;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
    transform: translateY(0) !important;
}

/* Randevu butonu: nav link override'larını kır, padding ve renk zorla */
.main-nav a.btn-primary {
    background: var(--color-palette-4, var(--color-accent)) !important;
    border-color: var(--color-palette-4, var(--color-accent)) !important;
    color: var(--color-primary) !important;
    padding: 5px 20px !important;
}
.main-nav a.btn-primary:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* site-main: topbar + navbar yüksekliğini hesaba kat */
.site-main {
    padding-top: calc(var(--topbar-height) + var(--header-height)) !important;
}

/* Hero tam ekran: topbar + navbar düş */
.hero-tam {
    min-height: calc(100vh - var(--topbar-height) - var(--header-height));
}

/* ============================================
   TOPBAR MOBİL
   ============================================ */
@media (max-width: 768px) {
    .site-topbar { display: none; }
    .site-main {
        padding-top: var(--header-height) !important;
    }
}

/* ============================================
   HİZMET SAYFASI GÖRSELİ
   ============================================ */
.hizmet-gorsel {
    margin: 0 0 1.75rem;
}
.hizmet-gorsel img {
    width: 100%;
    height: auto;
    aspect-ratio: 913 / 593;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: block;
}
.hizmet-gorsel figcaption {
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--color-text);
    opacity: .6;
    text-align: center;
}

/* ============================================
   HİZMET İÇERİĞİ — TAM GENİŞLİK
   base.css'teki p{max-width:68ch} kuralını içerik alanında kaldırır;
   böylece başlık ve paragraflar aynı genişlikte hizalanır.
   ============================================ */
.content p,
.content ul,
.content ol,
.content li {
    max-width: none;
}

/* ============================================
   HİZMET İÇERİĞİ — DİKEY RİTİM (BOŞLUK SİSTEMİ)
   Başlık-metin arası ferah, bölümler arası net ayrım.
   ============================================ */

/* H2: Yeni bölüm — üstte geniş boşluk, altta metne yakın */
.content h2 {
    margin-top: 2.75rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* H3: Alt başlık — H2'den daha az üst boşluk */
.content h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    line-height: 1.35;
}

.content h4 {
    margin-top: 1.5rem;
    margin-bottom: .6rem;
}

/* İlk başlık üstten ekstra boşluk almasın (görselden sonra) */
.content > h2:first-child,
.content > h3:first-child,
.content .hizmet-gorsel + h2 {
    margin-top: 1rem;
}

/* Paragraf — satır arası ferah, alt boşluk net */
.content p {
    line-height: 1.8;
    margin-bottom: 1.15rem;
}

/* Listeler — başlıktan ayrık, maddeler arası nefes payı */
.content ul,
.content ol {
    margin-top: .25rem;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.content li {
    margin-bottom: .55rem;
    line-height: 1.7;
}

.content li:last-child {
    margin-bottom: 0;
}

/* Başlıktan hemen sonra gelen liste/paragraf ekstra üst boşluk almasın */
.content h2 + p,
.content h3 + p,
.content h2 + ul,
.content h3 + ul,
.content h2 + ol,
.content h3 + ol {
    margin-top: 0;
}

/* Güvenlik notu / vurgu kutusu — üst-alt nefes payı */
.content > div[style*="border-left"] {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
}

/* Kapanış ayırıcı çizgisi */
.content hr {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* ============================================
   INTER FONT (self-hosted) — METİN LOGO
   ============================================ */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
/* Türkçe karakterler (latin-ext) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-latin-ext-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metin logo — Inter, tek satır */
.site-logo.logo-mark { font-family: 'Inter', system-ui, sans-serif; white-space: nowrap; display: inline-flex; align-items: baseline; gap: .35em; line-height: 1; }
.logo-mark .logo-pre  { font-weight: 600; font-size: 1.15rem; color: var(--color-primary); letter-spacing: -.01em; }
.logo-mark .logo-name { font-weight: 700; font-size: 1.15rem; color: var(--color-accent-dark, var(--color-primary)); letter-spacing: .04em; }
/* Footer (koyu zemin) */
.site-footer .logo-mark .logo-pre  { color: #fff; }
.site-footer .logo-mark .logo-name { color: var(--color-palette-4, var(--color-accent)); }
@media (max-width: 480px) {
    .logo-mark .logo-pre, .logo-mark .logo-name { font-size: 1rem; }
}

/* ============================================
   FOOTER — TÜM HİZMETLER (4 sütun)
   ============================================ */
.footer-services {
    border-top: 1px solid rgba(255,255,255,.12);
    margin-top: 2.25rem;
    padding-top: 1.75rem;
}
.footer-services .footer-col-title { margin-bottom: 1rem; }
.footer-services-list {
    columns: 4;
    column-gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-services-list li { break-inside: avoid; margin-bottom: .45rem; }
.footer-services-list a {
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255,255,255,.7);
    transition: color .2s ease, padding-left .2s ease;
}
.footer-services-list a:hover { color: var(--color-palette-4, var(--color-accent)); padding-left: 3px; }
@media (max-width: 900px) { .footer-services-list { columns: 2; } }
@media (max-width: 520px) { .footer-services-list { columns: 1; } }

/* ============================================
   PALET TEMA — Ortak bölüm stilleri
   ============================================ */
.hero-palette {
    background: linear-gradient(135deg,
        var(--color-palette-1) 0%,
        var(--color-palette-2) 35%,
        var(--color-palette-3) 70%,
        var(--color-palette-4) 100%);
}
.hero-palette .hero-overlay { display: none; }
.hero-palette .hero-content,
.hero-palette .hero-title { color: var(--color-primary); }
.hero-palette .hero-subtitle {
    color: var(--color-text);
    opacity: 1;
}
.hero-palette .hero-title span { color: var(--color-accent-dark, var(--color-primary)); }

.page-banner {
    background: linear-gradient(135deg, var(--color-palette-2), var(--color-palette-4));
}
.page-banner h1,
.page-banner p { color: var(--color-primary); }
.page-banner .section-tag { color: var(--color-accent-dark, var(--color-primary)); }

.cta-band {
    background: linear-gradient(135deg, var(--color-palette-3), var(--color-palette-4));
    text-align: center;
}
.cta-band h2,
.cta-band p { color: var(--color-primary); }
.cta-band p { opacity: .85; }
.cta-band .btn-outline-light {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}
.cta-band .btn-outline-light:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Money page CTA — sayfa içi stilleri palette ile uyumlu kıl */
.mp-cta-band {
    background: linear-gradient(135deg, var(--color-palette-3), var(--color-palette-4)) !important;
    color: var(--color-primary) !important;
}
.mp-cta-band h2 { color: var(--color-primary) !important; }
.mp-cta-band p { color: var(--color-text) !important; opacity: .85 !important; }

/* Footer yorum avatar */
.footer-reviews .fr-avatar {
    background: linear-gradient(135deg, var(--color-palette-3), var(--color-palette-4));
    color: var(--color-primary);
}

/* ===== Header: logo üstte ortalı, menü altta (masaüstü) ===== */
@media (min-width: 769px) {
    :root { --header-height: 140px; } /* iki satır: logo + (boşluk) + menü */
    .site-navbar .header-inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.6rem; /* logo ile menü arası boşluk — menü logodan biraz daha aşağıda */
    }
    .site-navbar .site-logo { margin: 0 auto; }
    .site-navbar .site-logo.logo-mark { font-size: 1.35rem; }
    .main-nav {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: .05rem;
    }
    .main-nav > a,
    .main-nav .nav-item > a {
        font-size: .8rem;
        letter-spacing: -.015em;
        padding: .38rem .55rem;
        white-space: nowrap;
    }
    /* İletişim buton görünümü — az oval, lavanta (aktif/hover'da siyah değil) */
    .main-nav a.nav-iletisim {
        background: var(--color-palette-4);
        color: var(--color-primary);
        border-radius: 8px;
        font-weight: 600;
        padding: .4rem 1rem;
        margin-left: .5rem;
        transition: background .2s ease;
    }
    .main-nav a.nav-iletisim:hover,
    .main-nav a.nav-iletisim.aktif {
        background: #b09cc4; /* biraz koyu lavanta */
        color: var(--color-primary);
    }
}

/* ===== Alt sayfa başlık banner'ları: açık pastel zemin + koyu başlık (palet uyumu) ===== */
.section-sm.bg-primary {
    background: linear-gradient(135deg, var(--color-palette-1) 0%, #ffffff 100%) !important;
    color: var(--color-primary) !important;
    border-bottom: 1px solid var(--color-palette-2);
}
.section-sm.bg-primary h1,
.section-sm.bg-primary h2 { color: var(--color-primary) !important; }
.section-sm.bg-primary p  { color: var(--color-accent-dark, #5c5068) !important; }

/* ===== CTA bandı: p ortalama düzeltmesi =====
   Global "p { max-width: 68ch }" kuralı, text-align:center olan CTA bandında
   p kutusunu daraltıp sola yaslıyordu (h2 ortada, p sola kayık görünüyordu).
   margin-inline:auto ile p kutusu da ortalanır. */
.mp-cta-band p { margin-inline: auto; }