/* assets/css/custom.css */
@layer utilities {
    .safe-top {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .h-dvh {
        height: 100dvh;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Basit, görünür ve baş parmakla kolayca kullanılabilen mobil gezinme */
.mobile-nav-item {
    min-width: 60px;
    min-height: 54px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 14px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:active { background: #1e293b; transform: scale(.97); }
.mobile-nav-primary > div {
    width: 34px; height: 34px; border-radius: 12px;
    display: grid; place-items: center;
    color: #041713; background: linear-gradient(135deg, #22d3ee, #34d399);
}
.profile-menu-open .profile-menu { display: block !important; }
.profile-menu-trigger:focus-visible, .mobile-nav-item:focus-visible {
    outline: 3px solid #22d3ee; outline-offset: 2px;
}
.category-pill-row {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.category-pill-row::-webkit-scrollbar { display: none; }
.scroll-hint {
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-right: 6px !important;
}
.scroll-hint > * { scroll-snap-align: start; }
.scroll-hint.has-overflow {
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 28px), transparent 100%);
}
.scroll-hint.has-overflow::after {
    content: '';
    position: sticky;
    right: 0;
    flex: 0 0 22px;
    width: 22px;
    margin-left: -22px;
    align-self: stretch;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .92));
}
.scroll-hint.is-nudging,
.category-pill-row.is-nudging,
.mobile-scroll-row.is-nudging { scroll-behavior:smooth; }
.category-pill-row { scroll-behavior: smooth; scroll-snap-type: x proximity; }
.category-pill { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
    .scroll-hint, .category-pill-row { scroll-behavior: auto; }
    .scroll-hint.is-nudging, .category-pill-row.is-nudging, .mobile-scroll-row.is-nudging { scroll-behavior:auto; }
}
.category-pill {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 9999px;
    border: 1px solid #334155;
    background: #0f172a;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .15s, border-color .15s, color .15s;
}
.category-pill:hover { background: #1e293b; color: #fff; }
.category-pill.is-selected { background: #10b981; border-color: #10b981; color: #052e24; }

@media (max-width: 640px) {
    .header-notification-stack { margin-top: 10px; }
    #locationInfoBanner { margin-top: 3px; }
}

/* Yasal bilgilendirme sekme çubuğu: daha büyük, rahat okunur puntolar. */
.legal-page-content .legal-tabs .legal-tab-button {
    min-height: 54px !important;
    gap: 11px !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
}
.legal-page-content .legal-tabs .legal-tab-button svg {
    width: 19px !important;
    height: 19px !important;
}
@media (max-width: 640px) {
    .legal-page-content .legal-tabs .legal-tab-button {
        min-height: 50px !important;
        padding: 11px 15px !important;
        font-size: 15px !important;
    }
}

/* Keep the account and menu controls on screen when the weather chip is present. */
@media (max-width: 639px) {
    #topHeaderMainRow { min-height: 44px; align-items: center; }
    #topHeaderActions { position: absolute; top: 50%; right: 0; z-index: 50; gap: 6px; transform: translateY(-50%); }
    #weatherPillContainer:not(.hidden) { width: calc(100vw - 128px); max-width: calc(100vw - 128px); min-width: 0; }
    #weatherPillContainer:not(.hidden) > .flex { width: 100%; min-width: 0; min-height: 40px; align-items: center; }
    #weatherPillContainer [data-forecast-summary] { min-width: 0; flex: 1 1 auto; white-space: nowrap; }
    #compactWeatherDayLabel, #compactWeatherDateLabel, #compactWeatherTemp,
    #compactWeatherWind, #compactWeatherWave, #compactWeatherWater { white-space: nowrap; }
}
@media (max-width: 380px) {
    #weatherPillContainer:not(.hidden) #prevForecastDayBtn,
    #weatherPillContainer:not(.hidden) #nextForecastDayBtn { display: none; }
}

/* Şehir/mera bilgi şeridini küçük ekranlarda rahat okunur ve sarılabilir tut. */
.city-species-strip #citySpeciesTitle {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.city-species-strip #cityLockBanner {
    align-items: flex-start;
    padding: 10px 12px;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
}
.city-species-strip #cityLockText {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.city-species-strip #cityUnlockBtn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-size: 12px;
}

@media (max-width: 639px) {
    .profile-menu-open .profile-menu { position: fixed; top: 64px; right: 12px; width: min(280px, calc(100vw - 24px)); }
}
::-webkit-scrollbar-track {
    background: #020617;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Zorunlu gizleme kuralı - çakışmaları engeller */
.hidden {
    display: none !important;
}

/* iOS Bottom Sheet Transitions & Responsive Presentation */
.bottom-sheet {
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-top: 1px solid rgba(51, 65, 85, 0.8) !important;
    background: #090d16 !important;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.85) !important;
}

.bottom-sheet.closed {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
}

.bottom-sheet.open,
.bottom-sheet.half,
.bottom-sheet.expanded {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
}

/* Mera ayrıntı paneli açıldığında içeriği kesmeden mobilde hava durumu altına kadar uzat */
.bottom-sheet.expanded {
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    bottom: 0 !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
    border-radius: 22px 22px 0 0 !important;
}

@media (min-width: 640px) {
    /* Web / Masaüstünde kartı aşağıya doğru uzat (72px üstten başlar, zemine 16px kala biter) */
    .bottom-sheet {
        top: 72px !important;
        bottom: 16px !important;
        left: 50% !important;
        transform: translate(-50%, 0%) !important;
        max-width: 52rem !important;
        width: min(52rem, calc(100% - 2rem)) !important;
        border-radius: 22px !important;
        border: 1px solid #1e293b !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
        height: auto !important;
        max-height: calc(100dvh - 88px) !important;
    }

    .bottom-sheet.closed {
        transform: translate(-50%, 115%) !important;
        opacity: 0;
        pointer-events: none;
    }

    .bottom-sheet.open,
    .bottom-sheet.half,
    .bottom-sheet.expanded {
        transform: translate(-50%, 0%) !important;
        opacity: 1;
        pointer-events: auto;
    }

    .bottom-sheet.expanded {
        top: 64px !important;
        bottom: 12px !important;
        height: auto !important;
        max-height: calc(100dvh - 76px) !important;
        border-radius: 22px !important;
    }
}

/* Leaflet Customizations for Oceanic / Dark Mode */
.leaflet-container {
    background: #0b0f17 !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.leaflet-bar {
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.leaflet-bar a {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid #1e293b !important;
    transition: background-color 0.15s ease;
}

.leaflet-bar a:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Leaflet Popup Koyu Mod - Mat, Sade ve Göz Yormayan */
.leaflet-popup-content-wrapper {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
    border-radius: 0.875rem !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.leaflet-popup-tip-container {
    overflow: visible !important;
}

.leaflet-popup-tip {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: none !important;
}

.leaflet-popup-close-button {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    border-radius: 8px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    padding: 0 !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    z-index: 30 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup-close-button:hover {
    color: #ffffff !important;
    background: #ef4444 !important;
    border-color: #f87171 !important;
    transform: scale(1.06) !important;
}

/* Canlı Kullanıcı GPS Radar Puls İşareti */
.user-gps-pulse-outer {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-gps-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    background: rgba(14, 165, 233, 0.25);
    animation: gps-wave 2s infinite ease-out;
}
.user-gps-core {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #0284c7;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    z-index: 2;
}
@keyframes gps-wave {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

/* Custom Marker Styles - Ultra-Lightweight Pre-styled CSS */
.custom-pin-vip {
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease;
    filter: drop-shadow(0 3px 5px rgba(2, 6, 23, 0.75));
}
.custom-pin-vip:hover {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 5px 9px rgba(16, 185, 129, 0.45));
    z-index: 1000 !important;
}

.pin-vip-inner {
    position: relative;
    width: 27px;
    height: 27px;
    border-radius: 50% 50% 50% 3px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff7e00 0%, #ff4500 65%, #e63900 100%);
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0 0 1.5px rgba(255, 95, 0, 0.55), 0 4px 14px rgba(230, 57, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.75);
}
.pin-vip-inner svg {
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.pin-vip-inner::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50% 50% 50% 2px;
    pointer-events: none;
}

.custom-pin-free {
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease;
    filter: drop-shadow(0 2px 4px rgba(2, 6, 23, 0.72));
}
.custom-pin-free:hover {
    transform: translateY(-2px) scale(1.14);
    filter: drop-shadow(0 4px 10px rgba(255, 95, 0, 0.65));
    z-index: 1000 !important;
}

.pin-free-inner {
    width: 23px;
    height: 23px;
    border-radius: 50% 50% 50% 3px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff8512 0%, #ff5200 100%);
    border: 1.8px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 0 0 1.5px rgba(255, 85, 0, 0.45), 0 3px 10px rgba(230, 57, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.65);
}
.pin-free-inner svg {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

/* Tekil Seçili Mera Vurgusu (Sadece tıklanan mera için) */
.custom-pin-selected {
    transform: translateY(-3px) scale(1.25);
    filter: drop-shadow(0 5px 9px rgba(16, 185, 129, 0.6));
    outline: 2px solid #34d399;
    outline-offset: 2px;
    border-radius: 10px;
    z-index: 9999 !important;
}

/* Kullanıcı paneli */
.account-panel-page { display: flex; min-height: 100dvh; flex-direction: column; background: radial-gradient(ellipse at 70% 0%, rgba(12, 74, 82, .19), transparent 34%), #070d17; }
.account-panel-shell { display: flex; flex: 1; min-height: 0; }
.account-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; display: flex; width: 292px; max-width: 86vw; flex-direction: column; padding: 25px 16px 18px; border-right: 1px solid rgba(51, 65, 85, .7); background: rgba(8, 15, 27, .97); }
.account-sidebar-subpage { top: 0; z-index: 60; }
.account-sidebar-launcher { display: none; }
.account-brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 24px; color: inherit; text-decoration: none; }
.account-brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(45, 212, 191, .35); border-radius: 13px; color: #5eead4; background: linear-gradient(145deg, rgba(8, 145, 178, .18), rgba(16, 185, 129, .09)); }
.account-brand-mark svg { width: 20px; height: 20px; }
.account-brand strong { display: block; color: #f8fafc; font: 800 14px/1.2 'Outfit', sans-serif; letter-spacing: .035em; white-space: nowrap; }
.account-brand strong span { color: #34d399; }
.account-brand small { display: block; margin-top: 4px; color: #718096; font-size: 11px; }
.account-user-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 11px; border: 1px solid #1e293b; border-radius: 15px; background: linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(10, 18, 31, .86)); }
.account-user-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border: 1.5px solid #dce4eb; border-radius: 9999px; color: #64748b; background: #f1f5f9; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.account-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.account-user-avatar svg { width: 19px; height: 19px; }
.account-user-card > div:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.account-user-card strong { overflow: hidden; color: #e2e8f0; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.account-user-card span { overflow: hidden; color: #8291a6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-user-card .account-scope-badge { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 8px; border: 1px solid rgba(45, 212, 191, .24); border-radius: 999px; color: #83eee0; background: rgba(13, 148, 136, .12); font-size: 10px; font-weight: 800; }
.account-scope-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.account-verified { width: 15px; height: 15px; flex: 0 0 auto; color: #34d399; }
.account-nav { display: flex; min-height: 0; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; padding: 25px 2px 8px 0; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.account-nav-label { padding: 0 11px 8px; color: #718096; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.account-nav-label-spaced { padding-top: 23px; }
.account-nav-link { display: flex; min-height: 48px; align-items: center; gap: 13px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: #aebbd0; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease; }
.account-nav-link > svg:first-child { width: 18px; height: 18px; flex: 0 0 auto; color: #8b9cb2; }
.account-nav-link:hover { color: #f8fafc; background: rgba(30, 41, 59, .62); }
.account-nav-link:hover > svg:first-child { color: #5eead4; }
.account-nav-link.is-active { border-color: rgba(45, 212, 191, .17); color: #a7f3d0; background: linear-gradient(90deg, rgba(16, 185, 129, .15), rgba(13, 148, 136, .07)); }
.account-nav-link.is-active > svg:first-child { color: #34d399; }
.account-nav-arrow { width: 14px; height: 14px; margin-left: auto; color: #64748b; }
.account-nav-whatsapp > svg:first-child { color: #4ade80; }
.account-nav-disabled { cursor: not-allowed; opacity: .48; }
.account-sidebar-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.account-logout { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 11px; color: #fda4af; font-size: 12px; font-weight: 700; text-decoration: none; }
.account-logout:hover { color: #fecdd3; background: rgba(159, 18, 57, .15); }
.account-logout svg { width: 15px; height: 15px; }
.account-main { display: flex; width: calc(100% - 292px); min-width: 0; min-height: 0; flex-direction: column; margin-left: 292px; }
.account-topbar { position: sticky; top: 0; z-index: 30; display: flex; height: 62px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 clamp(20px, 4vw, 54px); border-bottom: 1px solid rgba(51, 65, 85, .48); background: rgba(7, 13, 23, .88); backdrop-filter: blur(16px); }
.account-breadcrumb { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 10px; font-weight: 600; }
.account-breadcrumb a { color: #94a3b8; text-decoration: none; }
.account-breadcrumb a:hover { color: #e2e8f0; }
.account-breadcrumb svg { width: 13px; height: 13px; }
.account-breadcrumb span { color: #cbd5e1; }
.account-map-link { display: flex; align-items: center; gap: 7px; color: #a7f3d0; font-size: 10px; font-weight: 700; text-decoration: none; }
.account-map-link svg { width: 15px; height: 15px; }
.account-mobile-menu { display: none; }
.account-content { width: min(1120px, 100%); flex: 1; margin: 0 auto; padding: clamp(30px, 4vw, 52px) clamp(18px, 4vw, 54px) 35px; }
.account-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.account-eyebrow { display: flex; align-items: center; gap: 7px; color: #66b9b2; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.account-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .6); }
.account-welcome h1 { margin: 9px 0 5px; color: #f8fafc; font: 700 clamp(24px, 3vw, 34px)/1.15 'Outfit', sans-serif; letter-spacing: -.035em; }
.account-welcome h1 span { font-size: .7em; }
.account-welcome p { margin: 0; color: #8b9ab0; font-size: 11px; }
.account-primary-button { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid rgba(52, 211, 153, .3); border-radius: 11px; color: #041b18; background: linear-gradient(115deg, #34d399, #2dd4bf); box-shadow: 0 7px 20px rgba(16, 185, 129, .14); font-size: 10px; font-weight: 800; text-decoration: none; transition: transform .16s ease, filter .16s ease; }
.account-primary-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.account-primary-button svg { width: 15px; height: 15px; }
.account-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-summary-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 17px 15px; border: 1px solid rgba(51, 65, 85, .75); border-radius: 15px; background: linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(10, 18, 30, .72)); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.account-summary-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(251, 191, 36, .17); border-radius: 11px; color: #fbbf24; background: rgba(245, 158, 11, .09); }
.account-summary-icon svg { width: 17px; height: 17px; }
.account-summary-icon-cyan { border-color: rgba(34, 211, 238, .17); color: #67e8f9; background: rgba(8, 145, 178, .1); }
.account-summary-icon-blue { border-color: rgba(96, 165, 250, .18); color: #93c5fd; background: rgba(37, 99, 235, .1); }
.account-summary-card > div:last-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.account-summary-card small { color: #6f8098; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.account-summary-card strong { overflow: hidden; color: #e7edf6; font: 700 12px/1.25 'Outfit', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.account-summary-card span { overflow: hidden; color: #8190a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 31px 0 13px; }
.account-section-heading h2 { margin: 5px 0 0; color: #f1f5f9; font: 700 18px/1.2 'Outfit', sans-serif; letter-spacing: -.02em; }
.account-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-action-card { position: relative; display: flex; min-height: 82px; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid rgba(51, 65, 85, .74); border-radius: 14px; background: rgba(13, 21, 35, .78); text-decoration: none; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.account-action-card:hover { transform: translateY(-2px); border-color: rgba(45, 212, 191, .35); background: rgba(17, 30, 44, .94); }
.account-action-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(52, 211, 153, .18); border-radius: 12px; color: #6ee7b7; background: rgba(16, 185, 129, .1); }
.account-action-icon svg { width: 18px; height: 18px; }
.account-action-icon.is-amber { color: #fbbf24; border-color: rgba(251, 191, 36, .18); background: rgba(245, 158, 11, .09); }
.account-action-icon.is-whatsapp { color: #4ade80; border-color: rgba(74, 222, 128, .2); background: rgba(34, 197, 94, .1); }
.account-action-icon.is-blue { color: #7dd3fc; border-color: rgba(56, 189, 248, .18); background: rgba(14, 165, 233, .09); }
.account-action-icon.is-slate { color: #94a3b8; border-color: rgba(148, 163, 184, .16); background: rgba(71, 85, 105, .12); }
.account-action-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.account-action-copy strong { color: #e2e8f0; font: 700 11px/1.25 'Outfit', sans-serif; }
.account-action-copy small { color: #8290a4; font-size: 9px; line-height: 1.45; }
.account-action-arrow { width: 14px; height: 14px; flex: 0 0 auto; color: #65768e; }
.account-catches-section { margin-top: 31px; }
.account-catches-section .account-section-heading { margin-top: 0; }
.account-text-link { display: inline-flex; align-items: center; gap: 6px; color: #7dd3fc; font-size: 9px; font-weight: 700; text-decoration: none; }
.account-text-link svg { width: 13px; height: 13px; }
.account-catch-feed { display: flex; flex-direction: column; gap: 8px; }
.account-feed-loading { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 15px; border: 1px solid #1e293b; border-radius: 13px; color: #8190a5; background: rgba(15, 23, 42, .55); font-size: 10px; }
.account-feed-loading span { width: 13px; height: 13px; border: 2px solid rgba(45, 212, 191, .2); border-top-color: #2dd4bf; border-radius: 50%; animation: accountSpin .8s linear infinite; }
@keyframes accountSpin { to { transform: rotate(360deg); } }
.account-feed-empty { display: flex; min-height: 165px; flex-direction: column; align-items: center; justify-content: center; padding: 23px; border: 1px dashed rgba(71, 85, 105, .7); border-radius: 15px; text-align: center; background: rgba(13, 21, 35, .52); }
.account-empty-icon { display: grid; width: 37px; height: 37px; place-items: center; margin-bottom: 9px; border: 1px solid #24354a; border-radius: 12px; color: #67e8f9; background: #101d2e; }
.account-empty-icon svg { width: 18px; height: 18px; }
.account-feed-empty strong { color: #e2e8f0; font: 700 12px 'Outfit', sans-serif; }
.account-feed-empty p { max-width: 340px; margin: 5px 0 11px; color: #8190a5; font-size: 9px; line-height: 1.5; }
.account-feed-empty > a { display: inline-flex; align-items: center; gap: 6px; color: #6ee7b7; font-size: 9px; font-weight: 800; text-decoration: none; }
.account-feed-empty > a svg { width: 13px; height: 13px; }
.account-catch-card { display: flex; min-height: 70px; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid rgba(51, 65, 85, .7); border-radius: 13px; background: rgba(13, 21, 35, .78); text-decoration: none; }
.account-catch-card > img, .account-catch-placeholder { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #29394c; border-radius: 10px; color: #67e8f9; background: #0b1726; object-fit: cover; }
.account-catch-placeholder svg { width: 19px; height: 19px; }
.account-catch-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.account-catch-copy strong { overflow: hidden; color: #e2e8f0; font: 700 11px 'Outfit', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.account-catch-copy small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: #8290a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-catch-copy small svg { width: 11px; height: 11px; flex: 0 0 auto; color: #34d399; }
.account-catch-arrow { width: 15px; height: 15px; color: #65768e; }
.account-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 0; color: #64748b; font-size: 8px; }
.account-footnote svg { width: 13px; height: 13px; color: #34d399; }
.account-nav-backdrop { display: none; }
body.account-nav-open { overflow: hidden; }
body.account-subpage .account-subpage-content { width: min(1440px, calc(100% - 292px)); max-width: none; margin-left: 292px; margin-right: auto; }
.account-subfooter { width: 100%; flex: 0 0 auto; margin-top: auto; border-top: 1px solid rgba(51, 65, 85, .55); background: rgba(2, 6, 23, .84); color: #718096; font-size: 10px; }
.account-subfooter-inner { display: flex; width: min(1440px, 100%); min-height: 48px; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 auto; padding: 10px 22px; }
.account-subfooter nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 16px; }
.account-subfooter a { color: #93a4ba; text-decoration: none; transition: color .15s ease; }
.account-subfooter a:hover { color: #5eead4; }
body.account-panel-page > .account-subfooter { width: calc(100% - 292px); margin-left: 292px; }
.account-mobile-toolbar { display: none; }
.membership-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: -18px auto 32px; padding: 0; list-style: none; }
.membership-steps li { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(51, 65, 85, .8); border-radius: 16px; background: rgba(15, 23, 42, .72); }
.membership-steps li > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(45, 212, 191, .3); border-radius: 11px; color: #5eead4; background: rgba(20, 184, 166, .12); font: 800 15px 'Outfit', sans-serif; }
.membership-steps li div { display: grid; gap: 4px; }
.membership-steps strong { color: #e8eef7; font-size: 14px; line-height: 1.35; }
.membership-steps small { color: #9aa9bd; font-size: 12px; line-height: 1.45; }
body.membership-page #package-card-city p, body.membership-page #package-card-region p, body.membership-page #package-card-full p { font-size: 14px; line-height: 1.55; }
body.membership-page #package-card-city ul, body.membership-page #package-card-region ul, body.membership-page #package-card-full ul { font-size: 14px; line-height: 1.5; }
body.membership-page #package-card-city label, body.membership-page #package-card-region label { font-size: 13px; line-height: 1.45; }
body.membership-page #package-card-city select, body.membership-page #package-card-region select { min-height: 48px; font-size: 14px; }
body.membership-page #package-card-city button, body.membership-page #package-card-region button, body.membership-page #package-card-full button { min-height: 50px; font-size: 14px; }
body.membership-page { font-family: 'Montserrat', sans-serif; }
.membership-hero h1 { letter-spacing: -.045em; }
.membership-hero-cta { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 0 22px; border: 1px solid rgba(45,212,191,.45); border-radius: 10px; color: #f8fafc; background: linear-gradient(110deg,#0f9f78,#0d9488); box-shadow: 0 8px 24px rgba(13,148,136,.2); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.membership-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.membership-hero-cta svg { width: 17px; height: 17px; transition: transform .2s ease; }
.membership-hero-cta:hover svg { transform: translate(2px,2px); }
.membership-trust-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 auto 38px; }
.membership-trust-grid article { display: flex; min-width: 0; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid rgba(51,65,85,.8); border-radius: 16px; background: rgba(15,23,42,.7); }
.membership-trust-grid article > svg { width: 21px; height: 21px; flex: 0 0 auto; color: #5eead4; }
.membership-trust-grid article div { display: grid; gap: 4px; }
.membership-trust-grid article strong { color: #f1f5f9; font-size: 14px; font-weight: 700; }
.membership-trust-grid article span { color: #9aa9bd; font-size: 13px; line-height: 1.5; }
.membership-faq { max-width: 980px; margin: 0 auto 44px; }
.membership-faq-heading { margin-bottom: 15px; }
.membership-faq-heading > span { color: #5eead4; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.membership-faq-heading h2 { margin-top: 5px; color: #f8fafc; font: 700 24px/1.3 'Outfit',sans-serif; }
.membership-faq details { margin-top: 9px; overflow: hidden; border: 1px solid #26354a; border-radius: 13px; background: rgba(15,23,42,.74); }
.membership-faq summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; color: #e7edf6; cursor: pointer; font-size: 15px; font-weight: 700; list-style: none; }
.membership-faq summary::-webkit-details-marker { display: none; }
.membership-faq summary svg { width: 18px; height: 18px; flex: 0 0 auto; color: #67e8d2; transition: transform .18s ease; }
.membership-faq details[open] summary svg { transform: rotate(180deg); }
.membership-faq details p { margin: 0; padding: 0 17px 17px; color: #aab8c9; font-size: 14px; line-height: 1.7; }

.membership-sticky-bar { display: none !important; }
.catch-report-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.catch-report-guide li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #27364a; border-radius: 13px; background: #0b1422; list-style: none; }
.catch-report-guide b { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #051b18; background: #5eead4; font: 800 13px 'Outfit', sans-serif; }
.catch-report-guide span { color: #cbd5e1; font-size: 12px; font-weight: 650; line-height: 1.4; }
.catch-report-form { font-size: 15px; }
.catch-report-form label { font-size: 14px !important; line-height: 1.45; }
.catch-report-form input:not([type=file]):not([type=hidden]), .catch-report-form select, .catch-report-form textarea { min-height: 46px; font-size: 15px; }
.catch-report-form textarea { min-height: 78px; }
.catch-report-form button[type=submit] { min-height: 52px; font-size: 15px; }
.legal-modal[hidden] { display: none !important; }
.legal-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); }
.legal-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2, 6, 23, .82); backdrop-filter: blur(8px); }
.legal-modal-panel { position: relative; display: flex; width: min(100%, 1080px); max-height: min(92dvh, 980px); min-height: min(540px, 88dvh); flex-direction: column; overflow: hidden; border: 1px solid rgba(94, 234, 212, .25); border-radius: 24px; outline: none; background: linear-gradient(150deg, #101b2c, #070d18 72%); box-shadow: 0 32px 100px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.05); }
.legal-modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; border-bottom: 1px solid rgba(71,85,105,.55); background: rgba(8,15,27,.9); }
.legal-modal-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #67e8d2; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.legal-modal-eyebrow svg { width: 15px; height: 15px; }
.legal-modal-header h2 { margin: 7px 0 0; color: #f8fafc; font: 800 24px/1.25 'Outfit',sans-serif; }
.legal-modal-header p { margin: 5px 0 0; color: #9aa9bd; font-size: 14px; }
.legal-modal-close { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid #334155; border-radius: 14px; color: #cbd5e1; background: #172235; }
.legal-modal-close:hover { color: white; border-color: #5eead4; }
.legal-modal-close svg { width: 20px; height: 20px; }
.legal-modal-status { padding: 24px 28px; color: #bdcadd; font-size: 15px; }
.legal-modal-retry { margin-left: 8px; color: #5eead4; font-weight: 750; text-decoration: underline; }
.legal-modal-content { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 22px 26px; background: linear-gradient(145deg, rgba(6,13,24,.98), rgba(9,18,31,.98)); }
.legal-modal-content > main.legal-document-surface { width: 100%; max-width: none; min-height: 100%; margin: 0; padding: 22px 28px 32px; border: 1px solid rgba(71,85,105,.58); border-radius: 20px; background: linear-gradient(155deg, rgba(17,29,47,.82), rgba(9,16,29,.9)); box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); }
.legal-modal-content > main > div:first-child { margin-bottom: 18px; }
.legal-modal-content > main > div:first-child h1 { font-size: 28px; line-height: 1.2; }
.legal-modal-content > main > div:first-child p { margin-top: 7px; font-size: 15px; line-height: 1.65; }
.legal-modal-content > main > div:nth-child(2) { position: sticky; top: -22px; z-index: 2; flex-wrap: nowrap; overflow-x: auto; padding: 12px 0; border-bottom: 1px solid #273449; background: #0b1422; scrollbar-width: thin; }
.legal-modal-content > main > div:nth-child(2) button { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 13px; }
.legal-modal-content article { padding: 24px; font-size: 15px !important; line-height: 1.75 !important; }
.legal-modal-content article h2 { font-size: 21px !important; line-height: 1.4; }
.legal-modal-content article h3 { font-size: 16px !important; line-height: 1.5; }
.legal-modal-content article p, .legal-modal-content article li { font-size: 15px !important; line-height: 1.75 !important; }
.legal-modal-content article .text-xs { font-size: 14px !important; line-height: 1.65 !important; }
.legal-modal-content .legal-tab-active { border-color: rgba(45,212,191,.45) !important; color: #99f6e4 !important; background: rgba(13,148,136,.16) !important; }
body.legal-modal-open { overflow: hidden; }
@media (max-width: 640px) {
    .legal-modal { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
    .legal-modal-panel { width: 100%; max-height: 96dvh; min-height: 78dvh; border-radius: 19px; }
    .legal-modal-header { padding: 17px 16px; }
    .legal-modal-header h2 { font-size: 20px; }
    .legal-modal-header p { max-width: 260px; font-size: 13px; }
    .legal-modal-close { width: 40px; height: 40px; }
    .legal-modal-content { padding: 10px 10px 16px; }
    .legal-modal-content > main.legal-document-surface { padding: 16px 14px 24px; border-radius: 16px; }
    .legal-modal-content > main > div:first-child h1 { font-size: 23px; }
    .legal-modal-content > main > div:first-child p { font-size: 14px; }
    .legal-modal-content > main > div:nth-child(2) { top: -16px; gap: 7px; }
    .legal-modal-content > main > div:nth-child(2) button { min-height: 42px; padding: 9px 12px; font-size: 12px; }
    .legal-modal-content article { padding: 18px 16px; border-radius: 19px; }
    .legal-modal-content article h2 { font-size: 18px !important; }
    .legal-modal-content article h3 { font-size: 15px !important; }
    .legal-modal-content article p, .legal-modal-content article li { font-size: 14px !important; }
}
@media (max-width: 900px) {
    .account-sidebar { transform: translateX(-100%); transition: transform .24s ease; box-shadow: 20px 0 55px rgba(0,0,0,.4); }
    .account-sidebar.is-open { transform: translateX(0); }
    .account-main { width: 100%; margin-left: 0; }
    .account-mobile-toolbar { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 56; display: flex; max-width: calc(100vw - 24px); align-items: stretch; gap: 8px; transition: opacity .18s ease, transform .18s ease; }
    .account-sidebar-launcher { position: static; display: inline-flex; min-height: 48px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #2b4056; border-radius: 15px; color: #e2e8f0; background: rgba(8, 15, 27, .96); box-shadow: 0 8px 24px rgba(0,0,0,.32); font-size: 14px; font-weight: 750; }
    .account-sidebar-launcher svg { width: 18px; height: 18px; color: #5eead4; }
    .account-weather-chip { display: flex; flex: 1 1 auto; min-width: 0; max-width: none; min-height: 50px; align-items: center; gap: 10px; padding: 5px 12px 5px 8px; border: 1px solid rgba(45, 212, 191, .28); border-radius: 15px; color: #e2e8f0; background: rgba(8, 15, 27, .96); box-shadow: 0 8px 24px rgba(0,0,0,.32); backdrop-filter: blur(14px); }
    .account-weather-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(45, 212, 191, .25); border-radius: 12px; color: #5eead4; background: rgba(20, 184, 166, .12); }
    .account-weather-icon svg { width: 23px; height: 23px; stroke-width: 2.2; }
    .account-weather-copy { display: grid; min-width: 0; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; line-height: 1.15; }
    .account-weather-copy small { grid-column: 1 / -1; overflow: hidden; color: #7dd3c7; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
    .account-weather-copy strong { color: #f8fafc; font: 800 20px 'Outfit', sans-serif; }
    .account-weather-copy > span { overflow: hidden; color: #aab8c9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    body.account-nav-open .account-mobile-toolbar { visibility: hidden; opacity: 0; transform: translateY(-5px); pointer-events: none; }
    .account-nav-backdrop.is-visible { position: fixed; inset: 0; z-index: 55; display: block; background: rgba(2, 6, 23, .68); backdrop-filter: blur(3px); }
    .account-content { padding-top: 72px; }
    body.account-panel-page > .account-subfooter { width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
    .membership-steps { grid-template-columns: 1fr; gap: 8px; margin: -18px auto 24px; }
    .membership-steps li { padding: 11px 13px; }
    .catch-report-guide { grid-template-columns: 1fr; gap: 7px; }
    .account-content { padding: 72px 15px 28px; }
    .account-welcome { align-items: flex-start; flex-direction: column; gap: 14px; }
    .account-welcome h1 { font-size: 27px; }
    .account-primary-button { width: 100%; }
    .account-summary-grid { grid-template-columns: 1fr; gap: 8px; }
    .account-summary-card { padding: 12px; }
    .account-action-grid { grid-template-columns: 1fr; gap: 8px; }
    .account-action-card { min-height: 75px; padding: 12px; }
    .account-section-heading h2 { font-size: 17px; }
}
@media (max-width: 900px) {
    .account-sidebar-subpage { z-index: 60; }
    body.account-subpage .account-subpage-content { width: 100%; margin: 0; }
    body.account-subpage .account-subpage-content { padding-top: 72px; }
    body.account-subpage .account-subfooter-inner { padding-inline: 15px; }
}
@media (max-width: 640px) {
    .account-subfooter-inner { justify-content: center; padding: 12px 15px; text-align: center; }
}
.admin-app-page { display: flex !important; flex-direction: column !important; min-height: 100vh !important; min-height: 100dvh !important; background: #f4f6fa !important; color: #1e293b !important; }
.admin-shell { display: flex !important; flex-direction: row !important; flex: 1 0 auto !important; min-height: 100vh !important; min-height: 100dvh !important; width: 100% !important; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; width: 276px; flex-direction: column; padding: 20px 15px 16px; border-right: 1px solid #e2e8f0; background: #ffffff; box-shadow: 2px 0 16px rgba(15, 23, 42, 0.03); }
.admin-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-sidebar-brand { display: flex; min-width: 0; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.admin-sidebar-mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid #a7f3d0; border-radius: 14px; color: #059669; background: #ecfdf5; }
.admin-sidebar-mark svg { width: 21px; height: 21px; }
.admin-sidebar-brand strong,.admin-sidebar-brand small,.admin-sidebar-user strong,.admin-sidebar-user small { display: block; }
.admin-sidebar-brand strong { color: #0f172a; font: 800 13px 'Outfit',sans-serif; letter-spacing: .025em; }
.admin-sidebar-brand strong span { color: #059669; }
.admin-sidebar-brand small { margin-top: 4px; color: #64748b; font-size: 11px; }
.admin-sidebar-close { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid #cbd5e1; border-radius: 12px; color: #475569; background: #f8fafc; }
.admin-sidebar-user { display: flex; align-items: center; gap: 11px; margin-top: 23px; padding: 13px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
.admin-sidebar-user-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid #bae6fd; border-radius: 12px; color: #0284c7; background: #f0f9ff; }
.admin-sidebar-user-icon svg { width: 19px; height: 19px; }
.admin-sidebar-user strong { overflow: hidden; max-width: 175px; color: #0f172a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-user small { margin-top: 3px; color: #64748b; font-size: 11px; }
.admin-sidebar-nav { display: grid; gap: 6px; margin-top: 25px; }
.admin-sidebar-label { padding: 0 10px 5px; color: #94a3b8; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.admin-sidebar-nav a,.admin-sidebar-site,.admin-sidebar-logout { display: flex; min-height: 46px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 13px; color: #475569; font-size: 13px; font-weight: 650; text-decoration: none; transition: .16s ease; }
.admin-sidebar-nav a:hover,.admin-sidebar-site:hover { border-color: #cbd5e1; color: #0f172a; background: #f1f5f9; }
.admin-sidebar-nav a.is-active { border-color: #a7f3d0; color: #047857; background: #ecfdf5; font-weight: 700; }
.admin-sidebar-nav a > svg:first-child,.admin-sidebar-site > svg,.admin-sidebar-logout > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #64748b; }
.admin-sidebar-nav a.is-active > svg:first-child { color: #059669; }
.admin-sidebar-nav a span,.admin-sidebar-site span,.admin-sidebar-logout span { flex: 1; }
.admin-sidebar-nav .admin-sidebar-arrow { width: 15px; height: 15px; color: #94a3b8; opacity: 0; }
.admin-sidebar-nav a:hover .admin-sidebar-arrow,.admin-sidebar-nav a.is-active .admin-sidebar-arrow { opacity: 1; }
.admin-sidebar-bottom { display: grid; gap: 7px; margin-top: auto; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.admin-sidebar-logout { color: #e11d48; }
.admin-sidebar-logout > svg { color: #e11d48; }
.admin-sidebar-logout:hover { border-color: #fecdd3; background: #fff1f2; }
.admin-main-shell { display: flex !important; width: calc(100% - 276px) !important; min-height: 100vh !important; min-height: 100dvh !important; flex: 1 0 auto !important; flex-direction: column !important; margin-left: 276px !important; }
.admin-main-shell > main { flex: 1 0 auto !important; width: 100% !important; }
.admin-subfooter { display: flex !important; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px 22px; margin-top: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; padding: 12px clamp(16px,3vw,36px); border-top: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-size: 11px; width: 100% !important; }
.admin-subfooter nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.admin-subfooter a { color: #475569; text-decoration: none; }
.admin-subfooter a:hover { color: #059669; }
.admin-sidebar-launcher,.admin-sidebar-backdrop { display: none; }
@media (max-width: 900px) {
    .admin-sidebar { width: min(310px, 88vw); padding-top: max(16px, env(safe-area-inset-top)); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(15, 23, 42, 0.15); }
    .admin-sidebar.is-open { transform: translateX(0); }
    .admin-sidebar-close { display: grid; }
    .admin-main-shell { width: 100% !important; margin-left: 0 !important; }
    .admin-main-shell > main { padding-top: 76px !important; }
    .admin-sidebar-launcher { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 60; display: inline-flex; min-height: 46px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #cbd5e1; border-radius: 14px; color: #0f172a; background: #ffffff; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08); font-size: 13px; font-weight: 750; }
    .admin-sidebar-launcher svg { width: 18px; height: 18px; color: #059669; }
    .admin-sidebar-backdrop.is-visible { position: fixed; inset: 0; z-index: 65; display: block; border: 0; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(2px); }
    body.admin-nav-open .admin-sidebar-launcher { visibility: hidden; opacity: 0; pointer-events: none; }
}
@media (max-width: 640px) {
    .admin-subfooter { align-items: center; flex-direction: column; padding: 14px 15px; text-align: center; }
    .admin-subfooter nav { justify-content: center; gap: 9px 13px; }
}

/* Admin Panel Kart ve Yüzey Stilleri (Taşmayan, Temiz, Modern) */
.admin-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
    color: #1e293b !important;
}
.admin-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    -webkit-overflow-scrolling: touch;
}
.admin-table-container table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.admin-table-container th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
}
.admin-table-container td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}
.admin-table-container tr:last-child td {
    border-bottom: none !important;
}
.admin-table-container tr:hover td {
    background: #fafafa !important;
}
@media (min-width: 901px) {
    .account-panel-sidebar-toggle { display: none !important; }
}
@media (max-width: 900px) {
    .account-panel-sidebar-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* Panel sayfalarında ortak ölçüler, rahat okuma ve tek tip gezinme */
.account-nav-primary { display: flex; flex-direction: column; gap: 7px; }
.account-nav-label { font-size: 11px; }
.account-nav-link { min-height: 52px; font-size: 14px; }
.account-user-card strong { font-size: 14px; }
.account-user-card span { font-size: 11px; }
.account-user-card .account-scope-badge { font-size: 11px; }
.account-logout { min-height: 46px; font-size: 14px; }
.account-content { width: min(1440px, 100%); margin: 0; }
.account-welcome p { font-size: 15px; line-height: 1.6; }
.account-eyebrow { font-size: 11px; }
.account-summary-card small { font-size: 12px; }
.account-summary-card strong { font-size: 17px; }
.account-summary-card span { font-size: 14px; }
.account-section-heading h2 { font-size: 22px; }
.account-action-copy strong { font-size: 17px; }
.account-action-copy small { font-size: 14px; line-height: 1.5; }
.account-catch-copy strong { font-size: 15px; }
.account-catch-copy small { font-size: 12px; }
.account-text-link { font-size: 12px; }
.account-footnote { font-size: 13px; }
body.account-subpage .account-subpage-content {
    width: calc(100% - 292px);
    max-width: none;
    margin-left: 292px;
    margin-right: 0;
    padding: clamp(30px, 4vw, 52px) clamp(22px, 4vw, 54px) 44px;
}
body.account-subpage main h1 {
    font-size: clamp(28px, 2.8vw, 38px) !important;
    line-height: 1.2;
}
body.account-subpage main h2 { font-size: 23px; line-height: 1.3; }
body.account-subpage main p,
body.account-subpage main li,
body.account-subpage main label,
body.account-subpage main input,
body.account-subpage main select,
body.account-subpage main textarea { font-size: 15px; line-height: 1.6; }
body.account-subpage main .text-xs { font-size: 14px !important; }
body.account-subpage main .text-\[11px\],
body.account-subpage main .text-\[10px\] { font-size: 13px !important; }
body.account-subpage main button,
body.account-subpage main [role="button"],
body.account-subpage main input[type="submit"],
body.account-subpage main input[type="button"] { font-size: 15px !important; line-height: 1.35; }
body.account-subpage main button.text-xs,
body.account-subpage main [role="button"].text-xs,
body.account-subpage main input[type="submit"].text-xs { font-size: 15px !important; }
.account-subfooter { font-size: 14px; }
.account-subfooter-inner { width: min(1440px, 100%); min-height: 60px; padding: 14px 22px; }
.account-subfooter nav { gap: 10px 20px; }
.account-subfooter a { font-weight: 600; }

/* Uygulama genelinde ortak buton tipografisi ve renk ailesi */
body button,
body input[type="submit"],
body input[type="button"] {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
.account-primary-button { min-height: 50px; font-size: 16px; }
.account-text-link { font-size: 14px; }
button[class*="bg-emerald"], button[class*="bg-teal"], button[class*="bg-cyan"],
button[class*="bg-green"], button[class*="bg-blue"], button[class*="bg-indigo"],
button[class*="bg-purple"], button[class*="bg-amber"], button[class*="from-emerald"],
button[class*="from-cyan"] {
    border-color: rgba(52, 211, 153, .55) !important;
    color: #05221c !important;
    background: linear-gradient(115deg, #34d399, #2dd4bf) !important;
}
button[class*="bg-emerald"]:hover, button[class*="bg-teal"]:hover, button[class*="bg-cyan"]:hover,
button[class*="bg-green"]:hover, button[class*="bg-blue"]:hover, button[class*="bg-indigo"]:hover,
button[class*="bg-purple"]:hover, button[class*="bg-amber"]:hover, button[class*="from-emerald"]:hover,
button[class*="from-cyan"]:hover { filter: brightness(1.08); }
button[class*="bg-slate"], button[class*="bg-gray"], button[class*="bg-zinc"] {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    background: #1e293b !important;
}
button[class*="bg-slate"]:hover, button[class*="bg-gray"]:hover, button[class*="bg-zinc"]:hover {
    border-color: #64748b !important;
    background: #334155 !important;
}

@media (max-width: 900px) {
    body.account-subpage .account-subpage-content { width: 100%; max-width: none; margin: 0; padding: 76px 22px 36px; }
    .account-subfooter-inner { width: 100%; }
}
@media (max-width: 640px) {
    .account-nav-link { min-height: 54px; font-size: 15px; }
    .account-content { padding: 76px 18px 30px; }
    .account-welcome p { font-size: 14px; }
    .account-summary-card strong { font-size: 15px; }
    .account-summary-card span { font-size: 12px; }
    body.account-subpage .account-subpage-content { padding: 76px 16px 30px; }
    .account-subfooter-inner { flex-direction: column; gap: 9px; padding: 14px 16px; }
    .account-subfooter nav { gap: 10px 14px; }
}

/* Mera Pin Hover Kartı: Modern, Açık Temaya Uygun ve Tasarımsal */
.leaflet-tooltip.spot-wx-tooltip,
.leaflet-tooltip.locked-spot-tooltip-shell {
    background: #ffffff !important;
    border: 1px solid #dce4eb !important;
    border-radius: 16px !important;
    padding: 0 !important;
    color: #1e293b !important;
    box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    white-space: normal !important;
    width: 244px !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

.leaflet-tooltip.spot-wx-tooltip::before,
.leaflet-tooltip.locked-spot-tooltip-shell::before {
    border-top-color: #ffffff !important;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12)) !important;
}

.spot-hover-card {
    padding: 12px 13px 10px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    animation: spotHoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spotHoverIn {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.spot-hover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 7px;
}

.spot-hover-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 7.5px;
    border-radius: 9999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.spot-hover-badge.is-vip {
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    color: #ea580c !important;
}

.spot-hover-badge.is-vip svg {
    stroke: #ea580c !important;
}

.spot-hover-badge.is-free {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #059669 !important;
}

.spot-hover-badge.is-free svg {
    stroke: #059669 !important;
}

.spot-hover-region {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

.spot-hover-title {
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.spot-hover-species {
    margin-bottom: 8px;
}

.spot-hover-species-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
}

.spot-hover-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.spot-hover-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #15803d;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
}

.spot-hover-chip svg {
    stroke: #16a34a;
}

.spot-hover-features {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 6px;
    margin-bottom: 8px;
    border-top: 1px dashed #e2e8f0;
}

.spot-hover-feat {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
}

.spot-hover-feat svg {
    stroke: #0d9488;
}

.spot-hover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    color: #0d9488;
    transition: background 0.15s ease;
}

.spot-hover-footer svg {
    stroke: #0d9488;
}

/* Canlı Hava Durumu Kartı (Mera Üyeliği Açık Kullanıcı İçin) */
.spot-wx-card {
    width: 244px;
    padding: 11px 12px 9px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    animation: spotHoverIn 0.18s ease-out;
}

.spot-wx-header {
    margin-bottom: 8px;
}

.spot-wx-title {
    display: flex;
    flex-direction: column;
    gap: 1.5px;
    margin-bottom: 5px;
}

.spot-wx-title strong {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.spot-wx-title span {
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.spot-wx-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: 9999px;
    padding: 2.5px 8px;
    width: fit-content;
}

.spot-wx-time-pill svg {
    stroke: #059669;
    flex-shrink: 0;
}

.spot-wx-days,
.spot-wx-foot {
    display: none !important;
}

.spot-wx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.spot-wx-cell {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 7px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.spot-wx-cell small {
    font-size: 8.5px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.spot-wx-cell b {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 1px 0;
}

.spot-wx-cell em {
    font-style: normal;
    font-size: 9px;
    color: #64748b;
}

.spot-wx-cell.wind b { color: #059669; }
.spot-wx-cell.wave b { color: #0284c7; }
.spot-wx-cell.sst b { color: #ea580c; }
.spot-wx-cell.press b { color: #7c3aed; }

.spot-wx-days {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 6px;
}

.spot-wx-day {
    background: #f8fafc;
    border-radius: 6px;
    padding: 3px 4px;
    text-align: center;
    font-size: 9px;
    display: flex;
    flex-direction: column;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.spot-wx-day b {
    color: #0f172a;
    font-size: 9.5px;
    font-weight: 700;
}

.spot-wx-foot {
    margin-top: 6px;
    font-size: 8.5px;
    color: #94a3b8;
    text-align: center;
    font-weight: 600;
}

.spot-wx-loading {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #64748b;
    padding: 4px 0 2px;
}

.spot-wx-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(13, 148, 136, .2);
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: spotWxSpin .7s linear infinite;
}
@keyframes spotWxSpin { to { transform: rotate(360deg); } }

/* ====================================================================
   MOBİL YAN MENÜ (Mat, Kolay Okunur & Göz Yormayan)
   ==================================================================== */
.mobile-drawer-backdrop {
    position: fixed; inset: 0; z-index: 1099;
    background: rgba(11, 15, 23, 0.7);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
    width: min(86vw, 340px);
    display: flex; flex-direction: column;
    background: #0f172a;
    border-left: 1px solid #1e293b;
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.65);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(105%);
    transition: transform .25s cubic-bezier(.22, .9, .3, 1);
    will-change: transform;
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-grid { gap: 6px; }
.drawer-tile {
    min-height: 54px;
    padding: 8px 5px;
    gap: 4px;
    font-size: 11px;
}
.drawer-tile svg { width: 17px; height: 17px; }
.drawer-section { padding-top: 9px; padding-bottom: 9px; }
.drawer-label { margin-bottom: 7px; }
.drawer-species { padding: 8px 9px; }
#mobileSideDrawer .drawer-primary-links,
.drawer-primary-links { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
#mobileSideDrawer .drawer-primary-link,
.drawer-primary-link {
    min-height: 46px !important;
    width: 100% !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 0 12px !important; border: 1px solid rgba(51, 65, 85, 0.75) !important; border-radius: 14px !important;
    box-sizing: border-box !important;
    text-decoration: none !important; transition: all 0.18s ease !important;
}
.drawer-primary-link:hover { background: rgba(30, 41, 59, 0.95); border-color: rgba(6, 182, 212, 0.5); color: #ffffff; transform: translateX(2px); }
.drawer-primary-link:active { transform: scale(0.98); }
.drawer-vip-link { color: #fde68a !important; border-color: rgba(245, 158, 11, 0.4) !important; background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.9)) !important; }
.drawer-vip-link:hover { border-color: rgba(245, 158, 11, 0.7) !important; color: #ffffff !important; }
.mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 14px 12px; border-bottom: 1px solid #1e293b;
}
.drawer-profile { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 4px; border-radius: 12px; transition: background .15s; }
.drawer-profile:active { background: #1e293b; }
.drawer-avatar {
    width: 42px; height: 42px; border-radius: 9999px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #1e293b; border: 1px solid #334155;
}
.drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-profile-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-profile-sub { font-size: 11px; color: #34d399; font-weight: 600; }
.drawer-close { position:relative; z-index:1; pointer-events:auto; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #1e293b; color: #94a3b8; flex-shrink: 0; border: 1px solid #334155; }
.drawer-close:hover { color: #fff; background: #334155; }
.mobile-drawer-body { flex: 1; overflow-y: auto; padding: 6px 14px 18px; -webkit-overflow-scrolling: touch; }
.drawer-section { padding: 12px 0; border-bottom: 1px solid #1e293b; }
.drawer-section:last-child { border-bottom: 0; }
.drawer-label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 9px; }
.drawer-label i, .drawer-label svg { color: #10b981; }
.drawer-species {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px;
    border-radius: 12px; background: #1e293b; border: 1px solid #334155;
    transition: border-color .15s, transform .1s;
}
.drawer-species:active { transform: scale(.98); border-color: #10b981; }
.drawer-species-icon { width: 34px; height: 34px; border-radius: 8px; background: #0f172a; border: 1px solid #334155; color: #34d399; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.drawer-chip-btn { font-size: 10.5px; font-weight: 700; color: #fff; background: #047857; padding: 4px 9px; border-radius: 9999px; flex-shrink: 0; }
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 6px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #cbd5e1;
    background: #1e293b; border: 1px solid #334155;
    transition: all .15s ease;
}
.drawer-tile:active { transform: scale(.97); }
.drawer-tile[data-map-mode="satellite"] svg { color: #34d399; }
.drawer-tile[data-map-mode="streets"] svg { color: #60a5fa; }
.drawer-tile[data-map-mode="wind"] svg { color: #2dd4bf; }
.drawer-tile[data-map-mode="traffic"] svg { color: #fbbf24; }
.drawer-tile.is-active { background: #0f172a; color: #34d399; border-color: #10b981; }
.drawer-tile.is-active.is-overlay { background: #0f172a; color: #38bdf8; border-color: #0284c7; }
.drawer-tile.is-active svg { color: inherit !important; }
.drawer-basins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.drawer-basin {
    padding: 8px 4px; border-radius: 9999px; font-size: 11.5px; font-weight: 600; color: #cbd5e1;
    background: #1e293b; border: 1px solid #334155; transition: all .15s; text-align: center;
}
.drawer-basin:active { transform: scale(.96); }
.drawer-basin.is-active { background: #0f172a; color: #34d399; border-color: #10b981; }
.drawer-report {
    margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: #38bdf8;
    background: #1e293b; border: 1px solid #334155;
}
.drawer-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.drawer-tool-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
    text-align: left;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}
.drawer-tool-card:active {
    transform: scale(0.98);
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(16, 185, 129, 0.6);
}
.drawer-tool-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.drawer-tool-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.drawer-tool-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.drawer-tool-desc {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.2;
}

/* Oceanic UI Glass Accents */
.ocean-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* ====================================================================
   BROWSER & APP TOP/BOTTOM MATTE FADE
   ==================================================================== */
.browser-ocean-gradient-top {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(11, 15, 23, 0.85) 0%, rgba(11, 15, 23, 0.4) 60%, rgba(11, 15, 23, 0) 100%);
    pointer-events: none;
    z-index: 20;
}

.browser-ocean-gradient-bottom {
    display: none !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(70px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(11, 15, 23, 0.85) 0%, rgba(11, 15, 23, 0) 100%);
    pointer-events: none;
    z-index: 20;
}

/* ====================================================================
   NAVIONICS, WINDY VE MARINETRAFFIC / AIS KATMAN STİLLERİ
   ==================================================================== */

/* 1. AIS Canlı Gemi İkonları (Ultra-Hafif Vektör Stili) */
.ais-vessel-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ais-vessel-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ais-vessel-marker:hover .ais-vessel-icon {
    transform: scale(1.2);
    transition: transform 0.15s ease;
}

.vessel-badge-fishing {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.vessel-badge-cargo {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.vessel-badge-tanker {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.vessel-badge-passenger {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

/* Gırgır & Trol Kümelenmesi Radar Sinyali (Hafifletilmiş) */
@keyframes cluster-pulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.fishing-cluster-pulse {
    animation: cluster-pulse 2s infinite ease-in-out;
}

/* Fishing fleet clusters use the same restrained sea-glass palette as map pins. */
.fishing-cluster-pulse {
    border-color: #557b72 !important;
    background: rgba(91, 133, 122, .18) !important;
    box-shadow: none !important;
}
.fishing-cluster-pulse > div {
    border: 1px solid #557b72 !important;
    background: #638b80 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 2. Windy Rüzgar & Dalga Canvası */
.windy-canvas-container {
    pointer-events: none !important;
    position: absolute;
    inset: 0;
    z-index: 450 !important;
}

/* 3. Navionics Derinlik Kontur Skalası & Bilgi Bandı (Mat & Göz Yormayan) */
.navionics-legend {
    background: #0f172a;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.depth-step-shallow {
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
}
.depth-step-lrf {
    background: linear-gradient(90deg, #06b6d4, #0284c7);
}
.depth-step-dropoff {
    background: linear-gradient(90deg, #0284c7, #2563eb);
}
.depth-step-deep {
    background: linear-gradient(90deg, #2563eb, #1e1b4b);
}

/* 4. Google Maps Platform & Place Picker Stilleri */
gmpx-place-picker {
    --gmpx-color-surface: #0f172a;
    --gmpx-color-on-surface: #f1f5f9;
    --gmpx-color-on-surface-variant: #94a3b8;
    --gmpx-color-primary: #10b981;
    --gmpx-color-outline: #334155;
    --gmpx-font-family-base: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --gmpx-font-size-base: 12px;
    width: 100%;
    min-height: 38px;
    border-radius: 0.75rem;
    overflow: hidden;
}

gmpx-place-picker input {
    font-size: 12px !important;
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ====================================================================
   SADE, ZARİF GLASS CAM & AKIŞKAN LOADER STİLLERİ
   ==================================================================== */
.glass-loader {
    background: rgba(11, 19, 36, 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6), inset 0 1px 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.glass-fluid-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.18);
    border-top-color: #38bdf8;
    animation: fluidSpin 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes fluidSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.glass-fluid-shimmer {
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.85) 0%, rgba(56, 189, 248, 1) 50%, rgba(226, 232, 240, 0.85) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fluidShimmer 2.4s ease-in-out infinite;
}

@keyframes fluidShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ====================================================================
   BÖLGE / HAVZA BUTONLARI (Mat, Sade & Göz Yormayan)
   ==================================================================== */
.basin-island-btn {
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    margin-right: 0.35rem;
    user-select: none;
}
.basin-island-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #ffffff;
}
.basin-island-btn.is-active {
    background: #0f172a !important;
    border-color: #0284c7 !important;
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

/* Merada Çoklu Tür Seçim Rozetleri (Tek Satır, Asla Bölünmez) */
.spot-species-chip {
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
#sheetSpeciesChips {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
#sheetSpeciesChips > .spot-species-chip { flex: 0 0 auto; }
#sheetSpeciesChips::-webkit-scrollbar { height: 4px; }
#sheetSpeciesChips::-webkit-scrollbar-thumb { border-radius: 999px; background: #334155; }
.spot-species-chip:hover {
    background: #334155;
    border-color: #475569;
    color: #ffffff;
}
.spot-species-chip.is-active {
    background: #064e3b !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Harita Popup İçindeki Tıklanabilir Tür Butonları (2 Sütunlu Grid & Tam Görünür Yapı) */
.spot-popup-species-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.spot-popup-species-grid::-webkit-scrollbar {
    width: 4px;
}
.spot-popup-species-grid::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}

.spot-popup-heading {
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 28px 9px 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.75);
}
.spot-popup-heading__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.spot-popup-code,
.spot-popup-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 7px;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .045em;
}
.spot-popup-code {
    padding: 4px 7px;
    color: #67e8f9;
    background: rgba(8, 145, 178, .12);
    border: 1px solid rgba(34, 211, 238, .28);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.spot-popup-verified {
    padding: 4px 7px;
    color: #6ee7b7;
    background: rgba(5, 150, 105, .12);
    border: 1px solid rgba(52, 211, 153, .24);
}
.spot-popup-verified svg { width: 11px; height: 11px; }
.spot-popup-basin {
    color: #38bdf8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.spot-popup-title {
    margin: 11px 0 4px;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
.spot-popup-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
    color: #aab8cb;
    font-size: 10px;
    line-height: 1.4;
}
.spot-popup-location > svg { width: 12px; height: 12px; color: #22d3ee; flex: 0 0 auto; }
.spot-popup-location__dot { width: 3px; height: 3px; margin: 0 2px; border-radius: 50%; background: #475569; }
.spot-popup-location strong { color: #34d399; font-weight: 700; }
.spot-popup-species-section {
    padding: 10px;
    margin-bottom: 9px;
    border: 1px solid rgba(51, 65, 85, .85);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(2, 10, 24, .96), rgba(7, 15, 30, .94));
}
.spot-popup-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 1px 8px;
}
.spot-popup-section-heading > span { display: flex; align-items: center; gap: 6px; color: #67e8f9; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.spot-popup-section-heading svg { width: 13px; height: 13px; }
.spot-popup-section-heading em { min-width: 17px; padding: 2px 5px; border-radius: 999px; color: #a5f3fc; background: rgba(8, 145, 178, .18); font-size: 8px; font-style: normal; text-align: center; }
.spot-popup-section-heading small { color: #64748b; font-size: 9px; font-weight: 600; }
.spot-popup-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}
.spot-popup-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(51, 65, 85, .72);
    border-radius: 10px;
    background: rgba(15, 23, 42, .78);
}
.spot-popup-fact > svg { width: 14px; height: 14px; flex: 0 0 auto; color: #2dd4bf; }
.spot-popup-fact span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spot-popup-fact small { color: #74849c; font-size: 8px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.spot-popup-fact strong { overflow: hidden; color: #e2e8f0; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.spot-popup-actions { display: flex; align-items: stretch; gap: 7px; }
.spot-popup-action {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
    cursor: pointer;
}
.spot-popup-action svg { width: 14px; height: 14px; flex: 0 0 auto; }
.spot-popup-action:active { transform: scale(.97); }
.spot-popup-action--primary { color: #03251d; background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 5px 14px rgba(16, 185, 129, .18); }
.spot-popup-action--primary:hover { background: linear-gradient(135deg, #6ee7b7, #34d399); }
.spot-popup-action--secondary { color: #dbeafe; border: 1px solid #334155; background: #1e293b; }
.spot-popup-action--secondary:hover { color: #fff; border-color: #0e7490; background: #172b3d; }

.spot-popup-species-btn {
    padding: 0.46rem 0.6rem;
    border-radius: 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: linear-gradient(120deg, #1e293b, #162338);
    border: 1px solid #34445b;
    color: #e8eef7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}
.spot-popup-species-btn:hover {
    background: #102b32;
    border-color: #14b8a6;
    color: #99f6e4;
    box-shadow: 0 3px 10px rgba(20, 184, 166, 0.16);
}
.spot-popup-species-btn:active {
    transform: scale(0.97);
}

/* Meraya dokununca açılan bilgi kutusu: küçük ekranlarda ekrana sığar. */
.oceanic-spot-popup {
    max-width: min(380px, calc(100vw - 48px)) !important;
}
.oceanic-spot-popup .leaflet-popup-content-wrapper {
    width: min(380px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
}
.oceanic-spot-popup .leaflet-popup-content {
    width: auto !important;
    max-width: 100%;
}
.oceanic-spot-popup .spot-leaflet-popup {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 14px;
    max-height: min(68vh, 560px);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.oceanic-spot-popup .spot-leaflet-popup::-webkit-scrollbar { width: 4px; }
.oceanic-spot-popup .spot-leaflet-popup::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; }
@media (max-width: 640px) {
    .oceanic-spot-popup {
        max-width: calc(100vw - 40px) !important;
    }
    .oceanic-spot-popup .leaflet-popup-content-wrapper {
        width: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
    .oceanic-spot-popup .spot-leaflet-popup {
        max-height: min(62vh, 500px);
        padding: 13px !important;
    }
    .spot-popup-species-grid { max-height: 150px; }
}

/* ====================================================================
   BÖLGE & ŞEHİR SEÇİM MODALI (Mat, Temiz, Göz Yormayan Tasarım)
   ==================================================================== */

/* Bölge Kartı (Mat & Sade) */
.basin-select-row {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid #1e293b;
    background: #0f172a;
    transition: all 0.18s ease;
    position: relative;
    overflow: hidden;
}
.basin-select-row:hover {
    border-color: #334155;
    background: #131d33;
}
.basin-select-row.is-active-basin {
    border-color: #475569;
    background: #17233d;
}

/* Şehir Hap Butonu (Mat Slate) */
.city-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    background: #1e293b;
    border: 1px solid #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
    min-height: 36px; /* Apple HIG: minimum 44px idealdir, 36px makul alt sınır */
    -webkit-tap-highlight-color: transparent;
}
.city-pill-btn:hover {
    background: #334155;
    border-color: #475569;
    color: #ffffff;
}
.city-pill-btn:active {
    transform: scale(0.95);
    background: #334155;
}

/* Şehir listeleri masaüstünde de yatay kaydırılabilir. */
#regionWizardModal .mobile-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
    gap: 0.5rem;
    padding-bottom: 4px;
}
#regionWizardModal .mobile-scroll-row > * {
    flex-shrink: 0;
    white-space: nowrap;
}
#regionWizardModal .mobile-scroll-row::-webkit-scrollbar {
    height: 5px;
}
#regionWizardModal .mobile-scroll-row::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}
@media (max-width: 640px) {
    .city-pill-btn {
        padding: 0.5rem 1rem;
        min-height: 40px;
        font-size: 0.82rem;
        border-radius: 9999px;
    }
}

/* ====================================================================
   MODAL VE AÇILIR PENCERELER - EN ÜSTE 50PX KALA DURMA & AKICI ANİMASYON
   ==================================================================== */
.app-modal-container {
    padding-top: 50px !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Mobilde açılır pencere (sheet) dış taşıyıcıları: tam tabana yaslama ve yan boşlukları sıfırlama */
    #encyclopediaModal,
    #speciesModal,
    #speciesTacticalModal,
    #biorhythmModal,
    #lawModal,
    #catchLogModal,
    #recommendationsModal,
    #subscriptionPackagesModal,
    #userCatchHistoryModal,
    #aiAssistantModal,
    #blackSeaReportModal {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: stretch !important;
    }

    /* Mobilde alttan açılan tüm uzun sheetler mera detayları gibi kenarlara tam yayılır,
       üstte profil resmi, hamburger menü ve hava durumunu net gösterecek ferah pay bırakılır */
    .app-modal-card,
    #encyclopediaModal > div,
    #speciesModal > div,
    #speciesModal .species-picker-shell,
    #speciesTacticalModal > div,
    #biorhythmModal > div,
    #lawModal > div,
    #catchLogModal > div,
    #recommendationsModal > div,
    #subscriptionPackagesModal > div,
    #userCatchHistoryModal > div,
    #aiAssistantModal > div,
    #blackSeaReportModal > div {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        box-shadow: 0 -14px 44px rgba(15, 23, 42, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        will-change: transform, opacity;
        animation: appModalSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    /* Mobilde yatay kaydırmalı butonlar ve kutular - 2. satıra düşmeme garantisi */
    .mobile-scroll-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0.5rem !important;
        padding-bottom: 4px !important;
    }
    .mobile-scroll-row::-webkit-scrollbar {
        display: none !important;
    }
    .mobile-scroll-row > * {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

@keyframes appModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Giriş ve Kapanış */
#regionWizardModal {
    transition: opacity 0.22s ease-out, visibility 0.22s ease-out;
}
#regionWizardModal.closing {
    opacity: 0;
    pointer-events: none;
}
#regionWizardModal > div {
    animation: wizardModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wizardModalPop {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ====================================================================
   AVLANACAĞINIZ BÖLGEYİ SEÇİN (REGION WIZARD) - MOBİLDE ALTTAN AÇILAN SHEET
   ==================================================================== */
@keyframes regionWizardSheetSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes regionWizardSheetSlideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Mera Seçimi Sheet'i En Üst Uyarı Bandı (Temadaki Zümrüt Yeşili, Tek Renk Bütünlüğü) */
#regionWizardUnauthNotice {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px 2px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
#regionWizardModal #regionWizardUnauthNotice > div,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #059669 !important;
    background-color: #059669 !important;
    border: 1px solid #047857 !important;
    border-radius: 14px !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28) !important;
}
#regionWizardModal #regionWizardUnauthNotice > div:hover,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner:hover {
    background: #047857 !important;
    background-color: #047857 !important;
}
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner > div,
#regionWizardModal #regionWizardUnauthNotice > div > div:first-child {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}
#regionWizardModal #regionWizardUnauthNotice span.truncate,
#regionWizardModal #regionWizardUnauthNotice span,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
#regionWizardModal #regionWizardUnauthNotice i,
#regionWizardModal #regionWizardUnauthNotice svg,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
}
#regionWizardModal #regionWizardUnauthNotice button,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
    border-radius: 9px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
    flex-shrink: 0 !important;
}
#regionWizardModal #regionWizardUnauthNotice button:hover,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner button:hover {
    background: #f0fdf4 !important;
    background-color: #f0fdf4 !important;
    color: #065f46 !important;
    -webkit-text-fill-color: #065f46 !important;
}
#regionWizardModal #regionWizardUnauthNotice button:active,
#regionWizardModal #regionWizardUnauthNotice .region-unauth-banner button:active {
    transform: scale(0.95) !important;
}
@media (max-width: 640px) {
    #regionWizardUnauthNotice {
        padding: 8px 12px 2px !important;
    }
    #regionWizardModal #regionWizardUnauthNotice > div,
    #regionWizardModal #regionWizardUnauthNotice .region-unauth-banner {
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }
    #regionWizardModal #regionWizardUnauthNotice span.truncate,
    #regionWizardModal #regionWizardUnauthNotice span,
    #regionWizardModal #regionWizardUnauthNotice .region-unauth-banner span {
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {
    #regionWizardModal {
        position: fixed !important;
        inset: 0 !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 999 !important;
    }

    #regionWizardModal > div {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        margin: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        border: 1px solid #dce4eb !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        background: #ffffff !important;
        box-shadow: 0 -14px 44px rgba(15, 23, 42, 0.22) !important;
        animation: regionWizardSheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 1000 !important;
    }

    #regionWizardModal > div::before {
        content: "" !important;
        display: block !important;
        width: 36px !important;
        height: 4px !important;
        border-radius: 9999px !important;
        background: #cbd5e1 !important;
        margin: 6px auto 2px !important;
        flex-shrink: 0 !important;
    }

    #regionWizardModal.closing > div {
        animation: regionWizardSheetSlideDown 0.22s cubic-bezier(0.4, 0, 0.9, 0.5) forwards !important;
    }

    #regionWizardModal .region-wizard-header,
    #regionWizardModal #regionWizardHeader {
        padding: 5px 14px 6px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    #regionWizardModal .flex-1.overflow-y-auto {
        padding: 5px 10px 4px !important;
        gap: 5px !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    #regionWizardModal .basin-select-row {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 6px 8px !important;
        margin-bottom: 5px !important;
    }

    #regionWizardModal .basin-select-row .flex.items-center.justify-between {
        margin-bottom: 3px !important;
    }

    #regionWizardModal .city-pill-btn {
        background: #ffffff !important;
        border: 1px solid #dce4eb !important;
        color: #334155 !important;
        border-radius: 8px !important;
        padding: 4px 8px !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    }

    #regionWizardModal .basin-select-row button[onclick*="quickLaunchBasin"] {
        background: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
        color: #0284c7 !important;
        border-radius: 8px !important;
        padding: 3px 8px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
    }

    #regionWizardModal h2 {
        color: #1e293b !important;
        font-weight: 800 !important;
        font-size: 13.5px !important;
    }

    #regionWizardModal .basin-select-row h3 {
        color: #1e293b !important;
        font-weight: 800 !important;
        font-size: 12.5px !important;
    }

    #regionWizardModal .region-wizard-header > div > div:first-child,
    #regionWizardModal #regionWizardHeader > div > div:first-child {
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        color: #16a34a !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }

    #regionWizardModal .region-wizard-header button {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
    }

    #regionWizardModal .city-pill-btn svg {
        color: #0284c7 !important;
        width: 12px !important;
        height: 12px !important;
    }

    #regionWizardModal .city-pill-btn span {
        color: #64748b !important;
        font-weight: 700 !important;
    }

    /* Alt Butonlar (İri, Temaya Uygun, Yan Yana) */
    #regionWizardModal .region-wizard-footer,
    #regionWizardModal > div > div:last-child {
        padding: 8px 12px !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    #regionWizardModal .region-btn-all,
    #regionWizardModal button[onclick*="quickLaunchBasin('ALL')"] {
        height: 44px !important;
        min-height: 44px !important;
        flex: 1 !important;
        background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        cursor: pointer !important;
    }

    #regionWizardModal .region-btn-all:active,
    #regionWizardModal button[onclick*="quickLaunchBasin('ALL')"]:active {
        transform: scale(0.98) !important;
    }

    #regionWizardModal .region-btn-close,
    #regionWizardModal .region-wizard-footer button[onclick*="closeRegionWizard"],
    #regionWizardModal > div > div:last-child button[onclick*="closeRegionWizard"] {
        height: 44px !important;
        min-height: 44px !important;
        width: 90px !important;
        min-width: 90px !important;
        flex-shrink: 0 !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    }

    #regionWizardModal .region-btn-close:hover,
    #regionWizardModal .region-wizard-footer button[onclick*="closeRegionWizard"]:hover,
    #regionWizardModal > div > div:last-child button[onclick*="closeRegionWizard"]:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    #regionWizardModal .region-btn-close:active,
    #regionWizardModal .region-wizard-footer button[onclick*="closeRegionWizard"]:active,
    #regionWizardModal > div > div:last-child button[onclick*="closeRegionWizard"]:active {
        transform: scale(0.98) !important;
    }
}

/* Bölge Seçim Modalı Butonları (Genel & Masaüstü) */
#regionWizardModal .region-btn-all {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}
#regionWizardModal .region-btn-close {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
}

/* Şehir Kıyı Sınır Etiketi (Harita Üzeri Belirgin Ada Sınırı) */
.leaflet-tooltip.city-boundary-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(6, 182, 212, 0.7) !important;
    color: #38bdf8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(6, 182, 212, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    letter-spacing: 0.02em !important;
}
.leaflet-tooltip.city-boundary-tooltip::before {
    border-top-color: rgba(6, 182, 212, 0.7) !important;
}

/* Alt Bar Kalıcı Olarak Devre Dışı (Kullanıcı Talebi) */
#bottomFloatingBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ====================================================================
   UYGULAMA GENELİ AYDINLIK TEMA
   Harita karoları ve harita işaretçileri kendi kontrastını korur.
   ==================================================================== */
:root {
    color-scheme: light;
    --app-bg: #f3f6fa;
    --app-surface: #ffffff;
    --app-surface-soft: #f7f9fc;
    --app-border: #d6dfeb;
    --app-text: #172338;
    --app-muted: #52627a;
    --app-subtle: #66758b;
    --app-accent: #087f72;
    --app-accent-soft: #e4f5f1;
}

html { height: 100%; color-scheme: light; }
body { color-scheme: light; }
body:not(.map-page):not(.admin-map-page) {
    color: var(--app-text);
    background-color: var(--app-bg);
    min-height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Global sticky footer motoru: İçerik kısa olsa bile footer tüm sayfalarda en altta durur */
body:not(.map-page):not(.admin-map-page) {
    min-height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

body:not(.map-page):not(.admin-map-page) > main,
body:not(.map-page):not(.admin-map-page) .account-panel-shell,
body:not(.map-page):not(.admin-map-page) .account-subpage-content,
body:not(.map-page):not(.admin-map-page) .account-main,
body:not(.map-page):not(.admin-map-page) .account-main > .account-content,
body:not(.map-page):not(.admin-map-page) .admin-shell,
body:not(.map-page):not(.admin-map-page) .admin-main-shell,
body:not(.map-page):not(.admin-map-page) .admin-main-shell > main {
    flex: 1 0 auto !important;
}

.account-subfooter,
.admin-subfooter,
footer.account-subfooter,
footer.admin-subfooter,
body:not(.map-page):not(.admin-map-page) footer,
body:not(.map-page):not(.admin-map-page) > footer,
body:not(.map-page):not(.admin-map-page) > .account-subfooter,
body:not(.map-page):not(.admin-map-page) > .admin-subfooter,
.admin-main-shell > footer,
.admin-main-shell > .admin-subfooter {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-top: auto !important;
    width: 100%;
}

/* Kullanıcı alanı, alt sayfalar ve yasal metinler */
.account-panel-page,
.membership-page,
.login-page,
.admin-app-page {
    color: var(--app-text) !important;
    background: #f3f6fa !important;
}
.account-sidebar,
.admin-sidebar {
    color: var(--app-text);
    background: rgba(255,255,255,.98) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 12px 34px rgba(23,35,56,.06);
}
.account-brand strong,
.admin-sidebar-brand strong,
.account-user-card strong,
.admin-sidebar-user strong,
.account-welcome h1,
.account-section-heading h2,
.account-action-copy strong,
.account-catch-copy strong,
.admin-main-shell h1,
.admin-main-shell h2,
.admin-main-shell h3 { color: #142238 !important; }
.account-brand small,
.account-user-card span,
.account-nav-label,
.account-welcome p,
.account-summary-card small,
.account-summary-card span,
.account-action-copy small,
.account-catch-copy small,
.account-footnote,
.account-breadcrumb,
.account-breadcrumb a,
.admin-sidebar-brand small,
.admin-sidebar-user small { color: #52627a !important; }
.account-user-card,
.admin-sidebar-user,
.account-summary-card,
.account-action-card,
.account-catch-card,
.account-empty-state,
.admin-card,
.admin-panel,
.admin-table-wrap,
.admin-stat-card {
    color: var(--app-text) !important;
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 8px 24px rgba(23,35,56,.045);
}
.account-nav-link,
.admin-sidebar-nav a,
.admin-sidebar-site { color: #35455d !important; }
.account-nav-link > svg:first-child,
.account-nav-arrow { color: #60718a !important; }
.account-nav-link:hover,
.admin-sidebar-nav a:hover,
.admin-sidebar-site:hover { color: #142238 !important; background: #eef3f8 !important; border-color: #d6dfeb !important; }
.account-nav-link.is-active,
.admin-sidebar-nav a.is-active { color: #075e53 !important; background: #e3f5f0 !important; border-color: #a8ddd2 !important; }
.account-topbar,
.account-subfooter,
.admin-subfooter { color: #52627a !important; background: rgba(255,255,255,.96) !important; border-color: var(--app-border) !important; }
.account-breadcrumb span,
.account-subfooter a,
.admin-subfooter a { color: #35455d !important; }
.account-map-link { color: #087f72 !important; }
.account-sidebar-launcher,
.admin-sidebar-launcher,
.account-weather-chip { color: #23334a !important; background: rgba(255,255,255,.97) !important; border-color: #c9d6e5 !important; box-shadow: 0 8px 24px rgba(23,35,56,.12) !important; }
.account-weather-copy small { color: #087f72 !important; }
.account-weather-copy strong { color: #142238 !important; }
.account-weather-copy > span { color: #52627a !important; }
.account-primary-button { color: #fff !important; background: linear-gradient(115deg,#087f72,#0b9b88) !important; border-color: #087f72 !important; }
.account-logout { color: #b4233a !important; }
.account-logout:hover { color: #8f162a !important; background: #fff0f1 !important; }

/* Giriş ve yasal sayfalar */
.login-page { background: radial-gradient(ellipse at 75% 0%, #e4f5f1, transparent 38%), #f3f6fa !important; }
.login-page .login-card,
.login-page [class*="login-card"] { color: var(--app-text); }
.legal-modal-panel,
.legal-modal-content > main.legal-document-surface { color: var(--app-text) !important; background: #fff !important; border-color: var(--app-border) !important; box-shadow: 0 20px 56px rgba(23,35,56,.12) !important; }
.legal-modal-header,
.legal-modal-content,
.legal-modal-content > main > div:nth-child(2) { color: var(--app-text) !important; background: #f7f9fc !important; border-color: var(--app-border) !important; }
.legal-modal-header h2,
.legal-modal-content h1,
.legal-modal-content h2,
.legal-modal-content h3 { color: #142238 !important; }
.legal-modal-header p,
.legal-modal-content article,
.legal-modal-content article p,
.legal-modal-content article li { color: #35455d !important; }
.legal-modal-content .legal-tab-active { color: #075e53 !important; background: #e4f5f1 !important; }

/* Ortak koyu Tailwind yüzeylerini açık yüzeye çevir; seçici kapsamı UI elemanlarıyla sınırlı. */
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class~="bg-slate-950"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class~="bg-slate-900"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class~="bg-slate-800"] {
    color: var(--app-text) !important;
    background-color: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
}
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-slate-950/"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-slate-900/"] {
    color: var(--app-text) !important;
    background-color: rgba(255,255,255,.96) !important;
    border-color: var(--app-border) !important;
}
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-white"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-slate-100"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-slate-200"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-slate-300"] { color: #26364d !important; }
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-slate-400"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-slate-500"] { color: #52627a !important; }
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="border-slate-700"],
body :is(main, article, section, aside, header, footer, form, nav, dialog, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, .account-sidebar, .admin-sidebar, .leaflet-popup-content-wrapper, .leaflet-tooltip, #topFloatingHeader, #forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="border-slate-800"] { border-color: var(--app-border) !important; }

/* Harita ekranı: uydu karoları aynı kalır, yalnızca üzerindeki arayüzler aydınlanır. */
#topFloatingHeader,
#topHeaderMainRow > div,
#weatherPillContainer > div,
#forecastDaysPopover,
#mobileDrawer,
#bottomSheet,
#windyLayerControl,
#aisRadarHud,
#regionWizardModal > div,
#speciesTacticalModal > div,
#encyclopediaModal > div,
#biorhythmModal > div,
#catchLogModal > div,
#recommendationsModal > div,
#speciesModal > div,
#subscriptionPackagesModal > div,
#blackSeaReportModal > div,
#loginModal > div,
#userCatchHistoryModal > div,
#aiAssistantModal > div {
    color: var(--app-text) !important;
    background-color: rgba(255,255,255,.97) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 18px 46px rgba(20,35,56,.18) !important;
}
#topFloatingHeader { background: transparent !important; box-shadow: none !important; }
#map { background: #dce5ed !important; }
.leaflet-container { background: #dce5ed !important; }
.leaflet-bar { border-color: #c8d4e1 !important; box-shadow: 0 4px 14px rgba(23,35,56,.18) !important; }
.leaflet-bar a { color: #26364d !important; background: #fff !important; border-color: #d6dfeb !important; }
.leaflet-bar a:hover { color: #075e53 !important; background: #eaf4f2 !important; }

.leaflet-location-control {
    border-radius: 12px !important;
    overflow: hidden;
}
.leaflet-location-control-button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-bottom: 1px solid #d6dfeb;
    background: #fff;
    color: #42566f;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.leaflet-location-control-button:hover,
.leaflet-location-control-button:focus-visible {
    background: #eaf4f2;
    color: #075e53;
    outline: none;
}
.leaflet-location-control-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.leaflet-location-control-button:active { background: #dcece8; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { color: #172338 !important; background: #fff !important; border-color: #d6dfeb !important; box-shadow: 0 12px 30px rgba(23,35,56,.2) !important; }
.leaflet-popup-close-button { color: #f87171 !important; background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.35) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; }
.leaflet-popup-close-button:hover { color: #fff !important; background: rgba(239, 68, 68, 0.3) !important; border-color: rgba(239, 68, 68, 0.6) !important; }
.leaflet-tooltip.spot-wx-tooltip,
.leaflet-tooltip.locked-spot-tooltip-shell { color: #172338 !important; background: #fff !important; border-color: #c8d4e1 !important; box-shadow: 0 12px 30px rgba(23,35,56,.2) !important; }
.leaflet-tooltip.spot-wx-tooltip::before,
.leaflet-tooltip.locked-spot-tooltip-shell::before { border-top-color: #fff !important; }
.category-pill,
.city-pill-btn,
.basin-select-row { color: #35455d !important; background: #f7f9fc !important; border-color: #d6dfeb !important; }
.category-pill:hover,
.city-pill-btn:hover,
.basin-select-row:hover { color: #142238 !important; background: #edf3f8 !important; }
.category-pill.is-selected,
.city-pill-btn.is-selected { color: #fff !important; background: #087f72 !important; border-color: #087f72 !important; }
.basin-select-row.is-active-basin { color: #172338 !important; background: #eaf4f2 !important; border-color: #8bcfc2 !important; }
.site-nav-brand strong span { color: #087f72 !important; }
.leaflet-tooltip.city-boundary-tooltip { color: #075f78 !important; background: rgba(255,255,255,.98) !important; border-color: #54b7cb !important; box-shadow: 0 4px 14px rgba(23,35,56,.18) !important; }
.leaflet-tooltip.city-boundary-tooltip::before { border-top-color: #54b7cb !important; }
.account-panel-page :is(main, aside) [class*="text-emerald-300"],
.account-panel-page :is(main, aside) [class*="text-emerald-400"],
.account-panel-page :is(main, aside) [class*="text-teal-300"],
.account-panel-page :is(main, aside) [class*="text-cyan-300"],
.account-panel-page :is(main, aside) [class*="text-sky-300"],
.login-page .login-card [class*="text-emerald-300"],
.login-page .login-card [class*="text-cyan-300"],
.login-page .login-card [class*="text-teal-300"],
.leaflet-popup-content-wrapper [class*="text-emerald-300"],
.leaflet-popup-content-wrapper [class*="text-emerald-400"],
.leaflet-popup-content-wrapper [class*="text-teal-300"],
.leaflet-popup-content-wrapper [class*="text-cyan-300"],
.leaflet-popup-content-wrapper [class*="text-sky-300"] { color: #087f72 !important; }
.account-panel-page :is(main, aside) [class*="text-amber-300"],
.account-panel-page :is(main, aside) [class*="text-amber-400"],
.login-page .login-card [class*="text-amber-300"],
.leaflet-popup-content-wrapper [class*="text-amber-300"],
.leaflet-popup-content-wrapper [class*="text-amber-400"] { color: #805b00 !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-emerald-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-emerald-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-teal-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-cyan-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-sky-300"] { color: #087f72 !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-amber-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-amber-400"] { color: #805b00 !important; }
.scroll-hint.has-overflow::after { background: linear-gradient(90deg,transparent,#fff); }
::-webkit-scrollbar-track { background: #e8edf3; }
::-webkit-scrollbar-thumb { background: #b7c4d3; }
::-webkit-scrollbar-thumb:hover { background: #8798ad; }

/* Form alanları ve kontroller açık zeminlerde net görünür. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea {
    color: #172338;
    background-color: #fff;
    border-color: #c8d4e1;
}
input::placeholder, textarea::placeholder { color: #718096 !important; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #0b8b7b !important; box-shadow: 0 0 0 3px rgba(11,139,123,.14); outline: none; }
button[class*="bg-slate"], button[class*="bg-gray"], button[class*="bg-zinc"] { color: #26364d !important; background: #edf2f7 !important; border-color: #ccd7e3 !important; }
button[class*="bg-slate"]:hover, button[class*="bg-gray"]:hover, button[class*="bg-zinc"]:hover { color: #142238 !important; background: #e2eaf2 !important; }

@media (max-width: 900px) {
    .account-nav-backdrop.is-visible,
    .admin-sidebar-backdrop.is-visible { background: rgba(23,35,56,.32) !important; }
}

/* Genel gezinme çekmecesi header.php içinde sayfaya özel stillerle tanımlıdır. */
.site-nav-trigger { color: #087f72 !important; background: rgba(255,255,255,.97) !important; border-color: #bddbd5 !important; box-shadow: 0 10px 28px rgba(23,35,56,.16) !important; }
.site-nav-trigger:hover { background: #eff8f6 !important; }
.site-nav-drawer { color: #26364d !important; background: linear-gradient(160deg,#fff,#f3f6fa 72%) !important; border-color: var(--app-border) !important; box-shadow: 24px 0 70px rgba(23,35,56,.2) !important; }
.site-nav-brand { border-color: var(--app-border) !important; }
.site-nav-brand strong { color: #142238 !important; }
.site-nav-brand small,
.site-nav-account small,
.site-nav-label { color: #52627a !important; }
.site-nav-account { color: #26364d !important; background: #f7f9fc !important; border-color: var(--app-border) !important; }
.site-nav-links a { color: #35455d !important; }
.site-nav-links a:hover,
.site-nav-links a.is-active { color: #075e53 !important; background: #e4f5f1 !important; border-color: #b8ded6 !important; }
.site-nav-bottom { border-color: var(--app-border) !important; }
.site-nav-bottom a,
.site-nav-close { color: #52627a !important; }
.site-nav-close { background: #f1f5f9 !important; border-color: var(--app-border) !important; }

/* Yasal sayfa: okunaklı belge yüzeyleri ve çalışan sekme gezinmesi */
.legal-page-content { color: #26364d; scroll-margin-top: 88px; }
.legal-page-title { color: #142238 !important; font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.18; }
.legal-page-intro { max-width: 900px; color: #52627a !important; font-size: 15px !important; line-height: 1.65; }
.legal-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b7c4d3 transparent; border-color: #d6dfeb !important; }
.legal-tab-button { display: inline-flex; min-height: 46px; flex: 0 0 auto; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid #d6dfeb !important; border-radius: 12px; color: #40516a !important; background: #fff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.legal-tab-button:hover { color: #075e53 !important; background: #f2f8f6 !important; border-color: #a9d8cf !important; }
.legal-tab-button.is-active { color: #075e53 !important; background: #e5f5f1 !important; border-color: #75c8ba !important; box-shadow: 0 2px 8px rgba(8,127,114,.1); }
.legal-tab-button svg { width: 17px; height: 17px; flex: 0 0 auto; color: #087f72 !important; }
.legal-tab-panel { min-width: 0; }
.legal-document-card { color: #35455d !important; background: #fff !important; border: 1px solid #d6dfeb !important; border-radius: 22px !important; box-shadow: 0 8px 28px rgba(23,35,56,.055); }
.legal-document-card h2,
.legal-document-card h3 { color: #172338 !important; }
.legal-document-card h2 { font-size: 22px !important; line-height: 1.45; }
.legal-document-card h3 { font-size: 17px !important; line-height: 1.45; }
.legal-document-card p,
.legal-document-card li { color: #40516a !important; font-size: 15px !important; line-height: 1.8 !important; }
.legal-document-card strong { color: #26364d; }
.legal-document-card a { color: #087f72 !important; font-weight: 700; }
.legal-document-card [class*="bg-slate-950"] { color: #35455d !important; background: #f6f8fb !important; border-color: #dce4ed !important; }
.legal-document-card [class*="text-emerald-400"] { color: #087f72 !important; }
.legal-warning { color: #694b08 !important; background: #fff8e7 !important; border: 1px solid #ebd391 !important; border-radius: 16px !important; font-size: 15px !important; line-height: 1.7 !important; }
.legal-warning { font-size: 13px !important; line-height: 1.6 !important; }
.legal-warning > strong:first-child { font-size: 13px !important; }
.legal-warning strong,
.legal-warning [class*="text-amber-"] { color: #785500 !important; }
.legal-danger { color: #7f2534 !important; background: #fff1f2 !important; border: 1px solid #f2c2c8 !important; }
.legal-danger strong,
.legal-danger [class*="text-rose-"] { color: #9f2638 !important; }
.legal-info-warning { color: #533c74 !important; background: #f7f2ff !important; border: 1px solid #ddc9f5 !important; }
.legal-info-warning strong,
.legal-info-warning [class*="text-purple-"] { color: #65418e !important; }
.legal-tabs { scroll-margin-top: 84px; }
.legal-page-content > .mb-8 { margin-bottom: 24px !important; }
.legal-page-content .legal-tabs { margin-bottom: 24px !important; }
.account-subpage-content.legal-account-content { width: calc(100% - 292px); max-width: 1440px; padding-top: clamp(36px, 5vh, 64px); }
@media (max-width: 900px) {
    .account-subpage-content.legal-account-content { width: 100%; max-width: none; padding-top: 78px !important; }
}
@media (max-width: 768px) {
    .legal-tabs {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    .legal-tab-button.is-active {
        order: -1;
    }
}
@media (max-width: 640px) {
    .legal-page-content { padding: 24px 16px 34px !important; }
    .legal-page-title { font-size: 27px !important; }
    .legal-page-intro { font-size: 14px !important; }
    .legal-tab-button { min-height: 44px; padding: 8px 12px; font-size: 13px !important; }
    .legal-document-card { padding: 20px 17px !important; border-radius: 18px !important; }
    .legal-document-card h2 { font-size: 19px !important; }
    .legal-document-card h3 { font-size: 16px !important; }
    .legal-document-card p,
    .legal-document-card li { font-size: 14px !important; line-height: 1.75 !important; }
    .legal-warning { padding: 15px !important; font-size: 12px !important; line-height: 1.55 !important; }
    .legal-warning > strong:first-child { font-size: 12px !important; }
}

/* Açık temadaki hesap/yönetim/kayıt ekranlarında koyu uyarı kutularını pastel yüzeye çevir. */
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-amber-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-amber-900"] { color: #694b08 !important; background: #fff8e7 !important; border-color: #ebd391 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-rose-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-rose-900"] { color: #7f2534 !important; background: #fff1f2 !important; border-color: #f2c2c8 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-purple-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-purple-900"] { color: #533c74 !important; background: #f7f2ff !important; border-color: #ddc9f5 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-emerald-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-emerald-900"] { color: #17634f !important; background: #eaf7f1 !important; border-color: #b9dfcf !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-cyan-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-cyan-900"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-blue-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-blue-900"] { color: #204e67 !important; background: #edf7fb !important; border-color: #c4e1ec !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-400"] { color: #785500 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-400"] { color: #9f2638 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-400"] { color: #65418e !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-emerald-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-emerald-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-cyan-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-cyan-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-blue-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-blue-300"] { color: #087f72 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-white/"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-black/"] { background-color: #f1f5f9 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="border-white/"] { border-color: #d6dfeb !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-white/"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-black/"] { background-color: #f1f5f9 !important; }

/* Aynı renk ailesindeki durum/uyarı kartları açık temada da okunaklı kalsın. */
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-amber-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-amber-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-amber-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-amber-900"] { color: #694b08 !important; background: #fff8e7 !important; border-color: #ebd391 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-rose-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-rose-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-rose-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-rose-900"] { color: #7f2534 !important; background: #fff1f2 !important; border-color: #f2c2c8 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-purple-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-purple-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-purple-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-purple-900"] { color: #533c74 !important; background: #f7f2ff !important; border-color: #ddc9f5 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-emerald-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-emerald-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-emerald-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-emerald-900"] { color: #17634f !important; background: #eaf7f1 !important; border-color: #b9dfcf !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-cyan-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-cyan-900"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-blue-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-blue-900"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-sky-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-sky-900"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-indigo-950"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="bg-indigo-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-cyan-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-cyan-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-blue-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-blue-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-sky-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-sky-900"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-indigo-950"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="bg-indigo-900"] { color: #204e67 !important; background: #edf7fb !important; border-color: #c4e1ec !important; }

body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-amber-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-amber-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-amber-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-amber-400"] { color: #785500 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-rose-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-rose-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-rose-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-rose-400"] { color: #9f2638 !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-purple-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-purple-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-purple-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-purple-400"] { color: #65418e !important; }
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-emerald-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-emerald-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-emerald-400"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-cyan-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-cyan-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-cyan-400"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-sky-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-sky-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-sky-400"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-blue-200"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-blue-300"],
body:is(.account-panel-page, .membership-page, .admin-app-page) main [class*="text-blue-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-emerald-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-emerald-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-emerald-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-cyan-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-cyan-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-cyan-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-sky-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-sky-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-sky-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-blue-200"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-blue-300"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="text-blue-400"] { color: #087f72 !important; }

/* Yasal metin sayfasındaki link hedefi aynı sekmede de her zaman içerik sekmesini seçer. */
.legal-page-content [role="tabpanel"].hidden { display: none !important; }
.legal-page-content [role="tabpanel"]:not(.hidden) { display: block; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="border-white/"] { border-color: #d6dfeb !important; }
.leaflet-popup-content-wrapper [class*="bg-white/"], .leaflet-popup-content-wrapper [class*="bg-black/"] { background-color: #f1f5f9 !important; }

/* Mat ve okunaklı tasarım: mera popup'ı ve alttan açılan detay sheet'i. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.spot-leaflet-popup,
#bottomSheet {
    color: #344256 !important;
    background: #f8fafb !important;
    border-color: #d7e0e7 !important;
}
.spot-popup-heading { border-color: #d7e0e7 !important; }
.spot-popup-code { color: #356b75 !important; background: #eaf3f4 !important; border-color: #c8dfe2 !important; }
.spot-popup-verified { color: #3e7462 !important; background: #edf5f0 !important; border-color: #cfe2d6 !important; }
.spot-popup-basin { color: #527b89 !important; }
.spot-popup-title { color: #233246 !important; }
.spot-popup-location { color: #53647a !important; }
.spot-popup-location > svg { color: #5f929a !important; }
.spot-popup-location__dot { background: #aab8c4 !important; }
.spot-popup-location strong { color: #477d70 !important; }
.spot-popup-species-section { border-color: #d7e0e7 !important; background: #f0f5f6 !important; }
.spot-popup-section-heading > span { color: #527f87 !important; }
.spot-popup-section-heading em { color: #416e78 !important; background: #e0edef !important; }
.spot-popup-section-heading small { color: #718096 !important; }
.spot-popup-fact { border-color: #dce4e9 !important; background: #fff !important; }
.spot-popup-fact > svg { color: #63958e !important; }
.spot-popup-fact small { color: #718096 !important; }
.spot-popup-fact strong { color: #344256 !important; }
.spot-popup-species-btn { color: #42546a !important; background: #fff !important; border-color: #d5dfe6 !important; box-shadow: none !important; }
.spot-popup-species-btn:hover { color: #345f64 !important; background: #edf4f4 !important; border-color: #abc9ca !important; }
.spot-popup-action--primary { color: #fff !important; background: #54877d !important; box-shadow: none !important; }
.spot-popup-action--primary:hover { background: #456f67 !important; }
.spot-popup-action--secondary { color: #42546a !important; border-color: #d5dfe6 !important; background: #edf2f5 !important; }
.spot-popup-action--secondary:hover { color: #2e5960 !important; border-color: #b8d0d2 !important; background: #e4eef0 !important; }
.oceanic-spot-popup .leaflet-popup-content-wrapper { background: #f8fafb !important; }
.oceanic-spot-popup .spot-leaflet-popup { scrollbar-color: #b9c7cf transparent !important; }
.oceanic-spot-popup .spot-leaflet-popup::-webkit-scrollbar-thumb { background: #b9c7cf !important; }

#bottomSheet { box-shadow: 0 -14px 40px rgba(36,52,69,.16) !important; }
#bottomSheet [class*="border-slate-800"],
#bottomSheet [class*="border-slate-700"] { border-color: #d7e0e7 !important; }
#bottomSheet [class*="bg-slate-950"],
#bottomSheet [class*="bg-slate-900"],
#bottomSheet [class*="bg-slate-800"] { color: #405168 !important; background: #f0f4f6 !important; }
#bottomSheet [class*="text-white"],
#bottomSheet [class*="text-slate-100"],
#bottomSheet [class*="text-slate-200"],
#bottomSheet [class*="text-slate-300"] { color: #344256 !important; }
#bottomSheet [class*="text-slate-400"],
#bottomSheet [class*="text-slate-500"],
#bottomSheet [class*="text-slate-600"] { color: #64748b !important; }
#bottomSheet [class*="text-emerald-300"],
#bottomSheet [class*="text-emerald-400"],
#bottomSheet [class*="text-cyan-300"],
#bottomSheet [class*="text-cyan-400"],
#bottomSheet [class*="text-teal-300"],
#bottomSheet [class*="text-teal-400"] { color: #527f78 !important; }
#bottomSheet [class*="text-amber-"],
#bottomSheet [class*="text-yellow-"] { color: #61736f !important; }
#bottomSheet [class*="bg-emerald-950"],
#bottomSheet [class*="bg-emerald-900"],
#bottomSheet [class*="bg-cyan-950"],
#bottomSheet [class*="bg-cyan-900"],
#bottomSheet [class*="bg-teal-950"],
#bottomSheet [class*="bg-teal-900"] { color: #456c68 !important; background: #eaf2f1 !important; border-color: #cbdedb !important; }
#bottomSheet [class*="bg-amber-950"],
#bottomSheet [class*="bg-amber-900"],
#bottomSheet [class*="bg-yellow-950"],
#bottomSheet [class*="bg-yellow-900"] { color: #596d69 !important; background: #eff3f2 !important; border-color: #d4dfdc !important; }
#bottomSheet [class*="bg-rose-950"],
#bottomSheet [class*="bg-rose-900"] { color: #75545a !important; background: #f7eff0 !important; border-color: #e7d5d8 !important; }
#bottomSheet button:not(.spot-popup-action),
#bottomSheet a:not(.spot-popup-action) { box-shadow: none !important; }

/* Modallardaki neon gölgeleri kaldırıp mat derinlik kullan. */
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="shadow-amber-"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="shadow-emerald-"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) [class*="shadow-cyan-"] { box-shadow: 0 6px 18px rgba(36,52,69,.08) !important; }

/* Modal ve sheet içindeki aksiyon renklerini de mat palete yaklaştır. */
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-emerald-500"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-teal-500"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-cyan-500"] { color: #fff !important; background-color: #648d84 !important; background-image: none !important; border-color: #648d84 !important; box-shadow: none !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-emerald-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-teal-400"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-cyan-400"] { color: #fff !important; background-color: #73988f !important; background-image: none !important; border-color: #73988f !important; box-shadow: none !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-amber-"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a)[class*="bg-yellow-"] { color: #50645f !important; background-color: #edf2f1 !important; background-image: none !important; border-color: #d5dfdc !important; box-shadow: none !important; }
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a):hover[class*="bg-emerald-"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a):hover[class*="bg-teal-"],
body :is(#forecastDaysPopover, #mobileDrawer, #bottomSheet, #windyLayerControl, #aisRadarHud, #regionWizardModal, #speciesTacticalModal, #encyclopediaModal, #biorhythmModal, #catchLogModal, #recommendationsModal, #speciesModal, #subscriptionPackagesModal, #blackSeaReportModal, #loginModal, #userCatchHistoryModal, #aiAssistantModal) :is(button, a):hover[class*="bg-cyan-"] { background-color: #527a72 !important; border-color: #527a72 !important; }

/* İsimleri farklı olsa da tüm dialog/modallar aynı açık yüzey dilini kullanır. */
body [id$="Modal"] :is([class~="bg-slate-950"], [class~="bg-slate-900"], [class~="bg-slate-800"], [class*="bg-slate-950/"], [class*="bg-slate-900/"], [class*="bg-slate-800/"]) {
    color: #405168 !important;
    background-color: #f1f5f7 !important;
    border-color: #d7e0e7 !important;
    box-shadow: none !important;
}
body [id$="Modal"] :is([class*="text-white"], [class*="text-slate-100"], [class*="text-slate-200"], [class*="text-slate-300"]) { color: #344256 !important; }
body [id$="Modal"] :is([class*="text-slate-400"], [class*="text-slate-500"], [class*="text-slate-600"]) { color: #64748b !important; }
body [id$="Modal"] :is([class*="border-slate-700"], [class*="border-slate-800"], [class*="border-white/"]) { border-color: #d7e0e7 !important; }
body [id$="Modal"] :is([class*="text-amber-"], [class*="text-yellow-"]) { color: #68746f !important; }
body [id$="Modal"] :is([class*="bg-amber-950"], [class*="bg-amber-900"], [class*="bg-yellow-950"], [class*="bg-yellow-900"]) { color: #596d69 !important; background-color: #eff3f2 !important; border-color: #d4dfdc !important; }
body [id$="Modal"] :is([class*="bg-emerald-950"], [class*="bg-emerald-900"], [class*="bg-cyan-950"], [class*="bg-cyan-900"], [class*="bg-teal-950"], [class*="bg-teal-900"]) { color: #456c68 !important; background-color: #eaf2f1 !important; border-color: #cbdedb !important; }
body [id$="Modal"] :is([class*="bg-rose-950"], [class*="bg-rose-900"]) { color: #75545a !important; background-color: #f7eff0 !important; border-color: #e7d5d8 !important; }
body [id$="Modal"] :is(button, a)[class*="bg-emerald-500"],
body [id$="Modal"] :is(button, a)[class*="bg-teal-500"],
body [id$="Modal"] :is(button, a)[class*="bg-cyan-500"] { color: #fff !important; background-color: #648d84 !important; background-image: none !important; border-color: #648d84 !important; box-shadow: none !important; }
body [id$="Modal"] :is(button, a)[class*="bg-amber-"],
body [id$="Modal"] :is(button, a)[class*="bg-yellow-"] { color: #50645f !important; background-color: #edf2f1 !important; background-image: none !important; border-color: #d5dfdc !important; box-shadow: none !important; }
body [id$="Modal"] :is(button, a):hover[class*="bg-emerald-"],
body [id$="Modal"] :is(button, a):hover[class*="bg-teal-"],
body [id$="Modal"] :is(button, a):hover[class*="bg-cyan-"] { background-color: #527a72 !important; border-color: #527a72 !important; }

/* VIP paket sayfasındaki inline neon vurguları ve koyu panelleri düzelt. */
body.membership-page #package-card-city,
body.membership-page #package-card-region,
body.membership-page #package-card-full {
    color: #344256 !important;
    background: #fff !important;
    border: 1px solid #d7e0e7 !important;
    box-shadow: 0 12px 30px rgba(23,35,56,.08) !important;
}
body.membership-page #package-card-city { border-top: 3px solid #77988f !important; }
body.membership-page #package-card-region { border-top: 3px solid #8296a0 !important; }
body.membership-page #package-card-full { border-top: 3px solid #648d84 !important; }
body.membership-page #package-card-full h3,
body.membership-page #package-card-full ul,
body.membership-page #package-card-full ul li,
body.membership-page #package-card-full > div > div > span.text-3xl,
body.membership-page #package-card-full p { color: #344256 !important; }
body.membership-page #package-card-city [class*="bg-cyan-950"],
body.membership-page #package-card-full [class*="bg-emerald-950"] { color:#52746d !important; background:#edf3f2 !important; border-color:#d5e2df !important; }
body.membership-page #package-card-city [class*="text-cyan-"],
body.membership-page #package-card-full [class*="text-emerald-"],
body.membership-page #package-card-region [class*="text-indigo-"] { color:#64877f !important; }
body.membership-page #package-card-full [class*="border-slate-800"] { border-color:#dce4eb !important; }
body.membership-page #package-card-full .bg-emerald-950\/60,
body.membership-page #package-card-full .bg-emerald-950\/40 { color:#52746d !important; background:#f2f6f5 !important; border-color:#d9e5e2 !important; }
body.membership-page main :is(.bg-slate-900\/90,.bg-slate-900\/95,.bg-slate-950\/80,.bg-slate-950\/90) { color:#344256 !important; background:#f7f9fb !important; border-color:#dce4eb !important; }
body.membership-page main :is(.bg-slate-900\/90,.bg-slate-900\/95,.bg-slate-950\/80,.bg-slate-950\/90) :is(h1,h2,h3,h4,strong,[class*="text-white"],[class*="text-slate-100"],[class*="text-slate-200"]) { color:#344256 !important; }
body.membership-page main :is(.bg-slate-900\/90,.bg-slate-900\/95,.bg-slate-950\/80,.bg-slate-950\/90) :is(p,small,[class*="text-slate-300"],[class*="text-slate-400"]) { color:#64748b !important; }
body.membership-page main :is(.bg-slate-900\/90,.bg-slate-900\/95,.bg-slate-950\/80,.bg-slate-950\/90) i[data-lucide] { color:#64877f !important; }
body.membership-page main details > summary { color:#344256 !important; background:#fff !important; border:1px solid #dce4eb !important; box-shadow:none !important; }
body.membership-page main details > summary:hover { background:#f7f9fb !important; }
body.membership-page main details > p { color:#52627a !important; background:#fff !important; border-color:#dce4eb !important; }
body.membership-page main :is(.bg-slate-600,.bg-slate-700,.bg-slate-800\/80) { color:#405168 !important; background:#edf2f5 !important; border-color:#d8e1e8 !important; box-shadow:none !important; }
body.membership-page main :is(.bg-slate-600,.bg-slate-700,.bg-slate-800\/80) :is(h1,h2,h3,h4,strong,[class*="text-white"],[class*="text-slate-100"],[class*="text-slate-200"]) { color:#344256 !important; }
body.membership-page main :is(.bg-slate-600,.bg-slate-700,.bg-slate-800\/80) :is(p,small,[class*="text-slate-300"],[class*="text-slate-400"]) { color:#64748b !important; }
body.membership-page main :is(.bg-slate-600,.bg-slate-700,.bg-slate-800\/80) i[data-lucide] { color:#647b84 !important; }
body.membership-page main [class*="shadow-emerald-"], body.membership-page main [class*="shadow-cyan-"], body.membership-page main [class*="shadow-teal-"] { box-shadow:0 8px 22px rgba(23,35,56,.08) !important; }
/* Membership page custom components were still using their original dark palette. */
body.membership-page .membership-steps li,
body.membership-page .membership-trust-grid article,
body.membership-page .membership-faq details { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; box-shadow:0 5px 16px rgba(23,35,56,.045) !important; }
body.membership-page .membership-steps li > span { color:#587f78 !important; background:#eaf2f1 !important; border-color:#d5e2df !important; }
body.membership-page .membership-steps strong,
body.membership-page .membership-trust-grid article strong,
body.membership-page .membership-faq summary,
body.membership-page .membership-faq-heading h2 { color:#344256 !important; }
body.membership-page .membership-steps small,
body.membership-page .membership-trust-grid article span,
body.membership-page .membership-faq details p { color:#64748b !important; }
body.membership-page .membership-trust-grid article > svg,
body.membership-page .membership-faq summary svg { color:#718f89 !important; }
body.membership-page .membership-faq-heading > span { color:#64877f !important; }

/* Aydınlık modal ve çekmecelerde küçük ikon rozetlerini matlaştır. */
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="bg-emerald-500/"],
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="bg-teal-500/"],
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="bg-cyan-500/"],
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="bg-sky-500/"] { color:#587f78 !important; background:#eaf2f1 !important; border-color:#d5e2df !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="shadow-cyan-"],
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="shadow-emerald-"],
body:not(.map-page):not(.admin-map-page) :is(#regionWizardModal,#subscriptionPackagesModal,#selectionConfirmAuthModal,#loginModal,#mobileDrawer,#bottomSheet,#forecastDaysPopover,[role="dialog"]) [class*="shadow-teal-"] { box-shadow:0 6px 16px rgba(23,35,56,.08) !important; }
/* Region picker icon badges and header were slate colored, so color-family rules missed them. */
body:not(.map-page):not(.admin-map-page) #regionWizardModal > div,
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header h2 { color:#344256 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header [class*="bg-slate-800"] { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) i[data-lucide] { color:#718f89 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) [class*="text-cyan-"],
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) [class*="text-blue-"],
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) [class*="text-amber-"] { color:#718f89 !important; }

/* Aydınlık arayüzde ikon rozetleri ve durum kartları */
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(i[data-lucide], svg[data-lucide]) {
    color: inherit;
}
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is([class*="bg-emerald-950"], [class*="bg-emerald-900"], [class*="bg-cyan-950"], [class*="bg-cyan-900"], [class*="bg-teal-950"], [class*="bg-teal-900"], [class*="bg-sky-950"], [class*="bg-sky-900"], [class*="bg-blue-950"], [class*="bg-blue-900"]) :is(i[data-lucide], svg[data-lucide]) {
    color: #087f72 !important;
}
/* Rozetlerin koyu/neon kaplamalarını yumuşak, beyaz tema uyumlu zemine çevir. */
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(span, div, button, a)[class*="bg-emerald-950/"],
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(span, div, button, a)[class*="bg-cyan-950/"],
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(span, div, button, a)[class*="bg-teal-950/"],
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(span, div, button, a)[class*="bg-sky-950/"],
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, header, footer, nav, form, [role="dialog"], [role="menu"], [id$="Modal"], #bottomSheet, #mobileDrawer, #forecastDaysPopover) :is(span, div, button, a)[class*="bg-blue-950/"] {
    color: #087f72 !important;
    background-color: #e8f3f1 !important;
    border-color: #d0e2de !important;
    box-shadow: none !important;
}
/* Kartlar, sheet ve açılır yüzeyler aynı ölçülü kenarlık ve gölgeyi paylaşır. */
body:not(.map-page):not(.admin-map-page) :is(main, article, section, aside, [role="dialog"], [role="menu"], .app-modal-card, .bottom-sheet, #bottomSheet, #mobileDrawer, #forecastDaysPopover, [id$="Modal"]) > :is(article, section, [class*="rounded-2xl"], [class*="rounded-3xl"]):is([class*="bg-slate-950"], [class*="bg-slate-900"], [class*="bg-slate-800"], [class*="bg-black/"], [class*="bg-white/"]) {
    border-color: #dce4eb !important;
    box-shadow: 0 8px 24px rgba(23,35,56,.055) !important;
}
body:not(.map-page):not(.admin-map-page) :is(#bottomSheet, #mobileDrawer, #forecastDaysPopover, [role="dialog"], [role="menu"], [id$="Modal"]) {
    color-scheme: light;
}

/* Final overrides: keep the sampled white pages muted after generic theme rules. */
body.membership-page :is(.membership-steps li,.membership-trust-grid article,.membership-faq details) { background:#fff !important; border-color:#dce4eb !important; box-shadow:0 5px 16px rgba(23,35,56,.045) !important; }
body.membership-page :is(.membership-steps li > span,.membership-trust-grid article > svg,.membership-faq summary svg) { color:#718f89 !important; }
body.membership-page .membership-steps li > span { background:#eaf2f1 !important; border-color:#d5e2df !important; }
body.membership-page :is(.membership-steps strong,.membership-trust-grid article strong,.membership-faq summary,.membership-faq-heading h2) { color:#344256 !important; }
body.membership-page :is(.membership-steps small,.membership-trust-grid article span,.membership-faq details p) { color:#64748b !important; }
body.membership-page .membership-faq-heading > span { color:#64877f !important; }
body.membership-page #package-card-full { color:#344256 !important; background:#fff !important; border-color:#648d84 !important; box-shadow:0 12px 30px rgba(23,35,56,.08) !important; }
body.membership-page #package-card-full :is(h3,p,ul,li,strong,[class*="text-white"],[class*="text-slate-100"],[class*="text-slate-200"]) { color:#344256 !important; }
body.membership-page #package-card-full [class*="bg-emerald-950"] { color:#52746d !important; background:#f2f6f5 !important; border-color:#d9e5e2 !important; }
body.membership-page #package-card-full [class*="text-emerald-"] { color:#64877f !important; }
body.membership-page #package-card-full [class*="border-slate-800"] { border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal > div,
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header h2 { color:#344256 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header [class*="bg-slate-800"] { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) :is(i[data-lucide],[class*="text-cyan-"],[class*="text-blue-"],[class*="text-amber-"]) { color:#718f89 !important; }

/* Keep the nine-day forecast comfortably wide on phones and desktop. */
#forecastDaysPopover {
    width:min(560px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    box-sizing:border-box !important;
}
@media (max-width:639px) {
    #forecastDaysPopover {
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
    }
}
#forecastDaysPopover #forecastPopoverIcon {
    width:38px !important;
    height:38px !important;
    color:#567b73 !important;
    background:#eaf2f1 !important;
    border:1px solid #d4e2df !important;
    border-radius:12px !important;
    box-shadow:none !important;
}
#forecastDaysPopover #forecastPopoverIcon svg { width:20px !important;height:20px !important;stroke-width:2.2 !important; }
#forecastDaysPopover #forecastPopoverTitle { color:#25364b !important;font-size:15px !important;font-weight:800 !important;line-height:1.25 !important; }
#forecastDaysPopover #popoverLocationText { color:#52627a !important;font-size:12px !important;font-weight:700 !important;line-height:1.35 !important; }
@media (max-width:639px) {
    #forecastDaysPopover #forecastPopoverTitle { font-size:14px !important; }
    #forecastDaysPopover #popoverLocationText { font-size:11px !important; }
}

/* Screenshot 1: access confirmation modal on the map. */
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div { background:#fff !important; border-color:#dce4eb !important; box-shadow:0 24px 64px rgba(23,35,56,.18) !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div > button { color:#64748b !important; background:#f4f7f9 !important; border-color:#dce4eb !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div > div:first-of-type > div:first-child { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal :is(#confirmModalHeading,strong) { color:#344256 !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal :is(#confirmModalIntro,[class*="text-slate-400"],[class*="text-slate-500"]) { color:#64748b !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="text-emerald-300"] { color:#64877f !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="bg-gradient-to-br"][class*="from-slate-800"] { color:#344256 !important; background:#f4f7f9 !important; border-color:#dce4eb !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="bg-gradient-to-br"][class*="from-emerald-400"] { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="text-cyan-"],
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="text-emerald-"] { color:#64877f !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal [class*="shadow-emerald-"] { box-shadow:0 6px 16px rgba(23,35,56,.08) !important; }

/* Screenshot 2: login card icon surfaces and checkout notice. */
.login-page .login-brand-mark,.login-page .login-lock-icon,.login-page .login-map-link-icon,.login-page .map-art-icon { color:#587f78 !important; background:#eaf2f1 !important; border-color:#d4e2df !important; box-shadow:none !important; }
.login-page .login-eyebrow { color:#527a72 !important; background:#edf3f2 !important; border-color:#d7e4e1 !important; }
.login-page .login-checkout-icon { color:#8a6d2f !important; background:#f5efdf !important; }

/* Screenshot 3: public navigation drawer, including account and brand icons. */
body:not(.map-page):not(.admin-map-page) .site-nav-brand-mark,
body:not(.map-page):not(.admin-map-page) .site-nav-avatar { color:#527f78 !important; background:#eaf2f1 !important; border-color:#d1e1de !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) .site-nav-links a.is-active { color:#42665f !important; background:#edf3f2 !important; border-color:#d5e2df !important; }
body:not(.map-page):not(.admin-map-page) .site-nav-links svg { color:#718f89 !important; }

/* Harita üst çubuğu: hava durumu, profil ve menü kontrollerinde mat tonlar. */
#weatherPillContainer,
#topHeaderActions {
    color:#344256 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}
#topHeaderActions > div {
    color:#344256 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}
/* #topHeaderMainRow > div temasının verdiği beyaz yüzeyleri daha yüksek öncelikle kaldır. */
#topHeaderMainRow > #weatherPillContainer,
#topHeaderMainRow > #topHeaderActions {
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    border-color:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
#weatherPillContainer #compactWeatherIconWrap {
    color:#f1cf83 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}
#weatherPillContainer :is(#compactWeatherDayLabel,#compactWeatherDateLabel,#compactWeatherWind,#compactWeatherWave,#compactWeatherWater) { color:#f1f5f9 !important; }
#weatherPillContainer #compactWeatherTemp { color:#fff !important; }
#weatherPillContainer [data-forecast-summary] { background:transparent !important; border:0 !important; border-radius:0 !important; padding:2px 4px !important; box-shadow:none !important; }
#weatherPillContainer [data-forecast-summary]:hover { background:transparent !important; }
#weatherPillContainer [data-forecast-summary] > div:last-child { color:#e2e8f0 !important; border-color:transparent !important; }
#weatherPillContainer > .flex > button {
    color:#e2e8f0 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}
#weatherPillContainer > .flex > button:hover { color:#fff !important; background:transparent !important; }
#topProfileButton,
#topHamburgerButton {
    color:#587f78 !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}
#topProfileButton:hover,
#topHamburgerButton:hover { color:#42665f !important; background:rgba(255,255,255,.5) !important; border-color:transparent !important; }
#topMobileAvatarWrapper { color:#587f78 !important; background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
#topMobileAvatarIcon { color:#64877f !important; }

/* Üst çubuktaki üç kontrolün içinde kalmış olabilecek sınıf kaplamalarını da tamamen sıfırla. */
#weatherPillContainer > .flex *,
#topProfileButton *,
#topHamburgerButton * {
    background-color:transparent !important;
    background-image:none !important;
    border-color:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
#topHeaderMainRow > #weatherPillContainer > .flex {
    color:#344256 !important;
    background:rgba(255,255,255,.22) !important;
    border:1px solid rgba(255,255,255,.36) !important;
    border-radius:18px !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
    backdrop-filter:blur(14px) saturate(120%) !important;
}
#topProfileButton,
#topHamburgerButton {
    width:44px !important;height:44px !important;
    color:#405d57 !important;
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(255,255,255,.84) !important;
    border-radius:14px !important;
    box-shadow:0 5px 14px rgba(23,35,56,.18) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    backdrop-filter:blur(12px) !important;
}
#topProfileButton:hover,#topHamburgerButton:hover { color:#263f39 !important;background:rgba(255,255,255,.94) !important; }
#topProfileButton #topMobileAvatarWrapper { width:36px !important;height:36px !important;border:0 !important;background:transparent !important; }
#topProfileButton #topMobileAvatarIcon { width:22px !important;height:22px !important;color:#405d57 !important; }
#topHamburgerButton > svg { width:22px !important;height:22px !important;color:#405d57 !important; }
@media (max-width:639px) {
    #weatherPillContainer:not(.hidden) #prevForecastDayBtn,
    #weatherPillContainer:not(.hidden) #nextForecastDayBtn,
    #weatherPillContainer #compactWeatherDateLabel,
    #weatherPillContainer #compactWeatherWater { display:none !important; }
    #weatherPillContainer #compactWeatherChevron,
    #weatherPillContainer [data-forecast-summary] > div:last-child { display:none !important; }
    #weatherPillContainer:not(.hidden) { width:calc(100vw - 128px);max-width:calc(100vw - 128px); }
    #weatherPillContainer:not(.hidden) > .flex { width:100%;min-width:0; }
    #weatherPillContainer [data-forecast-summary] { min-width:0;max-width:100%;gap:8px !important; }
    #weatherPillContainer [data-forecast-summary] > div:nth-child(2) { min-width:0; }
    #topProfileButton #topMobileAvatarImg:not(.hidden) { display:block !important; }
    #topProfileButton #topMobileAvatarImg.hidden { display:none !important; }
    #topProfileButton #topMobileAvatarIcon:not(.hidden) { display:block !important;width:22px !important;height:22px !important;color:#405d57 !important; }
    #topProfileButton #topMobileAvatarIcon.hidden { display:none !important; }
}

/* ====================================================================
   HARITA GIRIS PENCERESI (DARK NAUTICAL GLASSMORPHISM)
   Orantili mikro-rozet, zarif tipografi ve koyu cam yuzey
   ==================================================================== */
#loginModal {
    background: rgba(2, 6, 23, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ====================================================================
   ORTAK GİRİŞ KARTI (Tek Dokunuşla Giriş Mavi Güven Kutusu)
   pages/login.php ve index.html (#loginModal) için ortak tasarım
   ==================================================================== */
.login-card,
#loginModal > .login-card,
.map-page #loginModal > .login-card {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #dce4eb !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    position: relative !important;
}

#loginModal .login-card-topline,
.login-card-topline {
    display: none !important;
}

/* Orantili mikro rozet (Güvenli Hesap Erişimi) */
#loginModal .login-card-kicker,
#loginModal [class*="tracking-[.12em]"],
.login-card-kicker {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 2.5px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 9999px !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    letter-spacing: 0.08em !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4.5px !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

#loginModal .login-card-kicker svg,
.login-card-kicker svg {
    width: 11px !important;
    height: 11px !important;
    color: #059669 !important;
    flex-shrink: 0 !important;
}

/* MAVİ GÜVEN KUTUSU (Tek Dokunuşla Giriş + Tek Satır Açıklama) */
.login-trust-box {
    width: 100% !important;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 100%) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06) !important;
    box-sizing: border-box !important;
}

.login-trust-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

.login-trust-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.login-trust-content {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.login-trust-title {
    color: #1e3a8a !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.login-trust-sub {
    color: #2563eb !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 2px 0 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

/* Güvenlik SSL Rozeti */
.login-ssl-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}
.login-ssl-badge svg {
    color: #10b981 !important;
}

/* Bölücü Çizgi */
.login-divider {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 18px 0 12px !important;
    color: #94a3b8 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}
.login-divider::before,
.login-divider::after {
    content: "" !important;
    height: 1px !important;
    flex: 1 !important;
    background: #e2e8f0 !important;
}

/* Yasal Bilgilendirme Metni */
.login-legal-text {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    text-align: center !important;
}
.login-legal-text a {
    color: #2563eb !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.login-legal-text a:hover {
    text-decoration: underline !important;
}

/* Alt Güvenlik Bandı */
.login-bottom-trust {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}
.login-bottom-trust svg {
    color: #10b981 !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

/* Kapatma Butonu - Kartın tam içine, 28px kavis sınırının güvenli bölgesine kare olarak konumlandırıldı */
#loginModal .login-modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important; /* KARE (rounded square) */
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    z-index: 30 !important;
    box-sizing: border-box !important;
}

#loginModal .login-modal-close:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
    transform: scale(1.05) !important;
}

#loginModal .login-modal-close svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    stroke-width: 2.3 !important;
    display: block !important;
    margin: 0 auto !important;
}

#loginModal .login-google-shell {
    display: flex;
    width: 100%;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 4px 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible !important;
}

#loginModal #modalGoogleBtnContainer {
    width: 100%;
    min-height: 52px !important;
    display: flex;
    align-items: center;
    justify-content: center !important;
    padding: 4px 0 !important;
    overflow: visible !important;
}

#loginModal #modalGoogleBtnContainer > div {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

#loginModal .login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 10px;
    color: #64748b !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

#loginModal .login-divider::before,
#loginModal .login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(51, 65, 85, 0.6) !important;
}

#loginModal .login-modal-legal {
    color: #94a3b8 !important;
    font-size: 10.5px !important;
}

#loginModal .login-modal-legal a {
    color: #38bdf8 !important;
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
    text-underline-offset: 2px;
}

#loginModal .login-map-link,
.login-map-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.22) !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

#loginModal .login-map-link:hover,
.login-map-link:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #047857 0%, #0f766e 100%) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.32) !important;
}

#loginModal .login-map-link-icon,
.login-map-link-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

#loginModal .login-map-link-icon svg,
#loginModal .login-map-link-icon i,
.login-map-link-icon svg,
.login-map-link-icon i {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#loginModal .login-map-link strong,
.login-map-link strong {
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

#loginModal .login-map-link small,
.login-map-link small {
    display: block;
    margin-top: 1.5px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
}

#loginModal .login-map-link > svg,
#loginModal .login-map-link > i,
.login-map-link > svg,
.login-map-link > i {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#loginModal .login-modal-secure {
    color: #94a3b8 !important;
    font-size: 10px !important;
}

#loginModal .login-modal-secure svg {
    color: #34d399 !important;
}

@media (max-width: 480px) {
    #loginModal {
        padding: 14px !important;
    }
    #loginModal > .login-card {
        padding: 20px 16px !important;
        border-radius: 24px !important;
    }
    #loginModal .login-card h3 {
        font-size: 19px !important;
    }
    #loginModal .login-modal-heading p {
        font-size: 11px !important;
    }
}

/* Bölge seçicideki şehir etiketleri ve konum ikonları: koyu, mat kontrast. */
#regionWizardModal .city-pill-btn { color:#26364d !important; }
#regionWizardModal .city-pill-btn > svg,
#regionWizardModal .city-pill-btn > i[data-lucide] { color:#52627a !important; }
#regionWizardModal .city-pill-btn > span { color:#64748b !important; }
#regionWizardModal .city-pill-btn:hover { color:#172338 !important; }
#regionWizardModal .city-pill-btn:hover > svg,
#regionWizardModal .city-pill-btn:hover > i[data-lucide] { color:#405168 !important; }
#regionWizardModal .city-pill-btn.is-selected { color:#172338 !important; }
#regionWizardModal .city-pill-btn.is-selected > svg,
#regionWizardModal .city-pill-btn.is-selected > i[data-lucide] { color:#344256 !important; }

/* Screenshot 4 and 5: package cards, step strip, trust cards, FAQ and payment notice. */
body.membership-page .membership-steps li,
body.membership-page .membership-trust-grid article,
body.membership-page .membership-faq details { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; box-shadow:0 5px 16px rgba(23,35,56,.045) !important; }
body.membership-page .membership-steps li > span { color:#587f78 !important; background:#eaf2f1 !important; border-color:#d5e2df !important; }
body.membership-page :is(.membership-steps strong,.membership-trust-grid article strong,.membership-faq summary,.membership-faq-heading h2) { color:#344256 !important; }
body.membership-page :is(.membership-steps small,.membership-trust-grid article span,.membership-faq details p) { color:#64748b !important; }
body.membership-page :is(.membership-trust-grid article > svg,.membership-faq summary svg) { color:#718f89 !important; }
body.membership-page .membership-faq-heading > span { color:#64877f !important; }
body.membership-page #package-card-city, body.membership-page #package-card-region, body.membership-page #package-card-full { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; box-shadow:0 10px 28px rgba(23,35,56,.07) !important; }
body.membership-page #package-card-city { border-top:3px solid #77988f !important; }
body.membership-page #package-card-region { border-top:3px solid #8296a0 !important; }
body.membership-page #package-card-full { border-top:3px solid #648d84 !important; }
body.membership-page :is(#package-card-city,#package-card-region,#package-card-full) :is(h3,p,ul,li,strong,[class*="text-white"],[class*="text-slate-100"],[class*="text-slate-200"]) { color:#344256 !important; }
body.membership-page :is(#package-card-city,#package-card-region,#package-card-full) :is([class*="bg-cyan-950"],[class*="bg-indigo-950"],[class*="bg-emerald-950"]) { color:#52746d !important; background:#edf3f2 !important; border-color:#d5e2df !important; }
body.membership-page :is(#package-card-city,#package-card-region,#package-card-full) :is([class*="text-cyan-"],[class*="text-indigo-"],[class*="text-emerald-"]) { color:#64877f !important; }
body.membership-page #package-card-full [class*="border-slate-800"] { border-color:#dce4eb !important; }
body.membership-page .membership-trust-grid article > svg { padding:4px; box-sizing:content-box; border-radius:10px; background:#edf3f2; }
body.membership-page main > section.rounded-3xl:has(> div > div > h2) { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; box-shadow:0 6px 20px rgba(23,35,56,.05) !important; }
body.membership-page main > section.rounded-3xl:has(> div > div > h2) h2 { color:#344256 !important; }
body.membership-page main > section.rounded-3xl:has(> div > div > h2) p { color:#64748b !important; }
body.membership-page main > section.rounded-3xl:has(> div > div > h2) > div > div:first-child { color:#64877f !important; background:#edf3f2 !important; }

/* Screenshot 6: region picker modal and its region/city icons. */
body:not(.map-page):not(.admin-map-page) #regionWizardModal > div { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; box-shadow:0 24px 64px rgba(23,35,56,.18) !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header { color:#344256 !important; background:#fff !important; border-color:#e1e7ed !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header h2 { color:#344256 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header :is(button,[class*="bg-slate-800"]) { color:#647b84 !important; background:#f2f5f7 !important; border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal :is(.basin-select-row,.city-pill-btn) i[data-lucide] { color:#718f89 !important; }

/* Fix specificity and DOM matching for each of the six supplied screenshots. */
body.membership-page .membership-faq .membership-faq-heading h2 { color:#344256 !important; }
body.membership-page main .membership-trust-grid article { background:#fff !important; border-color:#dce4eb !important; box-shadow:0 5px 16px rgba(23,35,56,.045) !important; }
body.membership-page main .membership-trust-grid article :is(strong,span) { color:#344256 !important; }
body.membership-page main .membership-trust-grid article span { color:#64748b !important; }
body.membership-page main .membership-trust-grid article > svg { color:#718f89 !important; }
body.membership-page main .membership-steps li { background:#fff !important; border-color:#dce4eb !important; }
body.membership-page main .membership-steps li strong { color:#344256 !important; }
body.membership-page main .membership-steps li small { color:#64748b !important; }
body.membership-page main .membership-steps li > span { color:#587f78 !important; background:#eaf2f1 !important; border-color:#d5e2df !important; }
body.membership-page main .membership-faq details { background:#fff !important; border-color:#dce4eb !important; }
body.membership-page main .membership-faq summary { color:#344256 !important; background:#fff !important; }
body.membership-page main .membership-faq summary svg { color:#718f89 !important; }
body.membership-page main .membership-faq details p { color:#64748b !important; }
body.membership-page #package-card-full h3,
body.membership-page #package-card-full p,
body.membership-page #package-card-full li,
body.membership-page #package-card-full li strong,
body.membership-page #package-card-full .text-3xl,
body.membership-page #package-card-full .text-base { color:#344256 !important; }
body.membership-page #package-card-full .bg-emerald-950\/40,
body.membership-page #package-card-full .bg-emerald-950\/60 { color:#52746d !important; background:#f2f6f5 !important; border-color:#d9e5e2 !important; }
body.membership-page #package-card-full .bg-emerald-950\/40 :is(span,strong),
body.membership-page #package-card-full .bg-emerald-950\/60 :is(span,strong) { color:#52746d !important; }
body.membership-page main > section.rounded-3xl:has([data-lucide="shield-check"]) { color:#344256 !important; background:#fff !important; border-color:#dce4eb !important; }
body.membership-page main > section.rounded-3xl:has([data-lucide="shield-check"]) h2 { color:#344256 !important; }
body.membership-page main > section.rounded-3xl:has([data-lucide="shield-check"]) p { color:#64748b !important; }
body.membership-page main > section.rounded-3xl:has([data-lucide="shield-check"]) .rounded-2xl { color:#64877f !important; background:#edf3f2 !important; }

/* Membership dates belong to the account overview. */
.account-subscription-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0 24px; }
.account-subscription-dates article { display:flex; min-width:0; align-items:center; gap:11px; padding:13px 15px; border:1px solid #dce4eb; border-radius:15px; background:#fff; }
.account-subscription-dates article > svg { width:19px; height:19px; flex:0 0 auto; color:#64877f; }
.account-subscription-dates article > div { display:grid; min-width:0; gap:4px; }
.account-subscription-dates small { color:#718096; font-size:9px; font-weight:800; letter-spacing:.07em; }
.account-subscription-dates strong { color:#344256; font-size:13px; font-weight:800; }

/* VIP membership: equal package rhythm, clear upgrade confirmation, and footer anchored without page-end whitespace. */
body.membership-page { min-height:100dvh; display:flex; flex-direction:column; padding-bottom:0 !important; }
body.membership-page > main { flex:1 0 auto; padding-bottom:24px; }
body.membership-page > .account-subfooter { flex:0 0 auto; margin-top:auto !important; }
body.membership-page > footer { flex:0 0 auto; margin-top:auto; }
body.membership-page .membership-hero-card { padding:clamp(20px,3vw,32px); border:1px solid #dce4eb; border-radius:22px; background:#fff; box-shadow:0 10px 28px rgba(23,35,56,.06); text-align:center; }
body.membership-page .membership-hero-card h1 { margin:0; color:#25354b; font:800 clamp(25px,3vw,36px)/1.12 'Outfit',sans-serif; letter-spacing:-.04em; }
body.membership-page .membership-hero-card h1 span { color:#527a72; }
body.membership-page .membership-hero-card > p { max-width:680px; margin:12px auto 20px; color:#65748a; font-size:14px; line-height:1.6; }
body.membership-page .membership-hero-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; max-width:680px; margin:0 auto; }
body.membership-page .membership-hero-metrics > div { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:center; justify-content:center; column-gap:7px; padding:12px 8px; border:1px solid #dfe6ec; border-radius:14px; background:#f6f8fa; }
body.membership-page .membership-hero-metrics svg { grid-row:1 / 3; width:19px; height:19px; color:#64877f; }
body.membership-page .membership-hero-metrics strong { color:#293a50; font:800 19px/1.15 'Outfit',sans-serif; }
body.membership-page .membership-hero-metrics span { color:#68788d; font-size:10px; font-weight:700; }
body.membership-page .membership-region-prefill { display:flex; align-items:center; justify-content:center; gap:7px; margin:16px auto 0; color:#536a66; font-size:12px; font-weight:700; }
body.membership-page .membership-region-prefill svg { width:15px; height:15px; }
body.membership-page .membership-plan-grid { align-items:stretch; }
body.membership-page .membership-plan-card { display:flex; min-width:0; height:100%; flex-direction:column; padding:22px; border-radius:22px; }
body.membership-page .membership-plan-body { display:flex; min-width:0; flex:1; flex-direction:column; }
body.membership-page .membership-plan-head { display:flex; min-height:30px; align-items:center; justify-content:space-between; gap:10px; }
body.membership-page .membership-plan-label { display:inline-flex; min-height:26px; align-items:center; padding:0 10px; border:1px solid #dce4eb; border-radius:999px; color:#536a66 !important; background:#f1f5f5 !important; font-size:10px; font-weight:800; line-height:1; }
body.membership-page .membership-plan-icon { width:19px; height:19px; flex:0 0 auto; color:#64877f !important; }
body.membership-page .membership-plan-title { min-height:29px; margin:8px 0 0; color:#293a50 !important; font:750 20px/1.35 'Outfit',sans-serif; }
body.membership-page .membership-plan-description { min-height:44px; margin:3px 0 0; color:#65748a !important; font-size:12px !important; line-height:1.5 !important; }
body.membership-page .membership-plan-price { min-height:72px; margin:15px 0 !important; padding:12px !important; border:1px solid #dce4eb !important; border-radius:14px !important; background:#f3f6f8 !important; }
body.membership-page .membership-plan-price :is(.text-3xl,.text-base) { color:#293a50 !important; }
body.membership-page .membership-plan-price > span { color:#617588 !important; font-size:10px !important; }
body.membership-page .membership-plan-card label { color:#344256 !important; }
body.membership-page .membership-select-wrap { position:relative; }
body.membership-page .membership-select-wrap select { width:100%; min-height:44px; padding-right:42px !important; appearance:none; -webkit-appearance:none; color:#344256 !important; background:#f7f9fb !important; border-color:#d4dee6 !important; box-shadow:none !important; }
body.membership-page .membership-select-wrap > svg { position:absolute; top:50%; right:12px; width:17px; height:17px; transform:translateY(-50%); pointer-events:none; color:#526a70; }
body.membership-page .membership-plan-features { margin-top:auto !important; padding-top:14px; }
body.membership-page .membership-plan-features li { display:flex; align-items:flex-start; gap:8px; color:#46566c !important; font-size:12px !important; line-height:1.45 !important; }
body.membership-page .membership-plan-features li > svg { width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:#64877f !important; }
body.membership-page .membership-plan-card ul:not(.membership-plan-features) { margin-top:auto; padding-top:14px; }
body.membership-page .membership-plan-card ul:not(.membership-plan-features) li { display:flex; align-items:flex-start; gap:8px; color:#46566c !important; font-size:12px !important; line-height:1.45 !important; }
body.membership-page .membership-plan-card ul:not(.membership-plan-features) li > svg { width:15px; height:15px; flex:0 0 auto; margin-top:1px; color:#64877f !important; }
body.membership-page .membership-plan-card .membership-buy-button,
body.membership-page .membership-plan-card button.membership-buy-button { min-height:48px; margin-top:18px; border:0 !important; border-radius:12px; color:#fff !important; font-size:12px !important; font-weight:800; }
/* Keep the purchase actions on one baseline across cards with different feature counts. */
body.membership-page .membership-plan-card .membership-plan-body > .space-y-3 {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
}
body.membership-page .membership-plan-card .membership-plan-body > .space-y-3 > ul {
    margin-top:0 !important;
}
body.membership-page .membership-plan-card .membership-plan-body > .space-y-3 > div:last-child {
    margin-top:auto !important;
    padding-top:18px !important;
}
body.membership-page #package-card-city .membership-plan-body,
body.membership-page #package-card-full .membership-plan-body { min-height:100%; }
body.membership-page .membership-plan-card > button.membership-buy-button { flex:0 0 auto; margin-top:18px !important; }
body.membership-page .membership-buy-button :is(span,svg) { color:#fff !important; }
body.membership-page .membership-buy-button:disabled { opacity:.55; }
body.membership-page #package-card-city .membership-plan-price,
body.membership-page #package-card-region .membership-plan-price,
body.membership-page #package-card-full .membership-plan-price { background:#f3f6f8 !important; border-color:#dce4eb !important; }
/* ====================================================================
   ÜYELİK YÜKSELTME MODAL / BOTTOM SHEET TASARIMI (#upgradeConfirmModal)
   ==================================================================== */
.upgrade-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.25s ease;
}
.upgrade-confirm-overlay.hidden { display: none !important; }
.upgrade-confirm-card {
    position: relative;
    width: min(100%, 460px);
    padding: 32px 28px 26px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.03);
    text-align: center;
    overflow: hidden;
    animation: upgradeCardPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes upgradeCardPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.upgrade-confirm-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 9999px !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.24) !important;
    color: #ef4444 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}
.upgrade-confirm-close:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    transform: scale(1.06) !important;
}
.upgrade-confirm-header-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.upgrade-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 95, 70, 0.06));
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    color: #059669;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}
.upgrade-confirm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.upgrade-confirm-card h2 {
    margin: 0 0 6px;
    color: #0f172a;
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.upgrade-confirm-card p#upgradeConfirmDescription {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.5;
}
.upgrade-confirm-details-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 13px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1.5px solid #e2e8f0;
    margin-bottom: 12px;
}
.upgrade-confirm-details-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    letter-spacing: 0.02em;
}
.upgrade-confirm-card .upgrade-confirm-details {
    margin: 0;
    color: #0f172a;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 800;
}
.upgrade-confirm-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 22px;
}
.upgrade-confirm-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.upgrade-confirm-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
    transition: all 0.2s ease;
}
.upgrade-confirm-cancel {
    flex: 1;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0 !important;
}
.upgrade-confirm-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.upgrade-confirm-continue {
    flex: 1.6;
    color: #ffffff !important;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}
.upgrade-confirm-continue:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
    filter: brightness(1.04);
    transform: translateY(-1px);
}
body.upgrade-confirm-open { overflow: hidden; }
@media(max-width:640px) {
    body.membership-page:not(.account-panel-page) > main { padding-bottom:92px !important; }
    body.membership-page.account-panel-page > main { padding-bottom:24px !important; }
    body.membership-page .membership-plan-grid { grid-template-columns:minmax(0,1fr); }
    body.membership-page .membership-plan-card { padding:18px; }
    body.membership-page .membership-hero-card { padding:20px 15px; }
    body.membership-page .membership-hero-card > p { font-size:12px; }
    body.membership-page .membership-hero-metrics { gap:6px; }
    body.membership-page .membership-hero-metrics > div { grid-template-columns:1fr; justify-items:center; row-gap:3px; padding:9px 3px; }
    body.membership-page .membership-hero-metrics svg { grid-row:auto; width:16px; height:16px; }
    body.membership-page .membership-hero-metrics strong { font-size:16px; }
    body.membership-page .membership-hero-metrics span { font-size:9px; }
    /* Mobil Bottom Sheet Uyumu (#upgradeConfirmModal) */
    .upgrade-confirm-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .upgrade-confirm-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 28px 28px 0 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
        box-shadow: 0 -14px 44px rgba(15, 23, 42, 0.22) !important;
        animation: upgradeSheetSlideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .upgrade-confirm-card::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 9999px;
        background: #cbd5e1;
        margin: 0 auto 16px;
    }
    .upgrade-confirm-actions {
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .upgrade-confirm-actions button {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 15px !important;
    }
    @keyframes upgradeSheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    /* ==============================================================
       MOBİLDE TÜM KUTULARDA İKONLAR ÜST ORTADA (Daha ferah ve yer tasarruflu)
       ============================================================== */
    /* 1. VIP Üyelik Güven Strip Kutucukları (256-Bit SSL, Anında Aktivasyon vb.) */
    .membership-trust-strip .membership-trust-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 14px 10px !important;
        gap: 8px !important;
    }
    .membership-trust-strip .membership-trust-item > div:first-child {
        margin: 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    .membership-trust-strip .membership-trust-item > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .membership-trust-strip .membership-trust-item h4 {
        text-align: center !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        margin: 0 auto !important;
        width: 100% !important;
        white-space: normal !important;
    }
    .membership-trust-strip .membership-trust-item p {
        text-align: center !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin: 3px auto 0 !important;
        width: 100% !important;
    }

    /* 2. Aktif Üyelik Banner Kutusu */
    .membership-upgrade-banner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 18px 14px !important;
        gap: 12px !important;
    }
    .membership-upgrade-banner > div:first-child {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .membership-upgrade-banner > div:first-child > span {
        margin: 0 auto !important;
        width: 44px !important;
        height: 44px !important;
    }
    .membership-upgrade-banner > div:first-child > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .membership-upgrade-banner > div:first-child > div > div {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .membership-upgrade-banner a {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px !important;
    }

    /* 3. 256-Bit SSL Güvenlik ve Garanti Kartı */
    .membership-security-guarantee-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 16px !important;
        gap: 12px !important;
    }
    .membership-security-guarantee-card > div:first-child {
        margin: 0 auto !important;
    }
    .membership-security-guarantee-card > div:last-child {
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    .membership-security-guarantee-card h3 {
        text-align: center !important;
    }

    /* 4. Kullanıcı Paneli Özet Kartları (account-summary-card) */
    .account-summary-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 16px 12px !important;
        gap: 8px !important;
    }
    .account-summary-icon {
        margin: 0 auto 4px !important;
    }
    .account-summary-card > div:last-child {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .account-summary-card small,
    .account-summary-card strong,
    .account-summary-card span {
        text-align: center !important;
        width: 100% !important;
        white-space: normal !important;
    }
    .account-upgrade-inline-link {
        margin: 6px auto 0 !important;
    }

    /* 5. Abonelik Tarih Kutuları */
    .account-subscription-dates {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .account-subscription-dates article {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 14px 10px !important;
        gap: 6px !important;
    }
    .account-subscription-dates article i,
    .account-subscription-dates article svg {
        margin: 0 auto !important;
    }
    .account-subscription-dates article div {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .account-subscription-dates article small,
    .account-subscription-dates article strong {
        text-align: center !important;
        width: 100% !important;
    }

    /* 6. Hesap Araçları Hızlı Erişim Kartları */
    .account-action-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 12px !important;
        gap: 8px !important;
    }
    .account-action-icon {
        margin: 0 auto !important;
    }
    .account-action-copy {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .account-action-copy strong,
    .account-action-copy small {
        text-align: center !important;
        width: 100% !important;
    }
    .account-action-arrow {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
    }

    /* 7. Seçim Geri Dönüş Bildirim Kutusu (Mobilde İkon Üst Ortada) */
    .selection-return-notice {
        padding: 16px 14px !important;
        margin-bottom: 20px !important;
    }
    .selection-notice-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .selection-notice-icon {
        margin: 0 auto !important;
    }
    .selection-notice-content {
        align-items: center !important;
        text-align: center !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    .selection-notice-badge {
        margin: 0 auto !important;
    }
    .selection-notice-text {
        text-align: center !important;
        font-size: 12.5px !important;
    }
    .selection-notice-close {
        top: 12px !important;
        right: 12px !important;
        transform: none !important;
    }
}

/* ====================================================================
   SEÇİM GERİ DÖNÜŞ BİLDİRİM KUTUSU (#selectionReturnNotice & #checkoutMessage)
   ==================================================================== */
.selection-return-notice {
    position: relative;
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 16px 20px;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1.5px solid #a7f3d0 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.03);
    color: #1e293b !important;
    transition: all 0.25s ease;
}

.selection-return-notice.hidden {
    display: none !important;
}

.selection-notice-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-notice-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 95, 70, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.selection-notice-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding-right: 30px;
}

.selection-notice-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #047857;
    background: #ecfdf5;
    padding: 2.5px 9px;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.selection-notice-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
}

.selection-notice-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.selection-notice-close:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-50%) scale(1.06);
}

/* Durum Bildirimleri (#checkoutMessage) */
#checkoutMessage {
    max-width: 900px;
    margin: 0 auto 24px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}
#checkoutMessage.border-emerald-500\/40 {
    border: 1.5px solid #10b981 !important;
    color: #047857 !important;
    background: #f0fdf4 !important;
}
#checkoutMessage.border-red-500\/40 {
    border: 1.5px solid #ef4444 !important;
    color: #b91c1c !important;
    background: #fef2f2 !important;
}

body.membership-page .membership-trust-grid article > svg { padding:4px; box-sizing:content-box; border-radius:10px; background:#edf3f2; }

body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header { background:#fff !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header > div > div:first-child { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .region-wizard-header button { color:#647b84 !important; background:#f2f5f7 !important; border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .basin-select-row :is(svg,[class*="text-cyan-"],[class*="text-blue-"],[class*="text-amber-"]) { color:#718f89 !important; }
body:not(.map-page):not(.admin-map-page) #regionWizardModal .basin-select-row button { color:#64877f !important; background:#f2f6f5 !important; border-color:#dce4eb !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div > div:nth-of-type(1) > div:first-child { color:#64877f !important; background:#edf3f2 !important; border-color:#d8e3e1 !important; box-shadow:none !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div > div:nth-of-type(1) > div:first-child svg { color:#64877f !important; }
body:not(.map-page):not(.admin-map-page) #selectionConfirmAuthModal > div:before { background-image:none !important; }

/* Site-wide tab typography standard: readable labels and consistent touch targets. */
body :is(button[role="tab"], .legal-tab-button, [id^="sheetTabBtn"], [id^="reportTabBtn"], [id^="aiTabBtn"]) {
    min-height: 46px !important;
    padding: 10px 15px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}
body :is(button[role="tab"], .legal-tab-button, [id^="sheetTabBtn"], [id^="reportTabBtn"], [id^="aiTabBtn"]) svg {
    width: 18px !important;
    height: 18px !important;
}

/* Subfooter text stays compact and wraps cleanly on narrow screens. */
body :is(.account-subfooter,.admin-subfooter) { font-size:11px !important; line-height:1.4 !important; }
body :is(.account-subfooter,.admin-subfooter) nav { min-width:0; gap:6px 12px !important; }
body :is(.account-subfooter,.admin-subfooter) a { font-size:11px !important; line-height:1.4 !important; }
body :is(.account-subfooter,.admin-subfooter) .account-subfooter-inner { flex-wrap:wrap; }
@media (max-width:640px) {
    body :is(.account-subfooter,.admin-subfooter) { font-size:10px !important; }
    body :is(.account-subfooter,.admin-subfooter) :is(span,a) { font-size:10px !important; }
    body :is(.account-subfooter,.admin-subfooter) nav { justify-content:center; gap:5px 10px !important; }
}

/* Akademik ansiklopedi: açık, site temasına uyumlu kart yüzeyleri */
#encyclopediaModal .encyclopedia-shell { background:#f4f7fa !important; border-color:#dbe3ea !important; box-shadow:0 18px 50px rgba(34,52,72,.18) !important; }
#encyclopediaModal .encyclopedia-header { background:#fff !important; border-color:#e1e7ed !important; }
#encyclopediaModal .encyclopedia-header h2 { color:#26364d !important; }
#encyclopediaModal .encyclopedia-header p { color:#718096 !important; }
#encyclopediaModal .encyclopedia-icon { color:#527a70 !important; background:#e7f0ed !important; border-color:#d2e2dc !important; }
#encyclopediaModal .encyclopedia-search { color:#26364d !important; background:#f7f9fb !important; border-color:#dbe3ea !important; }
#encyclopediaModal .encyclopedia-search::placeholder { color:#8794a4 !important; }
#encyclopediaModal .encyclopedia-categories { background:#f4f7fa !important; border-color:#e1e7ed !important; }
#encyclopediaModal #encyclopediaGrid > div { background:#fff !important; border-color:#dbe3ea !important; box-shadow:0 4px 12px rgba(34,52,72,.06) !important; }
#encyclopediaModal #encyclopediaGrid > div h4 { color:#26364d !important; }
#encyclopediaModal #encyclopediaGrid > div .border-t { border-color:#e1e7ed !important; }

/* Hedef tür seçici, Akademik Ansiklopedi ile aynı açık kart dili */
#speciesModal { background:rgba(28,42,57,.48) !important; }
#speciesModal .species-picker-shell { background:#f4f7fa !important; border-color:#dbe3ea !important; box-shadow:0 18px 50px rgba(34,52,72,.2) !important; }
#speciesModal .species-picker-icon { color:#527a70 !important; background:#e7f0ed !important; border-color:#d2e2dc !important; }
#speciesModal .species-picker-dismiss { color:#52627a !important; background:#eef2f5 !important; }
#speciesModal .species-picker-dismiss:hover { color:#26364d !important; background:#e2e8ee !important; }
#speciesModal .species-picker-search { color:#26364d !important; background:#fff !important; border-color:#dbe3ea !important; }
#speciesModal .species-picker-search::placeholder { color:#8794a4 !important; }
#speciesModal #speciesSearchInput + button { color:#64748b !important; }
#speciesModal .category-pill-row { border-color:#e1e7ed !important; }
#speciesModal .category-pill svg { color:#fff !important; stroke:#fff !important; }
#speciesModal .species-picker-row { background:#fff !important; border-color:#dbe3ea !important; color:#26364d !important; box-shadow:0 2px 8px rgba(34,52,72,.045) !important; }
#speciesModal .species-picker-row:hover { background:#f8fafb !important; border-color:#b9c9d4 !important; }
#speciesModal .species-picker-row.is-selected { background:#eaf3ef !important; border-color:#7b9c91 !important; box-shadow:0 0 0 1px rgba(82,122,112,.12) !important; }
#speciesModal .species-picker-water { color:#526b7c !important; background:#f1f5f7 !important; border-color:#dce4e9 !important; }
#speciesModal .species-picker-name { color:#26364d !important; }
#speciesModal .species-picker-science { color:#718096 !important; }
#speciesModal .species-picker-science span { color:#52627a !important; }
#speciesModal .species-picker-popular { color:#785500 !important; background:#fff7e5 !important; border:1px solid #efdfb0 !important; }
#speciesModal .species-picker-legal { color:#52627a !important; background:#f1f5f7 !important; border:1px solid #dce4e9 !important; }
#speciesModal .species-picker-legal.has-limit { color:#785500 !important; background:#fff8e7 !important; border-color:#ebd391 !important; }
#speciesModal .species-picker-selected { color:#486b5f !important; }
#speciesModal .species-picker-footer { border-color:#e1e7ed !important; color:#718096 !important; }
#speciesModal .species-picker-close { color:#fff !important; background:#648d84 !important; }
#speciesModal .species-picker-close:hover { background:#527a72 !important; }
.species-empty-state { position:absolute; z-index:650; left:50%; top:50%; transform:translate(-50%,-50%); width:min( min(92vw, 420px), calc(100% - 28px)); padding:16px 20px; border:1px solid #dbe3ea; border-radius:16px; background:rgba(255,255,255,.96); color:#40566c; text-align:center; font-size:14px; font-weight:700; line-height:1.5; box-shadow:0 8px 24px rgba(30,48,66,.16); pointer-events:none; }
@media (max-width: 767px) {
    #speciesModal {
        align-items: flex-end !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }
    #speciesModal .species-picker-shell,
    #speciesModal > div {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 18px 16px max(16px, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -14px 44px rgba(15, 23, 42, 0.22) !important;
    }
}
@media (min-width: 1024px) {
    body :is(button[role="tab"], .legal-tab-button, [id^="sheetTabBtn"], [id^="reportTabBtn"], [id^="aiTabBtn"]) {
        min-height: 50px !important;
        padding: 12px 18px !important;
        font-size: 16px !important;
    }
}

/* Forecast popover heading: stronger contrast and a clearly visible subject icon. */
#forecastDaysPopover #forecastPopoverIcon { display:block !important;width:26px !important;height:26px !important;color:#344256 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;stroke-width:2 !important; }
#forecastDaysPopover #forecastPopoverIcon svg { width:22px !important;height:22px !important;stroke-width:2.2 !important; }
#forecastDaysPopover #forecastPopoverTitle { color:#25364b !important;font-size:15px !important;font-weight:800 !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important; }
#forecastDaysPopover #popoverLocationText { color:#52627a !important;font-size:12px !important;font-weight:700 !important;line-height:1.35 !important; }
#forecastDaysPopover > div:first-child > button[aria-label="Tahmin penceresini kapat"] { top:0 !important;right:0 !important;width:32px !important;height:32px !important; }
@media (max-width:639px) {
    #forecastDaysPopover #forecastPopoverTitle { font-size:14px !important;white-space:nowrap !important; }
    #forecastDaysPopover #popoverLocationText { font-size:11px !important; }
}

/* Final responsive width for the nine-day forecast popover. */
#forecastDaysPopover {
    width:min(560px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    box-sizing:border-box !important;
}
@media (max-width:639px) {
    #forecastDaysPopover {
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
    }
}

/* Shared CTA contrast: keep action buttons matte and readable on every page. */
button[class*="bg-emerald"], button[class*="bg-teal"], button[class*="bg-cyan"],
button[class*="bg-green"], button[class*="bg-blue"], button[class*="bg-indigo"],
button[class*="bg-purple"], button[class*="bg-amber"], button[class*="from-emerald"],
button[class*="from-cyan"], button[class*="from-teal"],
a[class*="bg-emerald"], a[class*="bg-teal"], a[class*="bg-cyan"],
a[class*="bg-green"], a[class*="bg-blue"], a[class*="bg-indigo"],
a[class*="bg-purple"], a[class*="bg-amber"], a[class*="from-emerald"],
a[class*="from-cyan"], a[class*="from-teal"] {
    color: #fff !important;
    border-color: #245f50 !important;
    background: #176b55 !important;
    background-image: none !important;
    box-shadow: none !important;
}
button[class*="bg-emerald"]:hover, button[class*="bg-teal"]:hover, button[class*="bg-cyan"]:hover,
button[class*="bg-green"]:hover, button[class*="bg-blue"]:hover, button[class*="bg-indigo"]:hover,
button[class*="bg-purple"]:hover, button[class*="bg-amber"]:hover, a[class*="bg-emerald"]:hover,
a[class*="bg-teal"]:hover, a[class*="bg-cyan"]:hover, a[class*="bg-green"]:hover,
a[class*="bg-blue"]:hover, a[class*="bg-indigo"]:hover, a[class*="bg-purple"]:hover,
a[class*="bg-amber"]:hover { color:#fff !important; background:#115a48 !important; }

/* Catch diary summary and history cards: clear hierarchy, single-line labels. */
body.account-subpage .catch-journal-summary { border:1px solid #dce4ec !important; border-radius:22px !important; background:#fff !important; box-shadow:0 10px 28px rgba(31,51,70,.07) !important; }
body.account-subpage .catch-journal-summary h1 { color:#23354b !important; }
body.account-subpage .catch-journal-summary p { color:#62738a !important; }
body.account-subpage .journal-stat-card { min-width:0; padding:12px !important; border:1px solid #dce4ec !important; border-radius:15px !important; background:#f8fafc !important; }
body.account-subpage .journal-stat-card > span:first-child { overflow:hidden; color:#62738a !important; font-size:10px !important; line-height:1.35 !important; text-overflow:ellipsis; white-space:nowrap; }
body.account-subpage .journal-stat-card > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catch-history-card { display:flex; min-width:0; align-items:stretch; gap:13px; padding:13px; border:1px solid #dce4ec; border-radius:18px; background:#fff; box-shadow:0 5px 16px rgba(31,51,70,.06); }
.catch-history-content { display:flex; min-width:0; flex:1; flex-direction:column; justify-content:center; gap:8px; }
.catch-history-photo { position:relative; display:block; width:76px; min-width:76px; height:76px; overflow:hidden; padding:0; border:1px solid #dce4ec !important; border-radius:13px; background:#eef2f6 !important; color:#fff !important; cursor:zoom-in; }
.catch-history-photo img { width:100%; height:100%; object-fit:cover; }
.catch-history-photo > svg { position:absolute; right:5px; bottom:5px; width:18px; height:18px; padding:3px; border-radius:6px; background:rgba(15,23,42,.72); color:#fff; }
.catch-history-topline { display:flex; min-width:0; align-items:center; gap:8px; }
.catch-history-topline h3 { min-width:0; overflow:hidden; color:#23354b; font:700 16px/1.3 'Outfit',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.catch-history-quantity { flex:0 0 auto; padding:4px 8px; border-radius:999px; color:#285c4e; background:#e9f3ef; font-size:11px; font-weight:800; white-space:nowrap; }
.catch-history-topline time { flex:0 0 auto; margin-left:auto; overflow:hidden; color:#77869a; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.catch-history-location { display:flex; min-width:0; align-items:center; gap:5px; overflow:hidden; color:#566980; font-size:12px; white-space:nowrap; }
.catch-history-location svg { width:14px; height:14px; flex:0 0 auto; color:#547c70; }
.catch-history-location strong,.catch-history-location span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catch-history-location strong { color:#34465c; }
.catch-history-facts { display:flex; min-width:0; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.catch-history-facts::-webkit-scrollbar { display:none; }
.catch-history-facts > span,.catch-detail { display:inline-flex; min-height:25px; flex:0 0 auto; align-items:center; gap:4px; padding:4px 7px; border:1px solid #e1e7ed; border-radius:8px; color:#596b80; background:#f8fafc; font-size:10px; line-height:1; white-space:nowrap; }
.catch-history-facts b { color:#34465c; }
.catch-detail svg { width:12px; height:12px; color:#657d8f; }
.catch-history-extra { display:flex; min-width:0; align-items:center; gap:6px; overflow:hidden; color:#68788d; font-size:11px; white-space:nowrap; }
.catch-history-extra svg { width:14px; height:14px; flex:0 0 auto; color:#607b70; }
.catch-history-extra span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catch-history-note { min-width:0; color:#5e7084; font-size:11px; }
.catch-history-note summary { width:max-content; max-width:100%; overflow:hidden; color:#496c61; font-weight:700; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.catch-history-note p { overflow-wrap:anywhere; margin:6px 0 0; color:#596b80; font-size:12px !important; line-height:1.5 !important; }
@media(max-width:560px) {
    .catch-history-card { gap:9px; padding:10px; border-radius:15px; }
    .catch-history-photo { width:62px; min-width:62px; height:62px; }
    .catch-history-content { gap:6px; }
    .catch-history-topline { gap:5px; }
    .catch-history-topline h3 { font-size:14px; }
    .catch-history-quantity { padding:4px 6px; font-size:10px; }
    .catch-history-topline time { font-size:10px; }
    .catch-history-location { font-size:11px; }
    .catch-history-facts { gap:4px; }
    .catch-history-facts > span,.catch-detail { min-height:23px; padding:4px 6px; font-size:9px; }
    .catch-history-extra { font-size:10px; }
}

/* Enforce white foreground on CTA contents too; child text utilities must not turn it dark. */
:is(button, a)[class*="bg-emerald"], :is(button, a)[class*="from-emerald"],
:is(button, a)[class*="bg-teal"], :is(button, a)[class*="from-teal"] {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
:is(button, a)[class*="bg-emerald"] :is(span, strong, small, i, svg),
:is(button, a)[class*="from-emerald"] :is(span, strong, small, i, svg),
:is(button, a)[class*="bg-teal"] :is(span, strong, small, i, svg),
:is(button, a)[class*="from-teal"] :is(span, strong, small, i, svg),
:is(button, a)[href="/av-bildir"], :is(button, a)[href="/av-bildir"] * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Kullanıcı paneli: mat ve yüksek kontrastlı metinler/ikonlar. */
body.account-panel-page .account-eyebrow { color:#536477 !important; }
body.account-panel-page .account-eyebrow > span { background:#65766f !important; box-shadow:none !important; }
body.account-panel-page .account-welcome h1,
body.account-panel-page .account-section-heading h2,
body.account-panel-page .account-action-copy strong,
body.account-panel-page .account-catch-copy strong,
body.account-panel-page .account-feed-empty strong { color:#24364b !important; }
body.account-panel-page .account-welcome p,
body.account-panel-page .account-summary-card small,
body.account-panel-page .account-summary-card span,
body.account-panel-page .account-action-copy small,
body.account-panel-page .account-catch-copy small,
body.account-panel-page .account-feed-empty p,
body.account-panel-page .account-footnote { color:#586a7e !important; }
body.account-panel-page .account-summary-card,
body.account-panel-page .account-action-card,
body.account-panel-page .account-catch-card {
    color:#293b50 !important;
    background:#fff !important;
    border-color:#dce4ec !important;
    box-shadow:0 4px 12px rgba(31,51,70,.045) !important;
}
body.account-panel-page .account-summary-card strong { color:#293b50 !important; }
body.account-panel-page .account-summary-icon,
body.account-panel-page .account-summary-icon-cyan,
body.account-panel-page .account-summary-icon-blue,
body.account-panel-page .account-action-icon,
body.account-panel-page .account-action-icon.is-amber,
body.account-panel-page .account-action-icon.is-whatsapp,
body.account-panel-page .account-action-icon.is-blue,
body.account-panel-page .account-action-icon.is-slate,
body.account-panel-page .account-empty-icon,
body.account-panel-page .account-catch-card > img,
body.account-panel-page .account-catch-placeholder {
    border-color:#dce4e8 !important;
    background:#f1f4f5 !important;
    box-shadow:none !important;
}
body.account-panel-page .account-summary-icon { color:#75613f !important; }
body.account-panel-page .account-summary-icon-cyan,
body.account-panel-page .account-action-icon.is-green,
body.account-panel-page .account-action-icon.is-whatsapp,
body.account-panel-page .account-empty-icon,
body.account-panel-page .account-catch-card > img,
body.account-panel-page .account-catch-placeholder { color:#48675c !important; }
body.account-panel-page .account-summary-icon-blue,
body.account-panel-page .account-action-icon.is-blue { color:#4b6076 !important; }
body.account-panel-page .account-action-icon.is-amber { color:#75613f !important; }
body.account-panel-page .account-action-icon.is-slate { color:#586777 !important; }
body.account-panel-page .account-action-arrow,
body.account-panel-page .account-catch-arrow { color:#5b6d80 !important; }
body.account-panel-page .account-text-link,
body.account-panel-page .account-text-link svg { color:#35495e !important; }
body.account-panel-page .account-feed-loading,
body.account-panel-page .account-feed-empty { color:#586a7e !important; background:#fff !important; border-color:#dce4ec !important; }
body.account-panel-page .account-feed-loading span { border-color:#cbd5dc !important; border-top-color:#506b60 !important; }
body.account-panel-page .account-feed-empty > a { color:#3f6355 !important; }
body.account-panel-page .account-catch-copy small svg,
body.account-panel-page .account-footnote svg { color:#536d62 !important; }
body.account-panel-page .account-action-card:hover { background:#f8fafb !important; border-color:#cbd7df !important; }
body.account-panel-page .account-action-card.is-upgrade-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.09) 0%, rgba(5, 150, 105, 0.04) 100%) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.38) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08) !important;
}
body.account-panel-page .account-action-card.is-upgrade-card:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.08) 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18) !important;
}
body.account-panel-page .account-action-card.is-upgrade-card .account-action-icon {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
}
body.account-panel-page .account-action-card.is-upgrade-card .account-action-copy strong {
    color: #047857 !important;
    font-weight: 800 !important;
}
body.account-panel-page .account-action-card.is-upgrade-card .account-action-copy small {
    color: #065f46 !important;
}
body.account-panel-page .account-action-card.is-upgrade-card .account-action-arrow {
    color: #059669 !important;
}
body.account-panel-page .account-mobile-toolbar .account-sidebar-launcher,
body.account-panel-page .account-mobile-toolbar .account-weather-chip {
    color:#34465a !important;
    background:rgba(255,255,255,.92) !important;
    border-color:#d4dee5 !important;
    box-shadow:none !important;
}
body.account-panel-page .account-mobile-toolbar .account-sidebar-launcher svg,
body.account-panel-page .account-mobile-toolbar .account-weather-icon,
body.account-panel-page .account-mobile-toolbar .account-weather-icon svg,
body.account-panel-page .account-mobile-toolbar .account-weather-copy small,
body.account-panel-page .account-mobile-toolbar .account-weather-copy strong,
body.account-panel-page .account-mobile-toolbar .account-weather-copy > span { color:#40566a !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon {
    border-color:#d4dee5 !important;
    background:#edf1f3 !important;
}
body.account-panel-page .account-mobile-toolbar .account-weather-copy small { font-weight:750 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="clear"] { color:#9a6b16 !important; background:#f7f0df !important; border-color:#e8d9b4 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="partly-cloudy"],
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="cloudy"] { color:#52677b !important; background:#e9eef2 !important; border-color:#d0dae2 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="fog"] { color:#65727d !important; background:#edf0f2 !important; border-color:#d9dfe3 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="drizzle"],
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="rain"] { color:#416b8b !important; background:#e7eff5 !important; border-color:#ccdce8 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="snow"] { color:#55758c !important; background:#edf3f6 !important; border-color:#d5e1e8 !important; }
body.account-panel-page .account-mobile-toolbar .account-weather-icon[data-weather-state="storm"] { color:#55516f !important; background:#eeedf4 !important; border-color:#d9d6e5 !important; }
body.account-panel-page .account-primary-button,
body.account-panel-page .account-primary-button :is(span,svg) {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

/* Ana harita sayfasının açılır menüsü de genel açık, mat temayla uyumlu olsun. */
#mobileSideDrawer {
    color:#2b3d52 !important;
    background:#f7f9fb !important;
    border-left:1px solid #dce4eb !important;
    box-shadow:-10px 0 28px rgba(31,51,70,.12) !important;
}
#mobileSideDrawer .mobile-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid #dce4eb !important;
}

/* Mobil Yan Menü: Giriş Yap / Profil Kartı (Açık Temaya Uygun Şeffaf Yeşil) */
#mobileSideDrawer #drawerProfileCard,
#mobileSideDrawer .drawer-profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06) !important;
    color: #0f172a !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#mobileSideDrawer #drawerProfileCard:hover,
#mobileSideDrawer .drawer-profile:hover {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
}

#mobileSideDrawer #drawerProfileCard:active,
#mobileSideDrawer .drawer-profile:active {
    transform: scale(0.98) !important;
    background: rgba(16, 185, 129, 0.18) !important;
}

#mobileSideDrawer .drawer-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.32) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#mobileSideDrawer #drawerAvatarIcon {
    color: #047857 !important;
    stroke: #047857 !important;
    width: 18px !important;
    height: 18px !important;
}

#mobileSideDrawer .drawer-profile-name,
#mobileSideDrawer #drawerProfileName {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1.25 !important;
}

#mobileSideDrawer .drawer-profile-sub,
#mobileSideDrawer #drawerProfileSub,
#mobileSideDrawer #drawerProfileSub span,
#mobileSideDrawer .drawer-profile-sub span {
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-top: 1px !important;
}

#mobileSideDrawer .drawer-profile-sub i,
#mobileSideDrawer .drawer-profile-sub svg,
#mobileSideDrawer #drawerProfileSub i,
#mobileSideDrawer #drawerProfileSub svg {
    color: #047857 !important;
    stroke: #047857 !important;
}

/* Mobil Yan Menü: Şeffaf Kapatma Butonu */
#mobileSideDrawer #drawerCloseBtn,
#mobileSideDrawer .drawer-close {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid #dce4ec !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
}

#mobileSideDrawer #drawerCloseBtn:hover,
#mobileSideDrawer .drawer-close:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

#mobileSideDrawer #drawerCloseBtn svg,
#mobileSideDrawer .drawer-close svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* Mobil Yan Menü: Z-Index ve Kapatma Güvencesi */
.mobile-drawer-backdrop,
#mobileDrawerBackdrop {
    z-index: 2100 !important;
}
.mobile-drawer,
#mobileSideDrawer {
    z-index: 2200 !important;
}
#mobileSideDrawer:not(.open) {
    transform: translateX(105%) !important;
    pointer-events: none !important;
}
#mobileSideDrawer.open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* Mobil Yan Menü: Kapatma Düğmesi (Kırmızı) */
#mobileSideDrawer #drawerCloseBtn,
#mobileSideDrawer .drawer-close {
    position: relative !important;
    z-index: 2250 !important;
    pointer-events: auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ef4444 !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    transition: all 0.18s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

#mobileSideDrawer #drawerCloseBtn svg,
#mobileSideDrawer #drawerCloseBtn i,
#mobileSideDrawer .drawer-close svg,
#mobileSideDrawer .drawer-close i {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
}

#mobileSideDrawer #drawerCloseBtn:hover,
#mobileSideDrawer .drawer-close:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

#mobileSideDrawer #drawerCloseBtn:hover svg,
#mobileSideDrawer .drawer-close:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#mobileSideDrawer #drawerCloseBtn:active,
#mobileSideDrawer .drawer-close:active {
    transform: scale(0.95) !important;
    background: #b91c1c !important;
}

#mobileSideDrawer .drawer-section { border-color:#dce4eb !important; }
#mobileSideDrawer .drawer-primary-link:active,
#mobileSideDrawer .drawer-tile:active,
#mobileSideDrawer .drawer-basin:active,
#mobileSideDrawer .drawer-tool-card:active { background:#e9eef2 !important; }
#mobileSideDrawer .drawer-tool-icon {
    color:#4b6074 !important;
    background:#edf1f4 !important;
    border-color:#d7e0e7 !important;
}
#mobileSideDrawer #drawerSpeciesName,
#mobileSideDrawer .drawer-primary-link,
#mobileSideDrawer .drawer-tile,
#mobileSideDrawer .drawer-basin,
#mobileSideDrawer .drawer-tool-card,
#mobileSideDrawer .drawer-report,
#mobileSideDrawer .drawer-section button,
#mobileSideDrawer select { color:#2d4055 !important; }
#mobileSideDrawer #drawerSpotsCount,
#mobileSideDrawer .drawer-label,
#mobileSideDrawer .drawer-tool-title,
#mobileSideDrawer .drawer-tool-desc,
#mobileSideDrawer .drawer-tool-info .text-slate-500 { color:#56697d !important; }
#mobileSideDrawer .drawer-label i,
#mobileSideDrawer .drawer-label svg,
#mobileSideDrawer .drawer-report svg,
#mobileSideDrawer .drawer-tool-icon svg,
#mobileSideDrawer .drawer-tool-card > svg:last-child { color:#526b60 !important; }

/* Menü İkon Rozetleri & Beyaz İkonlar */
#mobileSideDrawer .drawer-link-icon,
#mobileSideDrawer .drawer-species-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

#mobileSideDrawer .drawer-link-icon svg,
#mobileSideDrawer .drawer-primary-link .drawer-link-icon svg,
#mobileSideDrawer .drawer-species-icon svg,
#mobileSideDrawer .drawer-link-icon i,
#mobileSideDrawer .drawer-species-icon i {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 15px !important;
    height: 15px !important;
}

#mobileSideDrawer .drawer-icon-map {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
    border: 1px solid #14b8a6 !important;
}
#mobileSideDrawer .drawer-icon-fish,
#mobileSideDrawer .drawer-species-icon {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: 1px solid #10b981 !important;
}
#mobileSideDrawer .drawer-icon-ai {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    border: 1px solid #38bdf8 !important;
}
#mobileSideDrawer .drawer-icon-journal {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
    border: 1px solid #818cf8 !important;
}
#mobileSideDrawer .drawer-icon-vip {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    border: 1px solid #fbbf24 !important;
}
#mobileSideDrawer .drawer-icon-support {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    border: 1px solid #64748b !important;
}

#mobileSideDrawer .drawer-primary-link > svg:last-child {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
}
#mobileSideDrawer .drawer-vip-link > svg:last-child {
    color: #f59e0b !important;
    stroke: #f59e0b !important;
}
#mobileSideDrawer .drawer-vip-link {
    color: #b45309 !important;
    border-color: #fde68a !important;
    background: #fffbeb !important;
}

#mobileSideDrawer .drawer-chip-btn {
    color: #ffffff !important;
    background: #059669 !important;
}
#mobileSideDrawer .drawer-chip-btn:hover {
    background: #047857 !important;
}
#mobileSideDrawer .drawer-primary-link,
#mobileSideDrawer .drawer-tile,
#mobileSideDrawer .drawer-basin,
#mobileSideDrawer .drawer-species,
#mobileSideDrawer .drawer-tool-card,
#mobileSideDrawer .drawer-report,
#mobileSideDrawer select,
#mobileSideDrawer .drawer-section.p-2\.5 {
    background:#fff !important;
    border-color:#dce4eb !important;
}
#mobileSideDrawer .drawer-tile[data-map-mode] svg,
#mobileSideDrawer .drawer-tile.is-active,
#mobileSideDrawer .drawer-tile.is-active.is-overlay,
#mobileSideDrawer .drawer-basin.is-active,
#mobileSideDrawer .drawer-species:active,
#mobileSideDrawer .drawer-tool-card:active {
    color:#405b50 !important;
    border-color:#c7d5ce !important;
}
#mobileSideDrawer .drawer-tile.is-active,
#mobileSideDrawer .drawer-tile.is-active.is-overlay,
#mobileSideDrawer .drawer-basin.is-active { background:#edf2ef !important; }
#mobileSideDrawer .drawer-section .bg-slate-800,
#mobileSideDrawer .drawer-section .bg-slate-900 { background:#f1f4f6 !important; }
#mobileSideDrawer .drawer-section .text-emerald-400,
#mobileSideDrawer .drawer-section .text-emerald-300,
#mobileSideDrawer .drawer-section .text-cyan-400,
#mobileSideDrawer .drawer-section .text-cyan-300,
#mobileSideDrawer .drawer-section .text-teal-300,
#mobileSideDrawer .drawer-section .text-sky-400 { color:#50685f !important; }
#mobileSideDrawer .drawer-section :is(.text-slate-100,.text-slate-200,.text-slate-300,.text-slate-400) { color:#405267 !important; }
#mobileSideDrawer .drawer-section .border-slate-700,
#mobileSideDrawer .drawer-section .border-slate-800 { border-color:#dce4eb !important; }
#mobileSideDrawer .drawer-section .animate-ping { display:none !important; }
#mobileSideDrawer .drawer-close:hover { color:#26384c !important; background:#e9eef2 !important; }

/* Dokuz günlük tahmin: üçlü mobil ızgara, görünür pasif ve koyu seçili gün. */
#forecastDaysPopover.hidden { display:none !important; }
#forecastDaysPopover:not(.hidden) { display:flex !important; }
#forecastDaysPopover #forecastDaysStrip {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#forecastDaysPopover #forecastDaysStrip > .col-span-2,
#forecastDaysPopover #forecastDaysStrip > .col-span-3 { grid-column:1 / -1 !important; }
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card {
    min-width:0 !important;
    padding:9px 7px !important;
    gap:6px !important;
    color:#34475b !important;
    background:#e5ebef !important;
    border:1px solid #cbd6dd !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;
}
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card:hover,
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card:active {
    color:#293d50 !important;
    background:#cbd6dd !important;
    border-color:#aebdc7 !important;
}
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card.is-selected,
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card.is-selected:hover,
#forecastDaysPopover #forecastDaysStrip > button.forecast-day-card.is-selected:active {
    color:#fff !important;
    background:#4a6258 !important;
    border-color:#40574e !important;
}
#forecastDaysPopover .forecast-day-label,
#forecastDaysPopover .forecast-day-date,
#forecastDaysPopover .forecast-day-temp,
#forecastDaysPopover .forecast-wind-metric,
#forecastDaysPopover .forecast-wave-metric,
#forecastDaysPopover .forecast-water-metric,
#forecastDaysPopover .forecast-weather-icon { color:#34475b !important; }
#forecastDaysPopover .forecast-day-label { font-size:9px !important; }
#forecastDaysPopover .forecast-day-date { font-size:9px !important; }
#forecastDaysPopover .forecast-day-temp { font-weight:800 !important; }
#forecastDaysPopover .forecast-weather-icon { color:#657a6d !important; }
#forecastDaysPopover .forecast-wind-metric,
#forecastDaysPopover .forecast-water-metric { color:#526b60 !important; }
#forecastDaysPopover .forecast-wave-metric { color:#53697d !important; }
#forecastDaysPopover .forecast-day-card > div.border-t { border-color:#cbd6dd !important; }
#forecastDaysPopover .forecast-score-fill.bg-emerald-400 { background:#668272 !important; }
#forecastDaysPopover .forecast-score-fill.bg-amber-400 { background:#9a8258 !important; }
#forecastDaysPopover .forecast-score-fill.bg-rose-400 { background:#a16c6e !important; }
#forecastDaysPopover .forecast-day-card.is-selected :is(.forecast-day-label,.forecast-day-date,.forecast-day-temp,.forecast-wind-metric,.forecast-wave-metric,.forecast-water-metric,.forecast-weather-icon) { color:#fff !important; }
#forecastDaysPopover .forecast-day-card.is-selected > div.border-t { border-color:rgba(255,255,255,.28) !important; }
#forecastDaysPopover .forecast-day-card:focus-visible { outline:2px solid #657e71 !important; outline-offset:2px; }
@media(max-width:380px) {
    #forecastDaysPopover #forecastDaysStrip > button.forecast-day-card { padding:8px 5px !important; }
    #forecastDaysPopover .forecast-day-label,
    #forecastDaysPopover .forecast-day-date { font-size:8px !important; }
    #forecastDaysPopover .forecast-wind-metric,
    #forecastDaysPopover .forecast-wave-metric,
    #forecastDaysPopover .forecast-water-metric { font-size:8px !important; }
}

/* Hesap yan menüsü: marka ve profil başlığında sade, mat vurgu; kartla onay rozeti. */
body:is(.account-panel-page,.account-subpage) .account-brand strong {
    color:#26384d !important;
    text-align:left !important;
}
body:is(.account-panel-page,.account-subpage) .account-brand-mark {
    color:#526b60 !important;
    background:#edf2ef !important;
    border-color:#d4dfd9 !important;
    box-shadow:none !important;
}
body:is(.account-panel-page,.account-subpage) .account-brand strong span { display:none !important; }
body:is(.account-panel-page,.account-subpage) .account-user-card { align-items:flex-start !important; }
body:is(.account-panel-page,.account-subpage) .account-user-avatar {
    margin-top:1px !important;
    border: 1.5px solid #dce4eb !important;
    border-radius: 9999px !important;
    color:#536b60 !important;
    background:#f1f5f9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}
body:is(.account-panel-page,.account-subpage) .account-user-avatar img { border:0 !important; border-radius: 9999px !important; object-fit: cover !important; }
body:is(.account-panel-page,.account-subpage) .account-verified {
    width:20px !important;
    height:20px !important;
    padding:2px !important;
    border-radius:50% !important;
    color:#fff !important;
    background:#1d5da8 !important;
    stroke:#fff !important;
    stroke-width:2.8 !important;
}

/* Harita üst hava çubuğu: mobilde gezinme okları ve deniz suyu sıcaklığı görünür kalsın. */
@media (max-width:639px) {
    #weatherPillContainer:not(.hidden) #prevForecastDayBtn,
    #weatherPillContainer:not(.hidden) #nextForecastDayBtn {
        display:flex !important;
        width:24px !important;
        min-width:24px !important;
        height:24px !important;
        flex:0 0 24px !important;
        align-items:center !important;
        justify-content:center !important;
        border:0 !important;
        color:#f2f5f7 !important;
    }
    #weatherPillContainer #compactWeatherWater {
        display:inline !important;
        color:#f1f5f9 !important;
        font-size:9px !important;
    }
    #weatherPillContainer [data-forecast-summary] { gap:6px !important; padding-right:0 !important; }
    #weatherPillContainer #compactWeatherIconWrap { width:28px !important; height:28px !important; }
    #weatherPillContainer #compactWeatherWind,
    #weatherPillContainer #compactWeatherWave { font-size:9px !important; }
}
@media (max-width:380px) {
    #weatherPillContainer:not(.hidden) #prevForecastDayBtn,
    #weatherPillContainer:not(.hidden) #nextForecastDayBtn {
        width:20px !important;
        min-width:20px !important;
        height:22px !important;
        flex-basis:20px !important;
    }
    #weatherPillContainer #compactWeatherWater { font-size:8px !important; }
    #weatherPillContainer #compactWeatherWind,
    #weatherPillContainer #compactWeatherWave { font-size:8px !important; }
    #weatherPillContainer [data-forecast-summary] { gap:4px !important; }
    #weatherPillContainer #compactWeatherIconWrap { width:25px !important; height:25px !important; }
}

/* Keep the map's top controls anchored to the visible viewport and inside the safe area. */
#topFloatingHeader {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding-top:max(12px, calc(env(safe-area-inset-top, 0px) + 6px)) !important;
    padding-right:max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-left:max(8px, env(safe-area-inset-left, 0px)) !important;
    overflow:visible !important;
}
#topHeaderMainRow { width:100%; min-width:0; box-sizing:border-box; }
@media(max-width:767px) {
    body.mobile-drawer-open #weatherPillContainer,
    body.mobile-drawer-open #topHeaderActions { display:none !important; }
    #topHeaderMainRow { justify-content:space-between !important; gap:8px !important; }
    #topHeaderActions {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        z-index:50 !important;
        flex:0 0 auto !important;
        gap:6px !important;
        margin-left:0 !important;
        transform:none !important;
    }
    #weatherPillContainer:not(.hidden) {
        flex:1 1 0% !important;
        width:auto !important;
        max-width:calc(100% - 100px) !important;
        min-width:0 !important;
    }
    #weatherPillContainer:not(.hidden) > .flex {
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;
        box-sizing:border-box !important;
        gap:4px !important;
        overflow:hidden !important;
    }
    #weatherPillContainer [data-forecast-summary] {
        flex:1 1 0% !important;
        min-width:0 !important;
        max-width:100% !important;
        gap:4px !important;
        overflow:hidden !important;
    }
    #weatherPillContainer [data-forecast-summary] > div:nth-child(2) { min-width:0 !important; overflow:hidden !important; }
    #weatherPillContainer #compactWeatherIconWrap { width:26px !important; height:26px !important; flex:0 0 26px !important; }
    #topProfileButton,
    #topHamburgerButton { width:40px !important; height:40px !important; flex:0 0 40px !important; }
    #weatherPillLogo,
    .weather-pill-logo {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}
@media (max-width: 380px) {
    #weatherPillLogo,
    .weather-pill-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }
    #topProfileButton,
    #topHamburgerButton {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }
}

/* ====================================================================
   HAVA DURUMU KUTUSU EN SOLDAKİ ANASAYFA LOGOSU
   ==================================================================== */
#weatherPillLogo,
.weather-pill-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.16s ease, border-color 0.16s ease !important;
    margin-right: 2px !important;
}
#weatherPillLogo:hover,
.weather-pill-logo:hover {
    transform: scale(1.08) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}
#weatherPillLogo:active,
.weather-pill-logo:active {
    transform: scale(0.92) !important;
}
#weatherPillLogo img,
.weather-pill-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    pointer-events: none !important;
}
/* Leaflet panes use z-index values up to 700. Keep the account drawer above
   the report map and its controls when the mobile navigation is opened. */
body.account-subpage #accountNavBackdrop.is-visible { z-index: 9998 !important; }
body.account-subpage #accountSidebar { z-index: 9999 !important; }
body.account-subpage #accountMobileToolbar { z-index: 9997 !important; }

/* Keep every signed-in page on the same centered content rail. */
body.account-panel-page { --account-content-max: 1240px; --account-sidebar-width: 292px; }
@media (min-width: 901px) {
    body.account-subpage #photoLightboxModal {
        left: var(--account-sidebar-width, 292px) !important;
        right: 0 !important;
        width: calc(100% - var(--account-sidebar-width, 292px)) !important;
    }
}
@media (max-width: 900px) {
    body.account-subpage #photoLightboxModal {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}
body.account-panel-page .account-main > .account-content {
    width: min(var(--account-content-max), 100%);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 40px);
}
body.account-subpage .account-subpage-content {
    flex: 1 0 auto !important;
    width: min(var(--account-content-max), calc(100% - var(--account-sidebar-width)));
    max-width: var(--account-content-max);
    margin-left: max(var(--account-sidebar-width), calc(50vw - 474px));
    margin-right: 0;
    padding-inline: clamp(20px, 3vw, 40px);
}
body:is(.account-panel-page, .account-subpage) > .account-subfooter {
    width: calc(100% - var(--account-sidebar-width, 292px)) !important;
    margin-left: var(--account-sidebar-width, 292px) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}
body:is(.account-panel-page, .account-subpage) > .account-subfooter .account-subfooter-inner {
    width: min(var(--account-content-max), 100%);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 40px);
}
@media (max-width: 900px) {
    body.account-subpage .account-subpage-content { width: 100%; max-width: none; margin: 0; padding-inline: 22px; flex: 1 0 auto !important; }
    body.account-panel-page .account-main > .account-content { padding-inline: 22px; }
    body:is(.account-panel-page, .account-subpage) > .account-subfooter { width: 100% !important; margin-left: 0 !important; margin-top: auto !important; }
    body:is(.account-panel-page, .account-subpage) > .account-subfooter .account-subfooter-inner { width: 100%; padding-inline: 22px; }
}
@media (max-width: 640px) {
    body.account-subpage .account-subpage-content,
    body.account-panel-page .account-main > .account-content,
    body.account-panel-page > .account-subfooter .account-subfooter-inner { padding-inline: 16px; }
}

/* ====================================================================
   SATIN ALMA BUTONLARI: SAKİN, GÜVEN VEREN, İÇİ SAF BEYAZ VE NEONSUZ
   ==================================================================== */
body.membership-page .membership-plan-card button.membership-buy-button {
    min-height: 50px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.membership-page .membership-plan-card button.membership-buy-button span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Satın Alma Butonlarının İçi Saf Beyaz Yazı ve İkonlardan Oluşsun */
body.membership-page .membership-plan-card button.membership-buy-button:not(.is-current-plan):not(.is-lower-plan) {
    color: #ffffff !important;
    border: 0 !important;
}
body.membership-page .membership-plan-card button.membership-buy-button:not(.is-current-plan):not(.is-lower-plan) :is(span, svg, strong, i) {
    color: #ffffff !important;
    stroke: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 1. Tüm Türkiye (En Kapsamlı Paket) - Derin Güvenli Zümrüt Yeşili (Neon değil, sakin kurumsal zümrüt) */
body.membership-page #package-card-full .membership-buy-button:not(.is-current-plan):not(.is-lower-plan),
body.membership-page .membership-buy-button.is-action-full {
    background: #047857 !important;
    background-image: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
    border: 1px solid rgba(4, 120, 87, 0.6) !important;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.22) !important;
}
body.membership-page #package-card-full .membership-buy-button:not(.is-current-plan):not(.is-lower-plan):hover,
body.membership-page .membership-buy-button.is-action-full:hover {
    background: #065f46 !important;
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.32) !important;
    transform: translateY(-1.5px);
}

/* 2. Bölge Paketi - Derin Güvenli Kraliyet Lacivert / Banka Mavisi */
body.membership-page #package-card-region .membership-buy-button:not(.is-current-plan):not(.is-lower-plan),
body.membership-page .membership-buy-button.is-action-region {
    background: #1d4ed8 !important;
    background-image: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: 1px solid rgba(29, 78, 216, 0.6) !important;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.22) !important;
}
body.membership-page #package-card-region .membership-buy-button:not(.is-current-plan):not(.is-lower-plan):hover,
body.membership-page .membership-buy-button.is-action-region:hover {
    background: #1e40af !important;
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.32) !important;
    transform: translateY(-1.5px);
}

/* 3. Şehir Paketi - Sakin Derin Okyanus Petrolü */
body.membership-page #package-card-city .membership-buy-button:not(.is-current-plan):not(.is-lower-plan),
body.membership-page .membership-buy-button.is-action-city {
    background: #0f766e !important;
    background-image: linear-gradient(180deg, #115e59 0%, #0f766e 100%) !important;
    border: 1px solid rgba(15, 118, 110, 0.6) !important;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.2) !important;
}
body.membership-page #package-card-city .membership-buy-button:not(.is-current-plan):not(.is-lower-plan):hover,
body.membership-page .membership-buy-button.is-action-city:hover {
    background: #134e4a !important;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.3) !important;
    transform: translateY(-1.5px);
}

/* 4. Mevcut Paket Butonu - İçi Tertemiz Beyaz, Zarif Zümrüt Sınır, Sakin ve Güven Verici */
body.membership-page .membership-plan-card button.membership-buy-button.is-current-plan {
    background: #ffffff !important;
    background-image: none !important;
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
    cursor: pointer !important;
}
body.membership-page .membership-plan-card button.membership-buy-button.is-current-plan:hover {
    background: #f0fdf4 !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18) !important;
    transform: translateY(-1px);
}
body.membership-page .membership-plan-card button.membership-buy-button.is-current-plan :is(span, svg, strong, i) {
    color: #047857 !important;
    stroke: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
}

/* 5. Alt Kapsamdaki Paket Butonu - İçi Beyaz, Nötr Gri Sınır, Tıklanabilir */
body.membership-page .membership-plan-card button.membership-buy-button.is-lower-plan {
    background: #ffffff !important;
    background-image: none !important;
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
}
body.membership-page .membership-plan-card button.membership-buy-button.is-lower-plan:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    transform: translateY(-1px);
}
body.membership-page .membership-plan-card button.membership-buy-button.is-lower-plan :is(span, svg, strong, i) {
    color: #475569 !important;
    stroke: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

body.membership-page .membership-plan-card button.membership-buy-button:focus-visible { outline: 3px solid #10b981; outline-offset: 3px; }
body.membership-page .membership-plan-card button.membership-buy-button:disabled:not(.is-current-plan):not(.is-lower-plan) {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 256-Bit SSL & Güven Strip Bileşenleri */
.membership-trust-strip .membership-trust-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.membership-trust-strip .membership-trust-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28, 43, 60, 0.08);
}
.membership-security-guarantee-card {
    transition: all 0.25s ease;
}
.membership-security-guarantee-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 20px rgba(28, 43, 60, 0.06);
}

/* User panel inline upgrade button - Yeşile ve Tasarımsal Görünüme Kavuşturuldu */
.account-upgrade-inline-link {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6.5px 14px !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.account-upgrade-inline-link:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    transform: translateY(-1.5px) scale(1.02) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
}

.account-upgrade-inline-link:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}

.account-upgrade-inline-link svg,
.account-upgrade-inline-link i {
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 2.5 !important;
}

.membership-picker-overlay { position:fixed; inset:0; z-index:145; display:grid; place-items:center; padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
.membership-picker-overlay.hidden { display:none !important; }
.membership-picker-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(18,31,44,.56); backdrop-filter:blur(5px); }
.membership-picker-panel { position:relative; display:flex; width:min(100%,440px); max-height:min(78dvh,680px); flex-direction:column; overflow:hidden; border:1px solid #cbd7e0; border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(20,36,52,.28); }
.membership-picker-header { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid #e1e7ec; background:#f8fafb; }
.membership-picker-header span { color:#66788b; font-size:10px; font-weight:800; letter-spacing:.12em; }
.membership-picker-header h2 { margin:4px 0 0; color:#26374b; font:750 20px/1.25 'Outfit',sans-serif; }
.membership-picker-close { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border:1px solid #d5dee5; border-radius:12px; color:#3c5064; background:#fff; }
.membership-picker-close svg { width:19px; height:19px; }
.membership-picker-options { overflow-y:auto; overscroll-behavior:contain; padding:10px 12px 14px; scrollbar-color:#bdc9d2 transparent; }
.membership-picker-group-label { margin:13px 8px 7px; color:#34495f; font-size:16px; font-weight:850; letter-spacing:.035em; }
.membership-picker-option { display:flex; width:100%; min-height:60px; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border:1px solid transparent; border-radius:12px; color:#293a4f; background:#fff; text-align:left; }
.membership-picker-option + .membership-picker-option { margin-top:3px; }
.membership-picker-option:hover,.membership-picker-option[aria-selected="true"] { border-color:#b9d5cc; background:#edf5f2; }
.membership-picker-option-copy { display:grid; min-width:0; gap:2px; }
.membership-picker-option-copy strong { color:#26384d; font-size:14px; font-weight:800; }
.membership-picker-option-copy small { overflow:hidden; color:#52677d; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.membership-picker-option > svg { width:19px; height:19px; flex:0 0 auto; color:#52796d; }
body.membership-picker-open { overflow:hidden; }
.membership-mobile-picker-trigger { display:none; }
@media (max-width: 900px) {
    body.membership-page .membership-select-wrap > select { display:none !important; }
    body.membership-page .membership-select-wrap > svg { display:none; }
    body.membership-page .membership-mobile-picker-trigger { display:flex; width:100%; min-height:52px; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border:1px solid #cbd7e0; border-radius:13px; color:#293a4f; background:#f8fafb; text-align:left; box-shadow:none !important; filter:none !important; }
    body.membership-page .membership-mobile-picker-trigger span { overflow:hidden; font-size:14px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
    body.membership-page .membership-mobile-picker-trigger svg { width:19px; height:19px; flex:0 0 auto; color:#526a70; }
    .membership-picker-panel { width:min(100%,500px); max-height:min(76dvh,680px); }
}
body.membership-page .membership-select-wrap :is(select,.membership-mobile-picker-trigger) {
    box-shadow:none !important;
    filter:none !important;
}
@media (max-width: 640px) {
    .membership-picker-overlay { place-items:end center; padding:0; }
    .membership-picker-panel {
        width:100%;
        max-width:none;
        max-height:min(84dvh,720px);
        padding-bottom:env(safe-area-inset-bottom, 0px);
        border-radius:22px 22px 0 0;
        border-bottom:0;
        box-shadow:0 -16px 48px rgba(20,36,52,.24);
    }
    .membership-picker-panel::before { content:""; position:absolute; top:8px; left:50%; z-index:1; width:38px; height:4px; border-radius:999px; background:#c6d0d8; transform:translateX(-50%); }
    .membership-picker-header { padding:24px 16px 14px; }
    .membership-picker-options { padding:8px 10px 12px; }
}

/* Keep the nine-day forecast explicitly closed until opened; mobile arrows stay visible. */
#forecastDaysPopover.hidden { display:none !important; }
#forecastDaysPopover:not(.hidden) { display:flex !important; }
#forecastDaysPopover {
    min-height:0 !important;
    flex-direction:column !important;
}

/* ====================================================================
   9 GÜNLÜK HAVA RAPORU POPOVER: CİN EFEKTİ (GENIE EFFECT) AÇILIŞ / KAPANIŞ
   ==================================================================== */
@keyframes popoverGenieIn {
    0% {
        opacity: 0;
        transform: scale(0.1, 0.04) translateY(-24px);
        filter: blur(6px);
    }
    45% {
        opacity: 0.85;
        transform: scale(0.68, 0.9) translateY(4px);
        filter: blur(1px);
    }
    75% {
        opacity: 1;
        transform: scale(1.025, 0.98) translateY(-1px);
        filter: blur(0);
    }
    90% {
        transform: scale(0.995, 1.005) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
        filter: blur(0);
    }
}

@keyframes popoverGenieOut {
    0% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
        filter: blur(0);
    }
    30% {
        opacity: 0.9;
        transform: scale(0.96, 1.03) translateY(-3px);
    }
    60% {
        opacity: 0.6;
        transform: scale(0.55, 0.6) translateY(-12px);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.1, 0.03) translateY(-24px);
        filter: blur(6px);
    }
}

#forecastDaysPopover.popover-genie-in {
    animation: popoverGenieIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform, opacity, filter;
}

#forecastDaysPopover.popover-genie-out {
    animation: popoverGenieOut 0.26s cubic-bezier(0.4, 0, 0.8, 0.4) forwards !important;
    will-change: transform, opacity, filter;
    pointer-events: none !important;
}

#forecastDaysPopover #forecastPopoverTitle {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#forecastDaysPopover #forecastDaysStrip {
    flex:1 1 auto !important;
    min-height:0 !important;
    overscroll-behavior:contain;
}
@media (max-width: 767px) {
    #topFloatingHeader { z-index:1300 !important; }
    #weatherPillContainer:not(.hidden) #prevForecastDayBtn,
    #weatherPillContainer:not(.hidden) #nextForecastDayBtn {
        display:flex !important;
        width:24px !important;
        min-width:24px !important;
        height:24px !important;
        flex:0 0 24px !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 !important;
        visibility:visible !important;
    }
    #forecastDaysPopover {
        position:fixed !important;
        z-index:1001 !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-width:none !important;
        box-sizing:border-box !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    #forecastDaysPopover #forecastPopoverTitle { max-width:calc(100% - 6px); }
    #forecastDaysPopover #popoverLocationText { max-width:100% !important; }
    #forecastDaysPopover #forecastDaysStrip {
        width:100% !important;
        flex:1 1 auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
}

#forecastDaysPopover[hidden] { display:none !important; }
@media (max-width: 767px) {
    #weatherPillContainer:not(.hidden) :is(#prevForecastDayBtn,#nextForecastDayBtn) svg {
        display:block !important;
        width:17px !important;
        height:17px !important;
        stroke-width:2.5 !important;
    }
}

/* Package feature separators: keep them clear of selectors/buttons and start lists right below. */
body.membership-page .membership-plan-card .membership-plan-body > .space-y-3 > ul,
body.membership-page .membership-plan-card .membership-plan-features {
    margin-top:12px !important;
    padding-top:0 !important;
    border-top:0 !important;
}

/* Member support page: shared white-panel theme, persistent full ticket history, clear verification. */
body.support-page { background:#f2f5f9 !important; color:#293a50 !important; }
body.support-page .support-content { width:min(1240px, calc(100% - 292px)); max-width:1240px; padding-top:34px; padding-bottom:36px; }
body.support-page .support-content > div:first-child { margin-bottom:24px !important; }
body.support-page .support-content h1 { color:#25364b !important; font-size:clamp(25px,3vw,34px) !important; letter-spacing:-.03em; }
body.support-page .support-content > div:first-child p { color:#64748b !important; }
body.support-page .support-content > div:first-child p strong { color:#293a50 !important; }
body.support-page .support-verified { width:19px !important; height:19px !important; padding:1px !important; color:#fff !important; background:#1d5da8 !important; }
body.support-page .support-member-badge { display:inline-flex; align-items:center; padding:3px 9px; border:1px solid #c8d8e8; border-radius:999px; color:#315d83; background:#edf4fa; font-size:11px; font-weight:800; }
body.support-page .support-whatsapp-card { padding:22px 24px; border:1px solid #d8e3e9; border-radius:22px; background:#fff; box-shadow:0 8px 22px rgba(30,48,68,.05); }
body.support-page .support-whatsapp-label { display:inline-flex; align-items:center; gap:7px; color:#486a60; font-size:11px; font-weight:800; }
body.support-page .support-whatsapp-label svg { width:16px; height:16px; }
body.support-page .support-whatsapp-card h3 { margin:7px 0 0; color:#293a50 !important; font-size:21px; }
body.support-page .support-whatsapp-card p { margin:4px 0 0; color:#68798d !important; font-size:13px !important; }
body.support-page .support-whatsapp-button,
body.support-page .support-form button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:9px; padding:0 18px; border:0; border-radius:12px; color:#fff !important; -webkit-text-fill-color:#fff !important; background:#176b55; font-size:14px !important; font-weight:800 !important; text-decoration:none; }
body.support-page .support-whatsapp-button:hover,
body.support-page .support-form button:hover { background:#125a48; }
body.support-page .support-whatsapp-button :is(span,svg),
body.support-page .support-form button :is(span,svg) { color:#fff !important; -webkit-text-fill-color:#fff !important; }
body.support-page .support-grid { align-items:start; gap:20px !important; }
body.support-page .support-panel { min-width:0; padding:22px; border:1px solid #dce4eb; border-radius:20px; background:#fff; box-shadow:0 8px 24px rgba(30,48,68,.045); }
body.support-page .support-panel-title { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:#293a50 !important; font:750 17px/1.3 'Outfit',sans-serif; }
body.support-page .support-panel-title > svg { width:18px; height:18px; flex:0 0 auto; color:#597b70; }
body.support-page .support-ticket-count { margin-left:auto; color:#718197; font:700 11px/1.2 'Plus Jakarta Sans',sans-serif; }
body.support-page .support-form label { color:#52637a !important; font-size:11px !important; font-weight:800 !important; }
body.support-page .support-form input,
body.support-page .support-form textarea { width:100%; border:1px solid #d7e0e7 !important; border-radius:12px !important; color:#293a50 !important; background:#f7f9fb !important; box-shadow:none !important; font-size:14px !important; line-height:1.5 !important; }
body.support-page .support-form input::placeholder,
body.support-page .support-form textarea::placeholder { color:#8a98a9 !important; }
body.support-page .support-form input:focus,
body.support-page .support-form textarea:focus { border-color:#91b1a5 !important; outline:3px solid rgba(104,145,129,.13) !important; }
body.support-page .support-ticket-list { max-height:680px; overflow-y:auto; overscroll-behavior:contain; padding:1px 5px 1px 1px; }
body.support-page .support-ticket-card { padding:14px; border:1px solid #e0e7ed; border-radius:15px; background:#f8fafb; }
body.support-page .support-ticket-topline,
body.support-page .support-ticket-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
body.support-page .support-ticket-topline { color:#78879a; font-size:11px; font-weight:650; }
body.support-page .support-ticket-number { color:#61758a; font-weight:800; }
body.support-page .support-ticket-title-row { margin-top:7px; align-items:flex-start; }
body.support-page .support-ticket-title-row h3 { min-width:0; margin:0; color:#293a50 !important; font-size:14px !important; font-weight:800 !important; overflow-wrap:anywhere; }
body.support-page .support-ticket-status { flex:0 0 auto; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:800; }
body.support-page .support-ticket-status.is-open { color:#765717; background:#f5eedc; }
body.support-page .support-ticket-status.is-answered { color:#486b5f; background:#e8f1ed; }
body.support-page .support-ticket-card > p { margin:9px 0 0; color:#5e6f84 !important; font-size:13px !important; line-height:1.6 !important; overflow-wrap:anywhere; }
body.support-page .support-emergency-note { margin-top:18px; padding-top:14px; border-top:1px solid #e2e8ee; color:#708095; text-align:center; }
body.support-page .support-emergency-note p { margin:0; font-size:12px !important; }
body.support-page .support-emergency-note strong { color:#40566c; }
@media (max-width:900px) {
    body.support-page .support-content { width:100%; max-width:760px; padding-top:82px !important; padding-inline:22px !important; }
    body.support-page .support-whatsapp-card { padding:20px; }
    body.support-page .support-grid { grid-template-columns:minmax(0,1fr); }
    body.support-page .support-ticket-list { max-height:560px; }
}
@media (max-width:640px) {
    body.support-page .support-content { padding:78px 16px 28px !important; }
    body.support-page .support-whatsapp-card { align-items:stretch; gap:16px; padding:18px; }
    body.support-page .support-whatsapp-card > div { text-align:left !important; }
    body.support-page .support-whatsapp-button { width:100%; }
    body.support-page .support-panel { padding:18px; border-radius:18px; }
    body.support-page .support-panel-title { font-size:16px; }
    body.support-page .support-ticket-title-row { align-items:flex-start; }
}

/* Mera ayrıntı kartı: açık tema, üst kontrol çubuğunun altında ve mobilde taşmasız. */
#bottomSheet {
    z-index:900 !important;
    color:#26364d !important;
    background:#fff !important;
    border-color:#dbe3eb !important;
    box-shadow:0 14px 36px rgba(28,44,62,.16) !important;
    font-size:13px;
}
#bottomSheet > :is(div,header) { border-color:#e1e7ed !important; }
#bottomSheet .bg-gradient-to-r,
#bottomSheet .bg-gradient-to-br,
#bottomSheet .bg-gradient-to-b { background:#f5f8fa !important; }
#bottomSheet [class*="bg-slate-950"],
#bottomSheet [class*="bg-slate-900"],
#bottomSheet [class*="bg-slate-800"] { background-color:#f5f8fa !important; }
#bottomSheet [class*="text-white"],
#bottomSheet [class*="text-slate-100"],
#bottomSheet [class*="text-slate-200"],
#bottomSheet [class*="text-slate-300"] { color:#26364d !important; }
#bottomSheet [class*="text-slate-400"],
#bottomSheet [class*="text-slate-500"] { color:#65758a !important; }
#bottomSheet [class*="border-slate-700"],
#bottomSheet [class*="border-slate-800"] { border-color:#dce4eb !important; }
#bottomSheet #sheetSpotCode,
#bottomSheet #sheetAiBanner button,
#bottomSheet .sheet-tab.is-active,
#bottomSheet .spot-species-chip.is-active {
    color:#fff !important;
    background:#607f76 !important;
    border-color:#607f76 !important;
    box-shadow:none !important;
}
#bottomSheet .sheet-tab:not(.is-active),
#bottomSheet .sheet-tab:not(.is-active) span { color:#405168 !important; -webkit-text-fill-color:#405168 !important; background:transparent !important; box-shadow:none !important; }
#bottomSheet .sheet-tab:not(.is-active):hover { color:#26364d !important; background:#eaf0f3 !important; }
#bottomSheet .sheet-tab.is-active,
#bottomSheet .sheet-tab.is-active span { color:#fff !important; -webkit-text-fill-color:#fff !important; }
#bottomSheet .sheet-tab > span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#bottomSheet #sheetAiBanner { background:#f5f8fa !important; }
#bottomSheet #sheetAiStatus { color:#405c55 !important; }
#bottomSheet .spot-species-chip { background:#f1f5f7 !important; color:#41556c !important; border-color:#d8e1e8 !important; }
#bottomSheet .spot-species-chip.is-active { color:#fff !important; }
#bottomSheet #bioLocalNames { max-width:100%; overflow:visible; white-space:normal; flex-wrap:wrap; margin-top:3px; }
#bottomSheet #bioLocalNames::-webkit-scrollbar { display:none; }
#bottomSheet #bioLocalNames > * { flex:0 1 auto; white-space:nowrap; }
#bottomSheet #sheetSpotName,
#bottomSheet #bioCommonName { color:#26364d !important; }
#bottomSheet .mobile-scroll-row { position:relative; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#bottomSheet .mobile-scroll-row::-webkit-scrollbar { display:none; }
#bottomSheet .scroll-hint { padding-right:0 !important; mask-image:none !important; }
#bottomSheet .scroll-hint.has-overflow::after { content:none !important; display:none !important; }
#bottomSheet #sheetNavBtn,
#bottomSheet #sheetShareWhatsAppBtn,
#bottomSheet #sheetCopyBtn,
#bottomSheet #sheetExpandBtn,
#bottomSheet #sheetExpandBtn + button {
    color:#34465b !important;
    background:#f3f6f8 !important;
    border:1px solid #dce4eb !important;
    box-shadow:none !important;
}
#bottomSheet #sheetNavBtn:hover,
#bottomSheet #sheetShareWhatsAppBtn:hover,
#bottomSheet #sheetCopyBtn:hover,
#bottomSheet #sheetExpandBtn:hover,
#bottomSheet #sheetExpandBtn + button:hover { background:#e8eef2 !important; color:#24364b !important; }
#bottomSheet #sheetNavBtn svg,
#bottomSheet #sheetShareWhatsAppBtn svg,
#bottomSheet #sheetCopyBtn svg,
#bottomSheet #sheetExpandBtn svg,
#bottomSheet #sheetExpandBtn + button svg { color:#34465b !important; fill:currentColor; }
#bottomSheet #sheetSpotAiCard { background:#f3f6f8 !important; border-color:#dce4eb !important; box-shadow:none !important; }
#bottomSheet #sheetSpotAiCard #sheetAiCardEfficiency { color:#fff !important; background:#607f76 !important; border:0 !important; }
#bottomSheet #sheetSpotAiCard #sheetAiCardSpotContext { color:#52637a !important; }
#bottomSheet #boxSpeciesCatchGuide > span { white-space:nowrap; }
#bottomSheet #boxSpeciesCatchGuide > span i { display:none !important; }
#bottomSheet #boxSpeciesCatchGuide > span { font-size:11px !important; letter-spacing:.025em !important; }
#bottomSheet .sheet-tab { min-height:36px; }
#bottomSheet #sheetAiCardSpotContext { scrollbar-width:none; }
#bottomSheet #sheetAiCardSpotContext::-webkit-scrollbar { display:none; }
#bottomSheet :is(.text-cyan-300,.text-cyan-400,.text-sky-300,.text-sky-400,.text-emerald-300,.text-emerald-400,.text-teal-300,.text-teal-400,.text-amber-300,.text-amber-400) {
    color:#607f76 !important;
}
#bottomSheet #speciesMonthGrid > div { min-width:0; }
#bottomSheet #speciesSeasonalNote { background:#f5f8fa !important; border-color:#e1e7ed !important; color:#405168 !important; }
#bottomSheet .sheet-habitat-card,
#bottomSheet .sheet-depth-card { background:#f5f8fa !important; border:1px solid #dce4eb !important; border-radius:16px !important; }
#bottomSheet .sheet-habitat-card strong,
#bottomSheet .sheet-depth-card strong { color:#26364d !important; }
#bottomSheet .sheet-habitat-card span,
#bottomSheet .sheet-depth-card span { color:#607f76 !important; }
@media (max-width:767px) {
    #bottomSheet,
    #bottomSheet.expanded,
    #bottomSheet.open,
    #bottomSheet.half {
        top:calc(env(safe-area-inset-top, 0px) + 78px) !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        border-radius:24px 24px 0 0 !important;
        border-bottom:0 !important;
        transform:translateY(0) !important;
        box-shadow:0 -14px 44px rgba(15, 23, 42, 0.22) !important;
    }
    #bottomSheet.closed { transform:translateY(115%) !important; }
    #topFloatingHeader { z-index:1300 !important; }
    #bottomSheet .mobile-scroll-row { gap:8px !important; }
    #bottomSheet #bioLocalNames { flex:0 1 auto; }
    #bottomSheet #boxSpeciesCatchGuide > span { font-size:10px !important; letter-spacing:0 !important; }

    /* Mobilde Chate Sor çubuğunu gizle (Özellik Av Asistanı modalına aktarıldı) */
    #bottomSheet #sheetAiBanner { display: none !important; }

    /* Mobilde üst şeritten Habitat, Rüzgar ve Derinlik etiketlerini kaldır (Zaman sekmesine kart olarak eklendi) */
    #bottomSheet #sheetMetaStrip,
    #bottomSheet #sheetHabitatBadgeWrapper,
    #bottomSheet #sheetWindBadgeWrapper,
    #bottomSheet #sheetDepthBadgeWrapper,
    #bottomSheet .mobile-scroll-row[aria-label*="Habitat"] {
        display: none !important;
    }

    /* Mobilde Hangi Tür | Ne Zaman | Hangi Takım sekmelerini yukarıdan/aşağıdan incelt & tek satır yap */
    #sheetTabsWrapper { padding-top: 3px !important; padding-bottom: 3px !important; }
    #sheetTabsWrapper > div { padding: 2px !important; }
    #bottomSheet .sheet-tab {
        min-height: 28px !important;
        height: 28px !important;
        padding: 2px 4px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Mobilde 'Bu Merada Avlanan Hedef Türler' başlığını ve balık etiketini kaldır, sadece balık adı kalsın */
    #bottomSheet #sheetSpeciesContainer > div:first-child { display: none !important; }
    #bottomSheet #sheetSpeciesContainer { padding-top: 6px !important; padding-bottom: 6px !important; }
    #bottomSheet #sheetSpeciesChips .spot-species-chip svg,
    #bottomSheet #sheetSpeciesChips .spot-species-chip i { display: none !important; }
    #bottomSheet #sheetSpeciesChips .spot-species-chip {
        padding: 4px 10px !important;
        font-size: 11.5px !important;
        border-radius: 9999px !important;
    }
}

/* Sidebar identity cards share a compact, even footprint. */
body:is(.account-panel-page,.account-subpage) .account-brand,
body:is(.account-panel-page,.account-subpage) .account-user-card {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border: 1px solid #dce4e9 !important;
    border-radius: 13px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(23,35,56,.045) !important;
}
body:is(.account-panel-page,.account-subpage) .account-brand {
    flex: 0 0 60px !important;
    margin: 0 0 9px !important;
    text-decoration: none !important;
    transition: background-color .16s ease, border-color .16s ease;
}
body:is(.account-panel-page,.account-subpage) .account-brand:hover {
    background: #f7f9fa !important;
    border-color: #cbd8df !important;
}
body:is(.account-panel-page,.account-subpage) .account-brand-mark {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: #58766d !important;
    background: #edf2ef !important;
    box-shadow: none !important;
}

body:is(.account-panel-page,.account-subpage) .account-user-avatar {
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1.5px solid #dce4eb !important;
    border-radius: 9999px !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}
body:is(.account-panel-page,.account-subpage) .account-brand-mark svg { width: 19px !important; height: 19px !important; }
body:is(.account-panel-page,.account-subpage) .account-brand > strong {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    color: #26384d !important;
    font: 750 13px/1.2 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-brand-package-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.5px 7px !important;
    border-radius: 6px !important;
    background-color: #dc2626 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    letter-spacing: .02em !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, .3) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
body:is(.account-panel-page,.account-subpage) .account-user-card { align-items: center !important; }
body:is(.account-panel-page,.account-subpage) .account-user-card > div:nth-child(2) { gap: 3px !important; }
body:is(.account-panel-page,.account-subpage) .account-user-card strong { color: #26384d !important; font-size: 12px !important; }
body:is(.account-panel-page,.account-subpage) .account-user-card span { color: #718093 !important; font-size: 10px !important; }
body:is(.account-panel-page,.account-subpage) .account-user-avatar img { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 50% !important; object-fit: cover !important; }

/* Bottom-sheet detail card: consistent scroll cues and readable weather */
#bottomSheet .mobile-scroll-row {
    scroll-behavior:smooth;
}
#bottomSheet .mobile-scroll-row.has-overflow::after {
    content:"";
    position:absolute;
    right:0;
    width:18px;
    top:2px;
    bottom:2px;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(222,231,236,.96));
    animation:sheet-scroll-nudge 1.25s ease-in-out 1;
}
#bottomSheet .mobile-scroll-row.scroll-hint.has-overflow::after {
    content:"" !important;
    display:block !important;
}
#bottomSheet .mobile-scroll-row.is-nudging { scroll-behavior:smooth; }
@keyframes sheet-scroll-nudge {
    0%,100% { opacity:.25; }
    45% { opacity:1; }
}
#bottomSheet #bioLocalNames {
    display:flex !important;
    flex-wrap:nowrap !important;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    gap:6px !important;
    margin-top:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-behavior:smooth;
}
#bottomSheet #bioLocalNames::-webkit-scrollbar { display:none; }
#bottomSheet #bioLocalNames > * { flex:0 0 auto !important; white-space:nowrap !important; }
#bottomSheet .spot-species-chip.is-active,
#bottomSheet .spot-species-chip.is-active :is(svg,span) {
    color:#fff !important;
}
#bottomSheet .spot-species-chip.is-active svg { stroke:#fff !important; }
#bottomSheet .spot-species-chip:not(.is-active):hover,
#bottomSheet .spot-species-chip:not(.is-active):hover :is(svg,span) { color:#34465b !important; }
#bottomSheet .spot-species-chip:not(.is-active):hover { background:#e5ecef !important; border-color:#cbd7df !important; }
#bottomSheet .spot-species-chip:not(.is-active):hover svg { stroke:#52637a !important; }
#bottomSheet #sheetTabPane2 .sheet-weather-report,
#bottomSheet #sheetTabPane2 .sheet-forecast-card {
    color:#34465b !important;
    background:#f2f5f7 !important;
    border-color:#d9e1e7 !important;
    box-shadow:none !important;
}
#bottomSheet #sheetTabPane2 .sheet-weather-metric {
    color:#34465b !important;
    background:#f8fafb !important;
    border-color:#dce4e9 !important;
}
#bottomSheet #sheetTabPane2 .sheet-weather-metric :is(span,strong) { color:#34465b !important; }
#bottomSheet #sheetTabPane2 .sheet-weather-icon { color:#52637a !important; stroke:#52637a !important; }
#bottomSheet #sheetTabPane2 .sheet-weather-date,
#bottomSheet #sheetTabPane2 .sheet-weather-title { color:#26364d !important; }

/* Mera tür biyolojisi: metrik kartları daha kompakt dikey boşlukla gösterilir. */
#bottomSheet .bio-metric-card {
    min-height:54px;
    width:100%;
    padding:6px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #dce4eb;
    border-radius:14px;
    background:#fff;
}
#bottomSheet .bio-metric-label { display:flex; align-items:center; gap:8px; color:#52627a; font-size:12px; font-weight:700; }
#bottomSheet .bio-metric-label svg { color:#607f76; stroke:#607f76; flex:0 0 auto; }
#bottomSheet .bio-metric-value { color:#26364d; font-size:14px; font-weight:800; white-space:nowrap; }
#bottomSheet .academic-note-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
#bottomSheet .academic-note-list li { position:relative; padding-left:15px; color:#40516a; line-height:1.55; }
#bottomSheet .academic-note-list li::before { content:""; position:absolute; left:2px; top:.58em; width:5px; height:5px; border-radius:50%; background:#718f86; }
#bottomSheet #sheetSpotAiCard { scroll-margin-top:12px; }
#bottomSheet #sheetSpotAiCard #sheetAiCardEfficiency { color:#fff; background:#607f76; }
#bottomSheet #sheetTabPane2[aria-hidden="false"],
#bottomSheet #sheetTabPane3[aria-hidden="false"] { display:block; min-height:120px; }

/* Zaman sekmesi ve mera üst başlığı: tek satır, dengeli ve taşmasız. */
#bottomSheet .sheet-story-heading { min-width:0; flex-wrap:nowrap; }
#bottomSheet .sheet-story-title {
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    color:#34465b !important;
    font-size:11px;
}
#bottomSheet .sheet-story-efficiency { flex:0 0 auto; color:#34465b !important; background:#e8efed !important; border-color:#d5e0dc !important; }
#bottomSheet .ai-story-cta {
    color:#34465b !important;
    background:#e5eeeb !important;
    border:1px solid #d2dfda !important;
    box-shadow:none !important;
}
#bottomSheet .ai-story-cta :is(span,svg) { color:#34465b !important; stroke:currentColor; }
#bottomSheet .ai-story-cta:hover,
#bottomSheet .ai-story-cta:focus-visible {
    color:#fff !important;
    background:#607f76 !important;
    border-color:#607f76 !important;
}
#bottomSheet .ai-story-cta:hover :is(span,svg),
#bottomSheet .ai-story-cta:focus-visible :is(span,svg) { color:#fff !important; stroke:#fff; }
/* BottomSheet Header: Karışıklığı gideren, başlık ve butonları asla üst üste bindirmeyen temiz flex yapısı */
#bottomSheet .sheet-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    position: relative !important;
    border-bottom: 1px solid #dce4eb !important;
    background: #fff !important;
    min-height: 52px !important;
}
#bottomSheet .sheet-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
#bottomSheet #sheetSpotCode {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 7px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
}
#bottomSheet #sheetSpotName {
    display: block !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #1a2737 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: left !important;
}
#bottomSheet .sheet-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    position: static !important;
    margin-left: auto !important;
}
#bottomSheet #sheetNavBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #243447 !important;
    background: #f1f5f9 !important;
    border: 1px solid #d2dde6 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}
#bottomSheet #sheetNavBtn:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
}
#bottomSheet #sheetShareWhatsAppBtn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #065f46 !important;
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}
#bottomSheet #sheetShareWhatsAppBtn:hover {
    background: #a7f3d0 !important;
}
#bottomSheet #sheetShareWhatsAppBtn svg {
    color: #065f46 !important;
    fill: currentColor !important;
}
#bottomSheet #sheetCloseBtn,
.sheet-close-btn {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #dc2626 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.28) !important;
    transition: all .15s ease !important;
}
#bottomSheet #sheetCloseBtn:hover,
.sheet-close-btn:hover {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}
#bottomSheet #sheetCloseBtn svg,
#bottomSheet #sheetCloseBtn i,
.sheet-close-btn svg,
.sheet-close-btn i {
    width: 15px !important;
    height: 15px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
}
@media (max-width: 639px) {
    #bottomSheet .sheet-header-row {
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    #bottomSheet #sheetSpotCode {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    #bottomSheet #sheetSpotName {
        font-size: 12px !important;
        max-width: 140px !important;
    }
    #bottomSheet #sheetNavBtn,
    #bottomSheet #sheetShareWhatsAppBtn {
        padding: 5px 8px !important;
        font-size: 10.5px !important;
    }
}
#bottomSheet #sheetTabPane2 .mt-4.pt-3 > .flex > span:first-child {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* Habitat, wind and depth remain a single horizontal, touch-scrollable strip. */
#bottomSheet [aria-label="Habitat, rüzgar ve derinlik bilgileri"] {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
#bottomSheet [aria-label="Habitat, rüzgar ve derinlik bilgileri"]::-webkit-scrollbar { display:none; }
#bottomSheet [aria-label="Habitat, rüzgar ve derinlik bilgileri"] > * { flex:0 0 auto !important; white-space:nowrap !important; }
@media (prefers-reduced-motion: reduce) {
    #bottomSheet .mobile-scroll-row { scroll-behavior:auto; }
    #bottomSheet .mobile-scroll-row.has-overflow::after { animation:none; }
}

/* Mera Detay Kartı Boyutlandırması: Webde aşağıya doğru uzatılmış, mobilde hava durumu ve hamburger menünün hemen altına kadar uzanır */
#sheetBackdrop { z-index:1200 !important; }
#bottomSheet {
    z-index:1201 !important;
    box-sizing:border-box !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:72px !important;
    bottom:16px !important;
    width:min(780px, calc(100vw - 32px)) !important;
    max-width:820px !important;
    height:auto !important;
    max-height:calc(100dvh - 88px) !important;
    transform:translateX(-50%) !important;
    border-radius:22px !important;
    transition:transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
}
#bottomSheet.closed {
    transform:translate(-50%, calc(100% + 50px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
}
#bottomSheet.open,
#bottomSheet.half,
#bottomSheet.expanded {
    transform:translateX(-50%) !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

@media (max-width:767px) {
    #bottomSheet,
    #bottomSheet.open,
    #bottomSheet.half,
    #bottomSheet.expanded {
        top:calc(env(safe-area-inset-top, 0px) + 78px) !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        height:calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 78px) !important;
        transform:translateY(0%) !important;
        border-radius:24px 24px 0 0 !important;
        border-bottom:0 !important;
        box-shadow:0 -14px 44px rgba(15, 23, 42, 0.22) !important;
    }
    #bottomSheet.closed {
        transform:translateY(115%) !important;
        opacity:0 !important;
        pointer-events:none !important;
    }
}

/* Map cards: unified light, matte theme for spot weather and species details. */
.leaflet-tooltip.spot-wx-tooltip {
    background: #fbfcfd !important;
    color: #344256 !important;
    border: 1px solid #d8e1e7 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(35, 52, 68, .16) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.leaflet-tooltip.spot-wx-tooltip::before { border-top-color: #d8e1e7 !important; }
.spot-wx-card { color: #344256 !important; }
.spot-wx-title strong { color: #1e293b !important; }
.spot-wx-title span { color: #64748b !important; }
.spot-wx-time-pill { background: #ecfdf5 !important; border-color: #d1fae5 !important; color: #047857 !important; }
.spot-wx-time-pill svg { stroke: #059669 !important; }
.spot-wx-cell,
.spot-wx-day { background: #f1f5f7 !important; border-color: #dbe4e9 !important; color: #405168 !important; }
.spot-wx-cell small,
.spot-wx-cell em,
.spot-wx-day { color: #68788a !important; }
.spot-wx-cell b,
.spot-wx-day b { color: #2f4055 !important; }
.spot-wx-cell.wind b { color: #527b72 !important; }
.spot-wx-cell.wave b { color: #58788b !important; }
.spot-wx-cell.sst b { color: #9a7356 !important; }
.spot-wx-cell.press b { color: #66728a !important; }
.spot-wx-foot { color: #738294 !important; }
.spot-wx-loading { color: #66788a !important; }
.spot-wx-spinner { border-color: rgba(93, 132, 122, .2) !important; border-top-color: #648d84 !important; }

#speciesTacticalModal {
    background: rgba(25, 38, 52, .58) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    backdrop-filter: blur(3px) !important;
}
#speciesTacticalModal > div {
    color: #344256 !important;
    background: #f7f9fa !important;
    background-image: none !important;
    border: 1px solid #d8e1e7 !important;
    box-shadow: 0 14px 38px rgba(23, 38, 52, .18) !important;
}
#speciesTacticalModal > div > :is(div, footer):first-child,
#speciesTacticalModal > div > footer {
    background: #fff !important;
    background-image: none !important;
    border-color: #dce4e9 !important;
}
#speciesTacticalModal [class*="bg-gradient"] {
    background: #edf3f3 !important;
    background-image: none !important;
    border-color: #d4e1df !important;
    box-shadow: none !important;
}
#speciesTacticalModal [class*="bg-slate-950"],
#speciesTacticalModal [class*="bg-slate-900"],
#speciesTacticalModal [class*="bg-slate-800"] {
    background: #fff !important;
    background-image: none !important;
    border-color: #dce4e9 !important;
    box-shadow: none !important;
}
#speciesTacticalModal [class*="bg-slate-950/"],
#speciesTacticalModal [class*="bg-slate-900/"],
#speciesTacticalModal [class*="bg-slate-800/"] {
    background: #fff !important;
    background-image: none !important;
    border-color: #dce4e9 !important;
    box-shadow: none !important;
}
#speciesTacticalModal :is(h3, h4, strong, label, span, p, li) { color: #405168; }
#speciesTacticalModal [class*="text-white"],
#speciesTacticalModal [class*="text-slate-100"],
#speciesTacticalModal [class*="text-slate-200"],
#speciesTacticalModal [class*="text-slate-300"] { color: #405168 !important; }
#speciesTacticalModal [class*="text-slate-400"],
#speciesTacticalModal [class*="text-slate-500"],
#speciesTacticalModal [class*="text-slate-600"] { color: #718093 !important; }
#speciesTacticalModal [class*="border-slate-700"],
#speciesTacticalModal [class*="border-slate-800"],
#speciesTacticalModal [class*="border-cyan-"] { border-color: #d8e2e7 !important; }
#speciesTacticalModal #popSpotContextName { color: #557c73 !important; }
#speciesTacticalModal #popLegalSize { color: #527b72 !important; }
#speciesTacticalModal #popL50 { color: #91734f !important; }
#speciesTacticalModal #popOptimalTemp { color: #58788b !important; }
#speciesTacticalModal #popSeasonalNote { background: #eef3f3 !important; border-color: #d9e4e3 !important; }
#speciesTacticalModal #popAiTriggerBtn,
#speciesTacticalModal button[class*="bg-emerald-500"],
#speciesTacticalModal button[class*="bg-cyan-500"],
#speciesTacticalModal button[class*="bg-teal-500"] {
    color: #fff !important;
    background: #648d84 !important;
    background-image: none !important;
    border-color: #648d84 !important;
    box-shadow: none !important;
}
#speciesTacticalModal #popAiResultBox { color: #405168 !important; background: #edf3f3 !important; border-color: #d4e1df !important; }
#speciesTacticalModal button:hover { filter: brightness(.97); }

@media (max-width: 640px) {
    #speciesTacticalModal { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important; }
    #speciesTacticalModal > div { max-height: calc(100dvh - 20px) !important; border-radius: 22px !important; }
    #speciesTacticalModal > div > div:nth-child(2) { padding: 12px !important; }
}

/* Map pins: Eye-catching vibrant electric orange with high contrast on satellite imagery */
.custom-pin-vip,
.custom-pin-free {
    position: relative;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    transform: scale(.95);
    transform-origin: center bottom;
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1), filter 0.18s ease;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) !important;
}
.custom-pin-vip:hover,
.custom-pin-free:hover {
    transform: translateY(-2px) scale(1.14);
    filter: drop-shadow(0 5px 12px rgba(255, 95, 0, 0.75)) !important;
    z-index: 1000 !important;
}

/* VIP Pin: Parlak dikkat çeken elektrik turuncu, beyaz çerçeve ve 3D derinlik */
.pin-vip-inner {
    width: 27px;
    height: 27px;
    border-radius: 50% 50% 50% 3px !important;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff7e00 0%, #ff4500 65%, #e63900 100%) !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1.5px rgba(255, 95, 0, 0.55), 0 4px 14px rgba(230, 57, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.75) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pin-vip-inner::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 50% 50% 50% 2px !important;
    pointer-events: none;
}
.pin-vip-inner svg {
    width: 13px !important;
    height: 13px !important;
    transform: rotate(45deg);
    color: #ffffff !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)) !important;
}

/* Free / Standart Pin: Canlı turuncu, beyaz çerçeve */
.pin-free-inner {
    width: 23px;
    height: 23px;
    border-radius: 50% 50% 50% 3px !important;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff8512 0%, #ff5200 100%) !important;
    border: 1.8px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1.5px rgba(255, 85, 0, 0.45), 0 3px 10px rgba(230, 57, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.65) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pin-free-inner svg {
    width: 10px !important;
    height: 10px !important;
    transform: rotate(45deg);
    color: #ffffff !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)) !important;
}

/* Hafif Zıplama Animasyonu (Bounce) */
@keyframes pin-bounce {
    0% {
        transform: translateY(0) scale(1);
    }
    28% {
        transform: translateY(-11px) scale(1.18, 0.88);
    }
    48% {
        transform: translateY(0) scale(0.94, 1.06);
    }
    70% {
        transform: translateY(-4px) scale(1.05, 0.98);
    }
    85% {
        transform: translateY(0) scale(0.99, 1.01);
    }
    100% {
        transform: translateY(0) scale(1.15);
    }
}

.custom-pin-bounce {
    animation: pin-bounce 0.46s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
    z-index: 9999 !important;
}

/* Seçili Pin Vurgusu */
.custom-pin-selected {
    filter: drop-shadow(0 6px 16px rgba(255, 80, 0, 0.85)) !important;
    outline: 2.5px solid #ffffff !important;
    outline-offset: 3px !important;
    transform: scale(1.18) !important;
    z-index: 9999 !important;
}

/* Tür Seçim Bandı: Gölgelendirmesi kaldırılmış, düz ve net stil */
#bottomSheet #sheetSpeciesContainer,
#bottomSheet #sheetSpeciesChips,
#bottomSheet .spot-species-chip,
#bottomSheet .spot-species-chip.is-active,
#sheetSpeciesChips .spot-species-chip,
#sheetSpeciesChips .spot-species-chip.is-active {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

#bottomSheet #sheetSpeciesChips::after,
#bottomSheet #sheetSpeciesChips::before,
#bottomSheet #sheetSpeciesContainer::after,
#bottomSheet #sheetSpeciesContainer::before,
#bottomSheet #sheetSpeciesChips.has-overflow::after,
#bottomSheet #sheetSpeciesChips.scroll-hint.has-overflow::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

#bottomSheet .spot-species-chip {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    border-radius: 12px !important;
    background: #f1f5f7 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    transition: all .18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#bottomSheet .spot-species-chip.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #059669, #0d9488) !important;
    border-color: #047857 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    transform: none !important;
}
#bottomSheet .spot-species-chip.is-active :is(svg, span) {
    color: #fff !important;
}
#bottomSheet .spot-species-chip.is-active svg {
    stroke: #fff !important;
}
#bottomSheet #sheetSelectedSpeciesBadge {
    display: inline-flex !important;
    align-items: center !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
}


/* ====================================================================
   SELECTION CONFIRM AUTH MODAL - GENEL TEMAYLA UYUMLU AÇIK MODERN TASARIM
   Sitenin genel kart diliyle (beyaz yüzey, zümrüt yeşili vurgular, soluk kırmızı kapatma butonu) tam uyumlu
   ==================================================================== */
#selectionConfirmAuthModal,
.map-page #selectionConfirmAuthModal {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

#selectionConfirmAuthModal > div,
.map-page #selectionConfirmAuthModal > div {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
    position: relative !important;
    overflow: hidden !important;
}

#selectionConfirmAuthModal > div::before,
.map-page #selectionConfirmAuthModal > div::before {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    top: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.45), transparent) !important;
    display: block !important;
    pointer-events: none !important;
}

/* En yukarıdaki ortalanmış kalkan ikonu */
#selectionConfirmAuthModal div[class*="from-cyan-500"],
#selectionConfirmAuthModal div[class*="from-emerald-400"],
#selectionConfirmAuthModal .modal-brand-icon,
.map-page #selectionConfirmAuthModal div[class*="from-cyan-500"],
.map-page #selectionConfirmAuthModal div[class*="from-emerald-400"] {
    width: 52px !important;
    height: 52px !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 18px !important;
    color: #059669 !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.12) !important;
    margin: 0 auto 10px !important;
}

#selectionConfirmAuthModal div[class*="from-cyan-500"] svg,
#selectionConfirmAuthModal div[class*="from-emerald-400"] svg,
.map-page #selectionConfirmAuthModal div[class*="from-cyan-500"] svg,
.map-page #selectionConfirmAuthModal div[class*="from-emerald-400"] svg {
    width: 26px !important;
    height: 26px !important;
    color: #059669 !important;
}

/* Kapatma Butonu: Soluk Kırmızı Genel Tema */
#selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"],
.map-page #selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"] {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.24) !important;
    color: #ef4444 !important;
    border-radius: 9999px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"]:hover,
.map-page #selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"]:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* Başlık ve Açıklama */
#selectionConfirmAuthModal #confirmModalHeading,
.map-page #selectionConfirmAuthModal #confirmModalHeading {
    color: #0f172a !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}

#selectionConfirmAuthModal #confirmModalIntro,
.map-page #selectionConfirmAuthModal #confirmModalIntro {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* Üst Kicker Rozet */
#selectionConfirmAuthModal .confirm-modal-top-badge,
.map-page #selectionConfirmAuthModal .confirm-modal-top-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    border: 1px solid #d1d5db !important;
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

#selectionConfirmAuthModal .confirm-modal-top-badge span,
.map-page #selectionConfirmAuthModal .confirm-modal-top-badge span {
    background: #10b981 !important;
}

/* Seçilen Paket Başlık Etiketi */
#selectionConfirmAuthModal .confirm-modal-package-kicker-wrap,
.map-page #selectionConfirmAuthModal .confirm-modal-package-kicker-wrap {
    margin-bottom: 4px !important;
    display: block !important;
}

#selectionConfirmAuthModal .confirm-modal-package-tag,
.map-page #selectionConfirmAuthModal .confirm-modal-package-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2.5px 8px !important;
    border-radius: 6px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

#selectionConfirmAuthModal .confirm-modal-package-tag svg,
.map-page #selectionConfirmAuthModal .confirm-modal-package-tag svg {
    stroke: #059669 !important;
    flex-shrink: 0 !important;
}

/* Seçilen Paket Detay Kartı */
#selectionConfirmAuthModal div[class*="from-slate-800"],
#selectionConfirmAuthModal div[class*="bg-slate-50"],
.map-page #selectionConfirmAuthModal div[class*="from-slate-800"],
.map-page #selectionConfirmAuthModal div[class*="bg-slate-50"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

#selectionConfirmAuthModal #confirmModalPackageTitle,
.map-page #selectionConfirmAuthModal #confirmModalPackageTitle {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    font-family: "Outfit", sans-serif !important;
}

#selectionConfirmAuthModal #confirmModalRegionSubtitle,
.map-page #selectionConfirmAuthModal #confirmModalRegionSubtitle {
    color: #0d9488 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* Fiyat Kutusu */
#selectionConfirmAuthModal div[class*="bg-emerald-950"],
#selectionConfirmAuthModal div[class*="bg-emerald-50"],
.map-page #selectionConfirmAuthModal div[class*="bg-emerald-950"],
.map-page #selectionConfirmAuthModal div[class*="bg-emerald-50"] {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#selectionConfirmAuthModal div[class*="bg-emerald-950"] div:first-child,
#selectionConfirmAuthModal div[class*="bg-emerald-50"] div:first-child,
.map-page #selectionConfirmAuthModal div[class*="bg-emerald-950"] div:first-child,
.map-page #selectionConfirmAuthModal div[class*="bg-emerald-50"] div:first-child {
    color: #059669 !important;
    font-weight: 800 !important;
}

#selectionConfirmAuthModal #confirmModalPriceBadge,
.map-page #selectionConfirmAuthModal #confirmModalPriceBadge {
    color: #047857 !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    font-family: "Outfit", sans-serif !important;
}

/* Özellik Hapları (Canlı GPS & Balık Türü) */
#selectionConfirmAuthModal .grid > div,
.map-page #selectionConfirmAuthModal .grid > div {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

#selectionConfirmAuthModal .grid > div span,
.map-page #selectionConfirmAuthModal .grid > div span {
    color: #334155 !important;
    font-weight: 600 !important;
}

#selectionConfirmAuthModal .grid > div svg,
#selectionConfirmAuthModal .grid > div i,
.map-page #selectionConfirmAuthModal .grid > div svg,
.map-page #selectionConfirmAuthModal .grid > div i {
    color: #0d9488 !important;
}

/* Google ile Giriş Yap Butonu */
#selectionConfirmAuthModal #confirmGoogleLoginLink,
.map-page #selectionConfirmAuthModal #confirmGoogleLoginLink {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    border-radius: 14px !important;
}

#selectionConfirmAuthModal #confirmGoogleLoginLink:hover,
.map-page #selectionConfirmAuthModal #confirmGoogleLoginLink:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

/* Ödeme Butonu (Oturum Açıkken) */
#selectionConfirmAuthModal #confirmProceedPaymentLink,
.map-page #selectionConfirmAuthModal #confirmProceedPaymentLink {
    background: linear-gradient(135deg, #059669, #0d9488) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.28) !important;
    border-radius: 14px !important;
}

#selectionConfirmAuthModal #confirmProceedPaymentLink:hover,
.map-page #selectionConfirmAuthModal #confirmProceedPaymentLink:hover {
    background: linear-gradient(135deg, #047857, #0f766e) !important;
    transform: translateY(-1px) !important;
}

/* Alt Açıklama ve Güvence Metinleri */
#selectionConfirmAuthModal #confirmAuthLoginBox p,
#selectionConfirmAuthModal #confirmAuthPaymentBox p,
.map-page #selectionConfirmAuthModal #confirmAuthLoginBox p,
.map-page #selectionConfirmAuthModal #confirmAuthPaymentBox p {
    color: #64748b !important;
}

#selectionConfirmAuthModal #confirmAuthLoginBox p:last-child,
.map-page #selectionConfirmAuthModal #confirmAuthLoginBox p:last-child {
    color: #94a3b8 !important;
}

#selectionConfirmAuthModal #confirmAuthPaymentBox > div,
.map-page #selectionConfirmAuthModal #confirmAuthPaymentBox > div {
    color: #334155 !important;
}

#selectionConfirmAuthModal #confirmUserNameText,
.map-page #selectionConfirmAuthModal #confirmUserNameText {
    color: #047857 !important;
    font-weight: 800 !important;
}

/* Leaflet Deniz Siniri Popup ve Tooltip Acik Tema */
.custom-dark-popup .leaflet-popup-content-wrapper,
.custom-dark-popup .leaflet-popup-tip {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #dce4eb !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.custom-dark-popup .leaflet-popup-tip {
    background: #ffffff !important;
    border-top-color: #dce4eb !important;
}

.custom-dark-popup .leaflet-popup-close-button {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 9999px !important;
    width: 24px !important;
    height: 24px !important;
    top: 12px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.custom-dark-popup .leaflet-popup-close-button:hover {
    color: #ffffff !important;
    background: #ef4444 !important;
}

.leaflet-tooltip.city-boundary-tooltip {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 9999px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14) !important;
}

.leaflet-tooltip.city-boundary-tooltip::before {
    border-top-color: #cbd5e1 !important;
}

/* Mobil Uyumluluk ve Guzellestirilmis Boyutlandirma */
@media (max-width: 640px) {
    #selectionConfirmAuthModal,
    .map-page #selectionConfirmAuthModal {
        padding: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #selectionConfirmAuthModal.hidden,
    .map-page #selectionConfirmAuthModal.hidden {
        display: none !important;
    }

    #selectionConfirmAuthModal > div,
    .map-page #selectionConfirmAuthModal > div {
        max-height: calc(100dvh - 28px) !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: auto !important;
        border-radius: 28px !important;
        padding: 22px 18px !important;
        gap: 13px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
    }

    #selectionConfirmAuthModal #confirmModalHeading,
    .map-page #selectionConfirmAuthModal #confirmModalHeading {
        font-size: 17.5px !important;
        line-height: 1.25 !important;
    }

    #selectionConfirmAuthModal #confirmModalIntro,
    .map-page #selectionConfirmAuthModal #confirmModalIntro {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
}


/* ====================================================================
   SADECE 'X' (ÇARPI) KAPATMA BUTONLARI: KARE TASARIM (border-radius: 10px)
   Kullanıcı Talebi: "Sadece X olanları kare içine al"
   ==================================================================== */
.leaflet-popup-close-button,
.oceanic-spot-popup .leaflet-popup-close-button,
.custom-dark-popup .leaflet-popup-close-button,
.custom-ais-popup .leaflet-popup-close-button,
#sheetCloseBtn,
.sheet-close-btn,
.legal-modal-close,
.login-modal-close,
.species-picker-dismiss,
#speciesModal .species-picker-dismiss,
#encyclopediaModal .encyclopedia-header button[onclick*="closeEncyclopedia"],
#encyclopediaModal button[aria-label="Kapat"],
#biorhythmModal button[onclick*="closeBiorhythmModal"].absolute,
#lawModal button[onclick*="closeLawModal"].absolute,
#catchLogModal button[onclick*="closeCatchLogModal"].absolute,
#recommendationsModal button[onclick*="closeRecommendationsModal"].absolute,
#paymentModal button[onclick*="closePaymentModal"].absolute,
#subscriptionPackagesModal button[onclick*="closeSubscriptionPackagesModal"].absolute,
#regionWizardModal button[onclick*="closeRegionWizard"][title*="Kapat"],
#selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"],
#speciesTacticalModal button[onclick*="closeSpeciesTacticalModal"].absolute,
#aiAssistantModal button[onclick*="closeAiAssistantModal"].absolute,
#blackSeaReportModal button[onclick*="closeBlackSeaReportModal"].absolute,
#forecastDaysPopover button[onclick*="toggleForecastPopover"],
#forecastDaysPopover button[aria-label*="kapat"],
#forecastDaysPopover button[aria-label*="Close"],
#closeOneTimeSeaLimitBtn,
.membership-picker-close,
[data-picker-close],
.app-modal-close,
button[aria-label="Kapat"]:not(.app-btn-pill):not(.modal-footer-close-btn):not(.species-picker-close),
button[aria-label="Close"]:not(.app-btn-pill):not(.modal-footer-close-btn):not(.species-picker-close),
button[title="Giris penceresini kapat"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important; /* KARE ŞEKLİNDE (rounded square) */
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.leaflet-popup-close-button:hover,
.oceanic-spot-popup .leaflet-popup-close-button:hover,
.custom-dark-popup .leaflet-popup-close-button:hover,
.custom-ais-popup .leaflet-popup-close-button:hover,
#sheetCloseBtn:hover,
.sheet-close-btn:hover,
#drawerCloseBtn:hover,
.drawer-close:hover,
.legal-modal-close:hover,
.login-modal-close:hover,
.species-picker-dismiss:hover,
#speciesModal .species-picker-dismiss:hover,
#encyclopediaModal .encyclopedia-header button[onclick*="closeEncyclopedia"]:hover,
#encyclopediaModal button[aria-label="Kapat"]:hover,
#biorhythmModal button[onclick*="closeBiorhythmModal"].absolute:hover,
#lawModal button[onclick*="closeLawModal"].absolute:hover,
#catchLogModal button[onclick*="closeCatchLogModal"].absolute:hover,
#recommendationsModal button[onclick*="closeRecommendationsModal"].absolute:hover,
#paymentModal button[onclick*="closePaymentModal"].absolute:hover,
#subscriptionPackagesModal button[onclick*="closeSubscriptionPackagesModal"].absolute:hover,
#regionWizardModal button[onclick*="closeRegionWizard"][title*="Kapat"]:hover,
#selectionConfirmAuthModal button[onclick*="closeSelectionConfirmAuthModal"]:hover,
#speciesTacticalModal button[onclick*="closeSpeciesTacticalModal"].absolute:hover,
#aiAssistantModal button[onclick*="closeAiAssistantModal"].absolute:hover,
#blackSeaReportModal button[onclick*="closeBlackSeaReportModal"].absolute:hover,
#forecastDaysPopover button[onclick*="toggleForecastPopover"]:hover,
#forecastDaysPopover button[aria-label*="kapat"]:hover,
#forecastDaysPopover button[aria-label*="Close"]:hover,
#closeOneTimeSeaLimitBtn:hover,
.membership-picker-close:hover,
[data-picker-close]:hover,
.app-modal-close:hover,
button[aria-label="Kapat"]:not(.app-btn-pill):not(.modal-footer-close-btn):not(.species-picker-close):hover,
button[aria-label="Close"]:not(.app-btn-pill):not(.modal-footer-close-btn):not(.species-picker-close):hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35) !important;
    transform: scale(1.05) !important;
}

/* ====================================================================
   ALTTAKİ METİNLİ 'KAPAT' BUTONLARI: HAP ŞEKLİNDE (PILL SHAPED)
   Kullanıcı Talebi: "Alttaki kapat butonu yuvarlak olmasın hap şeklinde olsun"
   ==================================================================== */
.species-picker-close,
#speciesModal .species-picker-close,
.modal-footer-close-btn,
.modal-footer-close-pill,
#speciesModal .species-picker-footer button,
#recommendationsModal .modal-footer-close-btn,
#userCatchHistoryModal .modal-footer-close-btn,
#biorhythmModal .mt-4 button {
    width: auto !important;
    height: auto !important;
    min-width: 86px !important;
    min-height: 34px !important;
    padding: 7px 22px !important;
    border-radius: 9999px !important; /* HAP ŞEKLİNDE (PILL) */
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.18s ease !important;
}

.species-picker-close:hover,
#speciesModal .species-picker-close:hover,
.modal-footer-close-btn:hover,
.modal-footer-close-pill:hover,
#speciesModal .species-picker-footer button:hover,
#recommendationsModal .modal-footer-close-btn:hover,
#userCatchHistoryModal .modal-footer-close-btn:hover,
#biorhythmModal .mt-4 button:hover {
    background: #cbd5e1 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* ====================================================================
   AKADEMİK ANSİKLOPEDİ: "HARİTADA GÖR" BUTONU (YEŞİL & ŞIK TASARIM)
   Kullanıcı Talebi: "Haritada gör yeşil olsun ve tasarımını düzelt"
   ==================================================================== */
.encyclopedia-view-map-btn,
#encyclopediaModal .encyclopedia-view-map-btn,
#encyclopediaModal button.encyclopedia-view-map-btn,
#encyclopediaGrid button[onclick*="viewSpeciesOnMap"],
#encyclopediaGrid button[onclick*="selectSpecies"] {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 15px !important;
    border-radius: 12px !important;
    background: #059669 !important; /* Zümrüt Yeşili (Emerald-600) */
    border: 1px solid #047857 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

.encyclopedia-view-map-btn:hover,
#encyclopediaModal .encyclopedia-view-map-btn:hover,
#encyclopediaModal button.encyclopedia-view-map-btn:hover,
#encyclopediaGrid button[onclick*="viewSpeciesOnMap"]:hover,
#encyclopediaGrid button[onclick*="selectSpecies"]:hover {
    background: #047857 !important; /* Emerald-700 */
    border-color: #065f46 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4) !important;
    transform: translateY(-1px) !important;
}

.encyclopedia-view-map-btn svg,
.encyclopedia-view-map-btn i,
#encyclopediaModal .encyclopedia-view-map-btn svg,
#encyclopediaModal .encyclopedia-view-map-btn i,
#encyclopediaGrid button[onclick*="viewSpeciesOnMap"] svg,
#encyclopediaGrid button[onclick*="selectSpecies"] svg {
    width: 14px !important;
    height: 14px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
}

.leaflet-popup-close-button svg,
.leaflet-popup-close-button i,
.oceanic-spot-popup .leaflet-popup-close-button svg,
.oceanic-spot-popup .leaflet-popup-close-button i,
.custom-dark-popup .leaflet-popup-close-button svg,
.custom-dark-popup .leaflet-popup-close-button i,
#sheetCloseBtn svg,
#drawerCloseBtn svg,
.login-modal-close svg,
.species-picker-dismiss svg,
.membership-picker-close svg,
button[onclick*="close"] svg,
button[onclick*="close"] i,
button[onclick*="toggle"] svg,
button[onclick*="toggle"] i {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
    stroke: currentColor !important;
    stroke-width: 2.3 !important;
}

/* ====================================================================
   MERA KARTINDA KAPATMA BUTONU ILE BOLGE/HAVZA ETIKETI AYNI HIZA DUZENLEMESI
   Kullanici Talebi: Carpi kapatma dugmesi ile yanindaki etiket ayni hizada olsun
   ==================================================================== */
.oceanic-spot-popup .leaflet-popup-content-wrapper {
    position: relative !important;
}

.oceanic-spot-popup .spot-leaflet-popup {
    padding: 13px 14px 14px !important;
}

.oceanic-spot-popup .spot-popup-heading {
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 34px 9px 0 !important;
    border-bottom: 1px solid rgba(51, 65, 85, 0.75) !important;
}

.oceanic-spot-popup .spot-popup-heading__meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.oceanic-spot-popup .spot-popup-basin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    background: rgba(8, 145, 178, 0.12) !important;
    border: 1px solid rgba(34, 211, 238, 0.28) !important;
    color: #38bdf8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.oceanic-spot-popup .leaflet-popup-close-button {
    position: absolute !important;
    top: 13px !important;
    right: 14px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
}

.oceanic-spot-popup .leaflet-popup-close-button span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-0.5px) !important;
}

.oceanic-spot-popup .leaflet-popup-close-button svg,
.oceanic-spot-popup .leaflet-popup-close-button i {
    width: 13px !important;
    height: 13px !important;
}

@media (max-width: 640px) {
    .oceanic-spot-popup .leaflet-popup-close-button {
        top: 13px !important;
        right: 13px !important;
    }
}

/* ====================================================================
   SİTE GENELİ KULLANICI PROFİL FOTOĞRAFI BÜTÜNLÜĞÜ
   Her yerde anasayfadaki gibi: Kusursuz dairesel, yeşil kenarlıksız, nötr sınır ve gölge
   ==================================================================== */
.account-user-avatar,
.site-nav-avatar,
#topMobileAvatarWrapper,
.drawer-avatar,
.user-profile-avatar-circle {
    border-radius: 9999px !important;
    overflow: hidden !important;
    border: 1.5px solid #dce4eb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    background: #f1f5f9 !important;
}

.account-user-avatar img,
.site-nav-avatar img,
#topMobileAvatarWrapper img,
#topMobileAvatarImg,
.drawer-avatar img,
.user-profile-avatar-circle img {
    border-radius: 9999px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* ====================================================================
   UYGULAMA GENELİ: KLAVYE AÇILDIĞINDA GÖRÜNÜR ALAN AYARLAMASI & SCROLL-MARGIN
   Kullanıcı Talebi: "bir kutucuk doldurulacağı zaman klavye açıldığında kutucuk ekran seviyesi klavyeye göre ayarlansın ne yazdığını görsün kullanıcı"
   ==================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
    scroll-margin-top: 80px !important;
    scroll-margin-bottom: 140px !important;
}

/* ====================================================================
   AV BİLDİRİMİ EKRANI: SAĞA-SOLA KAYMALARI VE TAŞMALARI ÖNLEME
   Kullanıcı Talebi: "av bildir ekranında kaymalar var sağa sola doğru olmasın"
   ==================================================================== */
#catchLogModal,
#catchLogModal > div,
#catchLogForm,
.report-page,
.report-card,
.report-panel,
.report-map-wrap,
#reportMap {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#catchLogForm input,
#catchLogForm select,
#catchLogForm textarea,
.report-card input,
.report-card select,
.report-card textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    #catchLogModal > div {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #catchLogForm {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ====================================================================
   LEMON SQUEEZY ÖDEME EKRANI (CHECKOUT): MOBİLDE DAHA YUKARIDA KONUMLANDIRMA
   Kullanıcı Talebi: "mobilde bu ekran biraz daha yukarıda olsun"
   ==================================================================== */
@media (max-width: 640px) {
    .lemonsqueezy-overlay,
    [class*="lemonsqueezy-overlay"],
    div:has(> iframe[src*="lemonsqueezy"]),
    div:has(> .lemonsqueezy-iframe) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lemonsqueezy-iframe,
    iframe[src*="lemonsqueezy"],
    iframe[class*="lemonsqueezy"] {
        margin-top: 0 !important;
        margin-bottom: auto !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 28px) !important;
    }
}

/* ====================================================================
   ÇEREZ İZİN BİLDİRİMİ (COOKIE CONSENT)
   Kullanıcı Talebi: "çerezler uyarısınıda mobilde alttan çıkan ve temaya uygun bir sheet haline getir detaylara basıldığında yasal uyarılar sayfasından diek çerez politikası açılmalı"
   ==================================================================== */
.cookie-consent-sheet {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
}

.cookie-consent-sheet.hidden {
    display: none !important;
}

.cookie-consent-sheet:not(.hidden) {
    display: flex !important;
}

.cookie-sheet-icon {
    background: #ecfdf5 !important;
    border: 1px solid #d1fae5 !important;
    color: #059669 !important;
}

.cookie-sheet-icon svg,
.cookie-sheet-icon i {
    width: 20px !important;
    height: 20px !important;
    color: #059669 !important;
    stroke: #059669 !important;
}

.cookie-sheet-title {
    color: #0f172a !important;
}

.cookie-sheet-desc {
    color: #475569 !important;
}

.cookie-sheet-accept {
    background: #059669 !important;
    border: 1px solid #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
    cursor: pointer !important;
}

.cookie-sheet-accept:hover {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

.cookie-sheet-accept svg,
.cookie-sheet-accept i {
    width: 15px !important;
    height: 15px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
}

.cookie-sheet-details {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.cookie-sheet-details:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.cookie-sheet-details svg,
.cookie-sheet-details i {
    width: 14px !important;
    height: 14px !important;
    color: inherit !important;
    stroke: currentColor !important;
}

/* Masaüstü Stili: Sağ altta zarif kart */
@media (min-width: 641px) {
    .cookie-consent-sheet {
        position: fixed !important;
        bottom: 24px !important;
        right: 24px !important;
        max-width: 440px !important;
        width: calc(100% - 48px) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        gap: 12px !important;
        animation: cookieCardFadeIn 0.25s ease-out forwards;
    }
}

/* Mobil Bottom Sheet Stili: Alttan Açılan Temaya Uygun Sheet */
@media (max-width: 640px) {
    .cookie-consent-sheet {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
        padding: 14px 18px max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
        gap: 12px !important;
        box-shadow: 0 -14px 38px rgba(15, 23, 42, 0.16) !important;
        z-index: 9999 !important;
        animation: cookieSheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .cookie-sheet-handle {
        display: block !important;
        width: 38px !important;
        height: 4px !important;
        border-radius: 9999px !important;
        background: #cbd5e1 !important;
        margin: 0 auto 6px !important;
    }
}

@keyframes cookieSheetSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cookieCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ====================================================================
   YAPAY ZEKA AV ASİSTANI MODAL / SHEET - GÜNCEL AÇIK TEMA UYARLAMASI
   ==================================================================== */
#aiAssistantModal {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(6px) !important;
}

#aiAssistantModal > div {
    background: #ffffff !important;
    border: 1px solid #dce4eb !important;
    box-shadow: 0 20px 50px rgba(23, 35, 56, 0.18) !important;
    color: #1e293b !important;
}

/* Modal Başlık Barı */
#aiAssistantModal .border-b.border-slate-800,
#aiAssistantModal .bg-slate-950\/80 {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
#aiAssistantModal h3 {
    color: #0f172a !important;
    font-weight: 800 !important;
}
#aiAssistantModal p {
    color: #64748b !important;
}

/* Modal Kapatma Butonu (Kare & Soluk Kırmızı) */
#aiAssistantModal button[onclick*="closeAiAssistantModal"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
#aiAssistantModal button[onclick*="closeAiAssistantModal"]:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}
#aiAssistantModal button[onclick*="closeAiAssistantModal"] svg {
    width: 15px !important;
    height: 15px !important;
    color: inherit !important;
    stroke: currentColor !important;
}

/* Sekme Barı */
#aiAssistantModal .flex.items-center.p-2.bg-slate-950\/90,
#aiAssistantModal .flex.items-center.p-2.bg-slate-100 {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
#aiAssistantModal #aiTabBtnStrategy,
#aiAssistantModal #aiTabBtnIntel {
    border-radius: 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

/* Aktif / Pasif Sekme Renkleri */
#aiAssistantModal #aiTabBtnStrategy.is-active,
#aiAssistantModal #aiTabBtnIntel.is-active,
#aiAssistantModal button.bg-emerald-500,
#aiAssistantModal button.bg-cyan-500 {
    background: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2) !important;
    border: 1px solid #047857 !important;
}
#aiAssistantModal #aiTabBtnStrategy:not(.is-active),
#aiAssistantModal #aiTabBtnIntel:not(.is-active) {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
#aiAssistantModal #aiTabBtnStrategy:not(.is-active):hover,
#aiAssistantModal #aiTabBtnIntel:not(.is-active):hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* İçerik Alanı & Kartlar */
#aiAssistantModal .overflow-y-auto {
    background: #ffffff !important;
}

/* Durum Rozetleri (Rüzgar, Dalga, Su Sıcaklığı, Hedef Tür) */
#aiAssistantModal .grid-cols-2 > div,
#aiAssistantModal .grid-cols-4 > div,
#aiAssistantModal .grid-cols-3 > div {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}
#aiAssistantModal .grid-cols-2 > div span,
#aiAssistantModal .grid-cols-4 > div span,
#aiAssistantModal .grid-cols-3 > div span {
    color: #64748b !important;
    font-weight: 600 !important;
}
#aiAssistantModal #aiCardWind { color: #0284c7 !important; font-weight: 800 !important; }
#aiAssistantModal #aiCardWave { color: #059669 !important; font-weight: 800 !important; }
#aiAssistantModal #aiCardWaterTemp { color: #d97706 !important; font-weight: 800 !important; }
#aiAssistantModal #aiCardSpecies { color: #0f172a !important; font-weight: 800 !important; }

/* Ana Taktik Kartı */
#aiAssistantModal .bg-gradient-to-br.from-slate-950,
#aiAssistantModal [id="aiTabContentStrategy"] > .p-4.rounded-2xl {
    background: linear-gradient(145deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08) !important;
    border-radius: 18px !important;
}
#aiAssistantModal #aiCardHeadline {
    color: #065f46 !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
}
#aiAssistantModal #aiCardEfficiencyBadge {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}
#aiAssistantModal #aiCardTactic {
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    color: #1e293b !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* En Verimli Av Pencereleri & Güvenlik Kartları */
#aiAssistantModal .grid.sm\:grid-cols-2 > div:first-child {
    background: #fffbeb !important;
    border: 1px solid #fef3c7 !important;
    border-radius: 16px !important;
}
#aiAssistantModal .grid.sm\:grid-cols-2 > div:first-child span {
    color: #b45309 !important;
    font-weight: 800 !important;
}
#aiAssistantModal .grid.sm\:grid-cols-2 > div:first-child p {
    color: #78350f !important;
}

#aiAssistantModal .grid.sm\:grid-cols-2 > div:last-child {
    background: #f0fdfa !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 16px !important;
}
#aiAssistantModal .grid.sm\:grid-cols-2 > div:last-child span {
    color: #0f766e !important;
    font-weight: 800 !important;
}
#aiAssistantModal .grid.sm\:grid-cols-2 > div:last-child p {
    color: #134e4a !important;
}

/* Yenile Butonları */
#aiAssistantModal button[onclick*="refresh"] {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}
#aiAssistantModal button[onclick*="refresh"]:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Sekme 2: Taranan Saha Bülteni & Mevzuat */
#aiAssistantModal #aiTabContentIntel .bg-gradient-to-br {
    background: #f0fdfa !important;
    border: 1px solid #ccfbf1 !important;
    border-radius: 16px !important;
}
#aiAssistantModal #siteScanBriefingBox {
    background: #ffffff !important;
    border: 1px solid #ccfbf1 !important;
    color: #134e4a !important;
}
#aiAssistantModal #siteScanLegalTable,
#aiAssistantModal #siteScanSpotsList {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
}
#aiAssistantModal #siteScanLegalTable > div,
#aiAssistantModal #siteScanSpotsList > div {
    border-color: #f1f5f9 !important;
    color: #334155 !important;
}
#aiAssistantModal #siteScanLegalTable span,
#aiAssistantModal #siteScanSpotsList span {
    color: #64748b !important;
}
#aiAssistantModal #siteScanLegalTable strong,
#aiAssistantModal #siteScanSpotsList strong {
    color: #0f172a !important;
}

/* Alt WhatsApp Kanalı Bandı */
#aiAssistantModal #aiModalWhatsAppFooter {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
#aiAssistantModal #aiFooterStatusText {
    color: #0f172a !important;
    font-weight: 800 !important;
}
#aiAssistantModal #aiFooterDescText {
    color: #64748b !important;
}
#aiAssistantModal #aiFooterWhatsAppBtn {
    background: #25D366 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
    border-radius: 12px !important;
}
#aiAssistantModal #aiFooterWhatsAppBtn:hover {
    background: #20ba59 !important;
}

/* ====================================================================
   GİRİŞ YAPILMAMIŞ KULLANICI ÜST UYARI BANDI (UNAUTH TOP BANNER)
   Kullanıcı Talebi: "üstteki uyarı giriş yapılmayan tüm ekranlarda çıksın haritadalarda tek satır olsun"
   ==================================================================== */
.unauth-top-banner {
    width: 100% !important;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
    padding: 4px 12px !important;
}

.unauth-top-banner.hidden {
    display: none !important;
}

.unauth-banner-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 1200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.unauth-banner-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.unauth-banner-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    background: #ffffff !important;
    color: #047857 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
    line-height: 1.2 !important;
}
.unauth-banner-btn:hover {
    background: #f0fdf4 !important;
    transform: scale(1.03) !important;
}
.unauth-banner-btn:active {
    transform: scale(0.97) !important;
}

.unauth-banner-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 9999px !important;
    background: rgba(0, 0, 0, 0.18) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 10px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: 2px !important;
    transition: background 0.15s ease !important;
}
.unauth-banner-close:hover {
    background: rgba(0, 0, 0, 0.35) !important;
}

/* Harita sayfasında üst bar kaldırıldı, bildirimler #headerNotificationStack içinde HUD olarak gösterilir */
#unauthTopBanner {
    display: none !important;
}

/* ====================================================================
   KULLANICI PANELİ & DESTEK MERKEZİ: KART YAPISI VE MOBİL SCROLL İYİLEŞTİRMELERİ
   ==================================================================== */

/* 1. Kullanıcı Paneli Karşılama Kartı */
.account-welcome-card {
    position: relative;
    padding: 22px 26px;
    border: 1px solid #dce4ec !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(31, 51, 70, 0.05) !important;
    margin-bottom: 22px !important;
}
.account-welcome-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.account-welcome-card-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.account-welcome-avatar-badge {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid #d5e5df;
    border-radius: 15px;
    color: #176b55;
    background: #eef6f3;
}
.account-welcome-avatar-badge svg {
    width: 24px;
    height: 24px;
}
.account-welcome-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #486a60;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}
.account-welcome-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}
.account-welcome-card-title {
    margin: 4px 0 2px;
    color: #1a293d !important;
    font: 800 clamp(20px, 2.4vw, 26px)/1.2 'Outfit', sans-serif !important;
    letter-spacing: -.02em;
}
.account-welcome-card-desc {
    margin: 0;
    color: #64748b !important;
    font-size: 13.5px;
    line-height: 1.45;
}
.account-welcome-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    background: #176b55;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(23, 107, 85, .25);
    flex-shrink: 0;
}
.account-welcome-action-btn:hover {
    background: #125a48;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(23, 107, 85, .32);
}
.account-welcome-action-btn svg {
    width: 17px;
    height: 17px;
    color: #ffffff !important;
}
.account-welcome-action-arrow {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.85;
}
.account-tools-section {
    margin-bottom: 22px;
}
.account-overview-section {
    margin-bottom: 24px;
}

/* 2. Destek Merkezi Üst Bilgi Kartı */
.support-hero-card {
    padding: 22px 26px;
    border: 1px solid #d8e3e9 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(30, 48, 68, .045) !important;
    margin-bottom: 20px !important;
}
.support-hero-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.support-hero-icon-wrap {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid #cbe0f2;
    border-radius: 15px;
    color: #1d5da8;
    background: #edf5fc;
}
.support-hero-icon-wrap svg {
    width: 24px;
    height: 24px;
}
.support-hero-details {
    min-width: 0;
    flex: 1;
}
.support-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #486a60;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}
.support-hero-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ea5e9;
}
.support-hero-title {
    margin: 4px 0 6px;
    color: #25364b !important;
    font: 800 clamp(22px, 2.6vw, 30px)/1.2 'Outfit', sans-serif !important;
    letter-spacing: -.03em;
}
.support-hero-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
}
.support-hero-user-meta strong {
    color: #1e293b;
    font-weight: 700;
}
.support-hero-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
}

/* 3. Mobilde Akıcı Sayfa Kaydırma (Scroll Garantisi) */
html {
    -webkit-overflow-scrolling: touch;
}
body:not(.map-page):not(.admin-map-page) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 900px) {
    body.account-panel-page,
    body.account-subpage,
    .account-panel-shell,
    .account-main,
    .account-content,
    .account-subpage-content,
    .legal-page-content,
    .support-content {
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
    }
}

@media (max-width: 640px) {
    /* 1. Kullanıcı Paneli Karşılama Kartı: Mobilde İkon ve İçeriği Ortala */
    .account-welcome-card {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        text-align: center !important;
    }
    .account-welcome-card-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .account-welcome-card-left {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .account-welcome-avatar-badge {
        margin: 0 auto !important;
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
    }
    .account-welcome-avatar-badge svg {
        margin: 0 auto !important;
    }
    .account-welcome-card-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .account-welcome-card-badge {
        justify-content: center !important;
        margin: 0 auto 2px !important;
    }
    .account-welcome-card-title {
        text-align: center !important;
        margin: 4px 0 !important;
    }
    .account-welcome-card-desc {
        text-align: center !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    .account-welcome-card-right {
        width: 100% !important;
    }
    .account-welcome-action-btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    /* 2. Destek Merkezi Hero Kartı: Mobilde İkon ve İçeriği Ortala */
    .support-hero-card {
        padding: 20px 16px !important;
        border-radius: 18px !important;
        text-align: center !important;
    }
    .support-hero-card-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 14px !important;
    }
    .support-hero-icon-wrap {
        margin: 0 auto !important;
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px !important;
        border-radius: 14px !important;
    }
    .support-hero-icon-wrap svg {
        margin: 0 auto !important;
        width: 24px !important;
        height: 24px !important;
    }
    .support-hero-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    .support-hero-eyebrow {
        justify-content: center !important;
        margin: 0 auto 2px !important;
    }
    .support-hero-title {
        text-align: center !important;
        margin: 4px 0 !important;
    }
    .support-hero-user-meta {
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }
    .support-hero-subtitle {
        text-align: center !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }
}

/* ====================================================================
   CANLI GEMİ VE BALIKÇI TRAFİK RADARI: TEMAYA UYGUN KART TASARIMLARI
   ==================================================================== */

/* Leaflet AIS Gemi Popup Kapsayıcısı */
.custom-ais-popup .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    border: 1px solid #dce4eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.14) !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    box-sizing: border-box !important;
}
.custom-ais-popup .leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.custom-ais-popup .leaflet-popup-tip {
    background: #ffffff !important;
    border: 1px solid #dce4eb !important;
    box-shadow: none !important;
}
.custom-ais-popup .leaflet-popup-close-button {
    top: 8px !important;
    right: 8px !important;
    z-index: 20 !important;
}

/* AIS Popup İçerik Kartı */
.ais-popup-card {
    padding: 14px 14px 12px 14px;
    width: 290px;
    max-width: calc(100vw - 36px);
    background: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

/* Üst Orta İkon & Başlık */
.ais-popup-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f6;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.ais-popup-badge-icon {
    display: grid !important;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    font-size: 19px;
    margin: 0 auto 6px auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.ais-popup-badge-icon.is-fishing {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.ais-popup-badge-icon.is-commercial {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
}
.ais-popup-title {
    margin: 0 0 2px 0;
    color: #0f172a !important;
    font: 800 14.5px/1.25 'Outfit', sans-serif !important;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100%;
}
.ais-popup-type-tag {
    display: block;
    font-size: 10.5px;
    font-weight: 750;
    margin-top: 1px;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100%;
}
.ais-popup-type-tag.is-fishing {
    color: #059669;
}
.ais-popup-type-tag.is-commercial {
    color: #0284c7;
}
.ais-popup-mmsi-wrap {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}
.ais-popup-mmsi {
    font-size: 9.5px;
    font-family: ui-monospace, monospace;
    font-weight: 750;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
    word-break: break-word;
}

/* AIS Popup 2x2 İstatistik Izgarası (Üst Ortada İkonlu ve Taşma Korumalı) */
.ais-popup-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
    margin-bottom: 9px;
    width: 100%;
    box-sizing: border-box;
}
.ais-popup-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 7px 6px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    min-width: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}
.ais-popup-stat-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0 auto 3px auto;
}
.ais-popup-stat-label {
    font-size: 8.5px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .05em;
    text-align: center;
}
.ais-popup-stat-value {
    font-size: 11px;
    font-weight: 750;
    color: #1e293b;
    margin-top: 1px;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25;
    max-width: 100%;
}

/* Varış Limanı (Üst Ortada İkonlu ve Taşma Korumalı) */
.ais-popup-dest {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
    font-size: 11px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.ais-popup-dest-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #0284c7;
    margin: 0 auto 2px auto;
}
.ais-popup-dest-value {
    display: block;
    color: #0369a1;
    font-size: 11px;
    font-weight: 750;
    margin-top: 1px;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Canlı Veri Kaynağı */
.ais-popup-source {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 10px;
    color: #64748b;
    margin-bottom: 9px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.ais-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}

/* AIS Popup Bilgi / Uyarı Kutusu (Üst Ortada İkonlu) */
.ais-popup-note {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.45;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.ais-popup-note.is-fishing {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #14532d !important;
}
.ais-popup-note.is-commercial {
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
}
.ais-popup-note-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin: 0 auto 4px auto;
}
.ais-popup-note.is-fishing .ais-popup-note-icon {
    background: #dcfce7;
    color: #15803d;
}
.ais-popup-note.is-commercial .ais-popup-note-icon {
    background: #fef3c7;
    color: #b45309;
}
.ais-popup-note-title {
    font-weight: 800;
    font-size: 11.5px;
    margin-bottom: 3px;
    text-align: center;
}
.ais-popup-note.is-fishing .ais-popup-note-title {
    color: #166534 !important;
}
.ais-popup-note.is-commercial .ais-popup-note-title {
    color: #92400e !important;
}
.ais-popup-note p {
    margin: 0;
    font-size: 10.5px;
    opacity: 0.95;
    line-height: 1.4;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* CANLI GEMİ VE TRAFİK RADARI HUD KARTI (#aisRadarHud) */
#aisRadarHud.ais-radar-hud {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid #dce4eb !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    padding: 14px 15px !important;
    color: #1e293b !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
}
.ais-radar-header {
    position: relative !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f6;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.ais-radar-header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.ais-radar-title {
    color: #0f172a !important;
    font: 800 12.5px/1.2 'Outfit', sans-serif !important;
    letter-spacing: .02em;
    text-align: center;
    word-break: break-word;
}
.ais-radar-pulse-icon {
    display: grid !important;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    margin: 0 auto 6px auto;
}
.ais-radar-pulse-icon svg {
    width: 16px;
    height: 16px;
}
.ais-radar-close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: grid !important;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 10;
}
.ais-radar-close-btn:hover {
    color: #ef4444;
    background: #fee2e2;
    border-color: #fca5a5;
}
.ais-radar-close-btn svg {
    width: 13px;
    height: 13px;
}
.ais-radar-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    margin-bottom: 9px;
    width: 100%;
    box-sizing: border-box;
}
.ais-radar-stat-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 8px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-align: center !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}
.ais-radar-stat-box.is-fishing {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.ais-radar-stat-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: 0 auto 3px auto;
}
.ais-radar-stat-icon svg {
    width: 15px;
    height: 15px;
}
.ais-radar-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
}
.ais-radar-stat-val {
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 2px;
    text-align: center;
}
.ais-radar-signal-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    font-size: 11px;
    margin-bottom: 9px;
    width: 100%;
    box-sizing: border-box;
}
.ais-radar-signal-label {
    font-weight: 700;
    color: #475569;
    font-size: 10.5px;
}
.ais-radar-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
}
.ais-radar-signal-badge.is-active {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #047857;
}
.ais-radar-advice-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #14532d !important;
    font-size: 11px;
    line-height: 1.45;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.ais-radar-advice-icon-wrap {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dcfce7;
    color: #166534;
    margin: 0 auto;
}
.ais-radar-advice-icon {
    width: 14px;
    height: 14px;
}
.ais-radar-advice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}
.ais-radar-advice-title {
    color: #15803d;
    font-weight: 800;
    margin-bottom: 2px;
    display: block;
    text-align: center;
}
.ais-radar-advice-text {
    color: #166534;
    text-align: center;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: block;
}