/* ============================================================
 * YÜZMEKOLİK — UYGULAMA ARAYÜZÜ KATMANI (mobil-ilk)
 * Kaynak dosya: iso/app-ui.css · tools/bake-app-ui.js tüm sayfalara bağlar.
 * ⚠️ Bu dosya navbar.css'ten SONRA yüklenir; navbar kurallarını burada
 *    `header.nk-topbar …` ön ekiyle ezeriz (daha özgül → sıra sorun olmaz).
 *
 * KURALLAR
 *   • TEK AÇIK TEMA — koyu tema bloğu EKLEME (kalıcı karar; Android zorla
 *     karartması okunmayan yazıya yol açtı). `color-scheme: light` aşağıda.
 *   • Renkler AÇIK (hex) yazılır, sistem renklerine/otomatik karartmaya güvenilmez.
 *   • Dokunma hedefi ≥ 44px. Metin alt sınırı 12px (app-ui.js ayrıca yükseltir).
 *   • İçerik SİLİNMEZ, yalnızca mobilde katlanır (SEO için DOM'da kalır).
 * ============================================================ */
:root {
    color-scheme: light;
    --app-tab-h: 84px;   /* çubuk 64 + alt boşluk 10 + nefes */
    --app-navy: #0c1e35;
    --app-blue: #0369a1;
    --app-ice: #f0f9ff;
    --app-line: #e2e8f0;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ═════════ 1) SU TEMALI ÜST MENÜ ═════════
 * AÇIK su camı (buz mavisi→beyaz) + alt kenarda mavi dalga çizgisi. Her durumda aynı:
 * logo koyu mavi yazılı olduğundan çubuk AÇIK kalır; hero rengi/koyu mod ne olursa olsun
 * okunur (eski koyu cam logoyu görünmez yapıyordu). Yazılar koyu lacivert. */
header.nk-topbar .nk-topbar-inner,
header.nk-topbar.scrolled .nk-topbar-inner {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 9'%3E%3Cpath d='M0 5Q22.5 0 45 5T90 5T135 5T180 5V9H0Z' fill='%230ea5e9' fill-opacity='.24'/%3E%3C/svg%3E") repeat-x 0 100% / 180px 9px,
        linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(232, 246, 255, .96) 100%);
    border: 1px solid rgba(14, 165, 233, .28);
    box-shadow: 0 10px 30px rgba(8, 47, 73, .16), inset 0 1px 0 #ffffff;
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
@media (min-width: 1450px) and (prefers-reduced-motion: no-preference) {
    /* dalga yavaşça akar (yalnız masaüstü: düşük güçlü telefonlarda yeniden boyama maliyeti yok) */
    header.nk-topbar .nk-topbar-inner { animation: app-dalga 18s linear infinite; }
    @keyframes app-dalga { to { background-position: 180px 100%, 0 0; } }
}
/* Yazılar: koyu lacivert; üzerine gelince buz mavisi zemin. */
header.nk-topbar .nk-nav-link, header.nk-topbar.scrolled .nk-nav-link {
    color: #0c1e35; text-shadow: none; letter-spacing: .1px;
}
header.nk-topbar .nk-nav-link:hover, header.nk-topbar.scrolled .nk-nav-link:hover {
    background: #e0f2fe; color: #0369a1;
}
/* Bağlantı vurgusu: düz çizgi yerine dalga */
header.nk-topbar .nk-nav-link::after, header.nk-topbar.scrolled .nk-nav-link::after {
    left: 10px; right: 10px; bottom: 1px; height: 5px; border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 5'%3E%3Cpath d='M0 2.5Q3.5 0 7 2.5T14 2.5' fill='none' stroke='%230ea5e9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 14px 5px;
}
/* Düğme: derin turkuaz→mavi (beyaz yazıda ≥5:1) + yüzücü simgesi */
header.nk-topbar .nk-nav-cta {
    background: linear-gradient(135deg, #0e7490, #1d4ed8) !important; color: #ffffff !important;
    gap: 8px; letter-spacing: .1px;
    box-shadow: 0 8px 20px rgba(14, 116, 144, .35);
}
header.nk-topbar .nk-nav-cta:hover { background: linear-gradient(135deg, #155e75, #1e40af) !important; }
/* Açılır paneller: üstte dalga şeridi */
header.nk-topbar .nk-mega-panel::before {
    content: ''; display: block; height: 9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 9'%3E%3Cpath d='M0 5Q22.5 0 45 5T90 5T135 5T180 5V9H0Z' fill='%230ea5e9' fill-opacity='.22'/%3E%3C/svg%3E") repeat-x 0 0 / 180px 9px;
}
/* Hamburger (901–1449px): HER durumda koyu zemin + beyaz çizgiler → açık çubukta ve açık çekmecede görünür */
header.nk-topbar .nk-hamburger, header.nk-topbar.scrolled .nk-hamburger {
    background: #0c1e35; border: 1px solid #0c1e35;
}
header.nk-topbar .nk-hamburger span, header.nk-topbar.scrolled .nk-hamburger span { background: #ffffff !important; }

/* ═════════ 2) MOBİL (≤900px): UYGULAMA ÇERÇEVESİ ═════════ */
.app-tabbar, .app-drawer-close { display: none; }
@media (max-width: 900px) {
    /* Üst çubuk: yalnız logo (ortada). Menü alt çubuktan açılır. */
    header.nk-topbar .nk-hamburger { display: none !important; }
    header.nk-topbar .nk-topbar-inner { justify-content: center; }
    body { padding-bottom: calc(var(--app-tab-h) + env(safe-area-inset-bottom, 0px)); }
    html, body { max-width: 100%; overflow-x: clip; }
    img, video, iframe, svg { max-width: 100%; }

    /* Alt sekme çubuğu — yüzen cam kapsül (premium). Pasif: simge + küçük etiket; aktif: gradyanlı
     * kapsül içinde beyaz simge + koyu etiket. Etiketler bilerek 10.5px (app-ui.js 12px tabanından muaf). */
    .app-tabbar {
        display: flex; align-items: stretch; position: fixed; z-index: 1100;
        left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        height: 64px; padding: 6px 6px; gap: 2px;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
        border: 1px solid rgba(14, 165, 233, .2); border-radius: 24px;
        box-shadow: 0 16px 38px rgba(8, 47, 73, .2), 0 2px 6px rgba(8, 47, 73, .08), inset 0 1px 0 #ffffff;
    }
    .app-tab {
        flex: 1 1 0; min-width: 0; position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        border: 0; background: none; border-radius: 18px; cursor: pointer; padding: 0; margin: 0;
        font-family: inherit; line-height: 1; color: #64748b; text-decoration: none;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
        transition: color .2s ease;
    }
    .app-tab i {
        display: flex; align-items: center; justify-content: center;
        width: 46px; height: 30px; border-radius: 15px; font-size: 18px; line-height: 1;
        transition: background .25s ease, color .25s ease, transform .25s ease;
    }
    .app-tab span {
        display: block; white-space: nowrap;
        font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .2px !important; text-transform: none !important;
    }
    /* Sitenin genel button stili (dolgu 12px 16px, min-height 44px) <button> sekmesini kaydırıyordu */
    .app-tabbar .app-tab { padding: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; box-shadow: none; }
    .app-tab:active i { transform: scale(.92); }
    .app-tab[aria-current="page"], .app-tab[aria-expanded="true"] { color: #0c1e35; }
    .app-tab[aria-current="page"] span, .app-tab[aria-expanded="true"] span { font-weight: 800 !important; }
    .app-tab[aria-current="page"] i, .app-tab[aria-expanded="true"] i {
        color: #ffffff; background: linear-gradient(135deg, #0891b2, #1d4ed8);
        box-shadow: 0 6px 14px rgba(8, 112, 160, .35);
    }
    .app-tab:focus-visible, .app-drawer-close:focus-visible { outline: 3px solid #0ea5e9; outline-offset: -3px; }

    /* Menü çekmecesi: açık zemin + net kapatma düğmesi (koyu-açık kontrast garantili) */
    #mainNav.mobile-open {
        background: linear-gradient(180deg, #e0f2fe 0, #ffffff 240px) !important;
        padding: 84px 20px calc(var(--app-tab-h) + 28px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1050;
    }
    #mainNav.mobile-open .nk-nav-link { color: #0c1e35 !important; font-size: 17px; font-weight: 700; padding: 15px 16px; border-bottom: 1px solid #e8eef5; border-radius: 0; text-shadow: none; }
    #mainNav.mobile-open .nk-nav-link:active { background: var(--app-ice); }
    #mainNav.mobile-open .nk-mega-sitem { color: #0c1e35; }
    .app-drawer-close {
        position: fixed; top: 14px; right: 14px; z-index: 1200; width: 48px; height: 48px;
        align-items: center; justify-content: center;
        border: 0; border-radius: 50%; background: var(--app-navy); color: #ffffff; font-size: 20px; cursor: pointer;
        box-shadow: 0 8px 22px rgba(12, 30, 53, .3);
    }
    body.app-menu-open .app-drawer-close { display: flex; }
    body.app-menu-open { overflow: hidden; }

    /* Antrenörler sayfasındaki yüzen "Filtrele" düğmesi sekme çubuğunun üstüne çıkar */
    .lux-mobile-filter-btn { bottom: calc(var(--app-tab-h) + 16px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media print { .app-tabbar, .app-drawer-close { display: none !important; } }

/* ═════════ 3) MOBİLDE SADELEŞTİRME (≤768px) ═════════
 * Uzun listeler ilk N öğeyle açılır; "Tümünü göster" ile genişler.
 * Sınıfları app-ui.js ekler; html.app-on yoksa (JS çalışmadıysa) hiçbir şey gizlenmez. */
.app-more-btn { display: none; }
@media (max-width: 768px) {
    html.app-on .app-collapsible:not(.app-open) > .app-extra { display: none !important; }
    html.app-on .app-more-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        width: 100%; min-height: 48px; margin: 14px 0 4px; padding: 0 18px;
        border: 1.5px solid #bae6fd; border-radius: 14px; background: #f0f9ff; color: var(--app-blue);
        font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation;
    }
    html.app-on .app-more-btn:active { background: #e0f2fe; }
    html.app-on .app-more-btn[aria-expanded="true"] i { transform: rotate(180deg); }
    /* Uzun anlatım metni: ilk ~7 satır + yumuşak geçiş */
    html.app-on .app-clamp:not(.app-open) {
        max-height: 21em; overflow: hidden; position: relative;
        -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
    }
    /* Market kartları yatay kaydırma (swipe) — 1700px'lik dikey yığın yerine */
    .ce-market-grid, .nk-market-grid {
        display: flex !important; overflow-x: auto; gap: 12px; margin: 0 -16px; padding: 4px 16px 14px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .ce-market-grid::-webkit-scrollbar, .nk-market-grid::-webkit-scrollbar { display: none; }
    .ce-market-grid > *, .nk-market-grid > * { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
    /* İl sayfası hero: güven rozetleri gizlenir (DOM'da kalır), düğmeler 1 geniş + 2 yarım */
    .hero-trust-bar { display: none !important; }
    .city-hero-v3 .hero-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .city-hero-v3 .hero-btn-primary { grid-column: 1 / -1; }
    .city-hero-v3 .hero-btn { justify-content: center; min-height: 48px; padding: 0 10px; font-size: 14px; white-space: normal; text-align: center; }
    /* /sehirler/: 81 il kartı tek sütunda 28.700px'ti → 2 sütun kompakt kart (tümü görünür kalır; süzgeç bozulmaz) */
    .cities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .city-card .card-image { height: 84px !important; }
    .city-card .card-image img { width: 100%; height: 100%; object-fit: cover; }
    .city-card .card-body { padding: 10px 12px 4px !important; }
    .city-card .card-body h3 { font-size: 1.02rem !important; margin: 0 !important; }
    .city-card .card-body .subtitle { display: none !important; }
    .city-card .card-footer { padding: 6px 12px 10px !important; }
    /* İlçe kutuları taşmasın */
    .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dd-item { min-width: 0; overflow-wrap: anywhere; }
    /* Filtre çipleri: tek satır kaydırılır, taşma yok */
    .nx-bar { min-width: 0; max-width: 100%; }
    .nx-filtre, .nx-chips, .nx-filters { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; max-width: 100%; -webkit-overflow-scrolling: touch; }
    .nx-filtre::-webkit-scrollbar, .nx-chips::-webkit-scrollbar, .nx-filters::-webkit-scrollbar { display: none; }
    .nx-chip { flex: 0 0 auto; }
}