/* ==============================================================
           DESIGN SYSTEM — kusatlasi.com / kus/466 Light Botanical Palette
           ============================================================== */
        :root {
            /* Authentic Palette from https://kusatlasi.com/kus/466 */
            --page-bg: #f4f1ea;              /* Warm organic sand/parchment base */
            --panel-bg: #ffffff;             /* Crisp white surface */
            --panel-soft: #eff5f1;           /* Soft sage mist tint */
            --panel-subtle: #e8f6ef;         /* Delicate botanical green tint */
            --panel-sand: #fffbeb;           /* Warm ivory / butter tint */
            --gradient-card: linear-gradient(145deg, #ffffff 0%, #f9fbf9 100%);
            --gradient-hero: linear-gradient(160deg, #f7faf8 0%, #edf5f0 50%, #e5efe9 100%);
            
            /* Inks & Typography */
            --ink-primary: #123d31;          /* Deep botanical forest ink (high contrast) */
            --ink-secondary: #364f46;        /* Balanced deep sage */
            --ink-muted: #526b61;            /* Soft slate-sage */
            --ink-subtle: #657a72;           /* Subtle caption tone */
            --ink-light: #8ba096;            /* Placeholder tone */
            
            /* Accents from Bird 466 & Site Design */
            --green-accent: #17624c;         /* Vibrant botanical emerald */
            --green-hover: #0d513d;          /* Darker deep emerald */
            --green-light: #f0fdf4;          /* Fresh mint tint */
            --green-edge: #bbf7d0;           /* Soft green border */
            --green-glow: rgba(23, 98, 76, 0.16);
            
            /* Warm Sand / Amber Button Palette (.button.sand) */
            --sand-bg: #ffe8a3;              /* Rich golden sand button */
            --sand-hover: #ffd875;           /* Sand button hover */
            --sand-border: #fde68a;          /* Delicate golden border */
            --sand-ink: #78350f;             /* Amber deep ink */
            --amber-accent: #b45309;         /* Amber tone */
            --amber-dot: #f59e0b;            /* Golden glowing indicator */
            
            /* Light Refined Header Tone (replacing dark black-green) */
            --header-bg: rgba(246, 248, 246, 0.92);
            --header-border: rgba(18, 61, 49, 0.08);
            --header-shadow: 0 4px 24px rgba(18, 61, 49, 0.06);
            
            /* Borders & Shadows */
            --border-hairline: 1px solid rgba(18, 61, 49, 0.08);
            --border-card: 1px solid rgba(18, 61, 49, 0.09);
            --border-hover: 1px solid rgba(23, 98, 76, 0.35);
            --shadow-subtle: 0 2px 10px rgba(18, 61, 49, 0.04);
            --shadow-card: 0 8px 28px rgba(18, 61, 49, 0.06);
            --shadow-card-hover: 0 16px 40px rgba(18, 61, 49, 0.12);
            --shadow-modal: 0 24px 70px rgba(10, 35, 27, 0.25);
            
            /* Radii */
            --radius-xs: 6px;
            --radius-sm: 10px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --radius-full: 9999px;
            
            /* Transitions */
            --trans-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            --trans-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Reset & Base */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background-color: var(--page-bg);
            color: var(--ink-primary);
            line-height: 1.55;
            min-height: 100vh;
            overflow-x: hidden;
            background-image: 
                radial-gradient(ellipse 90% 60% at 50% -10%, rgba(23, 98, 76, 0.05) 0%, transparent 70%),
                radial-gradient(circle at 10% 40%, rgba(254, 243, 199, 0.35) 0%, transparent 40%),
                radial-gradient(circle at 90% 70%, rgba(232, 246, 239, 0.6) 0%, transparent 45%);
            background-attachment: fixed;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--trans-smooth);
        }

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

        .wrap {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .skip {
            position: absolute;
            top: -50px;
            left: 20px;
            background: var(--green-accent);
            color: #fff;
            padding: 10px 16px;
            z-index: 100000;
            border-radius: var(--radius-sm);
            transition: top 0.2s;
        }
        .skip:focus {
            top: 20px;
        }

        /* ==============================================================
           SITE HEADER & NAVIGATION BAR (Light, Elegant, Botanical)
           ============================================================== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 99999;
            background: var(--header-bg);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--header-border);
            box-shadow: var(--header-shadow);
            transition: var(--trans-smooth);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 68px;
        }

        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            user-select: none;
        }

        .logo-owl-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--green-accent);
            box-shadow: 0 2px 8px rgba(23, 98, 76, 0.15);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .logo:hover .logo-owl-img {
            transform: rotate(-6deg) scale(1.05);
        }

        .logo-text {
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -0.025em;
            display: flex;
            align-items: center;
        }

        .logo-kus {
            color: var(--ink-primary);
        }

        .logo-atlasi {
            color: var(--green-accent);
            font-weight: 800;
        }

        /* Desktop Nav List */
        .desktop-nav {
            display: flex;
            align-items: center;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
        }

        .nav-dropdown-item {
            position: relative;
        }

        .nav-dropdown-trigger, .nav-links > li > a {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 14px;
            border-radius: var(--radius-full);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--ink-secondary);
            border: 1px solid transparent;
            transition: var(--trans-smooth);
            cursor: pointer;
            white-space: nowrap;
        }

        .nav-dropdown-trigger:hover, .nav-links > li > a:hover {
            color: var(--green-accent);
            background: rgba(23, 98, 76, 0.06);
        }

        .nav-dropdown-caret {
            font-size: 0.68rem;
            color: var(--ink-muted);
            transition: transform 0.25s ease;
        }

        .nav-dropdown-item:hover .nav-dropdown-caret {
            transform: rotate(180deg);
            color: var(--green-accent);
        }

        /* ACTIVE "GALERİ" PILL WITH GOLDEN BEACON (From Screenshot) */
        .nav-gallery-item .nav-gallery-flash-btn {
            background: rgba(251, 191, 36, 0.16) !important;
            border: 1.5px solid rgba(217, 119, 6, 0.38) !important;
            color: #92400e !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
        }

        .nav-gallery-icon {
            color: #d97706;
            font-size: 0.88rem;
        }

        .nav-flash-beacon {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--amber-dot);
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
            animation: pulse-beacon 2s infinite ease-in-out;
            margin-left: 2px;
            margin-right: 2px;
        }

        @keyframes pulse-beacon {
            0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px rgba(245, 158, 11, 0.8); }
            50% { transform: scale(1.35); opacity: 0.85; box-shadow: 0 0 12px rgba(245, 158, 11, 1); }
        }

        /* Nav Dropdown Menus */
        .nav-dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 280px;
            background: #ffffff;
            border-radius: var(--radius-md);
            border: 1px solid rgba(18, 61, 49, 0.1);
            box-shadow: 0 14px 40px rgba(18, 61, 49, 0.12);
            padding: 8px;
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 100000;
            animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes dropdownFade {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .nav-dropdown-item:hover .nav-dropdown-menu {
            display: flex;
        }

        .nav-dropdown-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            color: var(--ink-primary);
            text-decoration: none;
            transition: var(--trans-smooth);
        }

        .nav-dropdown-menu a:hover {
            background: var(--panel-subtle);
        }

        .nav-dropdown-menu a i {
            font-size: 1.05rem;
            width: 24px;
            text-align: center;
        }

        .dd-title {
            font-weight: 700;
            font-size: 0.88rem;
            color: var(--ink-primary);
        }

        .dd-sub {
            font-size: 0.76rem;
            color: var(--ink-muted);
            margin-top: 1px;
        }

        .nav-badge-pulse {
            display: inline-block;
            background: #ef4444;
            color: #fff;
            font-size: 0.62rem;
            font-weight: 800;
            padding: 1px 6px;
            border-radius: var(--radius-full);
            margin-left: 4px;
            letter-spacing: 0.04em;
        }

        /* Right Nav Actions */
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-icon-btn {
            background: transparent;
            border: 1px solid rgba(18, 61, 49, 0.12);
            color: var(--ink-secondary);
            font-size: 0.95rem;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--trans-smooth);
            position: relative;
        }

        .header-icon-btn:hover {
            background: rgba(23, 98, 76, 0.08);
            color: var(--green-accent);
            border-color: var(--green-accent);
            transform: translateY(-1px);
        }

        .badge-dot {
            position: absolute;
            top: 7px;
            right: 7px;
            width: 7px;
            height: 7px;
            background: #ef4444;
            border-radius: 50%;
            border: 1.5px solid #fff;
        }

        /* Language Switcher */
        .lang-switcher {
            display: inline-flex;
            align-items: center;
            background: rgba(18, 61, 49, 0.05);
            border: 1px solid rgba(18, 61, 49, 0.1);
            border-radius: var(--radius-full);
            padding: 3px 6px;
            font-size: 0.78rem;
            font-weight: 700;
        }

        .lang-btn {
            padding: 3px 8px;
            border-radius: var(--radius-full);
            color: var(--ink-muted);
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .lang-btn.lang-active {
            background: var(--green-accent);
            color: #ffffff;
            box-shadow: 0 1px 4px rgba(23, 98, 76, 0.2);
        }

        .lang-divider {
            color: rgba(18, 61, 49, 0.25);
            font-size: 0.75rem;
            margin: 0 1px;
        }

        /* User Profile Pill */
        .user-profile-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(23, 98, 76, 0.08);
            border: 1px solid rgba(23, 98, 76, 0.2);
            padding: 5px 12px 5px 6px;
            border-radius: var(--radius-full);
            color: var(--ink-primary);
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--trans-smooth);
            position: relative;
        }

        .user-profile-pill:hover {
            background: rgba(23, 98, 76, 0.14);
            border-color: var(--green-accent);
        }

        .user-avatar-circle {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--green-accent);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        .user-profile-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 200px;
            background: #ffffff;
            border-radius: var(--radius-md);
            border: 1px solid rgba(18, 61, 49, 0.1);
            box-shadow: 0 12px 36px rgba(18, 61, 49, 0.12);
            padding: 6px;
            display: none;
            flex-direction: column;
            z-index: 100000;
        }

        .user-profile-pill:hover .user-profile-dropdown {
            display: flex;
        }

        .user-profile-dropdown a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            color: var(--ink-secondary);
            font-weight: 600;
        }

        .user-profile-dropdown a:hover {
            background: var(--panel-subtle);
            color: var(--green-accent);
        }

        .mobile-toggle-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.3rem;
            color: var(--ink-primary);
            cursor: pointer;
            padding: 6px;
        }

        /* ==============================================================
           BUTTON SYSTEM (.button.sand, .button.ink, .button.outline)
           ============================================================== */
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-size: 0.94rem;
            font-weight: 700;
            padding: 12px 24px;
            border-radius: var(--radius-full);
            cursor: pointer;
            border: 1.5px solid transparent;
            transition: var(--trans-smooth);
            text-decoration: none;
            user-select: none;
        }

        .button svg.icon {
            width: 17px;
            height: 17px;
            transition: transform 0.25s ease;
        }

        .button:hover svg.icon {
            transform: translateX(3px);
        }

        /* Sand Button (Golden / Amber Highlight Button) */
        .button.sand {
            background: var(--sand-bg);
            color: var(--sand-ink);
            border-color: var(--sand-border);
            box-shadow: 0 4px 14px rgba(217, 119, 6, 0.15);
        }

        .button.sand:hover {
            background: var(--sand-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(217, 119, 6, 0.22);
        }

        /* Ink Button (Deep Emerald Primary Button) */
        .button.ink {
            background: var(--green-accent);
            color: #ffffff;
            border-color: var(--ink-primary);
            box-shadow: 0 4px 16px rgba(23, 98, 76, 0.2);
        }

        .button.ink:hover {
            background: var(--green-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(23, 98, 76, 0.3);
        }

        /* Outline Button */
        .button.outline {
            background: #ffffff;
            color: var(--ink-primary);
            border-color: rgba(18, 61, 49, 0.18);
            box-shadow: var(--shadow-subtle);
        }

        .button.outline:hover {
            background: var(--panel-subtle);
            border-color: var(--green-accent);
            color: var(--green-accent);
            transform: translateY(-2px);
        }

        /* Quiet Link */
        .quiet-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.94rem;
            font-weight: 700;
            color: var(--green-accent);
            padding: 10px 18px;
            border-radius: var(--radius-full);
            background: rgba(23, 98, 76, 0.06);
            border: 1px solid rgba(23, 98, 76, 0.15);
            transition: var(--trans-smooth);
        }

        .quiet-link:hover {
            background: rgba(23, 98, 76, 0.12);
            color: var(--ink-primary);
            border-color: var(--green-accent);
            transform: translateY(-1px);
        }

        .quiet-link svg.icon {
            width: 16px;
            height: 16px;
        }

        /* Eyebrows */
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--green-accent);
            margin-bottom: 12px;
        }

        .eyebrow .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green-accent);
            box-shadow: 0 0 8px rgba(23, 98, 76, 0.5);
            animation: pulse-dot 2.2s infinite ease-in-out;
        }

        @keyframes pulse-dot {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.4); opacity: 0.7; }
        }

        /* ==============================================================
           1. SHOWCASE: AYIN EN İYİSİ & GÜNÜN EN İYİLERİ (TOP 3)
           ============================================================== */
        .showcase-section {
            padding: 28px 0 20px;
            position: relative;
        }

        .showcase-top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .showcase-title-wrap h1 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.02em;
            line-height: 1.15;
            margin: 0;
        }

        .showcase-title-wrap p {
            font-size: 0.98rem;
            color: var(--ink-muted);
            margin-top: 4px;
        }

        .showcase-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* Two-Column Showcase Grid */
        .showcase-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 28px;
            align-items: stretch;
        }

        /* LEFT COLUMN: AYIN EN İYİSİ (Photo of the Month) */
        .month-hero-card {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            background: #ffffff;
            box-shadow: 0 16px 44px rgba(18, 61, 49, 0.1);
            border: 1.5px solid rgba(217, 119, 6, 0.32);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 520px;
            height: 100%;
            transition: var(--trans-smooth);
            cursor: pointer;
        }

        .month-hero-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 60px rgba(18, 61, 49, 0.16);
            border-color: rgba(217, 119, 6, 0.55);
        }

        .month-hero-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 1;
        }

        .month-hero-card:hover .month-hero-img {
            transform: scale(1.04);
        }

        /* Top Floating Badges for Ayın En İyisi */
        .month-card-top-bar {
            position: absolute;
            top: 18px;
            left: 18px;
            right: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 10;
            pointer-events: none;
        }

        .month-award-badge {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #fde68a 100%);
            color: #78350f;
            border: 1.5px solid #d97706;
            padding: 7px 16px;
            border-radius: var(--radius-full);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            box-shadow: 0 6px 18px rgba(217, 119, 6, 0.28);
            animation: goldGlow 3s infinite alternate ease-in-out;
        }

        @keyframes goldGlow {
            0% { box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25); }
            100% { box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45); }
        }

        .month-stats-float {
            pointer-events: auto;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(14, 45, 36, 0.82);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #ffffff;
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 0.82rem;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .month-stats-float button {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
            font-weight: 700;
            transition: var(--trans-smooth);
        }

        .month-stats-float button:hover {
            color: #f87171;
            transform: scale(1.1);
        }

        /* Bottom Glassmorphic Overlay for Month Hero */
        .month-card-bottom {
            position: relative;
            z-index: 5;
            background: linear-gradient(to top, rgba(10, 32, 25, 0.95) 0%, rgba(10, 32, 25, 0.78) 55%, transparent 100%);
            padding: 36px 26px 24px;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 10px;
            backdrop-filter: blur(3px);
        }

        .month-title-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .month-species-name {
            font-size: 1.85rem;
            font-weight: 800;
            color: #ffffff;
            line-height: 1.15;
            letter-spacing: -0.01em;
        }

        .month-latin-name {
            font-size: 1rem;
            font-style: italic;
            color: #a7f3d0;
            font-family: Georgia, serif;
            margin-left: 8px;
        }

        .month-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        .month-author-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .month-author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #ffffff;
            font-weight: 800;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .month-author-info {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
        }

        .month-author-name {
            font-weight: 800;
            font-size: 0.94rem;
            color: #ffffff;
        }

        .month-author-badge {
            font-size: 0.72rem;
            color: #fde68a;
            font-weight: 700;
        }

        .month-exif-pill {
            font-size: 0.76rem;
            font-family: 'JetBrains Mono', monospace;
            color: rgba(255, 255, 255, 0.8);
            background: rgba(255, 255, 255, 0.12);
            padding: 5px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(255, 255, 255, 0.16);
        }

        /* RIGHT COLUMN: GÜNÜN EN İYİLERİ (Top 3 of the Day) */
        .daily-best-column {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 0;
            height: 100%;
        }

        .daily-column-header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding-bottom: 4px;
            text-align: center;
            width: 100%;
        }

        .daily-column-header h3 {
            margin: 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--ink-primary);
            text-align: center;
        }

        .daily-column-header .daily-live-indicator {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        @media (max-width: 680px) {
            .daily-column-header {
                flex-direction: column;
                gap: 8px;
            }
            .daily-column-header .daily-live-indicator {
                position: static;
                transform: none;
            }
        }

        .daily-column-header h3 {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--ink-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .daily-live-indicator {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            color: var(--green-accent);
            background: var(--green-light);
            border: 1px solid var(--green-edge);
            padding: 3px 10px;
            border-radius: var(--radius-full);
        }

        .daily-live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--green-accent);
            box-shadow: 0 0 6px var(--green-accent);
            animation: pulse-dot 1.8s infinite ease-in-out;
        }

        /* Daily 3 Cards */
        .daily-cards-stack {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 14px;
            flex: 1;
        }

        .daily-award-card {
            background: var(--panel-bg);
            border-radius: var(--radius-lg);
            border: var(--border-card);
            box-shadow: var(--shadow-subtle);
            padding: 14px 18px;
            display: grid;
            grid-template-columns: 185px 1fr;
            gap: 18px;
            align-items: center;
            transition: var(--trans-smooth);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            flex: 1;
        }

        .daily-award-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-card-hover);
            border-color: rgba(23, 98, 76, 0.35);
        }

        .daily-award-card.rank-1 {
            border-left: 5px solid #f59e0b;
        }

        .daily-award-card.rank-2 {
            border-left: 5px solid #94a3b8;
        }

        .daily-award-card.rank-3 {
            border-left: 5px solid #ea580c;
        }

        .daily-thumb-wrap {
            position: relative;
            width: 185px;
            height: 134px;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: #e2e8f0;
            box-shadow: 0 4px 14px rgba(18, 61, 49, 0.12);
        }

        .daily-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .daily-award-card:hover .daily-thumb-wrap img {
            transform: scale(1.08);
        }

        .daily-thumb-zoom-badge {
            position: absolute;
            bottom: 6px;
            right: 6px;
            background: rgba(14, 45, 36, 0.85);
            color: #ffffff;
            font-size: 0.68rem;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: var(--radius-xs);
            backdrop-filter: blur(4px);
            display: inline-flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transform: translateY(4px);
            transition: var(--trans-smooth);
        }

        .daily-award-card:hover .daily-thumb-zoom-badge {
            opacity: 1;
            transform: translateY(0);
        }

        .daily-card-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .daily-top-badge-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        /* Rank Badges */
        .rank-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.72rem;
            font-weight: 800;
            padding: 2px 10px;
            border-radius: var(--radius-full);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .rank-badge.gold {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
            border: 1px solid #f59e0b;
        }

        .rank-badge.silver {
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            color: #334155;
            border: 1px solid #cbd5e1;
        }

        .rank-badge.bronze {
            background: linear-gradient(135deg, #ffedd5, #fed7aa);
            color: #9a3412;
            border: 1px solid #fb923c;
        }

        .daily-likes-btn {
            background: transparent;
            border: none;
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: var(--trans-smooth);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }

        .daily-likes-btn:hover, .daily-likes-btn.liked {
            color: #ef4444;
        }

        .daily-species-title {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--ink-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }

        .daily-species-latin {
            font-size: 0.78rem;
            font-style: italic;
            color: var(--green-accent);
            font-family: Georgia, serif;
            margin-left: 4px;
        }

        .daily-bottom-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.76rem;
            color: var(--ink-muted);
            margin-top: 2px;
        }

        .daily-author-txt {
            font-weight: 600;
            color: var(--ink-secondary);
        }

        .daily-location-txt {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--ink-muted);
        }

        /* ==============================================================
           2. PERSONAL BRIDGE SECTION (From /fotograflar)
           ============================================================== */
        .personal-bridge {
            background: var(--panel-bg);
            border-radius: var(--radius-xl);
            padding: 32px 36px;
            margin: 24px auto 20px;
            border: var(--border-card);
            box-shadow: var(--shadow-card);
            display: grid;
            grid-template-columns: 1.2fr 2fr auto;
            gap: 32px;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .personal-bridge::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 6px;
            height: 100%;
            background: linear-gradient(to bottom, var(--green-accent), var(--sand-bg));
        }

        .personal-bridge h2 {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.015em;
            margin-bottom: 6px;
        }

        .personal-bridge p {
            font-size: 0.95rem;
            color: var(--ink-muted);
            line-height: 1.5;
        }

        .bridge-tools {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .bridge-tool-card {
            background: var(--panel-soft);
            border: 1px solid rgba(18, 61, 49, 0.08);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            transition: var(--trans-smooth);
            text-decoration: none;
        }

        .bridge-tool-card:hover {
            background: var(--panel-subtle);
            border-color: var(--green-accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-subtle);
        }

        .bridge-tool-card strong {
            font-size: 1.9rem;
            font-weight: 800;
            color: var(--green-accent);
            line-height: 1;
        }

        .bridge-tool-card span {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--ink-secondary);
        }

        .bridge-arrow {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--panel-soft);
            border: 1px solid rgba(18, 61, 49, 0.12);
            color: var(--green-accent);
            font-size: 1.3rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--trans-smooth);
        }

        .bridge-arrow:hover {
            background: var(--green-accent);
            color: #ffffff;
            transform: scale(1.08) rotate(45deg);
        }

        /* ==============================================================
           3. WORKSPACE / PHOTO DISCOVERY SECTION (From /fotograflar)
           ============================================================== */
        .workspace {
            padding-bottom: 60px;
        }

                .discovery-header-wrap {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .discovery-title-area {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
            min-width: 290px;
        }

        .discovery-title-area h2 {
            font-size: 2.1rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .discovery-title-area h2 .count {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--green-accent);
            background: var(--green-light);
            border: 1px solid var(--green-edge);
            padding: 2px 14px;
            border-radius: var(--radius-full);
        }

        /* Category Filter Pills (cleanly below the title) */
        .filter-categories-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 6px;
        }

        .filter-pill {
            background: var(--panel-soft);
            border: 1px solid rgba(18, 61, 49, 0.1);
            color: var(--ink-secondary);
            padding: 7px 16px;
            border-radius: var(--radius-full);
            font-size: 0.84rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .filter-pill:hover {
            background: var(--panel-subtle);
            color: var(--green-accent);
            border-color: var(--green-accent);
        }

        .filter-pill.active {
            background: var(--green-accent);
            color: #ffffff;
            border-color: var(--green-accent);
            box-shadow: 0 2px 8px rgba(23, 98, 76, 0.25);
        }

        /* Right Cluster: Upload + Search + 3 Stacked Sort Boxes */
        .discovery-right-cluster {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 310px;
            max-width: 100%;
        }

        .upload-cluster-btn {
            width: 100%;
            justify-content: center;
            padding: 11px 20px;
            font-size: 0.94rem;
            font-weight: 700;
            box-shadow: var(--shadow-subtle);
            border-radius: var(--radius-md);
            border: 1.5px solid rgba(18, 61, 49, 0.15);
        }

        .cluster-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--panel-bg);
            border: 1.5px solid rgba(18, 61, 49, 0.12);
            border-radius: var(--radius-md);
            padding: 10px 14px;
            transition: var(--trans-smooth);
            box-shadow: var(--shadow-subtle);
        }

        .cluster-search-box:focus-within {
            border-color: var(--green-accent);
            box-shadow: 0 0 0 3px rgba(23, 98, 76, 0.12);
        }

        .cluster-search-box svg.icon {
            width: 18px;
            height: 18px;
            color: var(--ink-muted);
            flex-shrink: 0;
        }

        .cluster-search-box input {
            border: none;
            background: transparent;
            width: 100%;
            outline: none;
            font-size: 0.88rem;
            color: var(--ink-primary);
            font-weight: 600;
        }

        .cluster-search-box input::placeholder {
            color: var(--ink-light);
            font-weight: 500;
        }

        /* 3 Stacked Sort Boxes */
        .sort-stacked-panel {
            background: var(--panel-bg);
            border: var(--border-card);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .sort-panel-title {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-muted);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sort-box-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(18, 61, 49, 0.08);
            background: var(--panel-soft);
            color: var(--ink-secondary);
            font-size: 0.86rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--trans-smooth);
            text-align: left;
            width: 100%;
        }

        .sort-box-item i.sort-icon {
            font-size: 0.85rem;
            width: 18px;
            text-align: center;
            color: var(--ink-muted);
            transition: var(--trans-smooth);
        }

        .sort-box-item .check-icon {
            margin-left: auto;
            font-size: 0.75rem;
            color: var(--green-accent);
            opacity: 0;
            transition: var(--trans-smooth);
        }

        .sort-box-item:hover {
            background: var(--panel-subtle);
            color: var(--green-accent);
            border-color: rgba(23, 98, 76, 0.25);
        }

        .sort-box-item:hover i.sort-icon {
            color: var(--green-accent);
        }

        .sort-box-item.active {
            background: var(--green-light);
            color: var(--green-accent);
            border-color: var(--green-edge);
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(23, 98, 76, 0.08);
        }

        .sort-box-item.active i.sort-icon {
            color: var(--green-accent);
        }

        .sort-box-item.active .check-icon {
            opacity: 1;
        }

        /* Saha mode styles for new cluster */
        body.saha-mode .upload-cluster-btn,
        body.saha-mode .cluster-search-box,
        body.saha-mode .sort-stacked-panel {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.16);
            color: var(--ink-primary);
        }

        body.saha-mode .cluster-search-box input {
            color: #ecfdf5;
        }

        body.saha-mode .sort-box-item {
            background: #142e25;
            color: var(--ink-secondary);
            border-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .sort-box-item:hover {
            background: rgba(52, 211, 153, 0.12);
            color: var(--green-accent);
        }

        body.saha-mode .sort-box-item.active {
            background: rgba(52, 211, 153, 0.18);
            color: #34d399;
            border-color: rgba(52, 211, 153, 0.35);
        }

        /* ==============================================================
           GALLERY CARDS GRID (WOW Factor Aesthetics)
           ============================================================== */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 28px;
            margin-bottom: 48px;
        }

        .photo-card {
            background: var(--panel-bg);
            border-radius: var(--radius-xl);
            overflow: hidden;
            border: var(--border-card);
            box-shadow: var(--shadow-card);
            display: flex;
            flex-direction: column;
            transition: var(--trans-smooth);
            position: relative;
            cursor: pointer;
        }

        .photo-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-card-hover);
            border-color: rgba(23, 98, 76, 0.3);
        }

        .photo-card-media {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            background: #d8e2dd;
        }

        .photo-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .photo-card:hover .photo-card-media img {
            transform: scale(1.06);
        }

        /* Floating Badges on Photo */
        .card-top-badges {
            position: absolute;
            top: 14px;
            left: 14px;
            right: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
            z-index: 5;
        }

        .badge-category {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            color: var(--ink-primary);
            font-size: 0.75rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            letter-spacing: 0.02em;
        }

        .badge-category.rare {
            background: rgba(239, 68, 68, 0.92);
            color: #ffffff;
        }

        .card-like-btn {
            pointer-events: auto;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            border: none;
            color: #64748b;
            font-size: 1.05rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            transition: var(--trans-bounce);
        }

        .card-like-btn:hover {
            transform: scale(1.15);
            color: #ef4444;
        }

        .card-like-btn.liked {
            color: #ef4444;
            background: #ffffff;
            box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
        }

        .card-like-btn.liked i {
            animation: heartPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes heartPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.4); }
            100% { transform: scale(1); }
        }

        .location-overlay-tag {
            position: absolute;
            bottom: 12px;
            left: 14px;
            background: rgba(18, 61, 49, 0.78);
            backdrop-filter: blur(8px);
            color: #ffffff;
            font-size: 0.74rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        /* Card Content Body */
        .photo-card-content {
            padding: 14px 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
        }

        .card-title-group {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .card-species-tr {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.01em;
            line-height: 1.3;
        }

        .card-species-la {
            font-size: 0.88rem;
            font-style: italic;
            color: var(--green-accent);
            font-family: Georgia, serif;
        }

        .card-capture-meta {
            min-width: 0;
            margin: 0;
            font-size: .75rem;
            line-height: 1.5;
            color: var(--ink-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-social {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            color: var(--ink-muted);
            font-size: .75rem;
            font-variant-numeric: tabular-nums;
        }

        .card-social > span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .photo-card .card-title-group {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .photo-card .card-photographer-row {
            flex-wrap: wrap;
            gap: 10px;
        }

        .photo-card .photographer-info {
            flex: 1;
            min-width: 0;
        }

        .photo-card .photographer-avatar,
        .photo-card .btn-view-species {
            flex-shrink: 0;
        }

        .photo-card .photographer-name {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .photo-card .btn-view-species {
            white-space: nowrap;
        }

        .card-photographer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 10px;
            border-top: 1px solid rgba(18, 61, 49, 0.08);
            margin-top: auto;
        }

        .photographer-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .photographer-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--green-accent), #34d399);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(23, 98, 76, 0.2);
        }

        .photographer-name {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--ink-primary);
        }

        .card-actions-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-view-species {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--green-accent);
            background: var(--green-light);
            padding: 5px 12px;
            border-radius: var(--radius-full);
            border: 1px solid var(--green-edge);
            transition: var(--trans-smooth);
        }

        .btn-view-species:hover {
            background: var(--green-accent);
            color: #ffffff;
        }

        /* Empty State */
        .empty-state {
            background: var(--panel-bg);
            border-radius: var(--radius-xl);
            padding: 48px 32px;
            text-align: center;
            border: 2px dashed rgba(18, 61, 49, 0.15);
            margin: 20px 0 40px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .empty-state svg.icon {
            width: 56px;
            height: 56px;
            color: var(--green-accent);
            background: var(--green-light);
            padding: 14px;
            border-radius: 50%;
        }

        .empty-state h3 {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--ink-primary);
        }

        .empty-state p {
            max-width: 480px;
            color: var(--ink-muted);
            line-height: 1.6;
        }

        /* ==============================================================
           4. INVITATION CTA SECTION (From /fotograflar)
           ============================================================== */
        .invitation {
            background: linear-gradient(135deg, #e8f3ec 0%, #edf5f0 50%, #fff7ed 100%);
            border-radius: var(--radius-xl);
            padding: 44px 48px;
            border: 1px solid rgba(18, 61, 49, 0.12);
            box-shadow: var(--shadow-card);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .invitation h2 {
            font-size: 2.1rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.02em;
            margin-bottom: 6px;
        }

        .invitation p {
            font-size: 1.05rem;
            color: var(--ink-secondary);
        }

        .invitation-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* ==============================================================
           5. FOOTER (From /fotograflar)
           ============================================================== */
        .world-footer {
            border-top: 1px solid rgba(18, 61, 49, 0.1);
            padding: 40px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            font-size: 0.9rem;
            color: var(--ink-muted);
            margin-top: 40px;
        }

        .world-footer a.footer-logo {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--ink-primary);
        }

        .world-footer a.footer-logo span {
            color: var(--green-accent);
        }

        .footer-links {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .footer-links a:hover {
            color: var(--green-accent);
        }

        /* ==============================================================
           PHOTO VIEWER LIGHTBOX MODAL (<dialog id="photo-viewer">)
           ============================================================== */
        dialog#photo-viewer {
            width: min(1120px, 94vw);
            max-height: 92vh;
            border: none;
            border-radius: var(--radius-xl);
            padding: 0;
            background: #ffffff;
            box-shadow: var(--shadow-modal);
            margin: auto;
            position: fixed;
            inset: 0;
            z-index: 100002;
            overflow: hidden;
            display: none;
            flex-direction: column;
        }

        dialog#photo-viewer[open] {
            display: flex;
            animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        dialog#photo-viewer::backdrop {
            background: rgba(14, 45, 36, 0.82);
            backdrop-filter: blur(10px);
        }

        @keyframes modalPop {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        .viewer-stage {
            position: relative;
            background: #0f1713;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 480px;
            max-height: 64vh;
            overflow: hidden;
        }

        .viewer-stage img {
            max-width: 100%;
            max-height: 64vh;
            object-fit: contain;
            display: block;
            transition: transform 0.3s ease;
        }

        .viewer-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 20;
            transition: var(--trans-smooth);
        }

        .viewer-close:hover {
            background: #ef4444;
            transform: scale(1.1);
        }

        .viewer-prev, .viewer-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.88);
            border: none;
            color: var(--ink-primary);
            font-size: 1.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: var(--trans-smooth);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        }

        .viewer-prev { left: 20px; }
        .viewer-next { right: 20px; }

        .viewer-prev:hover, .viewer-next:hover {
            background: #ffffff;
            color: var(--green-accent);
            transform: translateY(-50%) scale(1.1);
        }

        .viewer-caption {
            padding: 24px 32px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(18, 61, 49, 0.08);
            flex-wrap: wrap;
            gap: 16px;
        }

        .viewer-caption h2 {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--ink-primary);
        }

        .viewer-caption span {
            font-size: 0.92rem;
            color: var(--ink-muted);
        }

        .viewer-social {
            padding: 20px 32px 28px;
            background: var(--panel-soft);
            overflow-y: auto;
            max-height: 220px;
        }

        .viewer-social-tools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .viewer-comments summary {
            font-weight: 700;
            color: var(--ink-primary);
            cursor: pointer;
            margin-bottom: 10px;
            font-size: 0.94rem;
        }

        #viewer-comment-form {
            display: flex;
            gap: 12px;
            margin-top: 12px;
        }

        #viewer-comment-form textarea {
            flex: 1;
            padding: 10px 14px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(18, 61, 49, 0.15);
            outline: none;
            resize: none;
            font-size: 0.88rem;
        }

        #viewer-comment-form textarea:focus {
            border-color: var(--green-accent);
        }

        /* ==============================================================
           SPOTLIGHT SEARCH MODAL (Ctrl + K)
           ============================================================== */
        .spotlight-modal {
            position: fixed;
            inset: 0;
            background: rgba(14, 45, 36, 0.7);
            backdrop-filter: blur(8px);
            z-index: 100005;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12vh;
        }

        .spotlight-modal.active {
            display: flex;
        }

        .spotlight-card {
            width: min(640px, 94vw);
            background: #ffffff;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-modal);
            border: 1px solid rgba(18, 61, 49, 0.12);
            overflow: hidden;
            animation: modalPop 0.22s ease-out;
        }

        .spotlight-input-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 24px;
            border-bottom: 1px solid rgba(18, 61, 49, 0.1);
        }

        .spotlight-input-wrap i {
            color: var(--green-accent);
            font-size: 1.2rem;
        }

        .spotlight-input-wrap input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--ink-primary);
        }

        .spotlight-results {
            max-height: 380px;
            overflow-y: auto;
            padding: 10px;
        }

        .spotlight-result-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .spotlight-result-item:hover {
            background: var(--panel-subtle);
        }

        /* Toast notifications */
        .toast {
            position: fixed;
            bottom: 28px;
            right: 28px;
            background: #0d281f;
            color: #ffffff !important;
            padding: 12px 22px;
            border-radius: var(--radius-full);
            font-size: 0.9rem;
            font-weight: 700;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
            border: 1.5px solid rgba(52, 211, 153, 0.4);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 100010;
            transform: translateY(100px);
            opacity: 0;
            transition: var(--trans-bounce);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            letter-spacing: -0.01em;
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1;
        }

        #toast-message {
            color: #ffffff !important;
        }

        /* Saha Modu (Gece Modu) Toast Stili - Mükemmel Kontrast */
        body.saha-mode .toast {
            background: #091712 !important;
            color: #ecfdf5 !important;
            border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
            box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75), 0 0 20px rgba(52, 211, 153, 0.2) !important;
        }

        body.saha-mode #toast-message {
            color: #ecfdf5 !important;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .showcase-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .month-hero-card {
                min-height: 380px;
            }
            .personal-bridge {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .desktop-nav {
                display: none;
            }
            .mobile-toggle-btn {
                display: block;
            }
        }

        @media (max-width: 640px) {
            .entrance-copy h1 {
                font-size: 2.3rem;
            }
            .bridge-tools {
                grid-template-columns: 1fr;
            }
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            .invitation {
                padding: 28px 24px;
            }
            .invitation-actions {
                flex-direction: column;
                width: 100%;
            }
            .invitation-actions .button, .invitation-actions .quiet-link {
                width: 100%;
                justify-content: center;
            }
        }
    
        /* ==============================================================
           SAHA / ALACAKARANLIK MODU (Gece & Alacakaranlık Gözlem Teması)
           ============================================================== */
        body.saha-mode {
            --page-bg: #0b1713;              /* Gece ormanı zemin tonu */
            --panel-bg: #12241e;             /* Koyu botanik kart zemini */
            --panel-soft: #183129;           /* Gece adaçayı sisi */
            --panel-subtle: #1f3f35;         /* Koyu zümrüt yumuşak zemin */
            --panel-sand: #26241a;           /* Gece bal tonu */
            --gradient-card: linear-gradient(145deg, #12241e 0%, #152c25 100%);
            --gradient-hero: linear-gradient(160deg, #10211b 0%, #0d1a15 50%, #08110e 100%);
            
            /* Inks & Typography */
            --ink-primary: #ecfdf5;          /* Gözü yormayan yumuşak nane beyazı */
            --ink-secondary: #c2ded2;        /* Soluk adaçayı */
            --ink-muted: #8ba99d;            /* Alacakaranlık gri-yeşili */
            --ink-subtle: #67877c;
            --ink-light: #446156;
            
            /* Luminous Night Accents */
            --green-accent: #34d399;         /* Parlak gece zümrüdü */
            --green-hover: #10b981;
            --green-light: rgba(52, 211, 153, 0.14);
            --green-edge: rgba(52, 211, 153, 0.28);
            --green-glow: rgba(52, 211, 153, 0.25);
            
            /* Amber & Sand Buttons in Night Mode */
            --sand-bg: #2d2616;
            --sand-hover: #3d331e;
            --sand-border: #785a28;
            --sand-ink: #fef3c7;
            
            /* Header in Night Mode */
            --header-bg: rgba(11, 23, 19, 0.94);
            --header-border: rgba(52, 211, 153, 0.14);
            --header-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            
            /* Borders & Shadows */
            --border-hairline: 1px solid rgba(52, 211, 153, 0.12);
            --border-card: 1px solid rgba(52, 211, 153, 0.14);
            --border-hover: 1px solid rgba(52, 211, 153, 0.45);
            --shadow-subtle: 0 2px 14px rgba(0, 0, 0, 0.35);
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
            --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.65);
            --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.7);

            background-image: 
                radial-gradient(ellipse 90% 60% at 50% -10%, rgba(52, 211, 153, 0.08) 0%, transparent 70%),
                radial-gradient(circle at 10% 40%, rgba(20, 60, 45, 0.45) 0%, transparent 40%),
                radial-gradient(circle at 90% 70%, rgba(10, 40, 30, 0.5) 0%, transparent 45%);
        }

        body.saha-mode .nav-dropdown-menu,
        body.saha-mode .user-profile-dropdown,
        body.saha-mode .spotlight-card,
        body.saha-mode dialog#photo-viewer,
        
        body.saha-mode .button.outline,
        body.saha-mode .search-field {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.16);
            color: var(--ink-primary);
        }

        body.saha-mode .search-field input {
            color: #ecfdf5;
        }

        body.saha-mode .nav-dropdown-menu a:hover,
        body.saha-mode .user-profile-dropdown a:hover,
        body.saha-mode .spotlight-result-item:hover {
            background: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .viewer-caption {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .viewer-social {
            background: #0d1a15;
        }

        body.saha-mode #viewer-comment-form textarea {
            background: #142e25;
            color: #fff;
            border-color: rgba(52, 211, 153, 0.2);
        }

        body.saha-mode #viewer-comments-list > div {
            background: #142e25 !important;
            border-color: rgba(52, 211, 153, 0.15) !important;
            color: #ecfdf5 !important;
        }

        body.saha-mode .invitation {
            background: linear-gradient(135deg, #0f221b 0%, #152e24 50%, #1a2920 100%);
            border-color: rgba(52, 211, 153, 0.18);
        }

        body.saha-mode .lang-switcher {
            background: rgba(52, 211, 153, 0.1);
            border-color: rgba(52, 211, 153, 0.2);
        }

        /* Smooth transition for theme switching */
        body, .site-header, .photo-card, .personal-bridge, .daily-award-card, .month-hero-card {
            transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                        color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .saha-mode-btn.active {
            background: rgba(52, 211, 153, 0.18) !important;
            color: #34d399 !important;
            border-color: #34d399 !important;
            box-shadow: 0 0 12px rgba(52, 211, 153, 0.35) !important;
        }

    
        /* Minimalist Clean Discovery Header */
        .discovery-header-clean {
            margin-bottom: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .discovery-header-clean h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .discovery-header-clean h2 .count {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--green-accent);
            background: var(--green-light);
            border: 1px solid var(--green-edge);
            padding: 3px 14px;
            border-radius: var(--radius-full);
        }

    
        /* Discovery Header & Right Cluster Styles */
        .discovery-header-wrap {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 28px;
            flex-wrap: wrap;
        }

        .discovery-title-area {
            display: flex;
            align-items: center;
            min-width: 260px;
            padding-top: 6px;
        }

        .discovery-title-area h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .discovery-title-area h2 .count {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--green-accent);
            background: var(--green-light);
            border: 1px solid var(--green-edge);
            padding: 3px 14px;
            border-radius: var(--radius-full);
        }

        .discovery-right-cluster {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 320px;
            max-width: 100%;
        }

        .upload-cluster-btn {
            width: 100%;
            justify-content: space-between;
            padding: 11px 18px;
            font-size: 0.94rem;
            font-weight: 700;
            border-radius: var(--radius-md);
            border: 1.5px solid rgba(18, 61, 49, 0.15);
            background: var(--panel-bg);
            color: var(--ink-primary);
            box-shadow: var(--shadow-subtle);
        }

        .upload-cluster-btn:hover {
            border-color: var(--green-accent);
            color: var(--green-accent);
            background: var(--panel-subtle);
        }

        .cluster-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--panel-bg);
            border: 1.5px solid rgba(18, 61, 49, 0.12);
            border-radius: var(--radius-md);
            padding: 10px 14px;
            transition: var(--trans-smooth);
            box-shadow: var(--shadow-subtle);
        }

        .cluster-search-box:focus-within {
            border-color: var(--green-accent);
            box-shadow: 0 0 0 3px rgba(23, 98, 76, 0.12);
        }

        .cluster-search-box svg.icon {
            width: 18px;
            height: 18px;
            color: var(--ink-muted);
            flex-shrink: 0;
        }

        .cluster-search-box input {
            border: none;
            background: transparent;
            width: 100%;
            outline: none;
            font-size: 0.88rem;
            color: var(--ink-primary);
            font-weight: 600;
        }

        .cluster-search-box input::placeholder {
            color: var(--ink-light);
            font-weight: 500;
        }

        .sort-stacked-panel {
            background: var(--panel-bg);
            border: var(--border-card);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            box-shadow: var(--shadow-subtle);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .sort-panel-title {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--ink-muted);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sort-box-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid rgba(18, 61, 49, 0.08);
            background: var(--panel-soft);
            color: var(--ink-secondary);
            font-size: 0.86rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--trans-smooth);
            text-align: left;
            width: 100%;
        }

        .sort-box-item i.sort-icon {
            font-size: 0.85rem;
            width: 18px;
            text-align: center;
            color: var(--ink-muted);
            transition: var(--trans-smooth);
        }

        .sort-box-item .check-icon {
            margin-left: auto;
            font-size: 0.75rem;
            color: var(--green-accent);
            opacity: 0;
            transition: var(--trans-smooth);
        }

        .sort-box-item:hover {
            background: var(--panel-subtle);
            color: var(--green-accent);
            border-color: rgba(23, 98, 76, 0.25);
        }

        .sort-box-item:hover i.sort-icon {
            color: var(--green-accent);
        }

        .sort-box-item.active {
            background: var(--green-light);
            color: var(--green-accent);
            border-color: var(--green-edge);
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(23, 98, 76, 0.08);
        }

        .sort-box-item.active i.sort-icon {
            color: var(--green-accent);
        }

        .sort-box-item.active .check-icon {
            opacity: 1;
        }

        /* Saha mode styles for right cluster */
        body.saha-mode .upload-cluster-btn,
        body.saha-mode .cluster-search-box,
        body.saha-mode .sort-stacked-panel {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.16);
            color: var(--ink-primary);
        }

        body.saha-mode .cluster-search-box input {
            color: #ecfdf5;
        }

        body.saha-mode .sort-box-item {
            background: #142e25;
            color: var(--ink-secondary);
            border-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .sort-box-item:hover {
            background: rgba(52, 211, 153, 0.12);
            color: var(--green-accent);
        }

        body.saha-mode .sort-box-item.active {
            background: rgba(52, 211, 153, 0.18);
            color: #34d399;
            border-color: rgba(52, 211, 153, 0.35);
        }

    
        /* ==============================================================
           DISCOVERY SECTION V4 (Topluluktan Kareler Sola Yaslı & Yukarıda,
           Arama ve Sıralama Yan Yana ve Aynı Pencerede Açılır Kapanır)
           ============================================================== */
        .workspace {
            padding-top: 4px;
            padding-bottom: 60px;
        }

        .discovery-section-bar {
            margin-bottom: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* 1. Üst Satır: Başlık sola yaslı, Fotoğraf Yükle sağda */
        .discovery-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
        }

        .discovery-title-left h2 {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--ink-primary);
            letter-spacing: -0.025em;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
            line-height: 1.15;
        }

        .discovery-title-left h2 .count {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--green-accent);
            background: var(--green-light);
            border: 1px solid var(--green-edge);
            padding: 2px 14px;
            border-radius: var(--radius-full);
            display: inline-flex;
            align-items: center;
        }

        .upload-header-btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 22px;
            font-size: 0.92rem;
            font-weight: 700;
            border-radius: var(--radius-full);
            border: 1.5px solid rgba(18, 61, 49, 0.16);
            background: var(--panel-bg);
            color: var(--ink-primary);
            box-shadow: var(--shadow-subtle);
            transition: var(--trans-smooth);
            cursor: pointer;
            text-decoration: none;
        }

        .upload-header-btn:hover {
            border-color: var(--green-accent);
            color: var(--green-accent);
            background: var(--panel-subtle);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(23, 98, 76, 0.12);
        }

        /* 2. Alt Satır: Arama ve Sıralama Yan Yana */
        .discovery-tools-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* Arama Kutusu */
        .gallery-search-field {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--panel-bg);
            border: 1.5px solid rgba(18, 61, 49, 0.14);
            border-radius: var(--radius-full);
            padding: 10px 20px;
            width: 380px;
            max-width: 100%;
            transition: var(--trans-smooth);
            box-shadow: var(--shadow-subtle);
            position: relative;
        }

        .gallery-search-field:focus-within {
            border-color: var(--green-accent);
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(23, 98, 76, 0.14);
        }

        .gallery-search-field svg.icon {
            width: 18px;
            height: 18px;
            color: var(--ink-muted);
            flex-shrink: 0;
            transition: color 0.2s ease;
        }

        .gallery-search-field:focus-within svg.icon {
            color: var(--green-accent);
        }

        .gallery-search-field input {
            border: none;
            background: transparent;
            width: 100%;
            outline: none;
            font-size: 0.92rem;
            color: var(--ink-primary);
            font-weight: 600;
            font-family: inherit;
        }

        .gallery-search-field input::placeholder {
            color: var(--ink-light);
            font-weight: 500;
        }

        .search-clear-btn {
            border: none;
            background: transparent;
            color: var(--ink-light);
            cursor: pointer;
            padding: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            transition: color 0.2s ease;
        }

        .search-clear-btn:hover {
            color: var(--ink-primary);
        }

        /* Sıralama Açılır/Kapanır Popover'ı (Arama ile Yan Yana, Aynı Pencere İçinde Açılır-Kapanır) */
        .sort-popover-container {
            position: relative;
            display: inline-block;
        }

        .sort-popover-trigger {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--panel-bg);
            border: 1.5px solid rgba(18, 61, 49, 0.14);
            border-radius: var(--radius-full);
            padding: 10px 20px;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--ink-secondary);
            cursor: pointer;
            transition: var(--trans-smooth);
            box-shadow: var(--shadow-subtle);
            user-select: none;
            font-family: inherit;
        }

        .sort-popover-trigger:hover {
            border-color: var(--green-accent);
            color: var(--green-accent);
            background: var(--panel-subtle);
        }

        .sort-popover-trigger.active {
            border-color: var(--green-accent);
            color: var(--green-accent);
            background: var(--panel-subtle);
            box-shadow: 0 0 0 3px rgba(23, 98, 76, 0.14);
        }

        .sort-caret-icon {
            font-size: 0.72rem;
            color: var(--ink-muted);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sort-popover-trigger.active .sort-caret-icon {
            transform: rotate(180deg);
        }

        /* Aynı Pencere İçinde Açılıp Kapanan Popover */
        .sort-popover-window {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 230px;
            background: var(--panel-bg);
            border: 1px solid rgba(18, 61, 49, 0.12);
            border-radius: var(--radius-md);
            padding: 8px;
            box-shadow: 0 16px 40px rgba(18, 61, 49, 0.16);
            display: none;
            flex-direction: column;
            gap: 4px;
            z-index: 120;
            transform-origin: top left;
            animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sort-popover-window.open {
            display: flex;
        }

        @keyframes popoverFadeIn {
            from {
                opacity: 0;
                transform: translateY(-6px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .sort-popover-header {
            padding: 6px 12px 4px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--ink-muted);
            border-bottom: 1px solid rgba(18, 61, 49, 0.08);
            margin-bottom: 4px;
        }

        .sort-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: var(--radius-sm);
            border: none;
            background: transparent;
            color: var(--ink-primary);
            font-size: 0.88rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--trans-smooth);
            text-align: left;
            width: 100%;
            font-family: inherit;
        }

        .sort-item i {
            font-size: 0.88rem;
            width: 20px;
            text-align: center;
            color: var(--ink-muted);
            transition: color 0.2s ease;
        }

        .sort-item .sort-checked-icon {
            margin-left: auto;
            font-size: 0.76rem;
            color: var(--green-accent);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .sort-item:hover {
            background: var(--panel-subtle);
            color: var(--green-accent);
        }

        .sort-item:hover i {
            color: var(--green-accent);
        }

        .sort-item.active {
            background: var(--green-light);
            color: var(--green-accent);
            font-weight: 700;
        }

        .sort-item.active i {
            color: var(--green-accent);
        }

        .sort-item.active .sort-checked-icon {
            opacity: 1;
        }

        /* Saha Modu (Gece / Twilight Mode Uyumluluğu) */
        body.saha-mode .upload-header-btn,
        body.saha-mode .gallery-search-field,
        body.saha-mode .sort-popover-trigger,
        body.saha-mode .sort-popover-window {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.18);
            color: #ecfdf5;
        }

        body.saha-mode .gallery-search-field input {
            color: #ecfdf5;
        }

        body.saha-mode .gallery-search-field:focus-within {
            background: #0d1a15;
            border-color: #34d399;
            box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
        }

        body.saha-mode .sort-popover-header {
            color: #8da499;
            border-bottom-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .sort-item {
            color: #c2ded2;
        }

        body.saha-mode .sort-item:hover {
            background: rgba(52, 211, 153, 0.12);
            color: #34d399;
        }

        body.saha-mode .sort-item.active {
            background: rgba(52, 211, 153, 0.2);
            color: #34d399;
        }

    
        @media (max-width: 900px) {
            .daily-best-column {
                margin-top: 0;
            }
        }

    
        /* ==============================================================
           SHOWCASE STACKED HERO & 3-CARD DAILY GRID
           (Ayın En İyisi Üstte Tam Genişlik + Günün 3 Fotoğrafı Altında Yan Yana)
           ============================================================== */
        .month-hero-banner {
            width: 100%;
            min-height: 440px;
            margin-bottom: 12px;
            border-radius: var(--radius-xl);
            overflow: hidden;
            position: relative;
            box-shadow: 0 16px 44px rgba(18, 61, 49, 0.1);
            border: 1.5px solid rgba(217, 119, 6, 0.35);
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .month-hero-banner:hover {
            transform: translateY(-3px);
            box-shadow: 0 24px 60px rgba(18, 61, 49, 0.16);
            border-color: rgba(217, 119, 6, 0.55);
        }

        .daily-section-row {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 36px;
        }

        .daily-cards-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .daily-award-card-v2 {
            background: var(--panel-bg);
            border-radius: var(--radius-lg);
            border: var(--border-card);
            box-shadow: var(--shadow-subtle);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: var(--trans-smooth);
            cursor: pointer;
            position: relative;
        }

        .daily-award-card-v2:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-card-hover);
            border-color: rgba(23, 98, 76, 0.35);
        }

        .daily-award-card-v2.rank-1 {
            border-top: 4px solid #f59e0b;
        }

        .daily-award-card-v2.rank-2 {
            border-top: 4px solid #94a3b8;
        }

        .daily-award-card-v2.rank-3 {
            border-top: 4px solid #ea580c;
        }

        .daily-card-media-v2 {
            position: relative;
            width: 100%;
            height: 220px;
            overflow: hidden;
            background: #e2e8f0;
        }

        .daily-card-media-v2 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .daily-award-card-v2:hover .daily-card-media-v2 img {
            transform: scale(1.07);
        }

        .rank-badge-float {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 5;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            pointer-events: none;
        }

        .daily-likes-float {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 5;
            background: rgba(14, 45, 36, 0.82);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: var(--radius-full);
            padding: 5px 12px;
            font-size: 0.82rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .daily-likes-float:hover, .daily-likes-float.liked {
            background: rgba(239, 68, 68, 0.95);
            color: #ffffff;
            transform: scale(1.08);
        }

        .daily-card-body-v2 {
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: var(--panel-bg);
            flex: 1;
        }

        .daily-species-title-v2 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--ink-primary);
            line-height: 1.25;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .daily-species-latin-v2 {
            font-size: 0.84rem;
            font-style: italic;
            color: var(--green-accent);
            font-family: Georgia, serif;
        }

        .daily-bottom-row-v2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--ink-muted);
            margin-top: auto;
            padding-top: 10px;
            border-top: 1px solid rgba(18, 61, 49, 0.08);
        }

        @media (max-width: 900px) {
            .daily-cards-grid-3 {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }

        /* Saha Modu Uyumluluğu */
        body.saha-mode .daily-award-card-v2 {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.16);
        }
        body.saha-mode .daily-card-body-v2 {
            background: #12241e;
        }
        body.saha-mode .daily-species-title-v2 {
            color: #ecfdf5;
        }
        body.saha-mode .daily-bottom-row-v2 {
            border-top-color: rgba(52, 211, 153, 0.12);
            color: #8da499;
        }
        body.saha-mode .daily-author-txt {
            color: #a7f3d0;
        }

    
        
        /* ==============================================================
           SUB-NAVBAR (Kullanıcı & Keşif Sekmeleri Barı)
           Doğrudan Üst Menünün Tam Altında, Sıfır Mesafe (Flush)
           ============================================================== */
        .sub-navbar {
            background: transparent;
            border-top: 1px solid rgba(18, 61, 49, 0.07);
            width: 100%;
            position: relative;
            z-index: 10;
        }

        .sub-navbar-inner {
            display: flex;
            align-items: center;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .sub-navbar-inner::-webkit-scrollbar {
            display: none;
        }

        .sub-nav-tabs {
            display: flex;
            align-items: center;
            gap: 16px;
            width: max-content;
            flex: 0 0 auto;
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }

        .sub-nav-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 6px 11px;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--ink-secondary);
            text-decoration: none;
            white-space: nowrap;
            position: relative;
            transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            user-select: none;
        }

        .sub-nav-tab i {
            font-size: 0.95rem;
            color: var(--ink-muted);
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .sub-nav-tab:hover {
            color: var(--green-accent);
        }

        .sub-nav-tab:hover i {
            color: var(--green-accent);
            transform: translateY(-1px);
        }

        /* Active Tab indicator (Green line at bottom) */
        .sub-nav-tab::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2.5px;
            background: var(--green-accent);
            border-radius: 3px 3px 0 0;
            opacity: 0;
            transform: scaleX(0.4);
            transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .sub-nav-tab.active {
            color: var(--green-accent);
            font-weight: 700;
        }

        .sub-nav-tab.active i {
            color: var(--green-accent);
        }

        .sub-nav-tab.active::after {
            opacity: 1;
            transform: scaleX(1);
        }

        /* Special highlight for Oyunlar ve Keşif */
        .sub-nav-tab.tab-accent-game {
            color: var(--green-accent);
            font-weight: 700;
        }

        .sub-nav-tab.tab-accent-game i {
            color: var(--green-accent);
        }

        .sub-nav-tab.tab-accent-game:hover {
            color: var(--green-hover);
        }

        /* Saha Modu (Dark / Twilight Mode) */
        body.saha-mode .sub-navbar {
            border-top-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .sub-nav-tab {
            color: #9cb5a8;
        }

        body.saha-mode .sub-nav-tab i {
            color: #7b9487;
        }

        body.saha-mode .sub-nav-tab:hover {
            color: #ecfdf5;
        }

        body.saha-mode .sub-nav-tab:hover i {
            color: #34d399;
        }

        body.saha-mode .sub-nav-tab.active {
            color: #34d399;
        }

        body.saha-mode .sub-nav-tab.active i {
            color: #34d399;
        }

        body.saha-mode .sub-nav-tab.active::after {
            background: #34d399;
            box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
        }

        body.saha-mode .sub-nav-tab.tab-accent-game {
            color: #34d399;
        }

        body.saha-mode .sub-nav-tab.tab-accent-game i {
            color: #34d399;
        }

        @media (max-width: 900px) {
            .sub-nav-tabs {
                gap: 12px;
            }
            .sub-nav-tab {
                padding: 8px 4px 9px;
                font-size: 0.82rem;
                gap: 6px;
            }
        }

    
        /* Saha Modu (Gece Gözlemi) Header Butonları */
        body.saha-mode .header-icon-btn {
            border-color: rgba(52, 211, 153, 0.22);
            color: #c2ded2;
            background: rgba(18, 36, 30, 0.7);
        }

        body.saha-mode .header-icon-btn:hover {
            background: rgba(52, 211, 153, 0.16);
            color: #34d399;
            border-color: #34d399;
            transform: translateY(-1px);
        }

        body.saha-mode .saha-mode-btn.active {
            background: rgba(251, 191, 36, 0.15);
            border-color: rgba(251, 191, 36, 0.45);
            color: #fbbf24;
            box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
        }

    
        /* ==============================================================
           WIDESCREEN 16:9 SPLIT-LAYOUT PHOTO VIEWER & ULTRA-RES (4K / FHD)
           ============================================================== */
        dialog#photo-viewer {
            width: min(1380px, 96vw);
            height: min(860px, 92vh);
            max-height: 92vh;
            border: none;
            border-radius: var(--radius-xl);
            padding: 0;
            background: var(--panel-bg);
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
            margin: auto;
            position: fixed;
            inset: 0;
            z-index: 100002;
            overflow: hidden;
            display: none;
        }

        dialog#photo-viewer[open] {
            display: flex;
            animation: modalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        dialog#photo-viewer::backdrop {
            background: rgba(10, 28, 22, 0.86);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .viewer-split-container {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* --- SOL BÖLÜM: 16:9 FOTOĞRAF SAHNESİ --- */
        .viewer-stage-col {
            flex: 1;
            min-width: 0;
            height: 100%;
            background: #080f0c;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            user-select: none;
        }

        /* Sol Üst: 4K / Full HD İzle Butonu */
        .viewer-res-pill-wrap {
            position: absolute;
            top: 18px;
            left: 20px;
            z-index: 30;
        }

        .viewer-res-btn {
            background: rgba(14, 35, 27, 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1.5px solid rgba(52, 211, 153, 0.4);
            border-radius: var(--radius-full);
            color: #ffffff;
            padding: 7px 18px;
            font-size: 0.85rem;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
            font-family: inherit;
        }

        .viewer-res-btn.is-4k {
            border-color: #f59e0b;
            color: #fef3c7;
            background: rgba(36, 24, 7, 0.88);
        }

        .viewer-res-btn.is-fhd {
            border-color: #38bdf8;
            color: #f0f9ff;
            background: rgba(8, 28, 44, 0.88);
        }

        .viewer-res-btn:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        .viewer-res-btn.is-4k:hover {
            border-color: #fbbf24;
            box-shadow: 0 8px 26px rgba(245, 158, 11, 0.45);
        }

        .viewer-res-btn.is-fhd:hover {
            border-color: #7dd3fc;
            box-shadow: 0 8px 26px rgba(56, 189, 248, 0.45);
        }

        .res-badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #34d399;
            box-shadow: 0 0 8px #34d399;
            display: inline-block;
        }

        .viewer-res-btn.is-4k .res-badge-dot {
            background: #f59e0b;
            box-shadow: 0 0 8px #f59e0b;
            animation: pulse-dot 1.8s infinite ease-in-out;
        }

        .viewer-res-btn.is-fhd .res-badge-dot {
            background: #38bdf8;
            box-shadow: 0 0 8px #38bdf8;
            animation: pulse-dot 1.8s infinite ease-in-out;
        }

        /* Sahne Kapatma Butonu (Sol üstün karşısında veya sahne içinde) */
        .viewer-stage-close-btn {
            display: none; /* Genellikle masaüstünde sağ panelde kapatma butonu var, mobilde görünür */
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 30;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
            font-size: 1.1rem;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--trans-smooth);
        }

        .viewer-stage-close-btn:hover {
            background: #ef4444;
            transform: scale(1.08);
        }

        /* 16:9 Fotoğraf Sahne Çerçevesi */
        .viewer-photo-frame {
            flex: 1;
            width: 100%;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 24px 20px;
        }

        .viewer-photo-frame img {
            max-width: 100%;
            max-height: 100%;
            aspect-ratio: 16/9;
            object-fit: contain;
            border-radius: var(--radius-sm);
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.75);
            cursor: zoom-in;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .viewer-photo-frame img:hover {
            transform: scale(1.015);
        }

        /* Gezinme Okları (Önceki / Sonraki) */
        .viewer-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(14, 38, 30, 0.75);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #ffffff;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 25;
            transition: var(--trans-smooth);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .viewer-nav-btn.prev { left: 16px; }
        .viewer-nav-btn.next { right: 16px; }

        .viewer-nav-btn:hover {
            background: rgba(23, 98, 76, 0.95);
            border-color: #34d399;
            color: #ffffff;
            transform: translateY(-50%) scale(1.1);
        }

        /* Sahne Alt Bilgi Çubuğu */
        .viewer-stage-footer {
            height: 42px;
            background: rgba(4, 9, 7, 0.85);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 0.8rem;
            color: #94a3b8;
        }

        .viewer-stage-footer i {
            margin-right: 5px;
            color: var(--green-accent);
        }

        .viewer-zoom-tip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #cbd5e1;
            cursor: pointer;
        }

        .viewer-zoom-tip:hover {
            color: #38bdf8;
        }

        /* --- SAĞ BÖLÜM: BİLGİLER VE YORUMLAR PANELİ --- */
        .viewer-sidebar-col {
            width: 420px;
            min-width: 360px;
            max-width: 460px;
            height: 100%;
            background: var(--panel-bg);
            border-left: 1px solid rgba(18, 61, 49, 0.08);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Sidebar Üst: Başlık ve Kapatma Butonu */
        .viewer-sidebar-header {
            padding: 22px 24px 16px;
            border-bottom: 1px solid rgba(18, 61, 49, 0.07);
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .viewer-title-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .viewer-title-row h2 {
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--ink-primary);
            line-height: 1.2;
            margin: 0;
        }

        .viewer-latin-name {
            font-size: 0.88rem;
            font-style: italic;
            color: var(--green-accent);
            font-family: Georgia, serif;
            display: block;
            margin-top: 2px;
        }

        .viewer-panel-close-btn {
            background: transparent;
            border: 1px solid rgba(18, 61, 49, 0.12);
            color: var(--ink-secondary);
            font-size: 1.15rem;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--trans-smooth);
            flex-shrink: 0;
        }

        .viewer-panel-close-btn:hover {
            background: #ef4444;
            color: #ffffff;
            border-color: #ef4444;
            transform: scale(1.08);
        }

        /* Fotoğrafçı Bilgisi */
        .viewer-author-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--panel-soft);
            padding: 8px 12px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(18, 61, 49, 0.06);
        }

        .viewer-author-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--green-accent), #0f4c3a);
            color: #ffffff;
            font-weight: 800;
            font-size: 0.86rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .viewer-author-details {
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 0;
        }

        .viewer-author-name {
            font-size: 0.92rem;
            font-weight: 700;
            color: var(--ink-primary);
        }

        .viewer-location-text {
            font-size: 0.78rem;
            color: var(--ink-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .viewer-location-text i {
            color: var(--green-accent);
            margin-right: 3px;
        }

        /* EXIF & Aksiyonlar */
        .viewer-exif-box {
            font-size: 0.8rem;
            font-family: 'JetBrains Mono', monospace;
            color: var(--ink-muted);
            background: rgba(18, 61, 49, 0.04);
            padding: 7px 12px;
            border-radius: var(--radius-xs);
            border: 1px solid rgba(18, 61, 49, 0.06);
            line-height: 1.4;
        }

        .viewer-actions-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .viewer-like-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: transparent;
            border: 1px solid rgba(18, 61, 49, 0.15);
            padding: 7px 16px;
            border-radius: var(--radius-full);
            font-size: 0.86rem;
            font-weight: 700;
            color: var(--ink-primary);
            cursor: pointer;
            transition: var(--trans-smooth);
            font-family: inherit;
        }

        .viewer-like-action:hover, .viewer-like-action.liked {
            background: rgba(239, 68, 68, 0.1);
            border-color: #ef4444;
            color: #ef4444;
            transform: translateY(-1px);
        }

        /* --- SAĞ SÜTUN: YORUMLAR BÖLÜMÜ --- */
        .viewer-comments-section {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            background: var(--panel-soft);
            padding: 16px 24px 18px;
            overflow: hidden;
        }

        .viewer-comments-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--ink-primary);
            display: flex;
            align-items: center;
            gap: 7px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(18, 61, 49, 0.08);
        }

        .viewer-comments-title i {
            color: var(--green-accent);
        }

        /* Kaydırılabilir Yorum Listesi */
        .viewer-comments-list {
            flex: 1;
            min-height: 120px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-right: 6px;
            margin-bottom: 14px;
        }

        .viewer-comments-list::-webkit-scrollbar {
            width: 5px;
        }

        .viewer-comments-list::-webkit-scrollbar-thumb {
            background: rgba(18, 61, 49, 0.18);
            border-radius: 4px;
        }

        .comment-item {
            background: var(--panel-bg);
            border: 1px solid rgba(18, 61, 49, 0.08);
            border-radius: var(--radius-md);
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-shadow: 0 2px 8px rgba(18, 61, 49, 0.03);
            animation: fadeInComment 0.25s ease-out;
        }

        @keyframes fadeInComment {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .comment-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .comment-user-badge {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .comment-avatar-mini {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--green-accent);
            color: #ffffff;
            font-size: 0.68rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .comment-user-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--ink-primary);
        }

        .comment-time {
            font-size: 0.74rem;
            color: var(--ink-muted);
        }

        .comment-text {
            font-size: 0.85rem;
            color: var(--ink-secondary);
            line-height: 1.4;
            padding-left: 30px;
        }

        /* Yorum Gönderme Formu */
        .viewer-comment-form {
            margin-top: auto;
        }

        .comment-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
        }

        .comment-input-wrap textarea {
            width: 100%;
            padding: 10px 48px 10px 14px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(18, 61, 49, 0.18);
            background: var(--panel-bg);
            color: var(--ink-primary);
            font-size: 0.86rem;
            font-family: inherit;
            resize: none;
            transition: var(--trans-smooth);
            outline: none;
        }

        .comment-input-wrap textarea:focus {
            border-color: var(--green-accent);
            box-shadow: 0 0 0 3px rgba(23, 98, 76, 0.12);
        }

        .comment-submit-btn {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: var(--green-accent);
            color: #ffffff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--trans-smooth);
            font-size: 0.88rem;
        }

        .comment-submit-btn:hover {
            background: var(--green-hover);
            transform: scale(1.08);
        }

        /* --- ULTRA-RES FULLSCREEN LIGHTBOX (4K / FULL HD İZLEME MODU) --- */
        .ultra-res-lightbox {
            position: fixed;
            inset: 0;
            z-index: 100008;
            background: rgba(3, 7, 5, 0.97);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: fadeIn 0.24s ease-out;
        }

        .ultra-res-top-bar {
            height: 64px;
            background: rgba(6, 15, 11, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            z-index: 20;
        }

        .ultra-res-info {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .res-pill-active {
            padding: 5px 14px;
            border-radius: var(--radius-full);
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .res-pill-active.is-4k {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border: 1px solid #f59e0b;
        }

        .res-pill-active.is-fhd {
            background: rgba(56, 189, 248, 0.2);
            color: #7dd3fc;
            border: 1px solid #0284c7;
        }

        .ultra-res-title {
            color: #f8fafc;
            font-size: 1.05rem;
            font-weight: 700;
        }

        .ultra-res-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ultra-ctrl-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #f1f5f9;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--trans-smooth);
            font-size: 0.95rem;
        }

        .ultra-ctrl-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            transform: scale(1.08);
        }

        .ultra-ctrl-btn.close-btn:hover {
            background: #ef4444;
            border-color: #ef4444;
        }

        .ultra-res-viewport {
            flex: 1;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: auto;
            padding: 30px;
        }

        .ultra-16-9-image {
            max-width: 100%;
            max-height: 100%;
            aspect-ratio: 16/9;
            object-fit: contain;
            border-radius: 6px;
            box-shadow: 0 20px 70px rgba(0, 0, 0, 0.85);
            transition: transform 0.25s ease;
            cursor: grab;
        }

        .ultra-res-bottom-hint {
            height: 38px;
            background: rgba(4, 10, 8, 0.85);
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #94a3b8;
        }

        /* --- SAHA MODU (DARK MODE) UYUMLULUĞU --- */
        body.saha-mode dialog#photo-viewer {
            background: #0f1f1a;
            border: 1px solid rgba(52, 211, 153, 0.2);
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
        }

        body.saha-mode .viewer-sidebar-col {
            background: #0f1f1a;
            border-left-color: rgba(52, 211, 153, 0.14);
        }

        body.saha-mode .viewer-title-row h2 {
            color: #ecfdf5;
        }

        body.saha-mode .viewer-author-card {
            background: #142a23;
            border-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .viewer-author-name {
            color: #ecfdf5;
        }

        body.saha-mode .viewer-exif-box {
            background: rgba(52, 211, 153, 0.06);
            border-color: rgba(52, 211, 153, 0.14);
            color: #a7f3d0;
        }

        body.saha-mode .viewer-like-action {
            border-color: rgba(52, 211, 153, 0.2);
            color: #ecfdf5;
        }

        body.saha-mode .viewer-comments-section {
            background: #0b1713;
            border-top-color: rgba(52, 211, 153, 0.1);
        }

        body.saha-mode .viewer-comments-title {
            color: #ecfdf5;
            border-bottom-color: rgba(52, 211, 153, 0.12);
        }

        body.saha-mode .comment-item {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.14);
        }

        body.saha-mode .comment-user-name {
            color: #ecfdf5;
        }

        body.saha-mode .comment-text {
            color: #c2ded2;
        }

        body.saha-mode .comment-input-wrap textarea {
            background: #12241e;
            border-color: rgba(52, 211, 153, 0.2);
            color: #ecfdf5;
        }

        body.saha-mode .viewer-panel-close-btn {
            border-color: rgba(52, 211, 153, 0.2);
            color: #c2ded2;
        }

        /* Responsive Breakpoint: Mobilde Dikey Bölünme */
        @media (max-width: 900px) {
            dialog#photo-viewer {
                width: 96vw;
                height: 94vh;
                max-height: 94vh;
            }

            .viewer-split-container {
                flex-direction: column;
                overflow-y: auto;
            }

            .viewer-stage-col {
                min-height: 340px;
                height: 380px;
                flex: none;
            }

            .viewer-stage-close-btn {
                display: flex;
            }

            .viewer-sidebar-col {
                width: 100%;
                min-width: 0;
                max-width: none;
                height: auto;
                flex: 1;
                border-left: none;
                border-top: 1px solid rgba(18, 61, 49, 0.1);
            }

            .viewer-panel-close-btn {
                display: none;
            }
        }

/* Real gallery integration. Reference palette/layout above is kept intact. */
[hidden]{display:none!important}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
button,a,input,select,textarea{touch-action:manipulation}button{color:inherit}button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #17624c;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-dropdown-trigger{font-family:inherit;border:0;cursor:pointer;background:transparent}.nav-dropdown-item.is-open .nav-dropdown-menu,.nav-dropdown-item:focus-within .nav-dropdown-menu{display:flex}
.user-profile-pill summary{display:flex;gap:8px;align-items:center}.user-profile-pill[open] .user-profile-dropdown{display:flex}
.user-profile-pill{max-width:190px}.user-profile-pill summary>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.sub-nav-tab .icon{width:18px;height:18px}.sub-nav-tabs{min-width:max-content}
.nav-actions .header-icon-btn{display:inline-flex;align-items:center;justify-content:center}
.selection-empty{min-height:170px;grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:var(--panel-bg);border:var(--border-card);border-radius:var(--radius-lg);padding:32px;color:var(--ink-muted)}
.selection-empty>i{font-size:32px;color:var(--green-accent)}.selection-empty h3{color:var(--ink-primary)}
.empty-state{display:flex}.sort-popover-container[open] .sort-popover-window{display:flex}.sort-popover-window .sort-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px}.sort-popover-window .sort-item:hover{background:var(--panel-soft)}
.selection-empty.month-hero-banner{min-height:360px;background:var(--gradient-hero);cursor:default}
.photo-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;color:inherit;text-align:inherit}
.photo-open img{display:block;width:100%;height:100%;object-fit:cover}.photo-card-media>.photo-open{position:absolute;inset:0}
.card-top-badges{pointer-events:none}.card-top-badges button{pointer-events:auto;margin-left:auto}
.card-species-tr{display:block}.photo-status{position:absolute;top:12px;left:12px}
.month-photo-open{position:absolute;inset:0}.month-photo-open .month-hero-img{position:static}.month-card-bottom,.month-card-top-bar{pointer-events:none}.month-card-bottom a,.month-card-bottom button,.month-card-top-bar button{pointer-events:auto}
.month-title-row>.photo-open{width:auto;height:auto;white-space:nowrap}
.filter-bar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:22px 0}.filter-bar label{display:flex;gap:8px;flex-direction:column;font-size:.85rem;font-weight:600;color:var(--ink-secondary)}
.filter-bar .search-field{flex:1;min-width:180px;display:flex;flex-direction:row;align-items:center;gap:12px;border:var(--border-card);padding:12px 16px;border-radius:var(--radius-md);background:var(--panel-bg)}
.filter-bar input,.filter-bar select,.topic-form input,.topic-form select,.topic-form textarea{min-height:46px;padding:10px 12px;border:var(--border-card);background:var(--panel-bg);border-radius:var(--radius-sm);color:var(--ink-primary);font:inherit;max-width:100%}
.filter-bar .search-field input{padding:0;border:0;min-height:24px;width:100%;outline:0;background:transparent}.filter-bar .reset{padding:12px;font-size:.85rem;color:var(--green-accent)}
.section-heading,.page-heading{margin-bottom:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-heading h2{font-size:1.65rem}.page-heading h1{font-size:2.3rem;margin:12px 0}.page-heading p,.helper{color:var(--ink-muted);margin:12px 0 24px}
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-md);background:var(--panel-bg)}table{width:100%;border-collapse:collapse}td,th{text-align:left;padding:16px;border-bottom:var(--border-hairline)}th{background:var(--panel-soft)}td small{display:block;color:var(--ink-muted)}
.species-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:16px}.species-row{display:flex;gap:14px;align-items:center;padding:20px;border:var(--border-card);border-radius:var(--radius-md);background:var(--panel-bg)}.species-row em{display:block;font-size:.85rem;color:var(--ink-muted)}.species-mark{font-size:24px;color:var(--green-accent)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:24px}.video-card{padding:18px;background:var(--panel-bg);border:var(--border-card);border-radius:var(--radius-md)}.video-card iframe{aspect-ratio:16/9;width:100%;border:0}.video-card small{display:block;color:var(--ink-muted)}
.question-card{padding:20px;background:var(--panel-bg);border:var(--border-card);border-radius:var(--radius-md)}.question-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
#journal-map{height:530px;border:var(--border-card);border-radius:var(--radius-lg);z-index:1}.forum-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.45fr);gap:28px}.topic,.forum-aside{padding:24px;border:var(--border-card);border-radius:var(--radius-md);background:var(--panel-bg);margin-bottom:20px}.topic-meta{display:flex;gap:12px;justify-content:space-between;font-size:.8rem;color:var(--ink-muted)}.topic h3{margin:14px 0}.prose{white-space:pre-wrap;overflow-wrap:anywhere}.topic-form{display:flex;flex-direction:column;gap:16px;margin-top:20px}.topic-form label{display:flex;gap:7px;flex-direction:column}.topic-form textarea{resize:vertical}.moderation{display:flex;gap:10px;margin-top:14px}.moderation button{padding:8px 14px;border:var(--border-card);border-radius:8px;background:var(--panel-soft)}
.notice{padding:16px;border:var(--border-card);border-radius:10px;background:var(--panel-sand);margin-bottom:20px}.pagination{display:flex;justify-content:center;gap:22px;margin:30px 0}.pagination a{color:var(--green-accent);font-weight:700}
dialog::backdrop{background:rgba(5,20,14,.7);backdrop-filter:blur(8px)}dialog{margin:auto}dialog:not([open]){display:none!important}
.viewer-author-card a{color:var(--ink-primary)}.viewer-photo-frame img{object-fit:contain;cursor:zoom-in}.viewer-stage-footer button{border:0;background:transparent;font:inherit;cursor:pointer}.viewer-comments-section{overflow:hidden}.viewer-comments-list{min-height:80px}.comment-item p{white-space:pre-wrap;overflow-wrap:anywhere}.viewer-comments-title{margin-top:0}
.full-photo{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;padding:0;background:#08120e;color:#fff;overflow:hidden}.full-photo-tools{height:62px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 20px;background:#102019}.full-photo-tools>span{margin-right:auto}.full-photo-tools button{display:grid;place-items:center;min-width:42px;min-height:42px;border:1px solid #ffffff40;border-radius:50%;background:transparent;color:#fff;cursor:pointer}.full-photo-stage{height:calc(100% - 62px);overflow:auto;display:grid;place-items:center;padding:20px}.full-photo-stage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;transition:transform .15s}.search-dialog{width:min(650px,94vw);border:var(--border-card);border-radius:20px;background:var(--panel-bg);padding:28px}.search-dialog .gallery-search-field{margin:18px 0}.search-dialog form:last-child{display:flex;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:90vw;padding:14px 22px;background:var(--green-accent);color:#fff;border-radius:14px;z-index:100010}
.upload-dialog{width:min(560px,94vw);max-height:92dvh;padding:28px 32px;border:var(--border-card);border-radius:var(--radius-xl);background:var(--panel-bg);color:var(--ink-primary);overflow-y:auto}.upload-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.upload-heading h3{font-size:1.4rem;font-weight:800}.upload-heading i{color:var(--green-accent)}.upload-heading button{background:none;border:0;font-size:1.6rem;cursor:pointer}.upload-dialog form{display:flex;flex-direction:column;gap:12px}.upload-dialog label{font-size:.85rem;font-weight:700}.upload-dialog input:not([type=file]),.upload-dialog select{width:100%;padding:10px 14px;min-height:44px;border:var(--border-card);border-radius:var(--radius-sm);background:var(--panel-bg);color:var(--ink-primary)}.upload-drop{display:flex;flex-direction:column;align-items:center;gap:10px;border:2px dashed var(--green-accent);border-radius:var(--radius-md);padding:24px 20px;text-align:center;background:var(--panel-subtle);cursor:pointer}.upload-drop>i{font-size:2.2rem;color:var(--green-accent)}.upload-drop small{font-weight:400;color:var(--ink-muted);line-height:1.6}.upload-drop input{max-width:100%;font-size:.8rem}.upload-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}
body.saha-mode .selection-empty,body.saha-mode .table-wrap,body.saha-mode .topic,body.saha-mode .forum-aside,body.saha-mode .species-row{background:var(--panel-bg)}body.saha-mode .selection-empty.month-hero-banner{background:var(--panel-soft)}
body.saha-mode .button.ink,body.saha-mode .comment-submit-btn{color:#09291f}
@media(max-width:1024px){.desktop-nav{display:none}.mobile-toggle-btn{display:block}.navbar{gap:14px}.nav-actions{gap:8px}.site-header.menu-open .desktop-nav{display:block;position:absolute;top:68px;left:0;right:0;background:var(--panel-bg);padding:18px;box-shadow:var(--shadow-card)}.site-header.menu-open .nav-links{display:flex;flex-direction:column;align-items:stretch}.site-header.menu-open .nav-dropdown-menu{position:static;margin-top:8px}.user-profile-pill summary>span:nth-child(2){display:none}}
@media(max-width:700px){.wrap{padding-left:16px;padding-right:16px}.navbar .logo-text{font-size:1.15rem}.nav-actions .lang-switcher{display:none}.nav-actions{gap:5px}.nav-actions .header-icon-btn{width:34px;height:40px}.sub-nav-tab{min-height:48px}.forum-layout{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-wrap:wrap}.month-title-row{gap:14px;flex-wrap:wrap}.viewer-panel-close-btn{display:flex!important}.full-photo-tools{gap:6px;padding:10px}.full-photo-tools>span{font-size:.8rem}.full-photo-tools button{min-width:36px;min-height:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the main desktop menu visible, matching the approved header. */
@media(min-width:1025px){.site-header>.navbar.wrap,.site-header .sub-navbar-inner.wrap{max-width:1600px}.navbar{gap:16px}.logo{flex-shrink:0}.desktop-nav{display:flex;flex:1;min-width:0;justify-content:center}.nav-links{gap:2px}.nav-dropdown-trigger,.nav-links>li>a{padding:8px 10px}.nav-actions{gap:8px;flex-shrink:0}.mobile-toggle-btn{display:none}}
@media(min-width:1025px) and (max-width:1449px){.navbar{gap:10px}.nav-actions{gap:6px}.user-profile-pill summary>span:nth-child(2){display:none}.nav-dropdown-trigger,.nav-links>li>a{padding:8px 8px;gap:5px}}
@media(min-width:1025px) and (max-width:1449px){.navbar{height:auto;min-height:68px;flex-wrap:wrap;row-gap:0}.logo{order:0}.nav-actions{order:1;margin-left:auto}.desktop-nav{order:2;flex-basis:100%;padding:4px 0 10px}.user-profile-pill summary>span:nth-child(2){display:inline}}

#upload-modal { box-sizing: border-box; width: min(560px, 94vw); padding: 18px 24px; }
#upload-modal .upload-heading { margin-bottom: 10px; }
#gallery-upload-form { gap: 8px; }
#gallery-upload-form .upload-drop { padding: 10px 12px; gap: 5px; }
#gallery-upload-form .upload-drop > i { font-size: 1.25rem; }
#gallery-upload-form .upload-buttons { margin-top: 4px; }
.upload-location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.upload-location-field { display: grid; min-width: 0; gap: 4px; }
.upload-location-grid > .upload-location-field:nth-child(-n+2) { grid-column: 1 / -1; }
#gallery-upload-form select { min-width: 0; padding-block: 6px; min-height: 38px; }

#viewer-metadata { font: inherit; font-size: .875rem; line-height: 1.4; }
#viewer-metadata dl { margin: 0; }
#viewer-metadata dl > div { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 8px; padding: 4px 0; }
#viewer-metadata dt { display: flex; align-items: baseline; gap: 7px; color: var(--ink-muted); }
#viewer-metadata dt i { flex: 0 0 1em; text-align: center; }
#viewer-metadata dd { margin: 0; color: var(--ink-primary); font-weight: 600; overflow-wrap: anywhere; }
#viewer-photo-credit { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid currentColor; font-size: .8125rem; }
#viewer-comment-form { width: 100%; align-self: stretch; box-sizing: border-box; }
#viewer-comment-form .comment-input-wrap { width: 100%; box-sizing: border-box; }
#viewer-comment-form textarea { width: 100%; min-width: 0; min-height: 58px; box-sizing: border-box; font: inherit; font-size: .875rem; }

/* Technical details stay in the photo viewer, available on request. */
.viewer-photo-details { min-width: 0; }
.viewer-photo-details > summary { min-height: 44px; display: list-item; align-content: center; padding: 8px 0; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; color: var(--ink-primary); }
.viewer-photo-details[open] > summary { margin-bottom: 6px; }
.viewer-photo-details .viewer-exif-box { max-height: 240px; overflow-y: auto; }
#viewer-photo-credit { overflow-wrap: anywhere; }

/* Denser desktop gallery: four columns at 1440px, five on wide screens. */
@media(min-width:1025px){
 .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
 .gallery-grid .photo-card-content{padding:12px 14px 14px;gap:8px}
 .gallery-grid .card-species-tr{font-size:1.05rem}
 .gallery-grid .card-species-la{font-size:.79rem}
 .gallery-grid .photographer-info{gap:7px}
 .gallery-grid .photographer-avatar{width:28px;height:28px;font-size:.72rem}
 .gallery-grid .photographer-name{font-size:.78rem}
 .gallery-grid .btn-view-species{font-size:.72rem;padding:5px 8px}
 .gallery-grid .card-social{gap:7px;font-size:.7rem}
}
@media(min-width:1600px){.workspace.wrap{max-width:1600px}}