/* =========================================================
   ROTALAR — Tasarım Sistemi
   Palet: orman yeşili + nane yeşili + krem beyaz
   Tipografi: Baloo 2 (başlık, yuvarlak/eğlenceli) + Inter (gövde)
   ========================================================= */

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

:root {
    --yesil-900: #0F3D2A;
    --yesil-700: #167A46;
    --yesil-600: #1FA35C;
    --yesil-500: #2FBE71;
    --yesil-300: #9DEBBB;
    --yesil-100: #E3FBEC;
    --krem: #FAFBF8;
    --beyaz: #FFFFFF;
    --metin-900: #12211A;
    --metin-600: #56675E;
    --metin-400: #93A39A;
    --kenarlik: #E3EEE6;
    --golge: 0 10px 30px -12px rgba(15, 61, 42, 0.18);
    --golge-yumusak: 0 4px 14px -6px rgba(15, 61, 42, 0.12);
    --radius-buyuk: 28px;
    --radius-orta: 18px;
    --radius-kucuk: 12px;
    --radius-pil: 999px;
    --font-baslik: 'Baloo 2', 'Segoe UI', sans-serif;
    --font-govde: 'Inter', 'Segoe UI', sans-serif;
}

[data-tema="koyu"] {
    --yesil-100: #113222;
    --krem: #0B1712;
    --beyaz: #142620;
    --metin-900: #EAF5EE;
    --metin-600: #A9BDB1;
    --metin-400: #6C8378;
    --kenarlik: #1E3A2D;
    --golge: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
    --golge-yumusak: 0 4px 14px -6px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-govde);
    background: var(--krem);
    color: var(--metin-900);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 88px; /* alt pil menü boşluğu */
    transition: background .25s ease, color .25s ease;
}

h1, h2, h3, h4, .marka {
    font-family: var(--font-baslik);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .4em;
    letter-spacing: -.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.kapsayici {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- ÜST SEKME BARI (Anasayfa / Akış geçişi) ---------- */
.ust-sekme-bar {
    position: sticky;
    top: 65px;
    z-index: 39;
    display: flex;
    gap: 6px;
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--krem) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--kenarlik);
}
.ust-sekme {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border-radius: var(--radius-pil);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--metin-600);
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    transition: all .15s ease;
}
.ust-sekme.aktif {
    background: var(--yesil-500);
    border-color: var(--yesil-500);
    color: #fff;
}

/* ---------- HAMBURGER MENÜ ---------- */
.hamburger-ortu {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 33, 26, .45);
    z-index: 90;
}
.hamburger-ortu.acik { display: block; }
.hamburger-panel {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; max-width: 80vw;
    background: var(--beyaz);
    z-index: 91;
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex; flex-direction: column;
    padding: 14px;
    overflow-y: auto;
    box-shadow: var(--golge);
}
.hamburger-panel.acik { transform: translateX(0); }
.hamburger-baslik {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 8px;
    border-bottom: 1px solid var(--kenarlik);
}
.hamburger-link {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 10px;
    border-radius: var(--radius-kucuk);
    font-weight: 600; font-size: 14.5px;
    color: var(--metin-900);
}
.hamburger-link:hover { background: var(--yesil-100); }
.hamburger-alt {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--kenarlik);
}

/* ---------- ÜST BAR ---------- */
.ust-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--krem) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--kenarlik);
}
.ust-bar-ic {
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.marka {
    font-size: 19px;
    font-weight: 700;
    color: var(--yesil-700);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.marka-ortali {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.marka span.nokta { color: var(--yesil-500); }
.marka-logo { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }

.arama-kutu {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    border-radius: var(--radius-pil);
    padding: 9px 16px;
}
.arama-kutu input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    color: var(--metin-900);
    font-family: var(--font-govde);
}
.arama-kutu svg { flex-shrink: 0; color: var(--metin-400); }

.ust-bar-simgeler { display: flex; gap: 8px; }
.acilir-kapsayici { position: relative; }
.acilir-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    max-width: 82vw;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    border-radius: var(--radius-orta);
    box-shadow: var(--golge);
    z-index: 60;
}
.acilir-panel.acik { display: block; }
.acilir-panel-baslik {
    padding: 12px 16px;
    font-weight: 700;
    font-family: var(--font-baslik);
    border-bottom: 1px solid var(--kenarlik);
}
.acilir-panel-ogesi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--kenarlik);
}
.acilir-panel-ogesi:last-of-type { border-bottom: none; }
.acilir-panel-ogesi:hover { background: var(--yesil-100); }
.acilir-panel-ogesi.okunmamis { background: color-mix(in srgb, var(--yesil-100) 55%, transparent); }
.acilir-panel-bos { padding: 20px 16px; text-align: center; color: var(--metin-400); font-size: 13px; }
.acilir-panel-tumu {
    display: block;
    text-align: center;
    padding: 11px;
    font-weight: 700;
    font-size: 13px;
    color: var(--yesil-600);
}
.acilir-panel-tumu:hover { background: var(--yesil-100); }
.simge-buton {
    position: relative;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pil);
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    color: var(--yesil-700);
    transition: transform .15s ease, background .15s ease;
}
.simge-buton:active { transform: scale(.92); }
.simge-buton:hover { background: var(--yesil-100); }
.rozet-sayi {
    position: absolute; top: -4px; right: -4px;
    background: #F04B4B; color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; font-family: var(--font-govde);
}

/* ---------- ALT PİL MENÜ (asıl navigasyon) ---------- */
.alt-menu {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--yesil-900);
    padding: 8px;
    border-radius: var(--radius-pil);
    box-shadow: var(--golge);
    max-width: calc(100% - 24px);
}
.alt-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 58px;
    padding: 8px 4px 6px;
    border-radius: var(--radius-pil);
    color: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.alt-menu a.aktif, .alt-menu a:hover {
    background: var(--yesil-600);
    color: #fff;
}
.alt-menu a.merkez {
    width: 52px; height: 52px;
    background: var(--yesil-500);
    color: #fff;
    justify-content: center;
    margin: -18px 2px 0;
    box-shadow: 0 8px 18px -6px rgba(47,190,113,.6);
}
.alt-menu a.merkez:hover { background: var(--yesil-600); }

/* ---------- KARTLAR ---------- */
.kart {
    background: var(--beyaz);
    border: 1px solid var(--kenarlik);
    border-radius: var(--radius-buyuk);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--golge-yumusak);
}
.kart-baslik-satiri { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avatar {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover; background: var(--yesil-100);
    border: 2px solid var(--yesil-300);
}
.avatar-kucuk { width: 30px; height: 30px; }
.kullanici-adi-satiri { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.mavi-tik {
    width: 16px; height: 16px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    font-size: 0; line-height: 0; color: transparent; /* içerideki ✓ metnini görsel olarak gizle */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+CiAgPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiByeD0iOCIgZmlsbD0iIzJCOUJFRiIgdHJhbnNmb3JtPSJyb3RhdGUoMCAyMCAyMCkiLz4KICA8cmVjdCB4PSI3IiB5PSI3IiB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHJ4PSI4IiBmaWxsPSIjMkI5QkVGIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAyMCAyMCkiLz4KICA8cGF0aCBkPSJNMTMgMjAuNWw0LjUgNC41TDI3IDE1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMy42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.mavi-tik.buyuk { width: 22px; height: 22px; }
.zaman { font-size: 12px; color: var(--metin-400); }

/* ---------- BUTONLAR ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--radius-pil);
    border: none;
    padding: 11px 22px;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-govde);
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:active { transform: scale(.96); }
.btn-ana { background: var(--yesil-500); color: #fff; box-shadow: 0 6px 16px -6px rgba(47,190,113,.55); }
.btn-ana:hover { background: var(--yesil-600); }
.btn-hat { background: transparent; border: 1.5px solid var(--yesil-500); color: var(--yesil-700); }
.btn-hat:hover { background: var(--yesil-100); }
.btn-hayalet { background: var(--yesil-100); color: var(--yesil-700); }
.btn-kucuk { padding: 7px 14px; font-size: 12.5px; }
.btn-tam { width: 100%; }

/* ---------- FORM ---------- */
.form-grup { margin-bottom: 16px; }
.form-grup label { display: block; font-size: 13px; font-weight: 600; color: var(--metin-600); margin-bottom: 6px; }
.form-girdi {
    width: 100%;
    border: 1.5px solid var(--kenarlik);
    background: var(--beyaz);
    border-radius: var(--radius-orta);
    padding: 13px 16px;
    font-size: 14.5px;
    color: var(--metin-900);
    font-family: var(--font-govde);
    outline: none;
    transition: border-color .15s ease;
}
.form-girdi:focus { border-color: var(--yesil-500); }
textarea.form-girdi { resize: vertical; min-height: 100px; }

/* ---------- YILDIZ PUAN ---------- */
.yildizlar { display: inline-flex; gap: 3px; }
.yildizlar svg { width: 18px; height: 18px; }
.yildiz-dolu { color: #F5B301; fill: #F5B301; }
.yildiz-bos { color: var(--kenarlik); fill: var(--kenarlik); }

/* ---------- ETİKET / ROZET PİLLERİ ---------- */
.etiket-pil {
    display: inline-block;
    background: var(--yesil-100);
    color: var(--yesil-700);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pil);
    margin: 0 6px 6px 0;
    transition: background .15s ease, transform .15s ease;
}
a.etiket-pil { cursor: pointer; }
a.hashtag { color: var(--yesil-600); font-weight: 700; }
a.hashtag:hover { text-decoration: underline; }
a.etiket-pil:hover { background: var(--yesil-300); transform: translateY(-1px); }
.rozet-pil {
    display: inline-flex; align-items: center; gap: 5px;
    background: linear-gradient(135deg, var(--yesil-500), var(--yesil-700));
    color: #fff; font-size: 12px; font-weight: 700;
    padding: 6px 13px; border-radius: var(--radius-pil);
    margin: 0 6px 6px 0;
}

/* ---------- GALERİ / IZGARA ---------- */
.galeri-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    border-radius: var(--radius-orta);
    overflow: hidden;
    margin: 12px 0;
}
.galeri-izgara img { width: 100%; height: 110px; object-fit: cover; }

/* ---------- İL IZGARASI (harita yerine kompakt il seçici) ---------- */
.il-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.il-hucre {
    border: 1.5px solid var(--kenarlik);
    background: var(--beyaz);
    border-radius: var(--radius-kucuk);
    padding: 10px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--metin-600);
    transition: all .15s ease;
}
.il-hucre.gezildi {
    background: var(--yesil-500);
    border-color: var(--yesil-500);
    color: #fff;
}
.il-hucre:hover { transform: translateY(-2px); box-shadow: var(--golge-yumusak); }

/* ---------- ETKİLEŞİM ÇUBUĞU ---------- */
.etkilesim-cubugu { display: flex; gap: 18px; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--kenarlik); }
.etkilesim-buton {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--metin-600);
    font-size: 13px; font-weight: 600;
}
.etkilesim-buton.aktif { color: #F04B4B; }
.etkilesim-buton.aktif svg { fill: #F04B4B; }
.etkilesim-buton:hover { color: var(--yesil-600); }

/* ---------- FLASH MESAJ ---------- */
.flash {
    padding: 13px 18px;
    border-radius: var(--radius-orta);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
}
.flash-basari { background: var(--yesil-100); color: var(--yesil-700); }
.flash-hata { background: #FDE7E7; color: #C23434; }

/* ---------- BOŞ DURUM ---------- */
.bos-durum { text-align: center; padding: 48px 20px; color: var(--metin-400); }
.bos-durum svg { margin-bottom: 12px; color: var(--yesil-300); }

/* ---------- YARDIMCI ---------- */
.satir { display: flex; align-items: center; }
.aralikli { justify-content: space-between; }
.metin-kucuk { font-size: 12.5px; color: var(--metin-600); }
.ustbaslik { font-size: 20px; margin-bottom: 4px; }
.altbaslik { color: var(--metin-600); font-size: 13.5px; margin-bottom: 18px; }

/* Not: Alt pil menü artık masaüstünde de görünür kalıyor (aksi halde
   Keşif/Harita/Profil/+ sayfalarına gidecek hiçbir bağlantı kalmıyordu). */
@media (min-width: 720px) {
    .alt-menu { bottom: 24px; }
}