/* =============================================
   GeziBlog — Modern Editorial v5
   Fonts: Sora + Outfit
   ============================================= */
:root {
    --primary: #2563eb; --primary-light: #60a5fa; --primary-dark: #1d4ed8;
    --secondary: #0891b2; --accent: #e8613c; --accent-light: #f08a6d; --accent-dark: #c94a2a;
    --success: #059669; --warning: #d97706; --danger: #dc2626;
    --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #6b7280; --text-light: #9ca3af;
    --bg-body: #fafafa; --bg-white: #ffffff; --bg-card: #ffffff; --bg-dark: #0a0f1c; --bg-darker: #060a14; --bg-muted: #f3f4f6;
    --border: #e5e7eb; --border-light: #f3f4f6;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.08);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.1);
    --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-xl: 26px; --radius-full: 9999px;
    --font-display: 'Sora', 'DM Sans', system-ui, sans-serif;
    --font-body: 'Outfit', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --container: 1200px; --header-height: 68px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition: 0.3s var(--ease-out);
}

@font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; size-adjust:102%; src:local('Sora') }
@font-face { font-family:'Outfit'; font-style:normal; font-weight:400; font-display:swap; size-adjust:100%; src:local('Outfit') }

/* === THEME TOGGLE === */
.theme-toggle {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:10px; color:var(--text-muted); transition:all var(--transition); cursor:pointer;
    position:relative; overflow:hidden; border:none; background:none; padding:0; -webkit-appearance:none; outline:none;
}
.theme-toggle:hover { color:var(--primary); background:rgba(37,99,235,0.06) }
.icon-sun { position:absolute; opacity:0; transform:rotate(-90deg) scale(0.5); transition:all 0.5s var(--ease-spring) }
.icon-moon { transition:all 0.5s var(--ease-spring) }
html { transition:background-color 0.4s ease, color 0.4s ease }

/* === RESET & BASE === */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
    font-family:var(--font-body); background:var(--bg-body); color:var(--text-primary);
    line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-weight:400; letter-spacing:-0.01em;
}
a { color:var(--primary); text-decoration:none; transition:color var(--transition) }
a:hover { color:var(--primary-dark) }
img { max-width:100%; height:auto; display:block }
button, input, select, textarea { font-family:inherit; border:none; outline:none }
.container { width:min(var(--container), 100% - 48px); margin-inline:auto }
.skip-link { position:absolute; left:-9999px; top:0; z-index:9999; padding:8px 16px; background:var(--primary); color:#fff; font-weight:600; border-radius:0 0 var(--radius-sm) var(--radius-sm) }
.skip-link:focus { left:50%; transform:translateX(-50%); top:0 }
.content-with-sidebar { display:grid; grid-template-columns:1fr 320px; gap:36px }
.posts-area { min-width:0 }
::selection { background:rgba(37,99,235,0.1); color:var(--text-primary) }

/* Leaflet */
.leaflet-container, .leaflet-container * { box-sizing:content-box }
.leaflet-container img { max-width:none }
.map-container { width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-light); z-index:1 }

.alert { padding:14px 20px; border-radius:var(--radius); margin-bottom:20px; font-size:13.5px; font-weight:500 }
.alert-success { background:rgba(5,150,105,0.06); border:1px solid rgba(5,150,105,0.12); color:#047857 }
.alert-error, .alert-danger { background:rgba(220,38,38,0.06); border:1px solid rgba(220,38,38,0.12); color:#b91c1c }

/* === HEADER === */
.site-header {
    position:fixed; top:0; left:0; right:0; height:var(--header-height); z-index:1000;
    background:rgba(255,255,255,0.75); backdrop-filter:blur(24px) saturate(1.8);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    border-bottom:1px solid transparent; transition:all 0.4s;
}
.site-header.scrolled { background:rgba(255,255,255,0.92); border-bottom-color:rgba(0,0,0,0.04); box-shadow:0 1px 0 rgba(0,0,0,0.03) }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-height); gap:20px }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-primary) }
.logo-icon {
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    background:linear-gradient(145deg,#2563eb,#3b82f6); border-radius:10px;
    font-size:15px; color:#fff; box-shadow:0 2px 8px rgba(37,99,235,0.3);
}
.logo-text { display:flex; flex-direction:column }
.logo-primary { font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.2; letter-spacing:-0.5px; white-space:nowrap }
.logo-sub { font-size:9.5px; color:var(--text-muted); font-weight:500; letter-spacing:0.5px; text-transform:uppercase }
.main-nav ul { display:flex; gap:1px; list-style:none }
.nav-list { display:flex; gap:1px; list-style:none }
.nav-list a {
    display:block; padding:7px 13px; color:var(--text-secondary); font-weight:500;
    font-size:13.5px; border-radius:var(--radius-sm); text-decoration:none;
    transition:all 0.2s; letter-spacing:-0.01em;
}
.nav-list a:hover { color:var(--text-primary); background:var(--bg-muted) }
.nav-list a.active { color:var(--primary); background:rgba(37,99,235,0.05); font-weight:600 }
.header-actions { display:flex; align-items:center; gap:3px }
.btn-login {
    padding:7px 20px; background:var(--primary); color:#fff; border-radius:var(--radius-full);
    font-size:13px; font-weight:600; transition:all 0.25s; box-shadow:0 1px 6px rgba(37,99,235,0.25);
}
.btn-login:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,0.3); color:#fff }

/* Language */
.lang-switcher { position:relative }
.lang-trigger { display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:8px; cursor:pointer; color:var(--text-muted); transition:all var(--transition); font-size:12px; font-weight:600; letter-spacing:0.3px; border:1px solid transparent }
.lang-trigger:hover { color:var(--text-primary); background:var(--bg-muted) }
.lang-trigger svg { width:14px; height:14px }
.lang-trigger .lang-flag { font-size:14px; line-height:1 }
.lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:155px; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all 0.2s var(--ease-out); overflow:hidden; z-index:100 }
.lang-switcher:hover .lang-dropdown, .lang-switcher:focus-within .lang-dropdown { opacity:1; visibility:visible; transform:translateY(0) }
.lang-option { display:flex; align-items:center; gap:8px; padding:10px 14px; color:var(--text-secondary); font-size:13px; font-weight:500; transition:all 0.15s; text-decoration:none }
.lang-option:hover { background:var(--bg-muted); color:var(--text-primary) }
.lang-option .lang-flag { font-size:16px }
.lang-check { margin-left:auto; opacity:0; color:var(--primary) }
.lang-option.active .lang-check { opacity:1 }
.lang-option.active { color:var(--primary); font-weight:600 }

/* Search */
.search-toggle { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--text-muted); transition:all var(--transition); cursor:pointer; border:none; background:none; -webkit-appearance:none; padding:0 }
.search-toggle:hover { background:rgba(37,99,235,0.06); color:var(--primary) }
.search-overlay { position:fixed; top:var(--header-height); left:0; right:0; background:var(--bg-white); box-shadow:var(--shadow-lg); padding:28px 0; z-index:999; display:none; border-top:1px solid var(--border-light); animation:slideDown 0.25s ease }
.search-overlay.active { display:block }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
.search-form-overlay { display:flex; gap:12px; align-items:center; max-width:640px; margin:0 auto }
.search-form-overlay input { flex:1; padding:13px 20px; background:var(--bg-muted); border:1.5px solid var(--border); border-radius:var(--radius); font-size:15px; color:var(--text-primary); transition:border-color 0.2s }
.search-form-overlay input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.08) }
.search-form-overlay button { padding:13px 16px; background:var(--primary); color:#fff; border-radius:var(--radius); cursor:pointer; transition:all 0.2s }
.search-form-overlay button:hover { background:var(--primary-dark) }
.search-close { position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:8px }

/* User Menu */
.user-menu-wrapper { position:relative }
.user-menu-toggle { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; background:none; -webkit-appearance:none; padding:0; color:var(--text-muted); transition:all var(--transition) }
.user-menu-toggle:hover { transform:scale(1.08) }
.user-avatar-sm { width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,var(--primary),#7c3aed); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-white); box-shadow:var(--shadow) }
.user-dropdown { position:absolute; top:calc(100% + 10px); right:0; width:230px; background:var(--bg-white); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all 0.2s var(--ease-out); overflow:hidden; z-index:100 }
.user-menu-wrapper:hover .user-dropdown, .user-menu-wrapper:focus-within .user-dropdown { opacity:1; visibility:visible; transform:translateY(0) }
.user-dropdown-header { padding:14px 18px; border-bottom:1px solid var(--border-light) }
.user-dropdown-header strong { display:block; font-size:13.5px; color:var(--text-primary); font-weight:600 }
.user-dropdown-header small { font-size:11.5px; color:var(--text-muted) }
.user-dropdown a { display:block; padding:10px 18px; font-size:13px; color:var(--text-secondary); font-weight:500; transition:all 0.15s; text-decoration:none }
.user-dropdown a:hover { background:var(--bg-muted); color:var(--text-primary) }
.logout-link { border-top:1px solid var(--border-light) !important; color:var(--danger) !important }

/* Mobile Menu */
.mobile-menu-toggle { display:none; flex-direction:column; gap:5px; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:none; cursor:pointer; border-radius:8px; padding:0 }
.mobile-menu-toggle:hover { background:var(--bg-muted) }
.mobile-menu-toggle span { display:block; width:18px; height:1.5px; background:var(--text-primary); border-radius:2px; transition:all 0.3s ease }
.mobile-menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px) }
.mobile-menu-toggle.active span:nth-child(2) { opacity:0 }
.mobile-menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px) }
.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(4px); z-index:999; opacity:0; transition:opacity 0.3s }
.mobile-overlay.active { display:block; opacity:1 }

/* Search Autocomplete */
.search-suggest,.header-suggest { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; z-index:50; max-height:380px; overflow-y:auto }
.search-suggest.active,.header-suggest.active { display:block }
.search-suggest-item { display:flex; align-items:center; gap:12px; padding:10px 16px; text-decoration:none; color:var(--text-primary); transition:background 0.15s }
.search-suggest-item:hover,.search-suggest-item.active { background:var(--bg-muted) }
.search-suggest-thumb { width:42px; height:32px; border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--bg-muted) }
.search-suggest-thumb img { width:100%; height:100%; object-fit:cover }
.search-suggest-info { flex:1; min-width:0 }
.search-suggest-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.search-suggest-meta { font-size:11.5px; color:var(--text-muted) }
.search-suggest-type { font-size:9px; text-transform:uppercase; letter-spacing:0.8px; font-weight:700; color:var(--primary); background:rgba(37,99,235,0.06); padding:2px 8px; border-radius:4px; flex-shrink:0 }
.search-suggest-empty { padding:20px 16px; text-align:center; font-size:13px; color:var(--text-muted) }
.search-suggest-label { padding:8px 16px 4px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:700 }

/* === HERO === */
.hero {
    position:relative; min-height:640px; display:flex; align-items:center;
    margin-top:var(--header-height); overflow:hidden;
    background:linear-gradient(160deg, #020617 0%, #0f172a 30%, #1e293b 70%, #1a2332 100%);
}
.hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 800px 600px at 20% 40%, rgba(37,99,235,0.08), transparent),
        radial-gradient(ellipse 600px 500px at 80% 60%, rgba(232,97,60,0.05), transparent),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.012'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.hero::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0; height:200px;
    background:linear-gradient(to top, var(--bg-body), transparent);
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:780px; margin:0 auto; padding:60px 24px 100px }
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07);
    padding:8px 20px; border-radius:var(--radius-full); color:rgba(255,255,255,0.7);
    font-size:12px; font-weight:600; margin-bottom:28px;
    backdrop-filter:blur(12px); animation:fadeInDown 0.8s ease; letter-spacing:0.5px;
}
.hero h1 {
    font-family:var(--font-display); font-size:clamp(36px,5.5vw,66px); font-weight:800;
    color:#fff; line-height:1.06; margin-bottom:24px; letter-spacing:-2px;
    animation:fadeInUp 0.8s ease 0.2s both;
}
.hero h1 span {
    background:linear-gradient(135deg, #60a5fa, #38bdf8, #e8613c);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero p {
    font-size:clamp(15px,1.8vw,18px); color:rgba(255,255,255,0.5); line-height:1.7;
    margin-bottom:40px; max-width:500px; margin-left:auto; margin-right:auto;
    animation:fadeInUp 0.8s ease 0.4s both; font-weight:400;
}
.hero-search {
    display:flex; max-width:480px; margin:0 auto;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-full); overflow:hidden; backdrop-filter:blur(20px);
    animation:fadeInUp 0.8s ease 0.6s both; box-shadow:0 8px 40px rgba(0,0,0,0.2);
}
.hero-search input { flex:1; padding:14px 22px; background:none; border:none; color:#fff; font-size:14.5px; font-family:var(--font-body); outline:none }
.hero-search input::placeholder { color:rgba(255,255,255,0.3) }
.hero-search button {
    padding:12px 24px; background:var(--accent); color:#fff; font-weight:600; font-size:13.5px;
    border-radius:var(--radius-full); margin:4px; transition:all 0.25s; border:none; cursor:pointer;
    box-shadow:0 2px 12px rgba(232,97,60,0.3);
}
.hero-search button:hover { background:var(--accent-dark); transform:scale(1.03); box-shadow:0 4px 20px rgba(232,97,60,0.4) }

.hero-stats { display:flex; justify-content:center; gap:12px; margin-top:44px; animation:fadeInUp 0.8s ease 0.8s both }
.hero-stat {
    text-align:center; padding:16px 24px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05);
    border-radius:var(--radius); backdrop-filter:blur(12px); transition:all 0.35s var(--ease-out);
}
.hero-stat:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); transform:translateY(-3px) }
.hero-stat-value { font-family:var(--font-display); font-size:28px; font-weight:800; color:#fff; line-height:1.2; letter-spacing:-1px }
.hero-stat-label { font-size:10px; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-top:4px }

.hero-float { position:absolute; opacity:0.03; animation:float 8s ease-in-out infinite; pointer-events:none }
.hero-float:nth-child(1) { top:15%; left:8% }
.hero-float:nth-child(2) { top:60%; left:5%; animation-delay:2s }
.hero-float:nth-child(3) { top:18%; right:10%; animation-delay:4s }
.hero-float:nth-child(4) { top:68%; right:7%; animation-delay:6s }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg) } 50% { transform:translateY(-20px) rotate(3deg) } }

/* Floating Explore CTA */
.hero-explore-float { position:absolute; left:24px; bottom:42%; z-index:10; text-decoration:none; animation:exploreFloat 3s ease-in-out infinite, exploreFadeIn 1s ease-out 0.5s both }
@keyframes exploreFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-12px) } }
@keyframes exploreFadeIn { from { opacity:0; transform:translateX(-30px) } to { opacity:1; transform:translateX(0) } }
.hero-explore-glow { position:absolute; inset:-6px; border-radius:20px; background:radial-gradient(ellipse,rgba(232,97,60,0.15),transparent 70%); animation:exploreGlow 2s ease-in-out infinite alternate; pointer-events:none }
@keyframes exploreGlow { 0% { opacity:0.5; transform:scale(0.95) } 100% { opacity:1; transform:scale(1.05) } }
.hero-explore-inner { position:relative; display:flex; align-items:center; gap:12px; padding:12px 18px; background:rgba(255,255,255,0.05); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); transition:all 0.4s var(--ease-out) }
.hero-explore-float:hover .hero-explore-inner { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.15); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.2) }
.hero-explore-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg,var(--accent),#f08a6d); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 3px 10px rgba(232,97,60,0.3) }
.hero-explore-text { display:flex; flex-direction:column; gap:1px }
.hero-explore-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.35); font-weight:600 }
.hero-explore-title { font-size:13px; font-weight:700; color:#fff; font-family:var(--font-display); white-space:nowrap }
.hero-explore-arrow { color:rgba(255,255,255,0.35); flex-shrink:0; transition:transform 0.3s }
.hero-explore-float:hover .hero-explore-arrow { transform:translateX(4px); color:#fff }

@keyframes fadeInUp { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-16px) } to { opacity:1; transform:translateY(0) } }

/* === SECTIONS === */
.section { padding:72px 0 }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:16px }
.section-title {
    font-family:var(--font-display); font-size:clamp(24px,3vw,30px); font-weight:800;
    color:var(--text-primary); letter-spacing:-0.6px; position:relative; padding-bottom:14px;
}
.section-title::after {
    content:''; position:absolute; left:0; bottom:0; width:36px; height:3px;
    background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:2px;
    transition:width 0.3s var(--ease-out);
}
.section-header:hover .section-title::after { width:60px }
.section-link { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); transition:all 0.2s; text-decoration:none }
.section-link:hover { gap:10px; color:var(--primary-dark) }
.section-subtitle { font-size:14px; color:var(--text-muted); margin-top:-24px; margin-bottom:0 }

/* === POST CARDS === */
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:22px }
.post-card {
    background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--border-light); transition:all 0.4s var(--ease-out);
}
.post-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent }
.post-card-image { position:relative; padding-top:56%; overflow:hidden; background:var(--bg-muted) }
.post-card-image::after { content:''; position:absolute; bottom:0; left:0; right:0; height:45%; background:linear-gradient(to top, rgba(0,0,0,0.12), transparent); pointer-events:none; z-index:1 }
.post-card-image picture { position:absolute; inset:0 }
.post-card-image img, .post-card-image picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease-out) }
.post-card:hover .post-card-image img { transform:scale(1.04) }
img[loading="lazy"] { background:linear-gradient(110deg, var(--bg-muted) 30%, var(--bg-white) 50%, var(--bg-muted) 70%); background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite }
@keyframes shimmer { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
img[loading="lazy"].loaded, img:not([loading="lazy"]) { animation:none; background:none }
.post-card-image .category-badge { position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); padding:5px 13px; border-radius:var(--radius-full); font-size:10.5px; font-weight:600; color:var(--primary); letter-spacing:0.3px }
.post-card-image .reading-time { position:absolute; top:14px; right:14px; z-index:2; background:rgba(0,0,0,0.45); backdrop-filter:blur(8px); padding:5px 11px; border-radius:var(--radius-full); font-size:10.5px; color:#fff; font-weight:500 }
.post-card-body { padding:22px }
.post-card-title { font-family:var(--font-display); font-size:17px; font-weight:700; line-height:1.35; margin-bottom:8px; color:var(--text-primary); letter-spacing:-0.3px }
.post-card-title a { color:inherit; text-decoration:none; transition:color var(--transition) }
.post-card-title a:hover { color:var(--primary) }
.post-card-excerpt { font-size:13.5px; color:var(--text-secondary); line-height:1.7; margin-bottom:18px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.post-card-meta { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border-light) }
.post-card-author { display:flex; align-items:center; gap:8px; font-size:12.5px }
.post-card-author-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--primary),#7c3aed); color:#fff; font-size:10px; font-weight:700 }
.post-card-author span { color:var(--text-secondary); font-weight:500 }
.post-card-date { font-size:12px; color:var(--text-muted) }

/* === EMPTY STATE === */
.empty-state { text-align:center; padding:72px 32px; border-radius:var(--radius-lg); background:var(--bg-muted); border:2px dashed var(--border) }
.empty-state-icon { margin-bottom:24px; opacity:0.6 }
.empty-state-title { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--text-primary); margin-bottom:10px; letter-spacing:-0.3px }
.empty-state-desc { font-size:14px; color:var(--text-muted); max-width:380px; margin:0 auto 28px; line-height:1.65 }

/* === FEATURED POST === */
.featured-post { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--bg-card); border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border-light); transition:all 0.4s var(--ease-out) }
.featured-post:hover { box-shadow:var(--shadow-lg); border-color:transparent }
.featured-post .post-card-image { padding-top:0; min-height:340px }
.featured-post .post-card-image picture, .featured-post .post-card-image picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.featured-post .post-card-body { padding:36px; display:flex; flex-direction:column; justify-content:center }
.featured-post .post-card-title { font-size:26px; margin-bottom:14px; letter-spacing:-0.5px }
.featured-post .post-card-excerpt { font-size:14px; -webkit-line-clamp:4 }

/* === CATEGORIES === */
.categories-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px }
.category-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-decoration:none; padding:26px 16px; border-radius:var(--radius-lg);
    background:linear-gradient(145deg,#2563eb,#3b82f6); color:#fff;
    transition:all 0.35s var(--ease-out); position:relative; overflow:hidden; min-height:140px;
}
.category-card:nth-child(2) { background:linear-gradient(145deg,#7c3aed,#a78bfa) }
.category-card:nth-child(3) { background:linear-gradient(145deg,#059669,#34d399) }
.category-card:nth-child(4) { background:linear-gradient(145deg,#e8613c,#f08a6d) }
.category-card:nth-child(5) { background:linear-gradient(145deg,#0891b2,#22d3ee) }
.category-card:nth-child(6) { background:linear-gradient(145deg,#d97706,#fbbf24) }
.category-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.15) }
.category-card-icon { margin-bottom:10px; opacity:0.9; transition:transform 0.3s }
.category-card:hover .category-card-icon { transform:scale(1.1) }
.category-card-name { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-0.2px }
.category-card-count { font-size:11.5px; opacity:0.65; margin-top:3px; font-weight:500 }

/* === DESTINATIONS === */
.dest-section { background:var(--bg-white); border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light) }
.dest-grid { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:12px }
.dest-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:#fff; display:block; transition:all 0.4s var(--ease-out) }
.dest-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); color:#fff }
.dest-card-bg { position:absolute; inset:0; transition:transform 0.5s var(--ease-out) }
.dest-card:hover .dest-card-bg { transform:scale(1.04) }
.dest-card-lg { grid-column:1; grid-row:1 / span 2; min-height:300px }
.dest-card:not(.dest-card-lg) { min-height:140px }
.dest-card-content { position:relative; z-index:2; padding:22px }
.dest-card-lg .dest-card-content { padding:30px }
.dest-card-flag { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); margin-bottom:12px; border:1px solid rgba(255,255,255,0.06) }
.dest-card h3 { font-family:var(--font-display); font-size:19px; font-weight:800; margin-bottom:5px; letter-spacing:-0.3px }
.dest-card-lg h3 { font-size:28px; letter-spacing:-0.5px }
.dest-card p { font-size:12.5px; color:rgba(255,255,255,0.75); line-height:1.5; margin-bottom:10px }
.dest-card-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.85); transition:gap 0.3s }
.dest-card:hover .dest-card-link { gap:10px }
.dest-card-pattern { position:absolute; top:0; right:0; opacity:0.3; pointer-events:none }

/* === SIDEBAR === */
.sidebar { display:flex; flex-direction:column; gap:20px }
.sidebar-widget { background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border-light); padding:22px; transition:box-shadow 0.3s }
.sidebar-widget:hover { box-shadow:var(--shadow-md) }
.sidebar-widget-title { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border-light); letter-spacing:-0.2px }
.sidebar-post-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-light); transition:all 0.2s }
.sidebar-post-item:last-child { border-bottom:none }
.sidebar-post-item:hover { transform:translateX(3px) }
.sidebar-post-thumb { width:68px; height:50px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; background:var(--bg-muted) }
.sidebar-post-thumb img { width:100%; height:100%; object-fit:cover }
.sidebar-post-info h4 { font-size:13px; font-weight:600; line-height:1.4; color:var(--text-primary); margin-bottom:4px }
.sidebar-post-info h4 a { color:inherit; text-decoration:none }
.sidebar-post-info h4 a:hover { color:var(--primary) }
.sidebar-post-info span { font-size:11.5px; color:var(--text-muted) }
.tags-cloud { display:flex; flex-wrap:wrap; gap:6px }
.tag-link { padding:6px 14px; border-radius:var(--radius-full); font-size:12px; font-weight:500; color:var(--text-muted); background:var(--bg-muted); text-decoration:none; transition:all 0.2s; border:1px solid transparent }
.tag-link:hover { color:var(--primary); border-color:rgba(37,99,235,0.12); background:rgba(37,99,235,0.04) }

/* === SINGLE POST === */
.post-header { margin-top:var(--header-height); padding:48px 0 24px }
.post-header .category-badge { display:inline-block; padding:5px 14px; border-radius:var(--radius-full); font-size:11px; font-weight:600; color:var(--primary); background:rgba(37,99,235,0.06); margin-bottom:14px; text-decoration:none; letter-spacing:0.3px }
.post-header h1 { font-family:var(--font-display); font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.15; color:var(--text-primary); letter-spacing:-0.8px; margin-bottom:18px }
.post-header-meta { display:flex; align-items:center; gap:16px; font-size:13.5px; color:var(--text-muted); flex-wrap:wrap }
.post-header-meta .author-link { display:flex; align-items:center; gap:8px; color:var(--text-primary); font-weight:600; text-decoration:none }
.post-featured-image { margin-bottom:32px; border-radius:var(--radius-xl); overflow:hidden }
.post-featured-image img { width:100%; aspect-ratio:16/9; object-fit:cover }
.post-content { max-width:760px; margin:0 auto; font-size:16.5px; line-height:1.85; color:var(--text-secondary) }
.post-content h2 { font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--text-primary); margin:40px 0 16px; letter-spacing:-0.4px }
.post-content h3 { font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--text-primary); margin:32px 0 12px; letter-spacing:-0.3px }
.post-content p { margin-bottom:20px }
.post-content a { color:var(--primary); text-decoration:underline; text-underline-offset:2px }
.post-content img { border-radius:var(--radius); margin:24px 0 }
.post-content blockquote { border-left:3px solid var(--primary); padding:16px 24px; margin:24px 0; background:rgba(37,99,235,0.03); border-radius:0 var(--radius) var(--radius) 0; font-style:italic; color:var(--text-secondary) }
.post-content ul, .post-content ol { margin:16px 0; padding-left:24px }
.post-content li { margin-bottom:8px }
.post-content pre { background:var(--bg-muted); border:1px solid var(--border); padding:20px; border-radius:var(--radius); overflow-x:auto; font-size:14px; margin:24px 0 }
.post-content code { background:var(--bg-muted); padding:2px 6px; border-radius:4px; font-size:14px }
.post-content pre code { background:none; padding:0 }
.post-content table { width:100%; border-collapse:collapse; margin:24px 0 }
.post-content th, .post-content td { padding:12px 16px; border:1px solid var(--border); text-align:left; font-size:14px }
.post-content th { background:var(--bg-muted); font-weight:600 }
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; padding-top:24px; border-top:1px solid var(--border-light) }
.post-share { display:flex; align-items:center; gap:10px; margin-top:24px }
.post-share-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); color:var(--text-muted); background:var(--bg-white); transition:all 0.2s; cursor:pointer; text-decoration:none }
.post-share-btn:hover { color:#fff; border-color:transparent; transform:translateY(-2px) }
.post-share-btn:nth-child(1):hover { background:#1877f2 }
.post-share-btn:nth-child(2):hover { background:#1da1f2 }
.post-share-btn:nth-child(3):hover { background:#25d366 }
.post-share-btn:nth-child(4):hover { background:var(--text-primary) }

/* === COMMENTS === */
.comments-section { max-width:760px; margin:0 auto; padding:44px 0 }
.comments-section h3 { font-family:var(--font-display); font-size:24px; margin-bottom:28px; letter-spacing:-0.3px; font-weight:800 }
.comment-item { padding:20px 0; border-bottom:1px solid var(--border-light) }
.comment-item:last-child { border-bottom:none }
.comment-header { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.comment-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg,var(--primary),#7c3aed); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700 }
.comment-author { font-size:13.5px; font-weight:600; color:var(--text-primary) }
.comment-date { font-size:12px; color:var(--text-muted) }
.comment-body { font-size:14px; line-height:1.7; color:var(--text-secondary) }
.comment-actions { margin-top:10px; display:flex; gap:12px }
.comment-like-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--bg-white); color:var(--text-muted); font-size:12px; cursor:pointer; transition:all 0.2s }
.comment-like-btn:hover { border-color:var(--danger); color:var(--danger) }
.comment-like-btn.liked { border-color:var(--danger); color:var(--danger); background:rgba(220,38,38,0.04) }
.comment-reply-btn { font-size:12px; color:var(--primary); font-weight:600; background:none; cursor:pointer; padding:4px 0; border:none; transition:color 0.2s }
.comment-reply-btn:hover { color:var(--primary-dark) }
.comment-replies { margin-left:36px; margin-top:12px; padding-left:16px; border-left:2px solid var(--border-light) }
.comment-reply-indicator { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:12px; background:rgba(37,99,235,0.04); border:1px solid rgba(37,99,235,0.08); border-radius:var(--radius-sm); font-size:13px; color:var(--primary); font-weight:500 }
.reply-cancel { background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer; padding:0 4px; line-height:1 }

/* === BUTTONS === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 24px; border-radius:var(--radius); font-size:14px; font-weight:600; border:none; cursor:pointer; transition:all 0.25s; text-decoration:none; font-family:var(--font-body) }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,0.2) }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,0.3); color:#fff }
.btn-secondary { background:var(--bg-muted); color:var(--text-primary); border:1px solid var(--border) }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary) }

/* === FORMS === */
.form-group { margin-bottom:18px }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:6px }
.form-control { display:block; width:100%; padding:11px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; color:var(--text-primary); background:var(--bg-white); transition:all 0.2s; font-family:var(--font-body) }
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.08) }
textarea.form-control { min-height:100px; resize:vertical }

/* === AUTH === */
.auth-page { margin-top:var(--header-height); display:flex; align-items:center; justify-content:center; min-height:calc(100vh - var(--header-height)); padding:40px 24px }
.auth-card { background:var(--bg-card); border-radius:var(--radius-xl); padding:40px; width:100%; max-width:420px; border:1px solid var(--border-light); box-shadow:var(--shadow-lg) }
.auth-card h1 { font-family:var(--font-display); font-size:28px; font-weight:800; text-align:center; margin-bottom:8px; letter-spacing:-0.5px }
.auth-card p { text-align:center; color:var(--text-muted); margin-bottom:28px; font-size:14px }

/* === CONTACT === */
.contact-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:36px }
.contact-info-card { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:26px; display:flex; gap:16px; align-items:flex-start; transition:all 0.3s }
.contact-info-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px) }
.contact-info-icon { width:42px; height:42px; border-radius:var(--radius); background:rgba(37,99,235,0.06); display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0 }

/* === GALLERY === */
.gallery-masonry { columns:3; gap:12px }
.gallery-item { break-inside:avoid; margin-bottom:12px; border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer }
.gallery-item img { width:100%; display:block; transition:transform 0.5s var(--ease-out) }
.gallery-item:hover img { transform:scale(1.04) }
.gallery-item-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.5),transparent 60%); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:16px }
.gallery-item:hover .gallery-item-overlay { opacity:1 }
.gallery-item-overlay small { color:rgba(255,255,255,0.85); font-size:13px }
.gallery-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px }
.gallery-filter button { padding:8px 18px; border-radius:var(--radius-full); font-size:13px; font-weight:500; border:1px solid var(--border); background:var(--bg-white); color:var(--text-secondary); cursor:pointer; transition:all 0.2s }
.gallery-filter button:hover { border-color:var(--primary); color:var(--primary) }
.gallery-filter button.active { background:var(--primary); color:#fff; border-color:var(--primary) }

/* === PAGINATION === */
.pagination { display:flex; justify-content:center; padding:40px 0 }
.pagination ul { display:flex; gap:5px; list-style:none }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; border:1px solid var(--border); color:var(--text-secondary); text-decoration:none; transition:all 0.2s }
.pagination a:hover { border-color:var(--primary); color:var(--primary); background:rgba(37,99,235,0.04) }
.pagination .active span { background:var(--primary); color:#fff; border-color:var(--primary) }
.pagination .dots { border:none; color:var(--text-muted) }

/* === BREADCRUMB === */
.breadcrumb { padding:14px 0; font-size:13px; color:var(--text-muted) }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:6px; list-style:none; align-items:center }
.breadcrumb li::after { content:'›'; margin-left:6px; color:var(--text-light) }
.breadcrumb li:last-child::after { content:none }
.breadcrumb a { color:var(--text-muted); text-decoration:none; transition:color 0.2s }
.breadcrumb a:hover { color:var(--primary) }
.breadcrumb .active span { color:var(--text-primary); font-weight:500 }

/* === ALERTS === */
.alert-info { background:rgba(37,99,235,0.06); border:1px solid rgba(37,99,235,0.12); color:#1d4ed8 }
.alert-warning { background:rgba(217,119,6,0.06); border:1px solid rgba(217,119,6,0.12); color:#92400e }

/* === ADSENSE === */
.ad-slot { text-align:center; margin:24px 0; overflow:hidden }
.ad-responsive { max-width:100%; overflow:hidden }
.ad-label { font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; font-weight:600 }
.ad-mobile-sticky { position:fixed; bottom:0; left:0; right:0; z-index:998; padding:6px; background:var(--bg-card); border-top:1px solid var(--border); box-shadow:0 -4px 16px rgba(0,0,0,0.05); display:none }
@media(max-width:768px) { .ad-mobile-sticky { display:block } }

/* === NEWSLETTER === */
.newsletter-section { padding:56px 0; text-align:center; background:linear-gradient(160deg,#020617,#1e293b); color:#fff; position:relative; overflow:hidden }
.newsletter-section::before { content:''; position:absolute; top:50%; left:50%; width:600px; height:600px; background:radial-gradient(circle,rgba(37,99,235,0.06),transparent 60%); transform:translate(-50%,-50%); pointer-events:none }
.newsletter-section h2 { font-family:var(--font-display); font-size:clamp(22px,3vw,32px); font-weight:800; margin-bottom:10px; letter-spacing:-0.5px; position:relative }
.newsletter-section p { color:rgba(255,255,255,0.5); margin-bottom:32px; font-size:14.5px; position:relative }
.newsletter-form { display:flex; max-width:440px; margin:0 auto; position:relative }
.newsletter-input { display:flex; width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-full); overflow:hidden; backdrop-filter:blur(12px) }
.newsletter-input input { flex:1; padding:13px 20px; background:none; border:none; color:#fff; font-size:14px; outline:none }
.newsletter-input input::placeholder { color:rgba(255,255,255,0.3) }
.newsletter-input button { padding:11px 22px; background:var(--accent); color:#fff; font-weight:600; font-size:13.5px; border-radius:var(--radius-full); margin:3px; border:none; cursor:pointer; transition:all 0.25s }
.newsletter-input button:hover { background:var(--accent-dark) }

/* === FOOTER === */
.site-footer { background:#0a0f1c; color:rgba(255,255,255,0.6); position:relative }
.footer-wave { color:#0a0f1c; position:relative; top:1px }
.footer-wave svg { display:block; width:100%; height:auto }
.footer-main { padding:48px 0 32px }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px }
.footer-logo { display:flex; align-items:center; gap:10px; color:#fff; font-family:var(--font-display); font-size:17px; font-weight:700; text-decoration:none; margin-bottom:16px }
.footer-logo .logo-icon { font-size:15px }
.footer-desc { font-size:13.5px; line-height:1.7; margin-bottom:20px }
.social-links { display:flex; gap:8px }
.social-links a { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.5); transition:all 0.25s var(--ease-spring); border:1px solid rgba(255,255,255,0.05) }
.social-links a:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px) }
.footer-col h3 { color:#fff; font-family:var(--font-display); font-size:13px; font-weight:700; margin-bottom:16px; letter-spacing:0.3px; text-transform:uppercase }
.footer-col ul { list-style:none }
.footer-col li { margin-bottom:8px }
.footer-col a { color:rgba(255,255,255,0.45); font-size:13px; transition:all var(--transition); text-decoration:none }
.footer-col a:hover { color:#fff }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding:20px 0; text-align:center; font-size:12.5px; color:rgba(255,255,255,0.35) }

/* === COOKIE === */
.cookie-consent { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--bg-card); border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(0,0,0,0.06); padding:16px 0; display:none }
.cookie-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:var(--container); margin:0 auto; padding:0 24px }
.cookie-inner p { font-size:13px; color:var(--text-secondary); flex:1 }
.cookie-inner a { color:var(--primary); font-weight:500 }
.cookie-actions { display:flex; gap:8px; flex-shrink:0 }
.btn-cookie-accept { padding:8px 20px; background:var(--primary); color:#fff; border-radius:var(--radius-full); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all 0.2s }
.btn-cookie-accept:hover { background:var(--primary-dark) }
.btn-cookie-reject { padding:8px 16px; background:none; color:var(--text-muted); border:1px solid var(--border); border-radius:var(--radius-full); font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s }
.btn-cookie-reject:hover { border-color:var(--text-muted) }

/* Back to Top + Fade */
.back-to-top { position:fixed; bottom:24px; right:24px; width:40px; height:40px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:99; opacity:0; visibility:hidden; transform:translateY(10px); transition:all 0.3s; box-shadow:var(--shadow-md) }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0) }
.back-to-top:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px) }
.fade-in { opacity:0; transform:translateY(20px); transition:all 0.6s var(--ease-out) }
.fade-in.visible { opacity:1; transform:translateY(0) }

/* === NOTIFICATIONS === */
.notif-wrapper{position:relative}
.notif-toggle{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:var(--text-muted);transition:all var(--transition);border:none;background:none;cursor:pointer;padding:0;-webkit-appearance:none;outline:none;position:relative}
.notif-toggle:hover{background:rgba(37,99,235,0.06);color:var(--primary)}
.notif-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:8px;background:#dc2626;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-shadow:0 1px 4px rgba(220,38,38,0.3);animation:notifPulse 2s ease infinite}
@keyframes notifPulse{0%,100%{box-shadow:0 1px 4px rgba(220,38,38,0.3)}50%{box-shadow:0 1px 12px rgba(220,38,38,0.5)}}
.notif-dropdown{position:absolute;top:calc(100% + 10px);right:-40px;width:340px;background:var(--bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.25s var(--ease-out);overflow:hidden;z-index:100;max-height:420px;display:flex;flex-direction:column;border:1px solid var(--border)}
.notif-dropdown.active{opacity:1;visibility:visible;transform:translateY(0)}
.notif-dropdown-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-light);flex-shrink:0}
.notif-dropdown-hd strong{font-size:13.5px}
.notif-read-all{border:none;background:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:6px;display:flex;-webkit-appearance:none}
.notif-read-all:hover{background:var(--bg-muted);color:var(--primary)}
.notif-list{overflow-y:auto;flex:1;max-height:360px}
.notif-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-light);transition:background 0.15s;cursor:pointer;text-decoration:none;color:inherit}
.notif-item:hover{background:var(--bg-muted)}
.notif-item.unread{background:rgba(37,99,235,0.02)}
.notif-item.unread::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:6px}
.notif-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-icon.like{background:rgba(220,38,38,0.06);color:#dc2626}
.notif-icon.bookmark{background:rgba(37,99,235,0.06);color:#2563eb}
.notif-icon.comment{background:rgba(5,150,105,0.06);color:#059669}
.notif-icon.system{background:rgba(99,102,241,0.06);color:#6366f1}
.notif-icon svg{width:14px;height:14px}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:500;color:var(--text-primary);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{font-size:10px;color:var(--text-muted);margin-top:1px}
.notif-empty{text-align:center;padding:36px 16px;color:var(--text-muted);font-size:13px}
.notif-loading{text-align:center;padding:24px;color:var(--text-muted);font-size:13px}
@media(max-width:480px){.notif-dropdown{width:calc(100vw - 24px);right:-80px}}

/* === INTERACT BUTTONS === */
.post-card-actions{display:flex;gap:2px;margin-left:auto}
.interact-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-muted);transition:all 0.2s ease;-webkit-appearance:none;outline:none;position:relative;z-index:2}
.interact-btn:hover{color:var(--text-secondary);background:var(--bg-muted)}
.interact-btn svg{width:17px;height:17px;transition:all 0.25s var(--ease-spring);flex-shrink:0}
.interact-btn span{font-size:12px;font-weight:600;min-width:8px}
.interact-btn.loading{opacity:0.5;pointer-events:none}
.like-btn:hover{color:#dc2626;background:rgba(220,38,38,0.04)}
.like-btn:hover svg{transform:scale(1.15)}
.like-btn.active{color:#dc2626}
.like-btn.active svg{fill:#dc2626;stroke:#dc2626}
.bookmark-btn:hover{color:var(--primary);background:rgba(37,99,235,0.04)}
.bookmark-btn:hover svg{transform:scale(1.1)}
.bookmark-btn.active{color:var(--primary)}
.bookmark-btn.active svg{fill:var(--primary);stroke:var(--primary)}
.interact-btn.pop svg{animation:interactPop 0.45s var(--ease-spring)}
@keyframes interactPop{0%{transform:scale(1)}15%{transform:scale(0.8)}40%{transform:scale(1.35)}70%{transform:scale(0.95)}100%{transform:scale(1)}}
.sp-interact{color:rgba(255,255,255,0.5);padding:0;gap:6px}
.sp-interact:hover{background:none;color:rgba(255,255,255,0.85)}
.sp-interact.active.like-btn{color:#dc2626}
.sp-interact.active.like-btn svg{fill:#dc2626;stroke:#dc2626}
.sp-interact.active.bookmark-btn{color:var(--primary-light)}
.sp-interact.active.bookmark-btn svg{fill:var(--primary-light);stroke:var(--primary-light)}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
    --text-primary:#e2e8f0; --text-secondary:#94a3b8; --text-muted:#64748b; --text-light:#475569;
    --bg-body:#0a0e18; --bg-white:#111827; --bg-card:#161d2e; --bg-muted:#1e293b;
    --border:#2a3550; --border-light:#1e293b;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow:0 2px 4px rgba(0,0,0,0.35);
    --shadow-md:0 4px 16px rgba(0,0,0,0.35); --shadow-lg:0 12px 40px rgba(0,0,0,0.4);
    --shadow-xl:0 20px 60px rgba(0,0,0,0.45);
    color-scheme:dark;
}
[data-theme="dark"] .site-header{background:rgba(10,14,24,0.9);border-bottom-color:var(--border)}
[data-theme="dark"] .site-header.scrolled{background:rgba(10,14,24,0.97)}
[data-theme="dark"] .logo-sub{color:var(--text-muted)}
[data-theme="dark"] .nav-list a{color:var(--text-secondary);background:none}
[data-theme="dark"] .nav-list a:hover{color:#93c5fd;background:rgba(147,197,253,0.06)}
[data-theme="dark"] .nav-list a.active{color:#93c5fd;background:rgba(147,197,253,0.08)}
[data-theme="dark"] .main-nav{background:var(--bg-card);box-shadow:-4px 0 24px rgba(0,0,0,0.5)}
[data-theme="dark"] .mobile-overlay{background:rgba(0,0,0,0.6)}
[data-theme="dark"] .theme-toggle,[data-theme="dark"] .search-toggle,[data-theme="dark"] .user-menu-toggle{color:var(--text-muted)}
[data-theme="dark"] .theme-toggle:hover,[data-theme="dark"] .search-toggle:hover,[data-theme="dark"] .user-menu-toggle:hover{background:var(--bg-muted);color:var(--primary-light)}
[data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(0.5)}
[data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0deg) scale(1)}
[data-theme="dark"] .user-dropdown{background:var(--bg-card);box-shadow:0 12px 40px rgba(0,0,0,0.5);border-color:var(--border)}
[data-theme="dark"] .user-dropdown a{color:var(--text-secondary)}
[data-theme="dark"] .user-dropdown a:hover{background:var(--bg-muted);color:var(--text-primary)}
[data-theme="dark"] .user-dropdown-header{border-bottom-color:var(--border)}
[data-theme="dark"] .lang-dropdown{background:var(--bg-card);border-color:var(--border);box-shadow:0 12px 36px rgba(0,0,0,0.4)}
[data-theme="dark"] .lang-option:hover{background:var(--bg-muted)}
[data-theme="dark"] .search-overlay{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .search-form-overlay input{background:var(--bg-muted);border-color:var(--border);color:var(--text-primary)}
[data-theme="dark"] .search-close{color:var(--text-muted)}
[data-theme="dark"] .header-suggest{background:var(--bg-card);border-color:var(--border);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
[data-theme="dark"] .header-suggest .search-suggest-item:hover{background:var(--bg-muted)}
[data-theme="dark"] .hero-stat{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.04)}
[data-theme="dark"] .hero-search{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.05)}
[data-theme="dark"] .hero-search input{color:#fff}
[data-theme="dark"] .hero-search input::placeholder{color:rgba(255,255,255,0.25)}
[data-theme="dark"] .post-card{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .post-card:hover{border-color:var(--border);box-shadow:var(--shadow-lg)}
[data-theme="dark"] .post-card-meta{border-top-color:var(--border)}
[data-theme="dark"] .post-card-title a{color:var(--text-primary)}
[data-theme="dark"] .post-card-image .category-badge{background:rgba(22,29,46,0.92);color:var(--primary-light)}
[data-theme="dark"] .featured-post{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .featured-post:hover{box-shadow:var(--shadow-lg)}
[data-theme="dark"] .sidebar-widget{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .sidebar-post-item{border-color:var(--border)}
[data-theme="dark"] .sidebar-widget-title{border-color:var(--border)}
[data-theme="dark"] .dest-section{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .category-card{box-shadow:0 4px 20px rgba(0,0,0,0.3)}
[data-theme="dark"] .tag-link{background:var(--bg-muted);color:var(--text-muted)}
[data-theme="dark"] .tag-link:hover{color:var(--primary-light);border-color:rgba(96,165,250,0.15);background:rgba(96,165,250,0.06)}
[data-theme="dark"] .comment-like-btn{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .form-control{background:var(--bg-muted);border-color:var(--border);color:var(--text-primary)}
[data-theme="dark"] .auth-card{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .cookie-consent{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .btn-cookie-reject{border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .back-to-top{background:var(--bg-card);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .notif-toggle{color:var(--text-muted)}
[data-theme="dark"] .notif-toggle:hover{background:var(--bg-muted);color:var(--primary-light)}
[data-theme="dark"] .notif-dropdown{background:var(--bg-card);box-shadow:0 16px 48px rgba(0,0,0,0.5);border-color:var(--border)}
[data-theme="dark"] .notif-dropdown-hd{border-color:var(--border)}
[data-theme="dark"] .notif-item{border-color:var(--border)}
[data-theme="dark"] .gallery-filter button{background:var(--bg-muted);border-color:var(--border);color:var(--text-secondary)}
[data-theme="dark"] .pagination a,[data-theme="dark"] .pagination span{border-color:var(--border);color:var(--text-secondary)}
[data-theme="dark"] .pagination a:hover{border-color:var(--primary-light);color:var(--primary-light)}
[data-theme="dark"] .post-share-btn{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .contact-info-card{background:var(--bg-card);border-color:var(--border)}

/* === RESPONSIVE === */
@media(max-width:1200px){.content-with-sidebar{grid-template-columns:1fr}.sidebar{display:none}}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}.dest-grid{grid-template-columns:1fr 1fr}.dest-card-lg{grid-column:1;grid-row:auto;min-height:200px}.contact-grid{grid-template-columns:1fr}}
@media(max-width:768px){
    .container{width:calc(100% - 32px)}.section{padding:48px 0}
    .main-nav{position:fixed;top:0;right:-280px;width:270px;height:100vh;background:var(--bg-white);z-index:1000;padding:76px 24px 24px;flex-direction:column;transition:right 0.35s var(--ease-out);box-shadow:-4px 0 24px rgba(0,0,0,0.06)}
    .main-nav.active{right:0}.nav-list{flex-direction:column;gap:4px}.nav-list a{padding:12px 16px;font-size:15px;border-radius:var(--radius-sm)}
    .mobile-menu-toggle{display:flex !important;order:99;width:36px;height:36px;flex-shrink:0}.header-actions .lang-switcher{order:-1}
    .posts-grid{grid-template-columns:1fr}.featured-post{grid-template-columns:1fr}.featured-post .post-card-image{min-height:220px}.featured-post .post-card-body{padding:24px}.featured-post .post-card-title{font-size:22px}
    .categories-grid{grid-template-columns:repeat(3,1fr);gap:10px}.category-card{padding:18px 12px;min-height:110px}.category-card-name{font-size:13px}
    .dest-grid{grid-template-columns:1fr}.dest-card-lg{min-height:200px}
    .footer-grid{grid-template-columns:1fr}.footer-col{text-align:center}.social-links{justify-content:center}
    .gallery-masonry{columns:2}
    .search-overlay{top:0;padding:20px 0}.search-form-overlay{gap:8px}.search-form-overlay input{font-size:14px;padding:12px 16px}
    .cookie-inner{flex-direction:column;text-align:center}
    .hero{min-height:520px}.hero-content{padding:40px 20px 80px}.hero-stats{flex-wrap:wrap;gap:10px}.hero-stat{padding:12px 18px}.hero-stat-value{font-size:22px}
    .hero-explore-float{position:relative;left:auto;bottom:auto;margin:20px auto 0;display:block;width:fit-content}
}
@media(max-width:480px){
    .categories-grid{grid-template-columns:repeat(2,1fr)}.gallery-masonry{columns:1}
    .hero-search{flex-direction:column;border-radius:var(--radius-lg)}.hero-search input{border-bottom:1px solid rgba(255,255,255,0.05)}
    .hero-search button{margin:0;border-radius:0 0 var(--radius-lg) var(--radius-lg)}.hero-stat{padding:10px 16px}.hero-stat-value{font-size:20px}
}

/* === MISSING CRITICAL CLASSES === */

/* Button variants */
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(232,97,60,0.2)}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,97,60,0.3);color:#fff}
.btn-outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{padding:14px 32px;font-size:15px;border-radius:var(--radius)}
.btn-sm{padding:7px 16px;font-size:12.5px;border-radius:var(--radius-sm)}

/* Comment Form */
.comment-form{margin-top:28px;padding:24px;background:var(--bg-muted);border-radius:var(--radius-lg)}
.comment-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.comment-form textarea{min-height:120px}
.comment-form .btn{margin-top:12px}

/* Auth Footer */
.auth-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--text-muted)}
.auth-footer a{color:var(--primary);font-weight:600}

/* Pages */
.page-header{margin-top:var(--header-height);padding:48px 0 24px;text-align:center}
.page-header h1{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-0.8px;margin-bottom:10px}
.page-header p{color:var(--text-muted);font-size:15px;max-width:560px;margin:0 auto}
.page-content{max-width:800px;margin:0 auto;padding:24px 0 60px;font-size:16px;line-height:1.8;color:var(--text-secondary)}
.page-content h2{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
.page-content p{margin-bottom:18px}
.page-content a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.page-content img{border-radius:var(--radius);margin:20px 0}
.page-content ul,.page-content ol{margin:14px 0;padding-left:22px}
.page-content li{margin-bottom:6px}

/* Ad System */
.ad-container{margin:20px 0;text-align:center;overflow:hidden}
.ad-content{display:inline-block;max-width:100%}
.ad-header,.ad-header-banner{max-width:728px;margin:0 auto 16px}
.ad-sidebar,.ad-sidebar-top,.ad-sidebar-bottom{margin-bottom:20px}
.ad-in-article{margin:28px 0;padding:16px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.ad-between-posts{margin:16px 0}
.ad-footer,.ad-footer-banner{margin-top:24px;padding-top:16px}
.ad-explore-banner{margin:20px 0;border-radius:var(--radius);overflow:hidden}

/* Single Post Extras */
.sp-author-box{display:flex;gap:18px;padding:28px;background:var(--bg-muted);border-radius:var(--radius-lg);margin:36px 0}
.sp-author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sp-author-box h4{font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:4px}
.sp-author-box p{font-size:13.5px;color:var(--text-secondary);line-height:1.6}
.sp-related{margin:48px 0;padding-top:36px;border-top:1px solid var(--border-light)}
.sp-related h3{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:24px;letter-spacing:-0.3px}
.sp-related-card{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-light);text-decoration:none;transition:all 0.2s}
.sp-related-card:last-child{border-bottom:none}
.sp-related-card:hover{transform:translateX(4px)}
.sp-related-card img{width:88px;height:64px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.sp-related-card h4{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:4px}
.sp-related-card span{font-size:12px;color:var(--text-muted)}
.sp-no-comments{text-align:center;padding:36px;color:var(--text-muted);font-size:14px}
.sp-share-copy{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-full);font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;background:var(--bg-white)}
.sp-share-copy:hover{border-color:var(--primary);color:var(--primary)}

/* Share Buttons */
.share-sidebar{position:sticky;top:calc(var(--header-height) + 24px);display:flex;flex-direction:column;gap:8px}
.share-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--text-muted);background:var(--bg-white);transition:all 0.2s;cursor:pointer;text-decoration:none}
.share-btn:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.share-btn.facebook:hover{background:#1877f2}
.share-btn.twitter:hover{background:#1da1f2}
.share-btn.whatsapp:hover{background:#25d366}
.share-btn.pinterest:hover{background:#e60023}

/* Related Posts */
.related-post{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-light);text-decoration:none;transition:all 0.2s}
.related-post:last-child{border-bottom:none}
.related-post:hover{transform:translateX(3px)}
.related-post img{width:80px;height:58px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.related-post h4{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.4;margin-bottom:3px}
.related-post span{font-size:11.5px;color:var(--text-muted)}

/* Series Navigation */
.series-nav{display:flex;gap:12px;margin:28px 0;padding:20px;background:var(--bg-muted);border-radius:var(--radius-lg);align-items:center}
.series-nav a{flex:1;display:flex;flex-direction:column;gap:3px;padding:12px 16px;background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius);text-decoration:none;transition:all 0.2s;font-size:13px;color:var(--text-secondary)}
.series-nav a:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.series-nav a small{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.series-nav a strong{font-size:14px;color:var(--text-primary);font-weight:600}

/* Gallery Grid (alternative) */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gallery-grid .gallery-item{margin-bottom:0;aspect-ratio:4/3;cursor:pointer}
.gallery-grid .gallery-item img{width:100%;height:100%;object-fit:cover}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.9);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s;backdrop-filter:blur(8px)}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90%;max-height:85vh;border-radius:var(--radius);object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-size:20px;transition:background 0.2s}
.lightbox-close:hover{background:rgba(255,255,255,0.2)}

/* Contact extras */
.contact-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px;transition:all 0.3s}
.contact-card:hover{box-shadow:var(--shadow-md)}
.contact-info-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-light)}
.contact-info-item:last-child{border-bottom:none}
.contact-form-right{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px}
.contact-faq-item{border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}
.contact-faq-item .pkg-faq-q,.contact-faq-item>div:first-child{padding:14px 18px;cursor:pointer;font-weight:600;font-size:14px;display:flex;justify-content:space-between;transition:background 0.2s}
.contact-faq-item>div:first-child:hover{background:var(--bg-muted)}

/* Leaflet overrides */
.leaflet-control-attribution{font-size:10px!important;background:rgba(255,255,255,0.7)!important;border-radius:4px!important}
.leaflet-control-container .leaflet-top{top:10px}.leaflet-control-container .leaflet-left{left:10px}
.leaflet-tile-pane{z-index:1}.leaflet-overlay-pane{z-index:2}.leaflet-marker-pane{z-index:3}.leaflet-shadow-pane{z-index:2}
.leaflet-pane{position:absolute;left:0;top:0}.leaflet-map-pane{z-index:1}
.leaflet-tile{border:none;-webkit-backface-visibility:hidden}.leaflet-tile-container{pointer-events:none}
.leaflet-popup-content-wrapper{border-radius:var(--radius)!important;box-shadow:var(--shadow-md)!important}.leaflet-popup-content{font-family:var(--font-body);font-size:13px}
.custom-pin{width:28px;height:28px;border-radius:50%;background:var(--primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.2);cursor:pointer;transition:transform 0.2s}
.custom-pin:hover{transform:scale(1.2)}

/* Theme transition */
.theme-transitioning,.theme-transitioning *,.theme-transitioning *::before,.theme-transitioning *::after{transition:background-color 0.4s ease,color 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease!important}

/* Subtitle */
.subtitle{font-size:15px;color:var(--text-muted);margin-top:6px;line-height:1.6}

/* Dark mode for new classes */
[data-theme="dark"] .comment-form{background:var(--bg-muted)}
[data-theme="dark"] .sp-author-box{background:var(--bg-muted)}
[data-theme="dark"] .series-nav{background:var(--bg-muted)}
[data-theme="dark"] .series-nav a{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .share-btn{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .sp-share-copy{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
[data-theme="dark"] .sp-related{border-color:var(--border)}
[data-theme="dark"] .sp-related-card{border-color:var(--border)}
[data-theme="dark"] .contact-card,.contact-form-right{background:var(--bg-card);border-color:var(--border)}
[data-theme="dark"] .lightbox{background:rgba(0,0,0,0.95)}
[data-theme="dark"] .page-content{color:var(--text-secondary)}
[data-theme="dark"] .ad-in-article{border-color:var(--border)}

/* === PRINT === */
@media print{.site-header,.site-footer,.hero,.newsletter-section,.cookie-consent,.back-to-top,.sidebar,.ad-slot{display:none !important}body{font-size:12pt;color:#000;background:#fff}.container{max-width:100%;padding:0}a{color:#000;text-decoration:underline}.post-card{break-inside:avoid;box-shadow:none;border:1px solid #ddd}}