/* ==================== TEMA SİSTEMİ ==================== */
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

        :root {
            --font-main: 'Inter', -apple-system, system-ui, sans-serif;
            --font-display: 'Playfair Display', Georgia, serif;
            --font-mono: 'JetBrains Mono', monospace;
            /* Refined: daha küçük, ince radii — flat minimalist feel */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            /* Refined: hairline shadows — almost none in light mode */
            --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.09);
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            /* Admin Varsayılanları (Default: Light) */
            --admin-bg: #f8fafc;
            --admin-text: #1e293b;
            --admin-card-bg: #ffffff;
            --admin-border: #e2e8f0;
            --accent: #3b82f6;
            --accent-soft: rgba(59, 130, 246, 0.1);
        }

        *, *::before, *::after { box-sizing: border-box; }

        body,
        .admin-panel {
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ADMIN TEMA SETLERİ */
        [data-admin-theme="dark"] {
            --admin-bg: #0f172a;
            --admin-text: #f1f5f9;
            --admin-card-bg: #1e293b;
            --admin-border: #334155;
            --accent: #6366f1;
            --accent-soft: rgba(99, 102, 241, 0.2);
        }

        [data-admin-theme="ocean"] {
            --admin-bg: #ecfeff;
            --admin-text: #164e63;
            --admin-card-bg: #ffffff;
            --admin-border: #cffafe;
            --accent: #06b6d4;
            --accent-soft: rgba(6, 182, 212, 0.1);
        }

        [data-admin-theme="forest"] {
            --admin-bg: #f0fdf4;
            --admin-text: #14532d;
            --admin-card-bg: #ffffff;
            --admin-border: #dcfce7;
            --accent: #22c55e;
            --accent-soft: rgba(34, 197, 94, 0.1);
        }

        [data-admin-theme="coffee"] {
            --admin-bg: #fffbeb;
            --admin-text: #451a03;
            --admin-card-bg: #ffffff;
            --admin-border: #fde68a;
            --accent: #d97706;
            --accent-soft: rgba(217, 119, 6, 0.1);
        }

        [data-admin-theme="berry"] {
            --admin-bg: #fdf2f8;
            --admin-text: #831843;
            --admin-card-bg: #ffffff;
            --admin-border: #fbcfe8;
            --accent: #db2777;
            --accent-soft: rgba(219, 39, 119, 0.1);
        }

        [data-admin-theme="sunset"] {
            --admin-bg: #fff7ed;
            --admin-text: #7c2d12;
            --admin-card-bg: #ffffff;
            --admin-border: #fed7aa;
            --accent: #ea580c;
            --accent-soft: rgba(234, 88, 12, 0.1);
        }

        [data-admin-theme="royal"] {
            --admin-bg: #f5f3ff;
            --admin-text: #4c1d95;
            --admin-card-bg: #ffffff;
            --admin-border: #ddd6fe;
            --accent: #7c3aed;
            --accent-soft: rgba(124, 58, 237, 0.1);
        }

        [data-admin-theme="cyber"] {
            --admin-bg: #000000;
            --admin-text: #00ff41;
            --admin-card-bg: #111111;
            --admin-border: #333333;
            --accent: #00ff41;
            --accent-soft: rgba(0, 255, 65, 0.1);
        }

        [data-admin-theme="minimal"] {
            --admin-bg: #ffffff;
            --admin-text: #000000;
            --admin-card-bg: #ffffff;
            --admin-border: #e5e5e5;
            --accent: #000000;
            --accent-soft: rgba(0, 0, 0, 0.05);
        }

        /* Weather Widget New Style */
        .weather-widget {
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: 99px;
            padding: 6px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            color: var(--admin-text);
            position: relative;
            cursor: default;
            transition: var(--transition);
            box-shadow: var(--shadow-sm);
        }

        .weather-widget:hover {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-soft);
        }

        .weather-icon {
            font-size: 16px;
            color: var(--accent);
        }

        #weather-time {
            font-family: var(--font-mono);
            opacity: 0.8;
            font-size: 12px;
            letter-spacing: -0.5px;
        }

        /* Compact GA Card */
        .ga-compact-card {
            background: linear-gradient(135deg, var(--admin-card-bg) 0%, var(--admin-bg) 100%);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-md);
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--transition);
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .ga-compact-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .stat-card {
            cursor: pointer;
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--accent);
        }

        /* Preview Frame Device Styles */
        .preview-frame {
            border: 0;
            border-radius: 0;
            background: #fff;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
        }

        .preview-frame.desktop-mode {
            width: 100%;
            height: 100%;
            border-radius: var(--radius-sm);
            border: 1px solid #e5e5e5;
        }

        .preview-frame.mobile-mode {
            width: 375px;
            height: 667px;
            margin: 0 auto;
            border: 12px solid #333;
            border-radius: 32px;
            box-shadow: 0 0 0 2px #555, 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        /* Scrollbar styles */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(150, 150, 150, 0.3);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(150, 150, 150, 0.5);
        }

        ::selection {
            background: var(--accent);
            color: white;
        }

        /* ==================== KATEGORİ KART GRİD ==================== */
        .cat-grid-header {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 24px;
            padding-top: 8px;
        }
        .cat-grid-title {
            font-size: 32px;
            font-weight: 700;
            font-family: var(--font-display);
            color: var(--text-primary);
            margin: 0;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        .cat-grid-count {
            font-size: 14px;
            color: var(--text-muted);
        }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }
        .category-card {
            background: var(--bg-primary, #ffffff);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
            box-shadow: var(--shadow-sm);
        }
        .category-card:hover {
            transform: translateY(-3px);
            border-color: var(--accent);
            box-shadow: var(--shadow-md);
        }
        .category-card-img {
            aspect-ratio: 16/9;
            overflow: hidden;
            background: var(--bg-tertiary, var(--bg-secondary));
            position: relative;
        }
        .category-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s;
        }
        .category-card:hover .category-card-img img {
            transform: scale(1.06);
        }
        .cc-no-img {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--text-muted);
        }
        .cc-draft-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--warning, #f59e0b);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 99px;
        }
        .category-card-body {
            padding: 16px 20px 20px;
        }
        .cc-cat {
            display: block;
            font-size: 11px;
            font-weight: 600;
            font-family: var(--font-main);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent);
            margin-bottom: 8px;
        }
        .cc-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            font-family: var(--font-display);
            margin: 0 0 8px;
            line-height: 1.3;
            letter-spacing: -0.01em;
        }
        .cc-excerpt {
            font-size: 14px;
            color: var(--text-secondary);
            margin: 0 0 12px;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cc-date {
            font-size: 12px;
            color: var(--text-muted);
        }
        .nav-cat-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 99px;
            font-size: 13px;
            font-weight: 500;
        }
        .nav-cat-content {
            background: var(--accent-soft);
            color: var(--accent);
            border: 1px solid var(--accent-soft);
        }
        .nav-cat-extra {
            background: var(--bg-tertiary, var(--bg-secondary));
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }
        .nav-cat-chip button {
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 0;
            opacity: 0.6;
        }
        .nav-cat-chip button:hover { opacity: 1; }

        .back-to-grid-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            padding: 7px 16px;
            border-radius: 99px;
            cursor: pointer;
            margin-bottom: 20px;
            transition: background var(--transition), color var(--transition);
        }
        .back-to-grid-btn:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        /* ==================== VİDEO SAYFASI ==================== */
        .video-page {
            margin-bottom: 48px;
        }

        .video-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
            font-family: var(--font-display);
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .video-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 20px;
        }

        .video-meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }

        .video-cat {
            background: var(--accent-soft);
            color: var(--accent);
            padding: 4px 10px;
            border-radius: 99px;
            font-weight: 500;
        }

        .video-share {
            cursor: pointer;
            text-decoration: none;
            transition: color var(--transition);
        }

        .video-share:hover { color: var(--accent); }

        .video-player-wrap {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 */
            background: #000;
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 24px;
        }

        .video-player {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .video-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: var(--bg-secondary);
            color: var(--text-muted);
            font-size: 14px;
        }

        .video-placeholder i { font-size: 48px; }

        .video-description {
            font-size: 16px;
            line-height: 1.7;
            color: var(--text-secondary);
            background: transparent;
            border-radius: 0;
            padding: 0 0 20px;
            margin-bottom: 24px;
            border: none;
            border-bottom: 1px solid var(--border-color);
        }

        /* ==================== YORUMLAR ==================== */
        .comments-section {
            border-top: 1px solid var(--border-color);
            padding-top: 40px;
            margin-top: 16px;
        }

        .comments-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 32px;
        }

        .comment-card {
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            transition: border-color var(--transition);
        }

        .comment-card:hover { border-color: var(--accent); }

        .comment-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .comment-author {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .comment-date {
            font-size: 12px;
            color: var(--text-muted);
            flex: 1;
        }

        .comment-edited {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
        }

        .comment-text {
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-secondary);
            margin: 0;
        }

        .comment-admin-actions {
            display: flex;
            gap: 6px;
            margin-left: auto;
        }

        .comment-action-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 4px 8px;
            cursor: pointer;
            color: var(--text-muted);
            font-size: 13px;
            transition: all var(--transition);
        }

        .comment-action-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
        .comment-action-btn.danger:hover { background: var(--danger); color: white; border-color: var(--danger); }

        .comment-loading, .no-comments {
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
            padding: 24px;
        }

        .comment-form {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 24px;
        }

        .comment-form-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .comment-form .form-input {
            width: 100%;
            margin-bottom: 12px;
        }

        .comment-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .comment-edit-area {
            font-family: inherit;
            font-size: 15px;
        }

        /* ==================== BRAND AVATAR ==================== */
        .brand-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            flex-shrink: 0;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.15);
            box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(59,130,246,0.25);
            transition: all var(--transition);
        }

        .brand-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        /* ---- Header içindeki nav ---- */
        .header-inner .main-nav {
            flex: 1;
            background: transparent;
            border: none;
            padding: 0;
        }

        .header-inner .nav-tabs {
            justify-content: center;
            padding-bottom: 0;
            gap: 4px;
        }

        .header-inner .nav-tab {
            padding: 7px 16px;
            font-size: 13.5px;
            font-weight: 500;
            border-radius: 50px;
            color: rgba(255,255,255,0.6);
            background: transparent;
            border: 1px solid transparent;
            letter-spacing: 0.1px;
            transition: all 0.2s;
        }

        .header-inner .nav-tab:hover {
            color: rgba(255,255,255,0.9);
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.1);
        }

        .header-inner .nav-tab.active {
            color: #fff;
            background: var(--accent);
            border-color: transparent;
            box-shadow: 0 2px 12px rgba(59,130,246,0.4);
        }

        [data-theme="light"] .header-inner .nav-tab {
            color: #424754;
            font-family: var(--font-main);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        [data-theme="light"] .header-inner .nav-tab:hover {
            color: #141b2b;
            background: rgba(0, 88, 190, 0.05);
        }
        [data-theme="light"] .header-inner .nav-tab.active {
            color: #fff;
            background: #0058be;
            box-shadow: 0 2px 12px rgba(0, 88, 190, 0.3);
        }

        @media (max-width: 900px) {
            .header-inner .main-nav { display: none; }
            .header-mobile-nav { display: flex !important; }
        }

        /* SİTE TEMALARI (Frontend) - unchanged */
        [data-theme="dark"] {
            --bg-primary: #0a0a0f;
            --bg-secondary: #12121a;
            --bg-tertiary: #1a1a24;
            --bg-card: rgba(255, 255, 255, 0.03);
            --bg-card-hover: rgba(255, 255, 255, 0.06);
            --bg-input: rgba(255, 255, 255, 0.05);
            --border-color: rgba(255, 255, 255, 0.08);
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --glass: rgba(18, 18, 26, 0.65);
            --glass-border: rgba(255, 255, 255, 0.1);
            --texture: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

        /* Diğer temalar aynı kalacak */
        [data-theme="light"] {
            /* ── Stitch Refined Minimalist Palette ── */
            --bg-primary: #f9f9ff;
            --bg-secondary: #f1f3ff;
            --bg-tertiary: #e9edff;
            --bg-card: rgba(0, 88, 190, 0.02);
            --bg-card-hover: rgba(0, 88, 190, 0.05);
            --bg-input: rgba(0, 88, 190, 0.03);
            --border-color: rgba(194, 198, 214, 0.7);
            --text-primary: #141b2b;
            --text-secondary: #424754;
            --text-muted: #727785;
            --accent: #0058be;
            --accent-hover: #2170e4;
            --accent-soft: rgba(0, 88, 190, 0.09);
            --success: #16a34a;
            --success-soft: rgba(22, 163, 74, 0.1);
            --warning: #d97706;
            --warning-soft: rgba(217, 119, 6, 0.1);
            --danger: #ba1a1a;
            --danger-soft: rgba(186, 26, 26, 0.1);
            --glass: rgba(249, 249, 255, 0.82);
            --glass-border: rgba(194, 198, 214, 0.5);
            --texture: none;
        }

        [data-theme="ocean"] {
            --bg-primary: #0c1929;
            --bg-secondary: #0f2137;
            --bg-tertiary: #132a46;
            --bg-card: rgba(255, 255, 255, 0.04);
            --bg-card-hover: rgba(255, 255, 255, 0.07);
            --bg-input: rgba(255, 255, 255, 0.06);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-primary: #f0f9ff;
            --text-secondary: #7dd3fc;
            --text-muted: #38bdf8;
            --accent: #0ea5e9;
            --accent-hover: #38bdf8;
            --accent-soft: rgba(14, 165, 233, 0.2);
            --success: #2dd4bf;
            --success-soft: rgba(45, 212, 191, 0.15);
            --warning: #fbbf24;
            --warning-soft: rgba(251, 191, 36, 0.15);
            --danger: #f87171;
            --danger-soft: rgba(248, 113, 113, 0.15);
            --glass: rgba(12, 25, 41, 0.65);
            --glass-border: rgba(255, 255, 255, 0.1);
            --texture: none;
        }

        [data-theme="forest"] {
            --bg-primary: #0f1a14;
            --bg-secondary: #152419;
            --bg-tertiary: #1c2e21;
            --bg-card: rgba(255, 255, 255, 0.04);
            --bg-card-hover: rgba(255, 255, 255, 0.07);
            --bg-input: rgba(255, 255, 255, 0.06);
            --border-color: rgba(255, 255, 255, 0.1);
            --text-primary: #f0fdf4;
            --text-secondary: #86efac;
            --text-muted: #4ade80;
            --accent: #22c55e;
            --accent-hover: #4ade80;
            --accent-soft: rgba(34, 197, 94, 0.2);
            --success: #34d399;
            --success-soft: rgba(52, 211, 153, 0.15);
            --warning: #fcd34d;
            --warning-soft: rgba(252, 211, 77, 0.15);
            --danger: #fb7185;
            --danger-soft: rgba(251, 113, 133, 0.15);
            --glass: rgba(15, 26, 20, 0.65);
            --glass-border: rgba(255, 255, 255, 0.1);
            --texture: none;
        }

        [data-theme="cream"] {
            --bg-primary: #faf8f5;
            --bg-secondary: #f5f2ed;
            --bg-tertiary: #ebe7e0;
            --bg-card: rgba(139, 90, 43, 0.04);
            --bg-card-hover: rgba(139, 90, 43, 0.08);
            --bg-input: rgba(139, 90, 43, 0.05);
            --border-color: rgba(139, 90, 43, 0.12);
            --text-primary: #2c2416;
            --text-secondary: #5c4d3c;
            --text-muted: #8b7355;
            --accent: #a0714f;
            --accent-hover: #8b5a2b;
            --accent-soft: rgba(160, 113, 79, 0.15);
            --success: #5d8c5a;
            --success-soft: rgba(93, 140, 90, 0.15);
            --warning: #c9943a;
            --warning-soft: rgba(201, 148, 58, 0.15);
            --danger: #b85450;
            --danger-soft: rgba(184, 84, 80, 0.15);
            --glass: rgba(250, 248, 245, 0.75);
            --glass-border: rgba(139, 90, 43, 0.15);
            --texture: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b5a2b' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
        }

        /* ==================== HEADER & NAV (YENİ TASARIM) ==================== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            padding: 0;
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
            background: linear-gradient(135deg,
                rgba(10, 10, 20, 0.92) 0%,
                rgba(18, 18, 32, 0.88) 50%,
                rgba(10, 10, 20, 0.92) 100%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: 0 1px 40px rgba(0, 0, 0, 0.4), 0 0 0 0 transparent;
        }

        /* Altta ince accent çizgisi */
        .site-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--accent) 30%,
                rgba(99, 179, 237, 0.6) 60%,
                transparent 100%);
            opacity: 0.5;
        }

        [data-theme="light"] .site-header {
            background: rgba(249, 249, 255, 0.88);
            border-bottom: 1px solid rgba(194, 198, 214, 0.6);
            box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
        }

        .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 10px 0;
        }

        /* ---- BRAND ---- */
        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
            text-decoration: none;
            cursor: pointer;
        }

        .brand:hover .brand-avatar {
            transform: scale(1.05);
            box-shadow: 0 0 0 3px var(--accent), 0 4px 16px rgba(59,130,246,0.3);
        }

        .brand-text h1 {
            font-size: 16px;
            font-weight: 700;
            white-space: nowrap;
            background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.3px;
        }

        [data-theme="light"] .brand-text h1 {
            background: none;
            -webkit-text-fill-color: #141b2b;
            color: #141b2b;
            font-family: var(--font-display);
            font-weight: 700;
            letter-spacing: -0.3px;
        }

        .brand-text span {
            font-size: 10px;
            color: rgba(255,255,255,0.4);
            display: block;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }

        [data-theme="light"] .brand-text span {
            color: rgba(0,0,0,0.45);
        }

        /* ---- SEARCH ---- */
        .search-box {
            max-width: 200px;
            position: relative;
        }

        .search-box input,
        .search-box textarea {
            width: 100%;
            height: 38px;
            padding: 8px 16px 8px 38px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 13px;
            transition: all var(--transition);
            resize: none;
            overflow: hidden;
            line-height: 20px;
            appearance: none;
        }

        .search-box input::placeholder,
        .search-box textarea::placeholder { color: rgba(255,255,255,0.3); }

        .search-box input:focus,
        .search-box textarea:focus {
            outline: none;
            background: rgba(255,255,255,0.1);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
        }

        [data-theme="light"] .search-box input,
        [data-theme="light"] .search-box textarea {
            background: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.12);
        }
        [data-theme="light"] .search-box input::placeholder,
        [data-theme="light"] .search-box textarea::placeholder { color: rgba(0,0,0,0.35); }
        [data-theme="light"] .search-box input:focus,
        [data-theme="light"] .search-box textarea:focus {
            background: #fff;
            border-color: var(--accent);
        }

        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,0.35);
            font-size: 14px;
        }

        [data-theme="light"] .search-box i { color: rgba(0,0,0,0.3); }

        /* ---- HEADER ACTIONS ---- */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ---- THEME BUTTON ---- */
        .theme-selector {
            position: relative;
        }

        .theme-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.65);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all var(--transition);
        }

        .theme-btn:hover {
            background: rgba(255,255,255,0.13);
            color: #fff;
            border-color: rgba(255,255,255,0.2);
        }

        [data-theme="light"] .theme-btn {
            background: rgba(0,0,0,0.05);
            border-color: rgba(0,0,0,0.1);
            color: #64748b;
        }
        [data-theme="light"] .theme-btn:hover { background: rgba(0,0,0,0.1); color: #1e293b; }

        .theme-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-md);
            padding: 6px;
            min-width: 160px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px) scale(0.97);
            transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
            z-index: 9999;
        }

        .theme-selector:hover .theme-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .theme-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
            transition: all 0.15s;
        }

        .theme-option:hover {
            background: rgba(255,255,255,0.07);
            color: var(--text-primary);
        }

        .theme-selector {
            position: relative;
        }

        .theme-btn {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all var(--transition);
        }

        .theme-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 8px;
            min-width: 160px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: all var(--transition);
            z-index: 9999;
        }

        .theme-selector:hover .theme-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .theme-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 13px;
            color: var(--text-secondary);
            transition: all var(--transition);
        }

        .theme-option:hover {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        .theme-option.active {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .theme-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
        }

        .social-links {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all var(--transition);
            position: relative;
        }

        .social-link:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        .social-link::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-color);
            z-index: 100;
            pointer-events: none;
        }

        .social-link:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-4px);
        }

        .main-nav {
            background: transparent;
            border: none;
            padding: 0;
        }

        .nav-tabs {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            padding-bottom: 0;
        }

        .nav-tab {
            padding: 10px 20px;
            border-radius: var(--radius-lg);
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all var(--transition);
        }

        .nav-tab:hover {
            background: var(--bg-card);
            color: var(--text-primary);
        }

        .nav-tab.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .sub-nav {
            display: flex;
            gap: 8px;
            padding: 16px 0;
            flex-wrap: wrap;
            min-height: 0;
        }

        .sub-nav:empty {
            padding: 0;
            margin: 0;
        }

        .sub-nav-btn {
            padding: 6px 14px;
            border-radius: 99px;
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-main);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all var(--transition);
        }

        .sub-nav-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .sub-nav-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        /* FOOTER */
        .site-footer {
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
            padding: 48px 0;
            margin-top: auto;
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            text-align: center;
        }

        .footer-links {
            display: flex;
            gap: 16px;
            flex-direction: row !important;
        }

        /* ZORLA YAN YANA */
        .copyright {
            color: var(--text-muted);
            font-size: 13px;
        }

        /* FRONTEND STYLES */
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: transparent;
            z-index: 1001;
            pointer-events: none;
        }

        .progress-indicator {
            height: 100%;
            background: var(--accent);
            width: 0%;
            transition: width 0.1s;
            box-shadow: 0 0 10px var(--accent);
        }

        .content-area {
            padding: 32px 0 64px;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .hero-section {
            position: relative;
            width: 100%;
            height: 60vh;
            min-height: 500px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 60px;
            box-shadow: var(--shadow-lg);
            transform: translateZ(0);
        }

        .hero-img {
            width: 100%;
            height: 110%;
            object-fit: cover;
            transition: transform 0.1s linear;
            will-change: transform;
        }

        .hero-overlay {
            position: absolute;
            bottom: 40px;
            left: 40px;
            right: 40px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            pointer-events: none;
        }

        .hero-card {
            background: var(--glass);
            -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
            padding: 32px 40px;
            border-radius: var(--radius-lg);
            max-width: 700px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            pointer-events: auto;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            background: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
            border-radius: 99px;
            font-size: 11px;
            font-weight: 600;
            font-family: var(--font-main);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 16px;
        }

        .hero-title {
            font-size: 48px;
            font-family: var(--font-display);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: var(--text-primary);
            margin: 0;
        }

        .scroll-indicator {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            animation: bounce 2s infinite;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            opacity: 0.8;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translate(-50%, 0);
            }

            40% {
                transform: translate(-50%, -10px);
            }

            60% {
                transform: translate(-50%, -5px);
            }
        }

        .article-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 60px;
            margin-bottom: 60px;
        }

        .article-sidebar {
            position: sticky;
            top: 120px;
            height: fit-content;
            padding-right: 24px;
            border-right: 1px solid var(--border-color);
            background-image: var(--texture);
        }

        .meta-group {
            margin-bottom: 32px;
        }

        .meta-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 8px;
            font-weight: 600;
            font-family: var(--font-main);
        }

        .meta-value {
            font-size: 16px;
            color: var(--text-primary);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .meta-divider {
            height: 1px;
            background: var(--border-color);
            margin: 24px 0;
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag {
            font-size: 11px;
            font-weight: 600;
            font-family: var(--font-main);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 4px 10px;
            background: transparent;
            border-radius: 99px;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all var(--transition);
        }

        .tag:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .article-content {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-secondary);
            font-family: var(--font-main);
            background: transparent;
            padding: 0;
            border-radius: 0;
            border: none;
        }

        .article-content p {
            margin-bottom: 24px;
        }

        .article-content>p:first-of-type::first-letter {
            float: left;
            font-size: 4.8em;
            line-height: 0.8;
            font-weight: 700;
            margin-right: 16px;
            margin-top: 4px;
            color: var(--accent);
            font-family: var(--font-display);
            text-shadow: 2px 2px 0px var(--bg-tertiary);
        }

        .separator-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0 40px;
            color: var(--accent);
            opacity: 0.5;
        }

        .separator-icon::before,
        .separator-icon::after {
            content: "";
            width: 40px;
            height: 1px;
            background: currentColor;
            margin: 0 10px;
        }

        .article-content h3 {
            font-size: 28px;
            margin: 48px 0 24px;
            color: var(--text-primary);
        }

        .article-content ul,
        .article-content ol {
            margin: 24px 0;
            padding-left: 24px;
        }

        .article-content li {
            margin-bottom: 12px;
        }

        .article-content blockquote {
            border-left: 4px solid var(--accent);
            padding-left: 16px;
            margin: 16px 0;
            font-style: italic;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 12px;
            border-radius: 4px;
        }

        /* GALLERY STYLES */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 32px;
            margin-top: 60px;
        }

        .gallery-item {
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: zoom-in;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition);
            background: var(--bg-card);
            position: relative;
        }

        .gallery-item:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
        }

        .gallery-caption {
            padding: 12px 16px;
            font-size: 13px;
            color: var(--text-muted);
            font-style: italic;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }

        /* Watermark */
        .gallery-item::after {
            content: "Feyyaz Ko\00E7";
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            font-family: var(--font-display);
        }

        .article-nav {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            margin-top: 80px;
            padding-top: 40px;
            border-top: 1px solid var(--border-color);
        }

        .nav-link-card {
            flex: 1;
            padding: 24px;
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            transition: all var(--transition);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .nav-link-card:hover {
            border-color: var(--accent);
            transform: translateY(-4px);
        }

        .nav-label {
            font-size: 12px;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 600;
        }

        .nav-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            font-family: var(--font-display);
        }

        .empty-state {
            text-align: center;
            padding: 80px 24px;
        }

        .empty-state i {
            font-size: 64px;
            color: var(--text-muted);
            margin-bottom: 24px;
            display: block;
        }

        .empty-state h3 {
            font-size: 24px;
            margin-bottom: 12px;
        }

        .empty-state p {
            color: var(--text-muted);
            max-width: 400px;
            margin: 0 auto;
        }

        .action-btn {
            display: inline-block;
            padding: 12px 24px;
            background: var(--accent);
            color: white;
            border-radius: var(--radius-md);
            font-weight: 600;
            margin-top: 24px;
            text-align: center;
            transition: all var(--transition);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            opacity: 0.9;
        }

        /* BUTTONS */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all var(--transition);
        }

        .btn-primary {
            background: var(--accent);
            color: white;
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-secondary {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: var(--bg-card-hover);
            border-color: var(--text-muted);
        }

        .btn-danger {
            background: var(--danger-soft);
            color: var(--danger);
        }

        .btn-danger:hover {
            background: var(--danger);
            color: white;
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 13px;
        }

        /* ADMIN PANEL BUTTON OVERRIDES */
        .admin-panel .btn-secondary {
            background: rgba(255, 255, 255, 0.5);
            color: var(--admin-text);
            border-color: var(--admin-border);
        }

        .admin-panel .btn-secondary:hover {
            background: var(--admin-border);
            color: var(--admin-text);
        }

        .admin-panel .btn-primary {
            background: var(--accent);
            color: #ffffff;
        }

        /* ADMIN STYLES */
        .admin-panel {
            position: fixed;
            inset: 0;
            background: var(--admin-bg);
            z-index: 500;
            display: none;
            overflow: hidden;
            color: var(--admin-text);
        }

        .admin-panel.active {
            display: block;
        }

        .admin-header {
            background: var(--admin-card-bg);
            border-bottom: 1px solid var(--admin-border);
            padding: 16px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            z-index: 100;
            position: relative;
        }

        .admin-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .admin-header h2 {
            font-size: 18px;
            font-family: var(--font-main);
            font-weight: 600;
        }

        .save-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: var(--radius-lg);
            font-size: 13px;
            font-weight: 500;
            transition: opacity 0.3s ease;
        }

        .save-status.saved {
            background: var(--success-soft);
            color: var(--success);
        }

        .save-status.unsaved {
            background: var(--warning-soft);
            color: var(--warning);
        }

        .save-status.saving {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .admin-header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .admin-body {
            display: flex;
            height: calc(100vh - 73px);
            overflow: hidden;
            position: relative;
            background: var(--admin-bg);
        }

        /* Flexbox handles responsiveness better, but we keep mobile overrides if needed */
        @media (max-width: 1200px) {
            .preview-panel {
                display: none !important;
            }

            .sidebar-panel {
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                z-index: 100;
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            }
        }

        .editor-panel {
            flex: 1;
            min-width: 0;
            padding: 24px;
            overflow-y: auto;
            border-right: 1px solid var(--admin-border);
            display: flex;
            flex-direction: column;
            background: var(--admin-bg);
        }

        .editor-tabs {
            display: flex;
            gap: 4px;
            background: var(--admin-card-bg);
            padding: 4px;
            border-radius: var(--radius-md);
            margin-bottom: 24px;
            border: 1px solid var(--admin-border);
        }

        .editor-tab {
            flex: 1;
            padding: 10px 16px;
            border: none;
            background: transparent;
            color: var(--admin-text);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: all var(--transition);
            opacity: 0.7;
        }

        .editor-tab:hover {
            opacity: 1;
        }

        .editor-tab.active {
            background: var(--accent);
            color: white;
            box-shadow: var(--shadow-sm);
            opacity: 1;
        }

        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
        }

        .editor-toolbar {
            display: flex;
            gap: 4px;
            padding: 8px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-bottom: none;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            flex-wrap: wrap;
        }

        .toolbar-btn {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all var(--transition);
        }

        .toolbar-btn:hover {
            background: var(--admin-border);
            color: var(--admin-text);
        }

        .toolbar-btn.active {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .toolbar-divider {
            width: 1px;
            background: var(--admin-border);
            margin: 4px 8px;
        }

        .content-editor {
            min-height: 300px;
            padding: 20px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            color: var(--admin-text);
            font-size: 15px;
            line-height: 1.8;
            outline: none;
            overflow-y: auto;
        }

        .content-editor:focus {
            border-color: var(--accent);
        }

        .content-editor:empty::before {
            content: attr(data-placeholder);
            color: var(--text-muted);
        }

        .content-editor b,
        .content-editor strong {
            font-weight: 700;
            color: var(--text-primary);
        }

        .content-editor i,
        .content-editor em {
            font-style: italic;
        }

        .content-editor h3 {
            font-size: 20px;
            font-weight: 600;
            margin: 16px 0 8px;
            color: var(--text-primary);
        }

        .content-editor ul {
            margin: 12px 0;
            padding-left: 24px;
        }

        .content-editor a {
            color: var(--accent);
            text-decoration: underline;
        }

        .content-editor blockquote {
            border-left: 4px solid var(--accent);
            padding-left: 16px;
            margin: 16px 0;
            font-style: italic;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 12px;
            border-radius: 4px;
        }

        .upload-zone {
            border: 2px dashed var(--admin-border);
            border-radius: var(--radius-lg);
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition);
            margin-bottom: 20px;
            background: var(--admin-card-bg);
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .upload-zone i {
            font-size: 48px;
            color: var(--admin-text);
            opacity: 0.4;
            margin-bottom: 16px;
            display: block;
        }

        .upload-zone h4 {
            font-size: 16px;
            margin-bottom: 8px;
            color: var(--admin-text);
        }

        .upload-zone p {
            font-size: 13px;
            color: var(--admin-text);
            opacity: 0.6;
        }

        .upload-progress {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 16px;
            display: none;
        }

        .upload-progress.active {
            display: block;
        }

        .progress-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .progress-header span {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .progress-bar {
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-hover));
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
            padding: 4px;
            overflow-y: auto;
        }

        .image-card {
            position: relative;
            aspect-ratio: 1;
            border-radius: var(--radius-md);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all var(--transition);
            background: var(--bg-input);
        }

        .image-card:hover {
            border-color: var(--accent);
        }

        .image-card.selected {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--accent-soft);
        }

        .image-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .image-card:hover img {
            transform: scale(1.1);
        }

        .image-card-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            opacity: 0;
            transition: opacity var(--transition);
            display: flex;
            align-items: flex-end;
            padding: 8px;
        }

        .image-card:hover .image-card-overlay {
            opacity: 1;
        }

        .image-card-actions {
            display: flex;
            gap: 4px;
            width: 100%;
        }

        .image-card-actions button {
            flex: 1;
            padding: 6px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 12px;
            cursor: pointer;
        }

        .image-card-actions .delete-btn {
            background: var(--danger);
            color: white;
        }

        .preview-panel {
            width: 420px;
            flex-shrink: 0;
            padding: 24px;
            overflow-y: auto;
            background: var(--admin-card-bg);
            border-left: 1px solid var(--admin-border);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .preview-header h3 {
            font-size: 14px;
            font-family: var(--font-main);
            color: var(--admin-text);
            font-weight: 500;
            opacity: 0.7;
        }

        .preview-frame {
            background: var(--admin-bg);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-lg);
            padding: 24px;
            min-height: 400px;
            overflow: hidden;
            transition: all 0.3s ease;
            flex: 1;
            color: var(--admin-text);
        }

        .preview-frame.mobile {
            max-width: 375px;
            margin: 0 auto;
        }

        .preview-frame.fullscreen {
            position: fixed;
            inset: 0;
            z-index: 2000;
            width: 100%;
            height: 100%;
            max-width: none;
            border-radius: 0;
            border: none;
        }

        .sidebar-panel {
            width: 320px;
            flex-shrink: 0;
            padding: 24px;
            overflow-y: auto;
            background: var(--admin-bg);
            border-left: 1px solid var(--admin-border);
            transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 20;
        }

        .sidebar-panel.collapsed {
            margin-right: -320px;
        }

        /* NEW FEATURE STYLES */
        .sidebar-toggle-btn {
            position: absolute;
            left: -12px;
            top: 24px;
            width: 24px;
            height: 24px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow-sm);
            color: var(--text-muted);
            z-index: 25;
            transition: all 0.2s;
        }

        .sidebar-toggle-btn:hover {
            color: var(--accent);
            transform: scale(1.1);
        }

        .sidebar-panel.collapsed .sidebar-toggle-btn i {
            transform: rotate(180deg);
        }

        .ai-assist-btn {
            background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
            color: white;
            border: none;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
            transition: transform 0.1s;
        }

        .ai-assist-btn:hover {
            transform: translateY(-1px);
        }

        /* Editor Stats Bar */
        .editor-stats-bar {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 8px;
            padding: 8px 12px;
            background: var(--admin-input-bg);
            border-radius: var(--radius-sm);
            font-size: 11px;
            color: var(--text-muted);
            border: 1px solid var(--admin-border);
        }

        .editor-stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Focus Mode Styles */
        body.focus-active .admin-header,
        body.focus-active .sidebar-panel,
        body.focus-active .preview-panel {
            opacity: 0.1;
            pointer-events: none;
            filter: blur(4px);
            transition: all 0.5s ease;
        }

        body.focus-active .editor-panel {
            box-shadow: 0 0 0 100vmax var(--admin-bg);
            z-index: 100;
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .sidebar-section {
            margin-bottom: 32px;
        }

        .sidebar-section h4 {
            font-size: 12px;
            font-family: var(--font-main);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        .content-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .content-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition);
        }

        .content-item:hover {
            background: var(--bg-card-hover);
            border-color: var(--text-muted);
        }

        .content-item.active {
            background: var(--accent-soft);
            border-color: var(--accent);
            color: var(--accent);
        }

        .content-item-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: var(--bg-tertiary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
        }

        .content-item-info {
            flex: 1;
            min-width: 0;
        }

        .content-item-title {
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content-item-meta {
            font-size: 11px;
            color: var(--text-muted);
        }

        .content-item-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .content-item-status.published {
            background: var(--success);
        }

        .content-item-status.draft {
            background: var(--warning);
        }

        .danger-zone {
            background: var(--danger-soft);
            border: 1px solid var(--danger);
            border-radius: var(--radius-md);
            padding: 16px;
        }

        .danger-zone h5 {
            color: var(--danger);
            font-size: 12px;
            margin-bottom: 12px;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-lg);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--admin-text);
            font-family: var(--font-display);
        }

        .stat-label {
            font-size: 13px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-icon {
            font-size: 24px;
            color: var(--accent);
            margin-bottom: 8px;
        }

        .weather-widget {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            background: var(--admin-card-bg);
            border-radius: var(--radius-md);
            font-size: 14px;
            color: var(--admin-text);
            border: 1px solid var(--admin-border);
            cursor: help;
        }

        .weather-icon {
            font-size: 20px;
            color: var(--accent);
        }

        .weather-tooltip {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px;
            width: 200px;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition);
            z-index: 100;
            font-size: 13px;
            color: var(--text-primary);
        }

        .weather-widget:hover .weather-tooltip {
            opacity: 1;
            visibility: visible;
        }

        .weather-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }

        body.zen-active .admin-body {
            grid-template-columns: 1fr;
        }

        body.zen-active .sidebar-panel,
        body.zen-active .preview-panel,
        body.zen-active .admin-header-left button,
        body.zen-active .admin-header-right {
            display: none;
        }

        body.zen-active .admin-header {
            justify-content: center;
        }

        body.zen-active .editor-panel {
            border: none;
            max-width: 800px;
            margin: 0 auto;
        }

        body.zen-active .zen-exit-btn {
            display: block !important;
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 24px;
        }

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

        .modal-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xl);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            box-shadow: var(--shadow-lg);
        }

        .modal-card h2 {
            text-align: center;
            margin-bottom: 8px;
        }

        .modal-card>p {
            text-align: center;
            color: var(--text-muted);
            margin-bottom: 32px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 14px 16px;
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: 15px;
            transition: all var(--transition);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .form-input::placeholder {
            color: var(--text-muted);
        }

        /* THUMBNAIL INPUT STYLES */
        .thumbnail-preview {
            width: 100%;
            height: 200px;
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            background: var(--bg-input);
            position: relative;
            transition: all var(--transition);
        }

        .thumbnail-preview:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .thumbnail-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .thumbnail-preview i {
            font-size: 32px;
            color: var(--text-muted);
        }

        .thumbnail-preview span {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            pointer-events: none;
        }

        /* MEDIA STUDIO STYLES */
        .media-studio-grid {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 24px;
            height: 100%;
        }

        .media-sidebar {
            border-right: 1px solid var(--border-color);
            padding-right: 24px;
            overflow-y: auto;
        }

        .media-main {
            overflow-y: auto;
            padding-bottom: 24px;
        }

        .media-control-group {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border-color);
        }

        .media-control-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        /* MODERN SLIDER TASARIMI (iOS Style) */
        .range-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            outline: none;
            margin: 10px 0;
            cursor: pointer;
            position: relative;
        }

        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: -7px;
        }

        .range-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .range-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .layout-options {
            display: flex;
            gap: 8px;
        }

        .layout-btn {
            flex: 1;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--bg-card);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: all 0.2s;
        }

        .layout-btn.active {
            background: var(--accent-soft);
            border-color: var(--accent);
            color: var(--accent);
        }

        .layout-btn:hover {
            border-color: var(--text-muted);
        }

        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 90vh;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
        }

        .lightbox-close {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* TOAST BÄ°LDÄ°RÄ°MLERÄ° */
        .toast-container {
            position: fixed;
            bottom: 24px;
            right: 24px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 3000;
        }

        .toast {
            min-width: 220px;
            max-width: 320px;
            padding: 10px 14px;
            border-radius: 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
            font-size: 13px;
            color: var(--text-primary);
            display: flex;
            align-items: flex-start;
            gap: 8px;
            animation: fadeIn 0.2s ease-out;
        }

        .toast-success {
            border-color: var(--success);
        }

        .toast-error {
            border-color: var(--danger);
        }

        .toast-warning {
            border-color: var(--warning);
        }

        .toast-icon {
            margin-top: 2px;
        }

        @media (max-width: 900px) {
            .header-inner {
                flex-wrap: wrap;
            }

            .search-box {
                order: 3;
                max-width: 100%;
                width: 100%;
                margin-top: 16px;
            }

            .brand-text span {
                display: none;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .hero-section {
                height: 50vh;
            }

            .hero-overlay {
                left: 20px;
                right: 20px;
                bottom: 20px;
            }

            .hero-card {
                padding: 24px;
            }

            .hero-title {
                font-size: 32px;
            }

            .article-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .article-sidebar {
                position: static;
                display: flex;
                flex-wrap: wrap;
                gap: 24px;
                border-bottom: 1px solid var(--border-color);
                padding-bottom: 24px;
                margin-bottom: 24px;
                border-right: none;
                background-image: none;
            }

            .meta-group {
                margin-bottom: 0;
            }

            .meta-divider {
                display: none;
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .media-studio-grid {
                grid-template-columns: 1fr;
            }

            .media-sidebar {
                border-right: none;
                border-bottom: 1px solid var(--border-color);
                padding-bottom: 24px;
                margin-bottom: 24px;
            }
        }

        /* FORM INPUTS */
        .form-group {
            margin-bottom: 16px;
        }

        .admin-route-preview {
            align-items: center;
            gap: 10px;
            margin: -2px 0 18px;
            padding: 10px 12px;
            border: 1px solid var(--admin-border);
            border-radius: 8px;
            background: var(--admin-card-bg);
            font-size: 13px;
        }

        .admin-route-preview span {
            color: var(--text-muted);
            font-weight: 700;
        }

        .admin-route-preview a {
            color: var(--accent);
            font-weight: 700;
            text-decoration: none;
            word-break: break-all;
        }

        .admin-route-preview a:hover {
            text-decoration: underline;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--admin-text);
            margin-bottom: 6px;
        }

        .form-input {
            width: 100%;
            padding: 10px 14px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-sm);
            color: var(--admin-text);
            font-size: 14px;
            font-family: var(--font-main);
            transition: all var(--transition);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .form-input::placeholder {
            color: var(--admin-text);
            opacity: 0.4;
        }

        textarea.form-input {
            resize: vertical;
            min-height: 80px;
        }

        .hide {
            display: none !important;
        }

        /* ADMIN PANEL CORE STYLES */
        .admin-panel {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: var(--admin-bg);
            overflow: hidden;
        }

        .admin-panel.active {
            display: flex;
            flex-direction: column;
        }

        .admin-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 24px;
            background: var(--admin-card-bg);
            border-bottom: 1px solid var(--admin-border);
            flex-shrink: 0;
            gap: 16px;
        }

        .admin-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .admin-header-left h2 {
            font-size: 18px;
            font-weight: 600;
            color: var(--admin-text);
            margin: 0;
        }

        .admin-header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .admin-body {
            display: grid;
            grid-template-columns: 1fr 420px 320px;
            flex: 1;
            overflow: hidden;
        }

        .editor-panel {
            padding: 24px;
            overflow-y: auto;
            background: var(--admin-bg);
            border-right: 1px solid var(--admin-border);
        }

        .editor-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--admin-border);
            padding-bottom: 12px;
            flex-wrap: wrap;
        }

        .editor-tab {
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all var(--transition);
        }

        .editor-tab:hover {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .editor-tab.active {
            background: var(--accent);
            color: white;
        }

        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .save-status {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 500;
            transition: opacity 0.3s ease;
        }

        .save-status.saved {
            background: var(--success-soft);
            color: var(--success);
        }

        .save-status.unsaved {
            background: var(--warning-soft);
            color: var(--warning);
        }

        .save-status.saving {
            background: var(--accent-soft);
            color: var(--accent);
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 18px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition);
            font-family: var(--font-main);
        }

        .btn-primary {
            background: var(--accent);
            color: white;
        }

        .btn-primary:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: var(--admin-card-bg);
            color: var(--admin-text);
            border: 1px solid var(--admin-border);
        }

        .btn-secondary:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            filter: brightness(1.1);
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        .upload-zone {
            border: 2px dashed var(--admin-border);
            border-radius: var(--radius-md);
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition);
            background: var(--admin-card-bg);
        }

        .upload-zone:hover,
        .upload-zone.dragover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .upload-zone i {
            font-size: 48px;
            color: var(--text-muted);
            margin-bottom: 12px;
            display: block;
        }

        .upload-zone p {
            color: var(--text-muted);
            font-size: 14px;
        }

        .upload-progress {
            display: none;
        }

        .upload-progress.active {
            display: block;
        }

        .progress-bar {
            height: 6px;
            background: var(--admin-border);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: var(--accent);
            transition: width 0.3s ease;
        }

        .content-editor {
            min-height: 300px;
            padding: 16px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-md);
            color: var(--admin-text);
            line-height: 1.8;
            font-size: 15px;
            outline: none;
            overflow-y: auto;
        }

        .content-editor:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .content-editor:empty::before {
            content: attr(data-placeholder);
            color: var(--text-muted);
            pointer-events: none;
        }

        .editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 8px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-bottom: none;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }

        .toolbar-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            color: var(--admin-text);
            border-radius: var(--radius-sm);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }

        .toolbar-btn:hover {
            background: var(--accent-soft);
            color: var(--accent);
        }

        .toolbar-divider {
            width: 1px;
            height: 24px;
            background: var(--admin-border);
            margin: 0 4px;
        }

        /* SIDEBAR PANEL */
        .sidebar-panel {
            width: 300px;
            flex-shrink: 0;
            padding: 24px;
            overflow-y: auto;
            background: var(--admin-bg);
            border-left: 1px solid var(--admin-border);
            transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
            position: relative;
        }

        .sidebar-panel.collapsed {
            width: 0;
            padding: 0;
            overflow: visible;
            /* Fixed butonun görünmesi için */
            border-left: none;
        }

        .sidebar-panel.collapsed .sidebar-section {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
        }

        /* Preview panel genişlesin */
        .preview-panel {
            flex: 1;
            transition: flex 0.3s ease;
        }

        .sidebar-toggle-btn {
            position: absolute;
            left: -12px;
            top: 24px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            color: var(--text-muted);
            z-index: 25;
            transition: all 0.2s;
        }

        .sidebar-toggle-btn:hover {
            color: var(--accent);
            transform: scale(1.1);
        }

        .sidebar-panel.collapsed .sidebar-toggle-btn {
            position: fixed;
            right: 16px;
            top: 80px;
            left: auto;
            width: 40px;
            height: 40px;
            background: var(--accent);
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .sidebar-panel.collapsed .sidebar-toggle-btn:hover {
            transform: scale(1.1);
        }

        .sidebar-panel.collapsed .sidebar-toggle-btn i {
            transform: rotate(180deg);
        }

        .sidebar-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--admin-text);
            margin-bottom: 16px;
        }

        .content-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .content-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--admin-card-bg);
            border: 1px solid var(--admin-border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
        }

        .content-item:hover {
            border-color: var(--accent);
            transform: translateX(4px);
        }

        .content-item.active {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .content-item-icon {
            width: 36px;
            height: 36px;
            background: var(--admin-bg);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
        }

        .content-item-info {
            flex: 1;
            min-width: 0;
        }

        .content-item-title {
            font-weight: 500;
            color: var(--admin-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content-item-meta {
            font-size: 12px;
            color: var(--text-muted);
        }

        .content-item-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .content-item-status.published {
            background: var(--success);
        }

        .content-item-status.draft {
            background: var(--warning);
        }

        /* THUMBNAIL UPLOAD ZONE */
        .thumbnail-preview {
            border: 2px dashed var(--admin-border);
            border-radius: var(--radius-md);
            padding: 24px;
            text-align: center;
            background: var(--admin-card-bg);
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            position: relative;
            min-height: 140px;
            justify-content: center;
        }

        .thumbnail-preview:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .thumbnail-preview i {
            font-size: 32px;
            color: var(--text-muted);
        }

        /* FIXED LAYOUT & INTERACTION RULES */
        .admin-body {
            display: flex;
            height: calc(100vh - 60px);
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .preview-panel {
            flex: 1;
            transition: flex 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .sidebar-panel {
            z-index: 1000;
        }

        .sidebar-toggle-btn {
            z-index: 1001;
            cursor: pointer;
        }

        .theme-dropdown.active {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

        /* PRELOADER STYLES */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-body);
            z-index: 999999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }

        #preloader.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        .loader-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .loader-spinner {
            width: 36px;
            height: 36px;
            border: 2px solid var(--border-color, rgba(0,0,0,0.1));
            border-top-color: var(--accent, #0058be);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .loader-text {
            font-family: var(--font-main);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted, #727785);
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 0.5;
            }

            50% {
                opacity: 1;
            }
        }

        /* LOGIN MODAL FIX - PREVENT FLASH */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .modal-overlay.active {
            display: flex;
            opacity: 1;
        }

        .admin-hidden-link {
            opacity: 0.1;
            color: inherit;
            text-decoration: none;
            margin-left: 10px;
            font-size: 11px;
        }

        /* GENERATED UTILITY CLASSES (FROM INLINE STYLES) */
        .u-style-1 {
            background: #0a0a0f !important;
        }

        .u-style-2 {
            background: #fff !important;
            border-color: #ddd !important;
        }

        .u-style-3 {
            background: #0c1929 !important;
        }

        .u-style-4 {
            background: #0f1a14 !important;
        }

        .u-style-5 {
            background: #faf8f5 !important;
            border-color: #ddd !important;
        }

        .u-style-6 {
            position: relative !important;
        }

        .u-style-7 {
            padding-right: 40px !important;
        }

        .u-style-8 {
            position: absolute !important;
            right: 10px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            background: none !important;
            border: none !important;
            color: var(--text-muted) !important;
            cursor: pointer !important;
        }

        .u-style-9 {
            width: 100% !important;
            margin-top: 8px !important;
        }

        .u-style-10 {
            width: 100% !important;
            margin-top: 12px !important;
        }

        .u-style-11 {
            max-width: 350px !important;
            text-align: center !important;
        }

        .u-style-12 {
            font-size: 48px !important;
            color: var(--warning) !important;
            margin-bottom: 16px !important;
            display: block !important;
        }

        .u-style-13 {
            display: flex !important;
            gap: 12px !important;
            margin-top: 24px !important;
        }

        .u-style-14 {
            flex: 1 !important;
        }

        .u-style-15 {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .u-style-16 {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }

        .u-style-17 {
            font-size: 13px !important;
            opacity: 0.8 !important;
            font-weight: 500 !important;
        }

        .u-style-18 {
            font-family: monospace !important;
            font-weight: 600 !important;
        }

        .u-style-19 {
            font-weight: 600 !important;
            margin-bottom: 8px !important;
            color: var(--accent) !important;
        }

        .u-style-20 {
            width: 140px !important;
        }

        .u-style-21 {
            background: #0f172a !important;
        }

        .u-style-22 {
            background: #ecfeff !important;
        }

        .u-style-23 {
            background: #f0fdf4 !important;
        }

        .u-style-24 {
            background: #fffbeb !important;
        }

        .u-style-25 {
            background: #fdf2f8 !important;
        }

        .u-style-26 {
            background: #fff7ed !important;
        }

        .u-style-27 {
            background: #f5f3ff !important;
        }

        .u-style-28 {
            background: #000 !important;
        }

        .u-style-29 {
            background: #fff !important;
            border: 1px solid #000 !important;
        }

        .u-style-30 {
            display: none !important;
        }

        .u-style-31 {
            position: absolute !important;
            right: 20px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            opacity: 0.2 !important;
        }

        .u-style-32 {
            display: grid !important;
            grid-template-columns: 2fr 1fr !important;
            gap: 24px !important;
            margin-top: 24px !important;
        }

        .u-style-33 {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 12px !important;
        }

        .u-style-34 {
            margin: 0 !important;
        }

        .u-style-35 {
            font-size: 11px !important;
            color: var(--text-muted) !important;
        }

        .u-style-36 {
            width: 100% !important;
            height: 120px !important;
            padding: 12px !important;
            border-radius: var(--radius-md) !important;
            border: 1px solid var(--admin-border) !important;
            background: var(--admin-bg) !important;
            color: var(--admin-text) !important;
            resize: none !important;
            font-family: var(--font-main) !important;
        }

        .u-style-37 {
            margin-top: 24px !important;
        }

        .u-style-38 {
            display: flex !important;
            align-items: center !important;
            gap: 16px !important;
        }

        .u-style-39 {
            width: 48px !important;
            height: 48px !important;
            background: rgba(255, 255, 255, 0.9) !important;
            border-radius: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        }

        .u-style-40 {
            margin: 0 !important;
            color: var(--admin-text) !important;
        }

        .u-style-41 {
            margin: 2px 0 0 !important;
            font-size: 13px !important;
            color: var(--text-muted) !important;
        }

        .u-style-42 {
            color: var(--text-muted) !important;
        }

        .u-style-43 {
            position: relative !important;
            height: 120px !important;
            background: var(--admin-card-bg) !important;
            border-radius: var(--radius-md) !important;
            padding: 16px !important;
            border: 1px solid var(--border-color) !important;
            margin-bottom: 12px !important;
        }

        .u-style-44 {
            background: var(--admin-card-bg) !important;
            border-radius: var(--radius-md) !important;
            padding: 16px !important;
            border: 1px solid var(--border-color) !important;
        }

        .u-style-45 {
            font-size: 18px !important;
            font-weight: 600 !important;
            color: var(--admin-text) !important;
            margin-bottom: 4px !important;
        }

        .u-style-46 {
            font-size: 12px !important;
            color: var(--text-muted) !important;
            margin-bottom: 12px !important;
        }

        .u-style-47 {
            width: 100% !important;
        }

        .u-style-48 {
            display: flex !important;
            gap: 8px !important;
        }

        .u-style-49 {
            pointer-events: none !important;
        }

        .u-style-50 {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            opacity: 0 !important;
            cursor: pointer !important;
        }

        .u-style-51 {
            margin-top: 8px !important;
        }

        .u-style-52 {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 8px !important;
        }

        .u-style-53 {
            display: flex !important;
            gap: 12px !important;
        }

        .u-style-54 {
            position: relative !important;
            display: inline-block !important;
        }

        .u-style-55 {
            margin-left: auto !important;
        }

        .u-style-56 {
            color: var(--accent) !important;
        }

        .u-style-57 {
            margin-left: auto !important;
            color: var(--success) !important;
        }

        .u-style-58 {
            margin-top: 16px !important;
            padding: 16px !important;
            background: var(--admin-card-bg) !important;
            border-radius: var(--radius-md) !important;
            border: 1px solid var(--admin-border) !important;
        }

        .u-style-59 {
            font-size: 13px !important;
            font-weight: 600 !important;
            margin-bottom: 8px !important;
            display: block !important;
        }

        .u-style-60 {
            margin-top: 16px !important;
        }

        .u-style-61 {
            margin-bottom: 8px !important;
            display: block !important;
        }

        .u-style-62 {
            padding: 20px !important;
        }

        .u-style-63 {
            font-size: 32px !important;
        }

        .u-style-64 {
            font-size: 12px !important;
        }

        .u-style-65 {
            display: flex !important;
            justify-content: space-between !important;
            margin-bottom: 4px !important;
            font-size: 12px !important;
        }

        .u-style-66 {
            font-weight: bold !important;
            color: var(--accent) !important;
        }

        .u-style-67 {
            width: 0% !important;
        }

        .u-style-68 {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 16px !important;
            flex-wrap: wrap !important;
            gap: 12px !important;
        }

        .u-style-69 {
            display: flex !important;
            gap: 8px !important;
            flex: 1 !important;
            max-width: 300px !important;
        }

        .u-style-70 {
            padding: 8px 12px !important;
            font-size: 13px !important;
        }

        .u-style-71 {
            margin-bottom: 12px !important;
            display: none !important;
        }

        .u-style-72 {
            font-size: 13px !important;
            color: var(--text-muted) !important;
            margin-left: 8px !important;
        }

        .u-style-73 {
            grid-column: 1/-1 !important;
            text-align: center !important;
            color: var(--text-muted) !important;
        }

        .u-style-74 {
            margin-top: 40px !important;
        }

        .u-style-75 {
            width: 100% !important;
            margin-top: 16px !important;
        }

        .u-style-76 {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            margin-bottom: 16px !important;
        }

        .analytics-logo {
            font-size: 28px;
            color: #f59e0b;
        }


        #preview-content {
            height: 100%;
            overflow-y: auto;
            padding-right: 4px;
        }

        /* ==================== SAVE STATUS FIX ==================== */
        .save-status {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 500;
            transition: opacity 0.5s ease, transform 0.3s ease;
        }

        .save-status.saved {
            background: var(--success-soft, rgba(34, 197, 94, 0.1));
            color: var(--success, #22c55e);
        }

        .save-status.unsaved {
            background: var(--warning-soft, rgba(245, 158, 11, 0.1));
            color: var(--warning, #f59e0b);
        }

        .save-status.saving {
            background: var(--accent-soft);
            color: var(--accent);
        }


        .save-status.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* NEW VISITOR CARD STYLES */
        .visitor-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 14px;
        }

        .visitor-stat-item {
            border: 1px solid var(--admin-border);
            border-radius: 10px;
            background: color-mix(in srgb, var(--admin-bg) 92%, var(--accent) 8%);
            padding: 12px;
        }

        .visitor-stat-value {
            display: block;
            color: var(--admin-text);
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: 6px;
        }

        .visitor-stat-label {
            display: block;
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .visitor-list {
            min-height: 96px;
        }

        .visitor-list-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 320px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .visitor-card {
            background: var(--admin-bg);
            border: 1px solid var(--admin-border);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }

        .visitor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
            border-color: color-mix(in srgb, var(--accent) 45%, var(--admin-border));
        }

        .visitor-icon-box {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: var(--accent-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 18px;
            flex: 0 0 auto;
        }

        .visitor-info {
            flex: 1;
            min-width: 0;
        }

        .visitor-location {
            font-weight: 650;
            font-size: 14px;
            color: var(--admin-text);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .visitor-time {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 4px;
        }

        .visitor-page {
            color: var(--text-muted);
            font-size: 11px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .visitor-badge {
            font-size: 10px;
            padding: 3px 7px;
            border-radius: 6px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .badge-gps {
            background: #dcfce7;
            color: #166534;
        }

        .badge-ip {
            background: #f3f4f6;
            color: #4b5563;
        }

        .visitor-empty {
            border: 1px dashed var(--admin-border);
            border-radius: 10px;
            color: var(--text-muted);
            font-size: 12px;
            padding: 18px;
            text-align: center;
        }

        .visitor-empty-error {
            color: var(--danger);
            border-color: color-mix(in srgb, var(--danger) 40%, var(--admin-border));
            background: color-mix(in srgb, var(--danger) 8%, transparent);
        }

        /* NEW STORAGE WIDGET STYLES */
        .storage-widget-card {
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
                var(--admin-bg);
            border: 1px solid var(--admin-border);
            border-radius: 14px;
            padding: 16px;
            display: flex;
            gap: 14px;
            align-items: center;
            box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
        }

        .storage-widget-card::after {
            content: '';
            position: absolute;
            inset: auto -36px -44px auto;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            pointer-events: none;
        }

        .storage-chart-area {
            position: relative;
            z-index: 1;
            flex: 0 0 82px;
        }

        .chart-wrapper {
            position: relative;
            width: 82px;
            height: 82px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, var(--admin-bg) 74%, var(--accent) 8%);
            border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--admin-border));
        }

        .chart-wrapper canvas {
            position: relative;
            z-index: 2;
            width: 82px !important;
            height: 82px !important;
        }

        .storage-chart-fallback {
            position: absolute;
            inset: 18px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: var(--admin-bg);
            color: var(--accent);
            font-size: 22px;
            z-index: 1;
            box-shadow: inset 0 0 0 1px var(--admin-border);
        }

        .storage-info-area {
            position: relative;
            z-index: 1;
            min-width: 0;
            flex: 1;
        }

        .storage-kicker {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--accent);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .storage-title {
            margin: 0 0 8px;
            color: var(--admin-text);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: none;
        }

        .storage-value {
            color: var(--admin-text);
            font-size: 20px;
            font-weight: 800;
            line-height: 1.18;
            margin-bottom: 5px;
            overflow-wrap: anywhere;
        }

        .storage-sub {
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.35;
            margin-bottom: 12px;
        }

        .btn-storage-calc {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 34px;
            padding: 8px 12px;
            border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--admin-border));
            border-radius: 9px;
            background: var(--accent);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
            box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
        }

        .btn-storage-calc:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 32%, transparent);
        }

        .btn-storage-calc:active {
            transform: translateY(0);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
        }

/* =====================================================
   LAYOUT FOUNDATION — container, max-width, padding
   ===================================================== */

html {
    overflow-x: hidden;
}

/* Search textarea reset: keeps password managers away without showing native textarea chrome. */
.search-box #search-input {
    display: block;
    width: 100%;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    padding: 8px 16px 8px 38px;
    border: 1px solid color-mix(in srgb, var(--public-accent, var(--accent)) 22%, transparent);
    border-radius: 999px;
    background: var(--public-panel, rgba(255, 255, 255, 0.06));
    color: var(--public-ink, var(--text-primary));
    font: 13px/20px inherit;
    resize: none;
    overflow: hidden;
    outline: none;
    appearance: none;
}

.search-box #search-input::placeholder {
    color: var(--public-muted, var(--text-muted));
}

.search-box #search-input:focus {
    border-color: var(--public-accent, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-accent, var(--accent)) 18%, transparent);
}

/* Don't set overflow-x on body — breaks position:fixed admin panel */
body {
    max-width: 100%;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition), color var(--transition);
}

.container {
    width: 100%;
    padding-left: clamp(16px, 3vw, 48px);
    padding-right: clamp(16px, 3vw, 48px);
    box-sizing: border-box;
}

/* Prevent any child from overflowing the container */
.page-section {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Article content overflow protection */
.article-content,
.article-content * {
    max-width: 100%;
    box-sizing: border-box;
}
.article-content img,
.article-content video,
.article-content iframe,
.article-content table {
    max-width: 100% !important;
    height: auto;
}
.article-content {
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Section wrapper from showSection() */
.section.active {
    max-width: 100%;
    overflow-x: hidden;
}

/* =====================================================
   4-PAGE SPA LAYOUT — page-nav, home, blog, about, contact
   ===================================================== */

/* Page nav (Stitch-style: HOME / BLOG / ABOUT / CONTACT) */
.page-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.page-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, opacity 0.2s;
    cursor: pointer;
}

.page-nav-link:hover {
    color: var(--accent);
    opacity: 0.7;
}

.page-nav-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Page sections */
.page-section {
    min-height: calc(100vh - 80px);
}

/* =====================================================
   HOME PAGE
   ===================================================== */

/* Hero */
.home-hero {
    padding: 100px 0 80px;
    border-bottom: 1px solid var(--border-color);
}

.home-hero-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 60px;
    align-items: center;
}

.home-hero-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-hero-name {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}

.home-hero-name-link {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.home-hero-name-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.home-hero-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.home-hero-divider {
    width: 40px;
    height: 1px;
    background: var(--border-color);
    margin-top: 12px;
}

.home-hero-avatar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.home-hero-avatar img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    filter: grayscale(100%);
    transition: filter 0.6s ease, transform 0.4s ease;
    display: block;
}

.home-hero-avatar img:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* Featured Post */
.home-featured {
    padding: 60px 0;
}

.home-managed {
    padding: 48px 0 12px;
}

.home-managed-body {
    max-width: 840px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.85;
}

.home-managed-body p {
    margin: 0 0 18px;
}

.home-managed-body :is(h1, h2, h3) {
    color: var(--text-primary);
    line-height: 1.25;
    margin: 0 0 16px;
}

.home-managed-action {
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.home-managed-action:hover {
    color: var(--text-primary);
    transform: translateY(-3px);
}

.home-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.home-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.home-section-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
    opacity: 0.4;
}

.home-featured-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
    cursor: pointer;
}

.home-featured-grid:hover .home-featured-img img {
    transform: scale(1.04);
}

.home-featured-img {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    aspect-ratio: 16/10;
}

.home-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.home-featured-img--empty {
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--text-muted);
}

.home-featured-info--wide {
    padding: 48px 0;
    max-width: 720px;
}

.home-featured-img-placeholder {
    border-radius: 12px;
    background: var(--bg-secondary);
    aspect-ratio: 16/10;
    animation: pulse 1.5s ease-in-out infinite;
}

.home-featured-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
}

.home-featured-cat {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    display: block;
}

.home-featured-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 20px;
    transition: color 0.2s;
}

.home-featured-grid:hover .home-featured-title {
    color: var(--accent);
}

.home-featured-excerpt {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-featured-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.home-featured-content-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 24px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Newsletter */
.home-newsletter {
    padding: 80px 0 100px;
}

.newsletter-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1120px;
    margin: 0 auto;
}

.newsletter-icon {
    font-size: 36px;
    color: var(--accent);
    margin-bottom: 20px;
}

.newsletter-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.newsletter-desc {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 440px;
    margin: 0 0 36px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 440px;
}

.newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.newsletter-input:focus {
    border-bottom-color: var(--accent);
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

.newsletter-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.newsletter-btn:hover {
    opacity: 0.85;
}

/* =====================================================
   BLOG PAGE
   ===================================================== */

.blog-page-header {
    padding: 60px 0 32px;
}

.blog-page-title {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.blog-page-title-link {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.blog-page-title-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-hero {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 24px;
    align-items: center;
    padding: 80px 0 100px;
}

.about-hero-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.about-hero-bio {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    max-width: 500px;
}

.about-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.about-hero-photo {
    display: flex;
    justify-content: flex-end;
}

.about-hero-photo img {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Experience Section */
.about-experience {
    padding: 0 0 80px;
}

.about-experience-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 40px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

/* Bento Grid */
.about-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
}

.bento-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.2s;
}

.bento-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.bento-wide {
    grid-column: span 2;
}

.bento-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bento-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.bento-card-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.bento-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.bento-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.bento-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 8px;
}

.bento-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.bento-tag {
    padding: 5px 12px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-header {
    padding: 80px 0 48px;
    text-align: center;
}

.contact-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.contact-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.contact-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 60px;
    padding-bottom: 80px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-submit {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.contact-socials {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.contact-social-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.contact-social-item:hover {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.contact-social-item i {
    font-size: 20px;
    color: var(--accent);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

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

    .page-nav {
        gap: 16px;
    }

    .page-nav-link {
        font-size: 11px;
    }

    .home-hero-inner {
        grid-template-columns: 1fr;
    }

    .home-hero-avatar {
        justify-content: center;
        order: -1;
        margin-bottom: 16px;
    }

    .home-hero-avatar img {
        width: 140px;
        height: 140px;
    }

    .home-featured-grid {
        grid-template-columns: 1fr;
    }

    .home-featured-info {
        padding: 24px 0 0;
    }

    .newsletter-card {
        padding: 40px 24px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .about-hero {
        grid-template-columns: 1fr;
        padding: 60px 0 60px;
    }

    .about-hero-photo {
        justify-content: center;
        order: -1;
    }

    .about-hero-photo img {
        max-width: 280px;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .about-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .bento-wide {
        grid-column: span 1;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .home-hero {
        padding: 80px 0 40px;
    }

    .home-hero-name {
        font-size: 32px;
    }
}

/* =====================================================
   PUBLIC THEME SURFACE
   ===================================================== */

html,
body {
    min-height: 100%;
}

body[data-theme] {
    --bg-body: var(--bg-primary);
    --surface: var(--bg-secondary);
    --border: var(--border-color);
    --public-bg: #f7f4ed;
    --public-panel: #fffaf2;
    --public-panel-strong: #ece4d4;
    --public-ink: #171717;
    --public-muted: #5f625e;
    --public-accent: #315f46;
    --public-header: #1c2a22;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    transition: none;
}

body[data-theme="light"] {
    --public-bg: #f7f7f2;
    --public-panel: #ffffff;
    --public-panel-strong: #ecece4;
    --public-ink: #151515;
    --public-muted: #5d5d57;
    --public-accent: #2f5f73;
    --public-header: #ffffff;
}

html:has(body[data-theme="dark"]),
body[data-theme="dark"] {
    --public-bg: #f3efe6;
    --public-panel: #fffaf0;
    --public-panel-strong: #1b1b1f;
    --public-ink: #171717;
    --public-muted: #5b5b5f;
    --public-accent: #1b1b1f;
    --public-header: #121216;
    background-color: var(--public-bg) !important;
    color: var(--public-ink);
}

html:has(body[data-theme="ocean"]),
body[data-theme="ocean"] {
    --public-bg: #f2f8fa;
    --public-panel: #ffffff;
    --public-panel-strong: #d8edf3;
    --public-ink: #10232d;
    --public-muted: #536d77;
    --public-accent: #1d7890;
    --public-header: #dff2f8;
    background-color: var(--public-bg) !important;
    color: var(--public-ink);
}

html:has(body[data-theme="forest"]),
body[data-theme="forest"] {
    --public-bg: #f4f8f1;
    --public-panel: #ffffff;
    --public-panel-strong: #dfead8;
    --public-ink: #142017;
    --public-muted: #5d6f5b;
    --public-accent: #356b44;
    --public-header: #e6f0df;
    background-color: var(--public-bg) !important;
    color: var(--public-ink);
}

html:has(body[data-theme="cream"]),
body[data-theme="cream"] {
    --public-bg: #fbf4e7;
    --public-panel: #fffaf0;
    --public-panel-strong: #eadcc4;
    --public-ink: #2f2418;
    --public-muted: #755f46;
    --public-accent: #9a6236;
    --public-header: #f1dfc3;
    background-color: var(--public-bg) !important;
    color: var(--public-ink);
}

html:has(body[data-theme="light"]),
body[data-theme="light"] {
    background-color: var(--public-bg) !important;
    color: var(--public-ink);
}

body[data-theme] #main-content,
body[data-theme] .page-section,
body[data-theme] .home-hero,
body[data-theme] .home-managed,
body[data-theme] .home-featured,
body[data-theme] .blog-page-header,
body[data-theme] .about-hero,
body[data-theme] .about-experience,
body[data-theme] .contact-header,
body[data-theme] .contact-layout,
body[data-theme] .site-footer {
    background-color: var(--public-bg);
    color: var(--public-ink);
}

body[data-theme] .site-header {
    background: var(--public-header);
    color: var(--public-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--public-accent) 35%, transparent);
    box-shadow: none;
}

body[data-theme="dark"] .site-header {
    color: #f8fafc;
}

body[data-theme] .home-hero {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--public-accent) 30%, transparent);
    background:
        linear-gradient(90deg, var(--public-accent) 0 10px, transparent 10px),
        linear-gradient(180deg, var(--public-panel) 0%, var(--public-bg) 100%);
}

body[data-theme] .home-featured,
body[data-theme] .home-managed,
body[data-theme] .about-experience,
body[data-theme] .contact-layout {
    border-top: 1px solid color-mix(in srgb, var(--public-accent) 24%, transparent);
}

body[data-theme] .home-section-header {
    padding-top: 18px;
}

body[data-theme] .brand-text span,
body[data-theme] .home-hero-name,
body[data-theme] .blog-page-title,
body[data-theme] .about-hero-title,
body[data-theme] .about-experience-title,
body[data-theme] .contact-title,
body[data-theme] .newsletter-title,
body[data-theme] .home-managed-body,
body[data-theme] .home-managed-body :is(h1, h2, h3),
body[data-theme] .bento-card-title,
body[data-theme] .contact-social-item {
    color: var(--public-ink);
}

body[data-theme] .page-nav-link,
body[data-theme] .home-hero-tagline,
body[data-theme] .home-section-label,
body[data-theme] .newsletter-desc,
body[data-theme] .about-hero-bio,
body[data-theme] .bento-card-text,
body[data-theme] .bento-stat-label,
body[data-theme] .contact-subtitle,
body[data-theme] .copyright {
    color: var(--public-muted);
}

body[data-theme] .home-hero-divider,
body[data-theme] .home-section-line {
    background-color: color-mix(in srgb, var(--public-accent) 35%, transparent);
}

body[data-theme] .search-box input,
body[data-theme] .search-box textarea,
body[data-theme] .theme-btn,
body[data-theme] .social-link,
body[data-theme] .theme-dropdown,
body[data-theme] .newsletter-card,
body[data-theme] .bento-card,
body[data-theme] .contact-social-item {
    background-color: var(--public-panel);
    border-color: color-mix(in srgb, var(--public-accent) 20%, transparent);
}

body[data-theme] .newsletter-card,
body[data-theme] .bento-card,
body[data-theme] .contact-social-item {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--public-accent) 18%, transparent);
}

body[data-theme] .search-box input,
body[data-theme] .search-box textarea {
    color: var(--public-ink);
}

body[data-theme] .search-box input::placeholder,
body[data-theme] .search-box textarea::placeholder,
body[data-theme] .search-box i,
body[data-theme] .theme-btn,
body[data-theme] .social-link,
body[data-theme] .theme-option {
    color: var(--public-muted);
}

body[data-theme] .theme-option:hover,
body[data-theme] .page-nav-link:hover,
body[data-theme] .page-nav-link.active {
    color: var(--public-accent);
}

body[data-theme] .page-nav-link.active {
    border-bottom-color: var(--public-accent);
}

body[data-theme]:not(.admin-active) .btn,
body[data-theme]:not(.admin-active) .theme-btn,
body[data-theme]:not(.admin-active) .social-link,
body[data-theme]:not(.admin-active) .newsletter-btn,
body[data-theme]:not(.admin-active) .sub-nav-btn,
body[data-theme]:not(.admin-active) .category-card,
body[data-theme]:not(.admin-active) .home-featured-grid,
body[data-theme]:not(.admin-active) .contact-social-item,
body[data-theme]:not(.admin-active) .back-to-grid-btn {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

body[data-theme]:not(.admin-active) .btn:hover,
body[data-theme]:not(.admin-active) .theme-btn:hover,
body[data-theme]:not(.admin-active) .social-link:hover,
body[data-theme]:not(.admin-active) .newsletter-btn:hover,
body[data-theme]:not(.admin-active) .sub-nav-btn:hover,
body[data-theme]:not(.admin-active) .category-card:hover,
body[data-theme]:not(.admin-active) .home-featured-grid:hover,
body[data-theme]:not(.admin-active) .contact-social-item:hover,
body[data-theme]:not(.admin-active) .back-to-grid-btn:hover {
    transform: translateY(-4px);
    border-color: var(--public-accent);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

body[data-theme]:not(.admin-active) .btn:active,
body[data-theme]:not(.admin-active) .theme-btn:active,
body[data-theme]:not(.admin-active) .social-link:active,
body[data-theme]:not(.admin-active) .newsletter-btn:active,
body[data-theme]:not(.admin-active) .sub-nav-btn:active,
body[data-theme]:not(.admin-active) .category-card:active,
body[data-theme]:not(.admin-active) .home-featured-grid:active,
body[data-theme]:not(.admin-active) .contact-social-item:active,
body[data-theme]:not(.admin-active) .back-to-grid-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

body[data-theme]:not(.admin-active) .page-nav-link {
    transition:
        transform 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

body[data-theme]:not(.admin-active) .page-nav-link:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    body[data-theme]:not(.admin-active) .btn,
    body[data-theme]:not(.admin-active) .theme-btn,
    body[data-theme]:not(.admin-active) .social-link,
    body[data-theme]:not(.admin-active) .newsletter-btn,
    body[data-theme]:not(.admin-active) .sub-nav-btn,
    body[data-theme]:not(.admin-active) .category-card,
    body[data-theme]:not(.admin-active) .home-featured-grid,
    body[data-theme]:not(.admin-active) .contact-social-item,
    body[data-theme]:not(.admin-active) .back-to-grid-btn,
    body[data-theme]:not(.admin-active) .page-nav-link {
        transition: none;
    }

    body[data-theme]:not(.admin-active) .btn:hover,
    body[data-theme]:not(.admin-active) .theme-btn:hover,
    body[data-theme]:not(.admin-active) .social-link:hover,
    body[data-theme]:not(.admin-active) .newsletter-btn:hover,
    body[data-theme]:not(.admin-active) .sub-nav-btn:hover,
    body[data-theme]:not(.admin-active) .category-card:hover,
    body[data-theme]:not(.admin-active) .home-featured-grid:hover,
    body[data-theme]:not(.admin-active) .contact-social-item:hover,
    body[data-theme]:not(.admin-active) .back-to-grid-btn:hover,
    body[data-theme]:not(.admin-active) .page-nav-link:hover {
        transform: none;
    }
}

/* =====================================================
   PUBLIC POLISH 2026-05-27
   ===================================================== */

body[data-theme]:not(.admin-active) {
    --public-bg: #eef7fa;
    --public-bg-top: rgba(255, 255, 255, 0.72);
    --public-panel: #ffffff;
    --public-panel-strong: #dceff5;
    --public-ink: #10212c;
    --public-muted: #536b7a;
    --public-nav: #3f5665;
    --public-accent: #00748a;
    --public-accent-strong: #005f72;
    --public-border: #c7dce6;
    --public-header: rgba(246, 252, 254, 0.96);
    --public-control: #ffffff;
    --public-footer: #e7f3f7;
    --public-soft-shadow: 0 12px 34px rgba(16, 33, 44, 0.08);
    --public-card-shadow: 0 1px 0 rgba(16, 33, 44, 0.06);
    background: var(--public-bg) !important;
    color: var(--public-ink);
    font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body[data-theme="dark"]:not(.admin-active) {
    --public-bg: #101318;
    --public-bg-top: rgba(30, 35, 43, 0.78);
    --public-panel: #181d25;
    --public-panel-strong: #232a35;
    --public-ink: #f4f7fb;
    --public-muted: #aab6c4;
    --public-nav: #c7d1dc;
    --public-accent: #7cc7ff;
    --public-accent-strong: #4ea9ee;
    --public-border: #303946;
    --public-header: rgba(14, 17, 22, 0.96);
    --public-control: #151a21;
    --public-footer: #0d1015;
    --public-soft-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
    --public-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="ocean"]:not(.admin-active) {
    --public-bg: #e8f7fb;
    --public-bg-top: rgba(255, 255, 255, 0.74);
    --public-panel: #ffffff;
    --public-panel-strong: #cdebf3;
    --public-ink: #0d2936;
    --public-muted: #4f7180;
    --public-nav: #315d70;
    --public-accent: #087f9b;
    --public-accent-strong: #056a82;
    --public-border: #a8d7e3;
    --public-header: rgba(230, 248, 252, 0.96);
    --public-control: #ffffff;
    --public-footer: #d8f0f6;
}

body[data-theme="forest"]:not(.admin-active) {
    --public-bg: #edf6ec;
    --public-bg-top: rgba(255, 255, 255, 0.7);
    --public-panel: #ffffff;
    --public-panel-strong: #d7ead5;
    --public-ink: #142418;
    --public-muted: #526d56;
    --public-nav: #385d3f;
    --public-accent: #2f7a41;
    --public-accent-strong: #246333;
    --public-border: #b9d8b8;
    --public-header: rgba(236, 247, 234, 0.96);
    --public-control: #ffffff;
    --public-footer: #e0efdd;
}

body[data-theme="cream"]:not(.admin-active) {
    --public-bg: #fbf2e4;
    --public-bg-top: rgba(255, 250, 241, 0.78);
    --public-panel: #fffaf2;
    --public-panel-strong: #ead8bd;
    --public-ink: #302418;
    --public-muted: #755f46;
    --public-nav: #654c34;
    --public-accent: #a26133;
    --public-accent-strong: #884d28;
    --public-border: #e1cab0;
    --public-header: rgba(255, 247, 235, 0.96);
    --public-control: #fffaf2;
    --public-footer: #f0dfc7;
}

body[data-theme]:not(.admin-active) #main-content {
    min-height: calc(100vh - 92px);
    background:
        linear-gradient(180deg, var(--public-bg-top), color-mix(in srgb, var(--public-bg) 0%, transparent) 280px),
        var(--public-bg);
}

body[data-theme]:not(.admin-active) .site-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--public-header);
    border-bottom: 1px solid var(--public-border);
    box-shadow: 0 8px 28px rgba(16, 33, 44, 0.06);
    backdrop-filter: blur(18px);
}

body[data-theme]:not(.admin-active) .header-inner {
    min-height: 82px;
    gap: 22px;
}

body[data-theme]:not(.admin-active) .brand {
    gap: 10px;
    min-width: 54px;
}

body[data-theme]:not(.admin-active) .brand-avatar {
    width: 52px;
    height: 52px;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 116, 138, 0.18);
}

body[data-theme]:not(.admin-active) .brand-text {
    display: none;
}

body[data-theme]:not(.admin-active) .page-nav {
    gap: 22px;
    align-items: center;
}

body[data-theme]:not(.admin-active) .page-nav-link {
    height: 82px;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    border-bottom: 2px solid transparent;
    color: var(--public-nav);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

body[data-theme]:not(.admin-active) .page-nav-link:hover,
body[data-theme]:not(.admin-active) .page-nav-link.active {
    color: var(--public-accent);
    border-bottom-color: var(--public-accent);
}

body[data-theme]:not(.admin-active) .header-actions {
    gap: 10px;
}

body[data-theme]:not(.admin-active) .search-box {
    height: 46px;
    min-width: 260px;
}

body[data-theme]:not(.admin-active) .search-box textarea,
body[data-theme]:not(.admin-active) .search-box input {
    height: 46px;
    min-height: 46px;
    border-radius: 999px;
    background: var(--public-control);
    border: 1px solid var(--public-border);
    color: var(--public-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme]:not(.admin-active) .theme-btn,
body[data-theme]:not(.admin-active) .social-link {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--public-control);
    border: 1px solid var(--public-border);
    color: var(--public-nav);
    box-shadow: var(--public-card-shadow);
}

body[data-theme]:not(.admin-active) .theme-btn:hover,
body[data-theme]:not(.admin-active) .social-link:hover {
    transform: translateY(-2px);
    color: var(--public-accent);
    border-color: color-mix(in srgb, var(--public-accent) 45%, #ffffff);
    box-shadow: 0 10px 24px rgba(16, 33, 44, 0.12);
}

body[data-theme]:not(.admin-active) .theme-dropdown {
    border: 1px solid var(--public-border);
    background: color-mix(in srgb, var(--public-control) 96%, transparent);
    box-shadow: 0 24px 50px rgba(16, 33, 44, 0.16);
}

body[data-theme]:not(.admin-active) .home-hero {
    min-height: clamp(360px, 52vh, 560px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--public-border);
    background:
        linear-gradient(180deg, var(--public-bg-top), color-mix(in srgb, var(--public-bg) 94%, transparent)),
        var(--public-bg);
}

body[data-theme]:not(.admin-active) .home-hero-inner {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 24px;
    padding: 54px 0;
}

body[data-theme]:not(.admin-active) .home-hero-text {
    display: none;
}

body[data-theme]:not(.admin-active) .home-hero-avatar {
    width: clamp(154px, 19vw, 224px);
    height: clamp(154px, 19vw, 224px);
    border-radius: 999px;
    padding: 7px;
    background: var(--public-control);
    border: 1px solid var(--public-border);
    box-shadow: 0 20px 48px rgba(16, 33, 44, 0.14);
}

body[data-theme]:not(.admin-active) .home-hero-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center 42%;
    filter: none;
}

body[data-theme]:not(.admin-active) .blog-page-header,
body[data-theme]:not(.admin-active) .home-managed,
body[data-theme]:not(.admin-active) .home-featured,
body[data-theme]:not(.admin-active) .about-hero,
body[data-theme]:not(.admin-active) .about-experience,
body[data-theme]:not(.admin-active) .contact-header,
body[data-theme]:not(.admin-active) .contact-layout {
    background: transparent;
    border-top-color: var(--public-border);
}

body[data-theme]:not(.admin-active) .blog-page-title,
body[data-theme]:not(.admin-active) .home-section-label,
body[data-theme]:not(.admin-active) .about-hero-title,
body[data-theme]:not(.admin-active) .contact-title {
    color: var(--public-ink);
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0;
}

body[data-theme]:not(.admin-active) .home-section-label {
    color: var(--public-nav);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

body[data-theme]:not(.admin-active) .home-section-line,
body[data-theme]:not(.admin-active) .home-hero-divider {
    background: var(--public-border);
}

body[data-theme]:not(.admin-active) .category-card,
body[data-theme]:not(.admin-active) .home-featured-grid,
body[data-theme]:not(.admin-active) .newsletter-card,
body[data-theme]:not(.admin-active) .bento-card,
body[data-theme]:not(.admin-active) .contact-social-item,
body[data-theme]:not(.admin-active) .content-item {
    background: var(--public-panel);
    border: 1px solid var(--public-border);
    border-radius: 8px;
    box-shadow: var(--public-card-shadow);
}

body[data-theme]:not(.admin-active) .category-card:hover,
body[data-theme]:not(.admin-active) .home-featured-grid:hover,
body[data-theme]:not(.admin-active) .contact-social-item:hover,
body[data-theme]:not(.admin-active) .content-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--public-accent) 48%, #ffffff);
    box-shadow: var(--public-soft-shadow);
}

body[data-theme]:not(.admin-active) .sub-nav-btn {
    border-radius: 999px;
    background: var(--public-control);
    border: 1px solid var(--public-border);
    color: var(--public-nav);
    font-weight: 700;
}

body[data-theme]:not(.admin-active) .sub-nav-btn:hover,
body[data-theme]:not(.admin-active) .sub-nav-btn.active {
    background: var(--public-accent);
    border-color: var(--public-accent);
    color: #ffffff;
}

body[data-theme]:not(.admin-active) .site-footer {
    background: var(--public-footer);
    border-top: 1px solid var(--public-border);
    color: var(--public-muted);
}

body[data-theme]:not(.admin-active) .footer-content {
    min-height: 190px;
    display: grid;
    gap: 22px;
    justify-items: center;
    align-content: center;
}

body[data-theme]:not(.admin-active) .footer-links {
    display: flex;
    gap: 12px;
    justify-content: center;
}

body[data-theme]:not(.admin-active) .copyright {
    color: var(--public-muted);
    font-size: 0.86rem;
}

body[data-theme]:not(.admin-active) .admin-link {
    color: color-mix(in srgb, var(--public-muted) 55%, transparent);
}

@media (max-width: 900px) {
    body[data-theme]:not(.admin-active) .header-inner {
        min-height: 74px;
        gap: 14px;
    }

    body[data-theme]:not(.admin-active) .page-nav-link {
        height: 74px;
        font-size: 0.72rem;
    }

    body[data-theme]:not(.admin-active) .search-box {
        min-width: 180px;
    }
}

@media (max-width: 640px) {
    body[data-theme]:not(.admin-active) .site-header {
        position: sticky;
    }

    body[data-theme]:not(.admin-active) .header-inner {
        min-height: auto;
        padding: 10px 0;
        flex-wrap: wrap;
    }

    body[data-theme]:not(.admin-active) .page-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 16px;
    }

    body[data-theme]:not(.admin-active) .page-nav-link {
        height: 38px;
    }

    body[data-theme]:not(.admin-active) .search-box {
        min-width: 0;
        flex: 1 1 150px;
    }

    body[data-theme]:not(.admin-active) .home-hero {
        min-height: 330px;
    }
}

/* ===== Anasayfa Widget'lari: saat + Bingol hava + gunun sozu ===== */
.home-widgets { padding: 8px 0 72px; }
.home-widgets .container { max-width: 680px; }
.hw-strip {
    display: flex; align-items: center; justify-content: center; gap: 30px;
    background: #ffffff; border: 1px solid #e7eef3; border-radius: 18px;
    padding: 16px 30px; box-shadow: 0 10px 30px rgba(20,40,60,.06);
    margin: 0 auto 22px; max-width: 480px;
}
.hw-item { display: flex; align-items: center; gap: 12px; }
.hw-item > i { font-size: 26px; color: #2c9aa6; }
.hw-texts { display: flex; flex-direction: column; line-height: 1.15; }
.hw-main { font-size: 20px; font-weight: 700; color: #1c2b3a; font-variant-numeric: tabular-nums; }
.hw-sub { font-size: 12px; color: #7c8b9a; text-transform: capitalize; }
.hw-sep { width: 1px; height: 36px; background: #e7eef3; }
.hw-quote {
    position: relative; background: linear-gradient(135deg, #f7fbfc, #eef5f7);
    border: 1px solid #e3edf1; border-radius: 18px; padding: 24px 30px 26px;
    text-align: center; max-width: 600px; margin: 0 auto;
}
.hw-quote-mark { font-size: 30px; color: #bcd6db; display: block; margin-bottom: 4px; }
.hw-quote-text { font-size: 18px; font-style: italic; color: #243240; margin: 0 0 10px; line-height: 1.55; }
.hw-quote-author { font-size: 13px; font-weight: 600; color: #2c9aa6; letter-spacing: .3px; }
@media (max-width: 560px) {
    .hw-strip { gap: 18px; padding: 14px 18px; }
    .hw-quote-text { font-size: 16px; }
}

.home-widgets .container { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ===== Akan hos geldiniz seridi ===== */
.home-welcome {
    overflow: hidden; width: 100%; padding: 13px 0;
    border-bottom: 1px solid #e7eef3;
    background: linear-gradient(90deg, #f4fbfc, #eaf4f6);
    margin-bottom: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-welcome-track {
    display: inline-flex; white-space: nowrap; will-change: transform;
    animation: hwMarquee 26s linear infinite;
}
.home-welcome-track span {
    font-size: 15px; font-weight: 600; letter-spacing: .4px; color: #2c7c86;
}
.home-welcome:hover .home-welcome-track { animation-play-state: paused; }
@keyframes hwMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .home-welcome-track { animation: none; }
}

/* ===== Anasayfa donen noktali dunya kuresi ===== */
.home-hero-visual { display: flex; align-items: center; justify-content: center; gap: 54px; flex-wrap: wrap; }
.home-globe {
    --d: 230px; position: relative; width: var(--d); height: var(--d);
    border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 34% 30%, #1f5891 0%, #123e6b 52%, #0a2848 100%);
}
.home-globe::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    box-shadow: 0 0 30px 3px rgba(110, 195, 255, .30); pointer-events: none;
}
.home-globe-map { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.home-globe-map::before {
    content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 400%;
    background: url('/world-dots.png?v=3') repeat-x; background-size: 50% 100%;
    mix-blend-mode: screen; opacity: .95;
    animation: globeSpin 32s linear infinite;
}
.home-globe-shine {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 40%),
        radial-gradient(circle at 70% 78%, rgba(2,12,28,.55), rgba(2,12,28,0) 62%);
    box-shadow: inset -12px -14px 36px rgba(0,0,0,.5), inset 12px 14px 32px rgba(120,185,235,.18);
}
@keyframes globeSpin { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) { .home-globe { --d: 152px; } .home-hero-visual { gap: 26px; } }
@media (prefers-reduced-motion: reduce) { .home-globe-map::before { animation: none; } }

/* Kure renk tonu duzeltmesi: yumusak koyu teal */
.home-globe { background: radial-gradient(circle at 34% 30%, #2b6076 0%, #184457 52%, #0e2f40 100%); }
.home-globe::after { box-shadow: 0 0 24px 2px rgba(120,200,205,.20); }
.home-globe-map::before { opacity: .82; }
.home-globe-shine {
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.36), rgba(255,255,255,0) 42%),
        radial-gradient(circle at 70% 78%, rgba(6,26,34,.5), rgba(6,26,34,0) 62%);
    box-shadow: inset -12px -14px 34px rgba(0,0,0,.42), inset 12px 14px 30px rgba(140,205,205,.16);
}

/* ===== Anasayfa elektrik devresi kuresi (kure ile simetrik) ===== */
.home-circuit {
    --d: 230px; position: relative; width: var(--d); height: var(--d);
    border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 34% 30%, #2b6076 0%, #184457 52%, #0e2f40 100%);
}
.home-circuit::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    box-shadow: 0 0 24px 2px rgba(120,200,205,.20); pointer-events: none;
}
.home-circuit-svg {
    position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
    filter: drop-shadow(0 0 3px rgba(180,240,235,.35));
}
@media (max-width: 560px) { .home-circuit { --d: 152px; } }

/* Anasayfa gorsellerini biraz buyut (kure + devre + fotograf) */
.home-globe, .home-circuit { --d: 280px; }
body[data-theme]:not(.admin-active) .home-hero-avatar {
    width: clamp(180px, 22vw, 280px); height: clamp(180px, 22vw, 280px);
}
@media (max-width: 560px) {
    .home-globe, .home-circuit { --d: 178px; }
}

/* ===== Anasayfa yan paneller (ici sonra doldurulacak) ===== */
body[data-theme]:not(.admin-active) .home-hero-inner { width: min(1340px, calc(100% - 28px)); }
.home-hero-visual { gap: 30px; }
.home-side-panel {
    flex: 0 0 auto; width: 172px; height: 300px; border-radius: 20px;
    align-self: center;
}
.hsp-left {
    background: linear-gradient(160deg, #eaf7f8, #d3ecef);
    border: 1px solid #cbe4e8;
    box-shadow: 0 16px 38px rgba(20, 70, 80, .10);
}
.hsp-right {
    background: linear-gradient(160deg, #f1eefb, #e1dbf6);
    border: 1px solid #d9d2f1;
    box-shadow: 0 16px 38px rgba(60, 45, 110, .10);
}
@media (max-width: 1100px) {
    .home-side-panel { width: 100%; max-width: 360px; height: 130px; }
}

/* ===== Yan paneller: tam kenarda, buyuk, sik koyu tonlar (override) ===== */
.home-hero { position: relative; min-height: 580px; }
body[data-theme]:not(.admin-active) .home-hero-inner { width: min(1000px, calc(100% - 40px)); }
.home-hero-visual { gap: 34px; }
.home-side-panel {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: clamp(190px, 16vw, 280px); height: clamp(400px, 62vh, 560px);
    z-index: 1; box-shadow: 0 26px 64px rgba(14, 36, 54, .20);
    flex: none; align-self: auto;
}
.hsp-left {
    left: 0; right: auto; border-radius: 0 28px 28px 0;
    background: linear-gradient(155deg, #1d6f7e 0%, #103b48 100%);
    border-right: 1px solid rgba(150, 220, 228, .28);
}
.hsp-right {
    right: 0; left: auto; border-radius: 28px 0 0 28px;
    background: linear-gradient(155deg, #3a4684 0%, #1a2348 100%);
    border-left: 1px solid rgba(180, 185, 240, .26);
}
@media (max-width: 1180px) { .home-side-panel { display: none; } }

/* ===== Yan panel ic icerik (Hizli Erisim + Son Yazilar) ===== */
.hsp-inner { position: absolute; inset: 0; padding: 28px 22px; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }
.hsp-title { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.hsp-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px;
    background: rgba(255,255,255,.08); color: #eef7f8; text-decoration: none; font-weight: 600; font-size: 15px;
    border: 1px solid rgba(255,255,255,.12); transition: background .2s ease, transform .2s ease; }
.hsp-link > i:first-child { font-size: 18px; opacity: .92; }
.hsp-link .hsp-arrow { margin-left: auto; font-size: 18px; opacity: .55; }
.hsp-link:hover { background: rgba(255,255,255,.17); transform: translateX(3px); }
.hsp-foot { margin-top: auto; font-size: 12px; letter-spacing: .5px; color: rgba(255,255,255,.5); }
.hsp-latest { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.hsp-post { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border-radius: 12px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); text-decoration: none;
    transition: background .2s ease, transform .2s ease; }
.hsp-post:hover { background: rgba(255,255,255,.17); transform: translateX(3px); }
.hsp-post-title { color: #f1f2fc; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.hsp-post-date { color: rgba(255,255,255,.62); font-size: 12px; }
.hsp-empty { color: rgba(255,255,255,.6); font-size: 14px; padding: 8px 2px; }

/* Gunun sozu yumusak gecis (arada bir degisir) */
.hw-quote-text, .hw-quote-author { transition: opacity .35s ease; }
.hw-quote.hw-quote-fade .hw-quote-text, .hw-quote.hw-quote-fade .hw-quote-author { opacity: 0; }

/* ===== Blog kartlari (daha sik) ===== */
.category-card { border-radius: 18px; overflow: hidden; border: 1px solid rgba(125,150,170,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.category-card:hover { transform: translateY(-6px); border-color: var(--accent);
    box-shadow: 0 22px 46px rgba(0,0,0,.24); }
.category-card-img { position: relative; overflow: hidden; min-height: 180px; }
.category-card-img img { transition: transform .45s ease; }
.category-card:hover .category-card-img img { transform: scale(1.06); }
.cc-no-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 22%, rgba(44,154,166,.30), transparent 58%), linear-gradient(135deg, #173a52 0%, #0e2233 100%); }
.cc-no-img::before { content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 15px 15px; opacity: .7; }
.cc-no-img i { position: relative; font-size: 42px; color: rgba(180,228,232,.6); }
.cc-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cc-title { transition: color .2s ease; }
.category-card:hover .cc-title { color: var(--accent); }

/* ===== Yazi yazar satiri (byline) ===== */
.article-byline { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--border-color); }
.article-byline-img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: center 38%; border: 2px solid var(--accent); flex: 0 0 auto; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.article-byline-text { display: flex; flex-direction: column; line-height: 1.3; }
.article-byline-name { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.article-byline-meta { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }

/* ===== Yorumlar ===== */
.comments-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-color); }
.comments-heading { font-family: var(--font-display); font-size: 24px; margin: 0 0 20px; color: var(--text-primary); }
.comments-count { font-size: 15px; color: var(--text-secondary); font-family: inherit; font-weight: 400; }
.comment-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; max-width: 640px; }
.comment-input, .comment-textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: rgba(255,255,255,.04); color: var(--text-primary); font-size: 15px; font-family: inherit; box-sizing: border-box; }
.comment-textarea { min-height: 96px; resize: vertical; }
.comment-input:focus, .comment-textarea:focus { outline: none; border-color: var(--accent); }
.comment-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; transition: filter .2s ease, transform .2s ease; }
.comment-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.comment-submit:disabled { opacity: .6; cursor: default; transform: none; }
.comments-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-color); background: rgba(255,255,255,.03); }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author { font-weight: 700; color: var(--text-primary); font-size: 15px; }
.comment-date { font-size: 12px; color: var(--text-secondary); }
.comment-del { margin-left: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; line-height: 1; }
.comment-del:hover { color: #e5534b; background: rgba(229,83,75,.12); }
.comment-body { color: var(--text-secondary); line-height: 1.6; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.comments-empty { color: var(--text-secondary); font-size: 14px; }

/* ===== Anlik arama paneli ===== */
.search-box { position: relative; }
.search-results { position: absolute; top: calc(100% + 10px); right: 0; width: min(380px, 86vw); max-height: 400px; overflow-y: auto; background: var(--bg-secondary, #12121a); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); z-index: 1200; display: none; padding: 6px; }
.search-results.open { display: block; }
.sr-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.sr-item:hover { background: var(--bg-card-hover, rgba(255,255,255,.06)); }
.sr-cat { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.sr-title { font-weight: 600; color: var(--text-primary); font-size: 15px; }
.sr-excerpt { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-empty { padding: 12px; color: var(--text-secondary); font-size: 13px; }

/* ===== Admin iletisim mesajlari ===== */
.cm-count { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.cm-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin-top: 8px; }
.cm-item { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card, rgba(255,255,255,.03)); }
.cm-top { display: flex; align-items: center; gap: 8px; }
.cm-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.cm-del { margin-left: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 15px; padding: 3px 5px; border-radius: 6px; line-height: 1; }
.cm-del:hover { color: #e5534b; background: rgba(229,83,75,.12); }
.cm-email { display: inline-block; font-size: 12.5px; color: var(--accent); text-decoration: none; margin-top: 2px; }
.cm-email:hover { text-decoration: underline; }
.cm-subject { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 6px; }
.cm-msg { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.cm-date { font-size: 11px; color: var(--text-muted, var(--text-secondary)); margin-top: 6px; }
.cm-empty { color: var(--text-secondary); font-size: 12px; text-align: center; padding: 8px; }

/* ===== Admin Genel Bakis sol kartlari: tek sutun, hizali, esit aralik ===== */
.u-style-32 { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; }
.u-style-32 > div > .sidebar-section { margin-bottom: 16px; }
.u-style-32 > div > .sidebar-section:last-child { margin-bottom: 0; }
.u-style-32 .storage-widget-card { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ===== Sik bos-durum / 404 ===== */
.empty-state-rich { text-align: center; padding: 56px 24px; max-width: 460px; margin: 36px auto; }
.empty-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 22px; border: 3px solid var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.22); background: var(--bg-secondary, #16202c); display: flex; align-items: center; justify-content: center; }
.empty-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.empty-state-rich h3 { font-family: var(--font-display); font-size: 26px; color: var(--text-primary); margin: 0 0 10px; }
.empty-state-rich p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
.empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 12px; font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1px solid var(--border-color); color: var(--text-primary); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.empty-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.empty-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.empty-btn.primary:hover { filter: brightness(1.08); }

/* ===== Tema kontrast tutarliligi: eski degiskenleri aktif sisteme bagla ===== */
body[data-theme]:not(.admin-active) {
    --text-primary: var(--public-ink);
    --text-secondary: var(--public-muted);
    --text-muted: var(--public-muted);
    --bg-primary: var(--public-bg);
    --bg-secondary: var(--public-panel);
    --bg-card: var(--public-panel);
    --bg-card-hover: var(--public-panel-strong);
    --border-color: var(--public-border, color-mix(in srgb, var(--public-accent) 22%, transparent));
    --accent: var(--public-accent);
}
body.admin-active {
    --text-primary: var(--admin-text);
    --text-secondary: color-mix(in srgb, var(--admin-text) 62%, transparent);
    --text-muted: color-mix(in srgb, var(--admin-text) 50%, transparent);
    --bg-secondary: var(--admin-card-bg);
    --bg-card: var(--admin-card-bg);
    --bg-card-hover: color-mix(in srgb, var(--admin-text) 7%, transparent);
    --border-color: var(--admin-border);
}

/* === Scroll-reveal animasyonlari (v4.34) === */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .reveal-init.reveal-in { opacity: 1; transform: none; }
}

/* === Yukari cik butonu (v4.35) === */
#back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 999;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--public-accent, #1d6f7e); color: #fff;
    border: none; cursor: pointer; font-size: 22px; line-height: 1;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}
#back-to-top.btt-show { opacity: 1; transform: none; pointer-events: auto; }
#back-to-top:hover { filter: brightness(1.1); transform: translateY(-3px); }
@media (max-width: 600px) { #back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 20px; } }

/* === Hakkimda: ilgi alanlari + zaman tuneli (v4.36) === */
.about-extras { margin-top: 48px; }
.about-extras h3 { font-family: var(--font-display, inherit); font-size: 23px; margin: 0 0 20px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.about-extras h3 i { color: var(--accent); }
.about-interests { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 48px; }
.about-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; transition: transform .25s ease, box-shadow .25s ease; }
.about-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.13); }
.about-card > i { font-size: 26px; color: var(--accent); }
.about-card h4 { margin: 12px 0 6px; font-size: 16px; color: var(--text-primary); }
.about-card p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.about-timeline { position: relative; border-left: 2px solid var(--border-color); margin-left: 10px; padding-left: 26px; }
.about-tl-item { position: relative; padding-bottom: 26px; }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-item::before { content: ''; position: absolute; left: -33px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.about-tl-date { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .3px; }
.about-tl-title { font-size: 16px; color: var(--text-primary); margin: 3px 0; font-weight: 600; }
.about-tl-sub { font-size: 14px; color: var(--text-secondary); }

/* Bağlantılı ilgi kartı: link gibi degil kart gibi gorunsun */
a.about-card { text-decoration: none; color: inherit; display: block; cursor: pointer; }
a.about-card h4, a.about-card p { color: inherit; }

/* Kategori ust seridi: icerik basliklari KART gorunumunde, yan yana */
.blog-page-header .blog-band-titles { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.blog-band-title-item {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border-color, rgba(125,150,170,0.18));
    border-radius: 14px;
    color: var(--text-primary, #e6edf3);
    text-decoration: none;
    font-weight: 700; font-size: 1.15rem; line-height: 1.2;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.blog-band-title-item:hover {
    border-color: var(--accent, #38bdf8);
    background: var(--bg-card-hover, rgba(56,189,248,0.08));
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.blog-band-title-item .bbt-ico { color: var(--accent, #38bdf8); font-size: 1.05em; opacity: .85; }
@media (max-width: 640px) {
    .blog-band-title-item { font-size: 1rem; padding: 12px 18px; }
}

/* ===================== RESPONSIVE FIX: header + hero ===================== */
/* Tutarli mobil header: satir1 = avatar + arama + tema, satir2 = ortali nav */
@media (max-width: 900px){
  body[data-theme]:not(.admin-active) .header-inner{
    flex-wrap: wrap;
    row-gap: 12px;
    min-height: 0;
    padding: 12px 0;
  }
  body[data-theme]:not(.admin-active) .brand{ order: 1; flex: 0 0 auto; }
  body[data-theme]:not(.admin-active) .header-actions{
    order: 2;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 10px;
  }
  body[data-theme]:not(.admin-active) .search-box{
    order: 0;
    width: auto;
    min-width: 0;
    flex: 1 1 200px;
    max-width: 380px;
    margin-top: 0;
  }
  body[data-theme]:not(.admin-active) .page-nav{
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
  }
  body[data-theme]:not(.admin-active) .page-nav-link{
    height: 44px;
    font-size: 0.74rem;
  }
}
@media (max-width: 430px){
  body[data-theme]:not(.admin-active) .page-nav{ gap: 11px; }
  body[data-theme]:not(.admin-active) .page-nav-link{ font-size: 0.66rem; letter-spacing: 0.03em; }
}

/* Hero gorselleri (kure + avatar + devre) akici sekilde kuculsun */
.home-hero-visual{ gap: clamp(16px, 3vw, 34px); }
.home-globe, .home-circuit{ --d: clamp(150px, 23vw, 280px); }
body[data-theme]:not(.admin-active) .home-hero-avatar{ order: 0; margin-bottom: 0; width: clamp(150px, 23vw, 280px); height: clamp(150px, 23vw, 280px); }
@media (max-width: 900px){
  body[data-theme]:not(.admin-active) .home-hero{ min-height: 0; padding: 18px 0 30px; }
  .home-hero-visual{ padding: 6px 0; }
}
@media (max-width: 560px){
  .home-globe, .home-circuit{ --d: clamp(132px, 40vw, 180px); }
  body[data-theme]:not(.admin-active) .home-hero-avatar{ width: clamp(140px, 42vw, 200px); height: clamp(140px, 42vw, 200px); }
  .home-hero-visual{ gap: 18px; }
}

/* Dar/mobil (<=1180): yan panelleri gizleme yerine hero altinda alt alta kart goster */
@media (max-width: 1180px){
  body[data-theme]:not(.admin-active) .home-hero{
    display: flex; flex-direction: column; align-items: center;
    padding: 16px 0 34px; min-height: 0;
  }
  body[data-theme]:not(.admin-active) .home-hero > .container{ order: 1; width: 100%; }
  body[data-theme]:not(.admin-active) .home-side-panel{
    display: block; position: static; transform: none;
    width: min(560px, 92%); height: auto; max-height: none;
    margin: 14px auto 0; border-radius: 18px;
    box-shadow: 0 14px 34px rgba(14,36,54,.16);
  }
  body[data-theme]:not(.admin-active) .hsp-left{ order: 2; }
  body[data-theme]:not(.admin-active) .hsp-right{ order: 3; }
  body[data-theme]:not(.admin-active) .home-side-panel .hsp-inner{
    position: static; inset: auto; overflow: visible; padding: 22px 20px;
  }
  body[data-theme]:not(.admin-active) .home-side-panel .hsp-foot{ margin-top: 14px; }
}

/* Mobil oneri: Hizli Erisim = kompakt yatay buton satiri (yer kaplamaz) */
@media (max-width: 1180px){
  body[data-theme]:not(.admin-active) .hsp-left .hsp-inner{
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 10px; padding: 18px;
  }
  body[data-theme]:not(.admin-active) .hsp-left .hsp-title{ width: 100%; text-align: center; margin-bottom: 2px; }
  body[data-theme]:not(.admin-active) .hsp-left .hsp-link{ flex: 0 1 auto; padding: 10px 16px; }
  body[data-theme]:not(.admin-active) .hsp-left .hsp-link .hsp-arrow{ display: none; }
  body[data-theme]:not(.admin-active) .hsp-left .hsp-foot{ display: none; }
}

/* ===================== KATEGORİ GRID YENİLEME (v5.42) ===================== */
/* Eşit yükseklikli kartlar; alt bilgi en alta sabitlenir */
body[data-theme]:not(.admin-active) .category-card{ display: flex; flex-direction: column; }
body[data-theme]:not(.admin-active) .category-card-body{ display: flex; flex-direction: column; flex: 1; }
/* 16:9 tutarlı medya alanı */
body[data-theme]:not(.admin-active) .category-card-img{ aspect-ratio: 16 / 9; min-height: 0; }
body[data-theme]:not(.admin-active) .category-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Başlık & özet: tutarlı satır kırpma */
body[data-theme]:not(.admin-active) .cc-title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-theme]:not(.admin-active) .cc-excerpt{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Video kartı: hover'da ortada beliren play (kapakta köşe play yok) */
.category-card .cc-play{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.category-card.is-video:hover .cc-play{ opacity: 1; }
.category-card .cc-play span{ width: 62px; height: 62px; border-radius: 50%; background: rgba(10,14,22,.55); border: 2px solid rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; transform: scale(.88); transition: transform .25s ease, background .25s ease; }
.category-card.is-video:hover .cc-play span{ transform: scale(1); background: var(--accent); }
.category-card .cc-play i{ color: #fff; font-size: 27px; margin-left: 3px; line-height: 1; }
/* Alt bilgi: tarih + İzle/Oku CTA */
.category-card .cc-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border-color, rgba(125,150,170,.16)); }
.category-card .cc-foot .cc-date{ margin: 0; }
.category-card .cc-cta{ display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; transition: gap .2s ease; }
.category-card:hover .cc-cta{ gap: 8px; }
.category-card .cc-cta i{ font-size: 16px; }
/* Şerit başlığı ile sayaç arası nefes */
body[data-theme]:not(.admin-active) .cat-grid-header{ margin-top: 2px; }

/* ===================== YAZI BAŞLIK + KAPAK (responsive) v5.43 ===================== */
/* Tek H1 + altında banner kapak; kapağın ÜZERİNE ikinci başlık binmez (mobil çakışma çözümü) */
body[data-theme]:not(.admin-active) .post-head{ margin: 4px 0 20px; }
body[data-theme]:not(.admin-active) .post-badge{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
body[data-theme]:not(.admin-active) .post-h1{ font-family: var(--font-display); font-weight: 700; line-height: 1.16; margin: 0; color: var(--text-primary); font-size: clamp(28px, 4.6vw, 48px); letter-spacing: -.01em; }
body[data-theme]:not(.admin-active) .post-cover{ margin: 0 0 10px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-color, rgba(125,150,170,.16)); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
body[data-theme]:not(.admin-active) .post-cover img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; }
/* Tekil yazıda üst şerit boşaltıldığında devasa boşluk bırakmasın */
body[data-theme]:not(.admin-active) .blog-page-header:empty{ padding: 22px 0 0 !important; min-height: 0; }

/* Okuma ilerleme çubuğu (yazı/video sayfaları) */
#read-progress{ position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; height: 3px !important; width: 0; max-width: 100% !important; margin: 0 !important; background: var(--accent); z-index: 99999; pointer-events: none; transition: width .12s linear; box-shadow: 0 0 6px var(--accent); }

/* Admin — ziyaretçi analitik paneli */
.visitor-analytics{ display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.visitor-analytics .va-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visitor-analytics .va-box{ background: var(--admin-card-bg, #fff); border: 1px solid var(--admin-border, #e2e8f0); border-radius: 12px; padding: 12px 14px; }
.visitor-analytics .va-title{ font-size: 13px; font-weight: 600; color: var(--admin-text, #1e293b); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.visitor-analytics .va-canvas-wrap{ position: relative; width: 100%; }
@media (max-width: 640px){ .visitor-analytics .va-row{ grid-template-columns: 1fr; } }
@media (max-width: 760px){
  body[data-theme]:not(.admin-active) .post-head{ margin: 2px 0 14px; }
  body[data-theme]:not(.admin-active) .post-badge{ font-size: 11px; padding: 5px 12px; margin-bottom: 12px; }
  body[data-theme]:not(.admin-active) .post-h1{ font-size: clamp(22px, 6.4vw, 30px); }
  body[data-theme]:not(.admin-active) .post-cover{ border-radius: 14px; }
}

/* Görsel yüklenemediğinde nötr yedek (kırık ikon yerine) */
.category-card-img, .post-cover, .gallery-item, .home-featured-img { position: relative; }
.img-fallback{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-card, rgba(125,150,170,.10)); color: rgba(150,170,190,.45); font-size: 34px; }