/* =====================================================================
   muny.com.tr — Tasarım Sistemi
   Referans: natural.clinic (koyu petrol + mercan vurgu, zarif serif başlıklar)
   ===================================================================== */

:root {
    /* Renk paleti */
    --renk-koyu: #16352f;
    --renk-koyu-2: #1f4a42;
    --renk-vurgu: #e2836a;
    --renk-vurgu-koyu: #cc6b52;
    --renk-krem: #faf5ee;
    --renk-bej: #ecd9c6;
    --renk-beyaz: #ffffff;
    --renk-metin: #2b2b28;
    --renk-metin-acik: #6b6b64;
    --renk-cizgi: #e6ddd0;

    /* Tipografi */
    --font-govde: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-baslik: Georgia, "Times New Roman", serif;

    /* Ölçüler */
    --kose-radius: 14px;
    --kose-radius-buyuk: 28px;
    --golge: 0 10px 30px rgba(22, 53, 47, 0.12);
    --konteyner-genislik: 1200px;
}

/* --- Sıfırlama --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-govde);
    color: var(--renk-metin);
    background: var(--renk-krem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: 1rem;
}

/* --- Tipografi --- */
h1, h2, h3, h4 {
    font-family: var(--font-baslik);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: var(--renk-koyu);
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: 0.01em; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.vurgu-metin { color: var(--renk-vurgu); }

/* --- Yerleşim --- */
.konteyner {
    max-width: var(--konteyner-genislik);
    margin: 0 auto;
    padding: 0 24px;
}

.bolum {
    padding: 72px 0;
}

.bolum--koyu {
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
}

.bolum--koyu h2, .bolum--koyu h3 {
    color: var(--renk-beyaz);
}

.bolum--bej {
    background: var(--renk-bej);
}

.bolum-baslik {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.bolum-baslik p {
    color: var(--renk-metin-acik);
}

/* --- Butonlar --- */
.buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.buton:hover {
    transform: translateY(-2px);
}

.buton--dolu {
    background: var(--renk-vurgu);
    color: var(--renk-beyaz);
}

.buton--dolu:hover {
    background: var(--renk-vurgu-koyu);
}

.buton--ghost {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.buton--kucuk {
    padding: 8px 20px;
    font-size: 0.9rem;
}

/* --- Kartlar --- */
.kart {
    background: var(--renk-beyaz);
    border-radius: var(--kose-radius);
    box-shadow: var(--golge);
    overflow: hidden;
}

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--renk-krem);
    color: var(--renk-koyu);
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- Yer tutucu görsel blokları (gerçek foto/video gelene kadar) --- */
.yer-tutucu {
    background: linear-gradient(135deg, var(--renk-koyu) 0%, var(--renk-koyu-2) 55%, var(--renk-vurgu) 140%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-baslik);
    font-size: 0.95rem;
    text-align: center;
    letter-spacing: 0.03em;
    min-height: 100%;
}

.yer-tutucu--acik {
    background: linear-gradient(135deg, var(--renk-bej) 0%, var(--renk-krem) 100%);
    color: var(--renk-koyu);
}

.oynat-simgesi {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--renk-koyu);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Üst bilgi çubuğu --- */
.ust-bilgi-cubugu {
    background: var(--renk-koyu);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
}

.ust-bilgi-cubugu .konteyner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.ust-bilgi-cubugu a:hover {
    color: var(--renk-vurgu);
}

.iletisim-linkleri {
    display: flex;
    gap: 16px;
}

/* --- Ana navigasyon --- */
.ana-navigasyon {
    background: var(--renk-beyaz);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 40;
}

.ana-navigasyon .konteyner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}

.logo {
    font-family: var(--font-baslik);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--renk-koyu);
}

.ana-menu {
    display: flex;
    gap: 28px;
    align-items: center;
}

.ana-menu a {
    font-weight: 600;
    color: var(--renk-metin);
}

.ana-menu a:hover {
    color: var(--renk-vurgu);
}

.nav-sag {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dil-secici {
    position: relative;
}

.dil-secici select {
    border: 1px solid var(--renk-cizgi);
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--renk-krem);
    color: var(--renk-metin);
}

.hamburger-buton {
    display: none;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--renk-koyu);
}

/* --- Hero --- */
.kahraman-bolumu {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    color: var(--renk-beyaz);
    text-align: center;
    overflow: hidden;
}

.kahraman-bolumu .yer-tutucu {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.kahraman-icerik {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px;
}

.kahraman-icerik p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
}

.rozet-seridi {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: -32px;
    position: relative;
    z-index: 2;
}

.rozet-seridi .rozet {
    background: var(--renk-beyaz);
    box-shadow: var(--golge);
}

/* --- Sekmeler (pill tab) --- */
.sekme-grubu {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.sekme {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid var(--renk-cizgi);
    background: var(--renk-beyaz);
    cursor: pointer;
    font-weight: 600;
    color: var(--renk-metin-acik);
}

.sekme.aktif {
    background: var(--renk-koyu);
    color: var(--renk-beyaz);
    border-color: var(--renk-koyu);
}

.sekme-icerigi {
    display: none;
}

.sekme-icerigi.aktif {
    display: block;
}

/* --- Öncesi/Sonrası --- */
.oncesi-sonrasi-gorsel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border-radius: var(--kose-radius-buyuk);
    overflow: hidden;
    height: 340px;
}

/* --- Hizmet kartları --- */
.hizmet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hizmet-karti {
    position: relative;
    border-radius: var(--kose-radius);
    overflow: hidden;
    height: 280px;
    display: flex;
    align-items: flex-end;
}

.hizmet-karti .yer-tutucu {
    position: absolute;
    inset: 0;
}

.hizmet-karti-icerik {
    position: relative;
    z-index: 1;
    padding: 24px;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    color: var(--renk-beyaz);
}

.hizmet-karti-icerik h3 {
    color: var(--renk-beyaz);
    margin-bottom: 12px;
}

/* --- Yatay kaydırmalı galeri --- */
.yatay-galeri {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
}

.yatay-galeri::-webkit-scrollbar {
    height: 8px;
}

.yatay-galeri::-webkit-scrollbar-thumb {
    background: var(--renk-cizgi);
    border-radius: 999px;
}

.yatay-galeri-oge {
    flex: 0 0 320px;
    height: 220px;
    border-radius: var(--kose-radius);
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
}

.dikey-galeri-oge {
    flex: 0 0 220px;
    height: 380px;
    border-radius: var(--kose-radius);
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
}

/* --- CTA bandı --- */
.cta-bandi {
    background: var(--renk-bej);
    padding: 40px 0;
}

.cta-bandi .konteyner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cta-bandi h3 {
    margin-bottom: 4px;
}

/* --- Yorumlar / Google puanı --- */
.google-puani {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--renk-beyaz);
    border-radius: 999px;
    padding: 10px 20px;
    box-shadow: var(--golge);
    font-weight: 600;
}

.yorum-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.yorum-karti {
    padding: 24px;
}

.yorum-karti .yildizlar {
    color: var(--renk-vurgu);
    margin-bottom: 8px;
}

/* --- Ünlü onayı --- */
.unlu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.unlu-karti {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
}

.unlu-karti .yer-tutucu {
    position: absolute;
    inset: 0;
}

.unlu-karti-icerik {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: var(--renk-beyaz);
}

/* --- Footer --- */
.altbilgi {
    background: var(--renk-koyu);
    color: rgba(255, 255, 255, 0.8);
    padding: 64px 0 24px;
}

.altbilgi h2, .altbilgi h3 {
    color: var(--renk-beyaz);
}

.altbilgi-form {
    max-width: 720px;
    margin: 0 auto 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.altbilgi-form input,
.altbilgi-form textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--kose-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--renk-beyaz);
}

.altbilgi-form textarea {
    grid-column: 1 / -1;
    min-height: 100px;
}

.altbilgi-form .buton {
    grid-column: 1 / -1;
}

.altbilgi-linkler {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 40px;
}

.altbilgi-linkler h4 {
    color: var(--renk-beyaz);
    font-family: var(--font-govde);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.altbilgi-linkler li {
    margin-bottom: 8px;
}

.altbilgi-linkler a:hover {
    color: var(--renk-vurgu);
}

.altbilgi-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
}

.sosyal-ikonlar {
    display: flex;
    gap: 12px;
}

.sosyal-ikonlar a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- CMS sayfa içeriği (prose) --- */
.icerik-govdesi {
    max-width: 760px;
    margin: 0 auto;
}

.icerik-govdesi h2 { margin-top: 1.4em; }
.icerik-govdesi img { border-radius: var(--kose-radius); margin: 16px 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hizmet-grid { grid-template-columns: repeat(2, 1fr); }
    .unlu-grid { grid-template-columns: repeat(2, 1fr); }
    .yorum-grid { grid-template-columns: 1fr; }
    .altbilgi-form { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .bolum { padding: 48px 0; }

    .hamburger-buton { display: block; }

    .ana-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--renk-beyaz);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 24px;
        box-shadow: var(--golge);
    }

    .ana-menu.acik {
        display: flex;
    }

    .nav-sag .buton { display: none; }

    .hizmet-grid { grid-template-columns: 1fr; }
    .oncesi-sonrasi-gorsel { grid-template-columns: 1fr; height: auto; }
    .oncesi-sonrasi-gorsel .yer-tutucu { height: 200px; }
    .unlu-grid { grid-template-columns: 1fr; }
    .altbilgi-linkler { grid-template-columns: 1fr 1fr; }
    .cta-bandi .konteyner { flex-direction: column; text-align: center; }
}