:root{
  --bg-deep:#062226; --bg-primary:#0a3338; --bg-card:#103d44; --bg-elevated:#14504f;
  --fg-primary:#f5ead4; --fg-secondary:#d4c9b1; --fg-muted:#8a9a92;
  --accent-terracotta:#d96b3e; --accent-amber:#e8a857; --accent-sage:#8aa67d; --accent-coral:#e87555; --accent-teal:#4ac4b8;
  --border-subtle:rgba(245,234,212,.08); --border-strong:rgba(245,234,212,.18);
  --shadow-soft:0 12px 40px rgba(0,0,0,.35); --shadow-deep:0 24px 80px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--bg-deep);color:var(--fg-primary);line-height:1.65;overflow-x:hidden;min-height:100vh}
.bg-atmosphere{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(217,107,62,.12),transparent 60%),radial-gradient(ellipse 70% 50% at 90% 30%,rgba(74,196,184,.08),transparent 60%),linear-gradient(180deg,#062226 0%,#082a2f 50%,#062226 100%)}
.bg-noise{position:fixed;inset:0;z-index:-1;opacity:.4;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .92 0 0 0 0 .83 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

header{position:fixed;top:0;left:0;right:0;z-index:1000;backdrop-filter:blur(18px) saturate(1.4);background:rgba(6,34,38,.6);border-bottom:1px solid var(--border-subtle)}
.header-inner{max-width:1400px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-mark{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 220deg,var(--accent-amber),var(--accent-terracotta),var(--accent-coral),var(--accent-amber));display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 1px rgba(245,234,212,.15) inset,0 8px 20px rgba(217,107,62,.3)}
.brand-mark::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--bg-deep)}
.brand-mark svg{position:relative;z-index:2;width:18px;height:18px;color:var(--accent-amber)}
.brand-text{font-family:'Fraunces',serif;font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1}
.brand-text small{display:block;font-family:'Manrope',sans-serif;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-top:3px}

nav.main-nav{display:flex;gap:4px;margin-left:auto}
nav.main-nav a{padding:8px 14px;border-radius:8px;color:var(--fg-secondary);text-decoration:none;font-size:14px;font-weight:500;transition:all .2s}
nav.main-nav a:hover{color:var(--fg-primary);background:rgba(245,234,212,.05)}

.lang-switcher{display:flex;gap:2px;background:rgba(245,234,212,.04);padding:3px;border-radius:10px;border:1px solid var(--border-subtle)}
.lang-btn{background:transparent;border:none;cursor:pointer;padding:6px 10px;border-radius:7px;color:var(--fg-muted);font-size:11px;font-weight:700;transition:all .2s;font-family:inherit}
.lang-btn.active{background:var(--accent-terracotta);color:#fff;box-shadow:0 4px 12px rgba(217,107,62,.4)}

.btn-admin{padding:8px 16px;border-radius:8px;background:transparent;border:1px solid var(--border-strong);color:var(--fg-secondary);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.btn-admin:hover{background:var(--accent-amber);color:var(--bg-deep);border-color:var(--accent-amber)}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 32px 80px;overflow:hidden}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;animation:float 12s ease-in-out infinite}
.orb-1{top:15%;right:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(232,168,87,.35),transparent 70%)}
.orb-2{bottom:5%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(74,196,184,.2),transparent 70%);animation-delay:-4s}
.orb-3{top:40%;left:30%;width:300px;height:300px;background:radial-gradient(circle,rgba(217,107,62,.2),transparent 70%);animation-delay:-8s}
.hero-waves{position:absolute;inset:0;pointer-events:none;opacity:.4}
.hero-waves svg{position:absolute;bottom:0;left:0;width:100%;height:auto}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}

.hero-content{position:relative;z-index:2;max-width:1100px;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:rgba(245,234,212,.06);border:1px solid var(--border-strong);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-amber);font-weight:600;margin-bottom:32px}
.hero h1{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(48px,9vw,124px);line-height:.95;letter-spacing:-.04em;margin-bottom:24px;padding-right:15px}
.hero h1 em{font-style:italic;font-weight:400;background:linear-gradient(120deg,var(--accent-amber),var(--accent-coral),var(--accent-terracotta));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:20px}
.hero-subtitle{font-size:clamp(16px,2vw,20px);color:var(--fg-secondary);max-width:680px;margin:0 auto 40px;font-weight:300}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .25s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent-terracotta),var(--accent-coral));color:#fff;box-shadow:0 8px 24px rgba(217,107,62,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(245,234,212,.04);color:var(--fg-primary);border:1px solid var(--border-strong)}
.hero-stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;margin-top:80px}
.hero-stat .num{font-family:'Fraunces',serif;font-weight:800;font-size:48px;background:linear-gradient(180deg,var(--fg-primary),var(--accent-amber));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.hero-stat .label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);margin-top:8px;font-weight:600}

section{padding:100px 32px;position:relative}
.container{max-width:1400px;margin:0 auto}
.section-header{text-align:center;margin-bottom:60px}
.section-eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent-amber);font-weight:700;margin-bottom:16px}
.section-title{font-family:'Fraunces',serif;font-weight:800;font-size:clamp(36px,5vw,56px);letter-spacing:-.03em;line-height:1.05}
.section-title em{font-style:italic;font-weight:400;color:var(--accent-amber)}
.section-subtitle{font-size:17px;color:var(--fg-secondary);max-width:640px;margin:20px auto 0;font-weight:300}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.feature-card{background:linear-gradient(180deg,rgba(20,80,79,.4),rgba(16,61,68,.2));border:1px solid var(--border-subtle);border-radius:20px;padding:36px 28px;position:relative;overflow:hidden;transition:all .3s}
.feature-card:hover{border-color:var(--border-strong);transform:translateY(-4px)}
.feature-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent-terracotta),var(--accent-coral));display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 8px 24px rgba(217,107,62,.3)}
.feature-icon svg{width:24px;height:24px;color:#fff}
.feature-card h3{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.feature-card p{color:var(--fg-secondary);font-size:15px;font-weight:300}

.map-section{padding-top:80px}
.map-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;height:680px;background:linear-gradient(180deg,rgba(20,80,79,.3),rgba(16,61,68,.15));border:1px solid var(--border-subtle);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-deep)}
.map-wrap{position:relative;background:#0a3338}
#leaflet-map{width:100%;height:100%;background:#0a3338}
.map-overlay-info{position:absolute;top:20px;left:20px;z-index:500;background:rgba(6,34,38,.85);backdrop-filter:blur(12px);border:1px solid var(--border-strong);border-radius:14px;padding:12px 16px;font-size:12px;max-width:240px;cursor:pointer}
.map-overlay-info strong{color:var(--accent-amber);font-size:10px;letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:4px}
.map-overlay-info span{color:var(--fg-secondary);font-weight:300}
.map-legend{position:absolute;bottom:20px;left:20px;z-index:500;background:rgba(6,34,38,.85);backdrop-filter:blur(12px);border:1px solid var(--border-strong);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-secondary)}
.legend-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.legend-dot.main{background:var(--accent-terracotta);box-shadow:0 0 0 3px rgba(217,107,62,.25)}
.legend-dot.hidden{background:var(--accent-amber);box-shadow:0 0 0 3px rgba(232,168,87,.25)}
.legend-dot.user{background:var(--accent-teal);box-shadow:0 0 0 3px rgba(74,196,184,.25)}

.sidebar{display:flex;flex-direction:column;background:rgba(6,34,38,.4);border-left:1px solid var(--border-subtle)}
.sidebar-header{padding:20px 24px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-header h3{font-family:'Fraunces',serif;font-weight:700;font-size:18px}
.filter-pills{display:flex;gap:6px}
.filter-pill{background:transparent;border:1px solid var(--border-subtle);color:var(--fg-muted);font-size:10px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit;letter-spacing:.05em;text-transform:uppercase;transition:all .2s}
.filter-pill.active{background:var(--accent-terracotta);color:#fff;border-color:var(--accent-terracotta)}

.stops-list{flex:1;overflow-y:auto;padding:12px}
.stop-item{display:flex;gap:12px;padding:14px;border-radius:12px;cursor:pointer;transition:all .2s;margin-bottom:4px;border:1px solid transparent}
.stop-item:hover{background:rgba(245,234,212,.04)}
.stop-item.active{background:rgba(217,107,62,.1);border-color:rgba(217,107,62,.25)}
.stop-num{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:var(--accent-amber);border:1px solid var(--border-subtle)}
.stop-info{flex:1;min-width:0}
.stop-info h4{font-size:14px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop-info p{font-size:12px;color:var(--fg-muted);font-weight:300;line-height:1.4}

.leaflet-div-icon{background:transparent!important;border:none!important}
.custom-marker{width:42px;height:42px;position:relative;cursor:pointer}
.marker-pin{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-terracotta),var(--accent-coral));border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(0,0,0,.4);border:2px solid #fff}
.marker-pin::after{content:attr(data-num);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);color:#fff;font-weight:700;font-size:14px;font-family:'Fraunces',serif}
.custom-marker.hidden .marker-pin{background:linear-gradient(135deg,var(--accent-amber),#c4873f);animation:glow 2s ease-in-out infinite}
.custom-marker.hidden .marker-pin::after{content:'?'}
@keyframes glow{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 0 0 rgba(232,168,87,.5)}50%{box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 0 8px rgba(232,168,87,0)}}
.user-marker{width:20px;height:20px;border-radius:50%;background:var(--accent-teal);border:3px solid #fff;box-shadow:0 0 0 4px rgba(74,196,184,.3),0 4px 12px rgba(0,0,0,.4);animation:userPulse 2s ease-in-out infinite}
@keyframes userPulse{0%,100%{box-shadow:0 0 0 4px rgba(74,196,184,.3),0 4px 12px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 12px rgba(74,196,184,0),0 4px 12px rgba(0,0,0,.4)}}

.stops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.stop-card{background:linear-gradient(180deg,var(--bg-card),rgba(16,61,68,.5));border:1px solid var(--border-subtle);border-radius:20px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.stop-card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-soft)}
.stop-card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-elevated)}
.stop-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s;filter:saturate(.9) brightness(.85)}
.stop-card:hover .stop-card-image img{transform:scale(1.05);filter:saturate(1.1) brightness(.95)}
.stop-card-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,34,38,.9) 100%)}
.stop-card-num{position:absolute;top:14px;left:14px;z-index:2;background:rgba(6,34,38,.85);backdrop-filter:blur(8px);border:1px solid var(--border-strong);border-radius:10px;padding:6px 12px;font-family:'Fraunces',serif;font-weight:700;font-size:14px;color:var(--accent-amber)}
.stop-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.stop-card-body h3{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.stop-card-body p{color:var(--fg-secondary);font-size:14px;font-weight:300;flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stop-card-actions{display:flex;gap:8px;margin-top:auto}
.btn-sm{padding:10px 14px;font-size:12px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .2s;text-decoration:none}
.btn-listen{background:var(--accent-terracotta);color:#fff;flex:1;justify-content:center}
.btn-listen:hover{background:var(--accent-coral)}
.btn-directions{background:rgba(245,234,212,.06);color:var(--fg-primary);border:1px solid var(--border-strong)}
.btn-directions:hover{background:var(--accent-amber);color:var(--bg-deep);border-color:var(--accent-amber)}

.gems-section{position:relative}
.gems-progress{max-width:480px;margin:0 auto 48px;background:rgba(245,234,212,.04);border:1px solid var(--border-subtle);border-radius:14px;padding:20px 24px}
.gems-progress-bar{height:8px;background:rgba(245,234,212,.06);border-radius:4px;overflow:hidden;margin:10px 0 8px}
.gems-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-amber),var(--accent-coral));border-radius:4px;transition:width .5s ease}
.gems-progress-text{display:flex;justify-content:space-between;font-size:12px;color:var(--fg-muted)}
.gems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.gem-card{background:linear-gradient(180deg,rgba(232,168,87,.05),rgba(20,80,79,.3));border:1px solid var(--border-subtle);border-radius:18px;padding:24px;position:relative;overflow:hidden;transition:all .3s}
.gem-card.unlocked{border-color:rgba(232,168,87,.4)}
.gem-icon{width:48px;height:48px;border-radius:12px;background:rgba(232,168,87,.15);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent-amber)}
.gem-card.unlocked .gem-icon{background:linear-gradient(135deg,var(--accent-amber),var(--accent-terracotta));color:#fff}
.gem-card h3{font-family:'Fraunces',serif;font-weight:700;font-size:20px;margin-bottom:8px}
.gem-card.unlocked h3{color:var(--accent-amber)}
.gem-desc-text{font-size:13px;color:var(--fg-secondary);font-weight:300;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:62px;margin-bottom:10px}
.gem-card.locked .gem-desc-text{filter:blur(3px);user-select:none;color:var(--fg-muted)}
.gem-unlock-btn{margin-top:14px;padding:9px 16px;background:var(--accent-amber);color:var(--bg-deep);border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s}

.modal-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(6,34,38,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:24px;max-width:780px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-deep);transform:translateY(20px) scale(.98);transition:transform .3s}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
.modal-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-deep);flex-shrink:0}
.modal-image img{width:100%;height:100%;object-fit:cover}
.modal-close{position:absolute;top:16px;right:16px;z-index:5;width:40px;height:40px;border-radius:10px;background:rgba(6,34,38,.7);backdrop-filter:blur(8px);border:1px solid var(--border-strong);color:#fff;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}
.modal-body{padding:32px;overflow-y:auto;flex:1}
.modal-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-amber);font-weight:700;margin-bottom:10px}
.modal h2{font-family:'Fraunces',serif;font-weight:800;font-size:32px;letter-spacing:-.03em;margin-bottom:16px;line-height:1.1}
.modal-coords{font-size:12px;color:var(--fg-muted);margin-bottom:20px;font-family:monospace}
.modal-desc{color:var(--fg-secondary);font-size:15px;font-weight:300;margin-bottom:24px}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:160px;justify-content:center}

.audio-player{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);z-index:1500;background:rgba(6,34,38,.95);backdrop-filter:blur(20px);border:1px solid var(--border-strong);border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:16px;min-width:380px;max-width:560px;box-shadow:var(--shadow-deep);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.audio-player.active{transform:translateX(-50%) translateY(0)}
.player-stop-num{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--accent-terracotta),var(--accent-coral));display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:700;color:#fff;flex-shrink:0}
.player-info{flex:1;min-width:0}
.player-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-lang{font-size:10px;color:var(--fg-muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.player-controls{display:flex;align-items:center;gap:8px}
.player-btn{width:36px;height:36px;border-radius:50%;background:rgba(245,234,212,.06);border:1px solid var(--border-subtle);color:var(--fg-primary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.player-btn:hover{background:var(--accent-terracotta);border-color:var(--accent-terracotta)}
.player-progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--accent-amber),var(--accent-coral));border-radius:0 0 0 16px;transition:width .2s linear}

.toast-container{position:fixed;top:90px;right:24px;z-index:3000;display:flex;flex-direction:column;gap:8px}
.toast{background:rgba(6,34,38,.95);backdrop-filter:blur(12px);border:1px solid var(--border-strong);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:10px;min-width:260px;max-width:360px;font-size:13px;transform:translateX(120%);transition:transform .4s}
.toast.show{transform:translateX(0)}
.toast.success{border-left:3px solid var(--accent-sage)}
.toast.info{border-left:3px solid var(--accent-amber)}

footer{padding:60px 32px 40px;border-top:1px solid var(--border-subtle);background:rgba(6,34,38,.4)}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-brand{font-family:'Fraunces',serif;font-weight:800;font-size:22px;margin-bottom:10px}
.footer-brand em{font-style:italic;color:var(--accent-amber)}
.footer-desc{color:var(--fg-muted);font-size:13px;max-width:280px;font-weight:300}
.footer-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-amber);margin-bottom:14px;font-weight:700}
.footer-col a{display:block;color:var(--fg-secondary);font-size:13px;text-decoration:none;margin-bottom:8px;transition:color .2s}
.footer-col a:hover{color:var(--accent-amber)}
.footer-bottom{max-width:1400px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--fg-muted)}

.leaflet-popup-content-wrapper{background:rgba(6,34,38,.95);backdrop-filter:blur(12px);color:var(--fg-primary);border-radius:12px;border:1px solid var(--border-strong);box-shadow:var(--shadow-deep)}
.leaflet-popup-tip{background:rgba(6,34,38,.95)}
.leaflet-popup-content{margin:14px 18px;font-family:'Manrope',sans-serif}
.leaflet-popup-content h4{font-family:'Fraunces',serif;font-weight:700;font-size:15px;margin-bottom:4px;color:var(--accent-amber)}
.leaflet-popup-content p{font-size:12px;color:var(--fg-secondary);margin-bottom:8px;font-weight:300}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@media (max-width:1024px){.map-layout{grid-template-columns:1fr;height:auto}.map-wrap{height:480px}.sidebar{height:380px}.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.header-inner{padding:12px 16px}nav.main-nav{display:none}.hero{padding:100px 16px 60px}.hero-stats{gap:24px}.audio-player{min-width:auto;width:calc(100% - 32px)}.footer-inner{grid-template-columns:1fr}}
/* Carousel */
.modal-image { position:relative; overflow:hidden; background:var(--bg-elevated); }
/* Ispravak za carousel slike */
/* Ispravak za carousel slike */
#modal-img-track {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#modal-img-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
}
#modal-img-track img.active {
    display: block;
}
#modal-img-dots { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:5; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .2s; }
.carousel-dot.active { background:var(--accent-amber); transform:scale(1.3); }
/* Carousel Arrows */
.carousel-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background: rgba(6,34,38,.7);
  color: #fff;
  border: none;
  padding: 12px 14px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.carousel-arrow:hover { background: var(--accent-terracotta); }
.carousel-arrow.prev { left: 15px; }
.carousel-arrow.next { right: 15px; }
.card-desc{color:var(--fg-secondary);font-size:14px;font-weight:300;flex:1;margin-bottom:16px;overflow:hidden;max-height:85px;line-height:1.4}
.card-desc p { margin: 0; padding: 0; }
.card-desc p + p { margin-top: 8px; }
/* Paywall Preview Fade */
.modal-desc-preview {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}
.modal-desc-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-card) 20%, transparent);
    pointer-events: none;
}
/* ========================================================
   MOBILNA OPTIMIZACIJA (Responsive Design)
   ======================================================== */

@media (max-width: 1024px) {
    .map-layout { grid-template-columns: 1fr; height: auto; }
    .map-wrap { height: 450px; }
    .sidebar { height: 400px; border-left: none; border-top: 1px solid var(--border-subtle); }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    /* Op膰e */
    section { padding: 60px 16px; }
    .container { max-width: 100%; }
    
    /* Header */
    .header-inner { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .brand-text { font-size: 14px; }
    .brand-text small { display: none; }
    nav.main-nav { display: none; }
    .lang-switcher { padding: 2px; }
    .lang-btn { padding: 4px 6px; font-size: 10px; }
    .btn-admin { padding: 6px 10px; font-size: 12px; }
    .btn-admin span { display: none; } /* Na mobilnom sakrijemo tekst, ostavimo ikonu */

    /* Hero */
    .hero { padding: 100px 16px 40px; min-height: auto; }
    .hero h1 { font-size: clamp(40px, 12vw, 60px); }
    .hero-subtitle { font-size: 15px; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { gap: 24px; margin-top: 40px; flex-wrap: wrap; }
    .hero-stat .num { font-size: 32px; }
    .hero-stat .label { font-size: 10px; }

    /* Mapa i Sidebar */
    .map-section { padding-top: 40px; }
    .map-layout { border-radius: 16px; }
    .map-wrap { height: 350px; }
    .sidebar { height: 350px; }
    .map-overlay-info { top: 10px; left: 10px; max-width: 180px; font-size: 11px; padding: 10px; }
    .map-legend { bottom: 10px; left: 10px; padding: 10px; }
    .legend-item { font-size: 10px; }
    .filter-pill { padding: 4px 8px; font-size: 9px; }

    /* Kartice lokacija */
    .stops-grid { grid-template-columns: 1fr; gap: 20px; }
    .gems-grid { grid-template-columns: 1fr; gap: 15px; }
    .features-grid { grid-template-columns: 1fr; }

    /* Modal */
    .modal-backdrop { padding: 0; }
    .modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .modal-image { aspect-ratio: 16/9; }
    .modal-body { padding: 20px; }
    .modal h2 { font-size: 22px; }
    .modal-actions { flex-direction: column; }
    .modal-actions .btn { width: 100%; }
    .carousel-arrow { padding: 8px 10px; font-size: 14px; }

    /* Audio Player */
    .audio-player { width: calc(100% - 24px); padding: 10px; gap: 10px; bottom: 12px; left: 12px; transform: none; }
    .audio-player.active { transform: none; }
    .player-stop-num { width: 36px; height: 36px; font-size: 14px; }
    .player-info { display: none; } /* Sakrivamo naslov da ne zauzima prostor na malom ekranu */
    .player-controls { margin-left: auto; }

    /* Footer */
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 400px) {
    .hero h1 { font-size: 36px; }
    .map-legend { display: none; } /* Sakrijemo legendu na jako malim ekranima da ne prekriva mapu */
    .map-overlay-info { max-width: 140px; }
}
/* ========================================================
   MOBILNA OPTIMIZACIJA (Audio Player i Logo)
   ======================================================== */

/* Logo prikaz (Desktop glavni) */
.logo-desktop { display: block; }
.logo-mobile { display: none; }

@media (max-width: 768px) {
    /* Logo i Hamburger */
    .desktop-only { display: none !important; }
    .logo-desktop { display: none; }
    .logo-mobile { display: block; }
    
    /* Hamburger */
    .hamburger-btn {
        display: flex; flex-direction: column; justify-content: space-around;
        width: 30px; height: 30px; background: transparent; border: none;
        cursor: pointer; padding: 0; margin-left: auto; z-index: 1100;
    }
    .hamburger-btn span { display: block; width: 100%; height: 3px; background: var(--fg-primary); border-radius: 2px; transition: all 0.3s ease; }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    /* Mobilni Dropdown */
    .mobile-dropdown { display: none; position: absolute; top: 60px; right: 0; width: 100%; background: var(--bg-primary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); flex-direction: column; padding: 20px; gap: 20px; z-index: 1050; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
    .mobile-dropdown.open { display: flex; }
    .mobile-nav-links { display: flex; flex-direction: column; gap: 5px; }
    .mobile-nav-links a { color: var(--fg-primary); text-decoration: none; font-size: 18px; font-weight: 600; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
    .mobile-langs { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
    .mobile-langs .lang-btn { padding: 8px 14px; font-size: 12px; }
    
    /* Mobilni gumb za račun ( Žut normalno, proziran na hover ) */
    .mobile-account-btn {
        width: 100%; justify-content: center; padding: 14px; margin-top: 10px;
        background: var(--accent-amber); color: var(--bg-deep); border: 1px solid var(--accent-amber);
    }
    .mobile-account-btn:hover {
        background: transparent; color: var(--accent-amber);
    }

    /* Audio Player - Veći na mobilnom */
    .audio-player { 
        min-width: auto; 
        width: calc(100% - 24px); 
        padding: 12px 16px; 
        gap: 12px; 
        border-radius: 14px;
    }
    .player-info { 
        display: block !important; 
        flex: 1; 
        min-width: 0; 
    }
    .player-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .player-lang { font-size: 10px; }
    .player-stop-num { width: 40px; height: 40px; font-size: 16px; }
    .player-controls { margin-left: auto; gap: 10px; }
    .player-btn { width: 40px; height: 40px; }
    .player-btn svg { width: 16px; height: 16px; }
    }
}

@media (max-width: 400px) {
    /* Na jako malim ekranima sakrivamo "EN 路 Narrating" tekst kako bi naslov stao */
    .player-lang { display: none; }
}
/* ========================================================
   HAMBURGER MENI I ISPRAVAK LOGOTIPA
   ======================================================== */

/* Desktop prikaz (sakrij hamburger i mobilne elemente) */
.hamburger-btn, .mobile-dropdown { display: none; }

/* Mobilni prikaz */
@media (max-width: 768px) {
    /* Sakrij standardne desktop elemente u headeru */
    .desktop-only { display: none !important; }
    
    /* Prikaz hamburgera */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: auto;
        z-index: 1100;
    }
    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background: var(--fg-primary);
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    .hamburger-btn.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .hamburger-btn.active span:nth-child(2) { opacity: 0; }
    .hamburger-btn.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    /* Mobilni Dropdown Panel */
    .mobile-dropdown {
        display: none;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-subtle);
        border-bottom: 1px solid var(--border-subtle);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        z-index: 1050;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }
    .mobile-dropdown.open { display: flex; }
    
    .mobile-nav-links { display: flex; flex-direction: column; gap: 5px; }
    .mobile-nav-links a {
        color: var(--fg-primary);
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        padding: 15px 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    .mobile-langs { display: flex; gap: 5px; justify-content: center; margin-top: 10px; }
    .mobile-langs .lang-btn { padding: 8px 14px; font-size: 12px; }
    .mobile-account-btn { width: 100%; justify-content: center; padding: 14px; margin-top: 10px; }
}

/* Ispravak za prikaz samog logotipa */
.logo-desktop { display: block; }
.logo-mobile { display: none; }

@media (max-width: 768px) {
    .logo-desktop { display: none; }
    .logo-mobile { display: block; }
}

/* Stranice (Contact, FAQ, Terms) */
.page-container { max-width: 800px; margin: 120px auto 60px; padding: 0 20px; }
.page-container h1 { font-family: 'Fraunces', serif; font-size: 36px; color: var(--accent-amber); margin-bottom: 30px; }
.page-container h2 { font-family: 'Fraunces', serif; font-size: 22px; color: var(--fg-primary); margin-top: 30px; margin-bottom: 15px; }
.page-container p, .page-container li { color: var(--fg-secondary); line-height: 1.7; margin-bottom: 15px; font-weight: 300; }
.page-container a { color: var(--accent-amber); }

.contact-form, .faq-item, .terms-box { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 30px; margin-bottom: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.contact-form label { display:block; font-size:12px; color:var(--fg-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.1em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 14px 16px; margin-bottom: 20px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-deep); color: var(--fg-primary); font-family: inherit; font-size: 14px; resize: vertical; }
.contact-form textarea { min-height: 150px; }

.faq-item { cursor: pointer; transition: border-color 0.2s; }
.faq-item:hover { border-color: var(--accent-amber); }
.faq-q { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--fg-primary); font-size: 16px; }
.faq-q::after { content: '+'; font-size: 24px; color: var(--accent-amber); transition: transform 0.2s; }
.faq-item.active .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: var(--fg-secondary); font-size: 14px; }
.faq-item.active .faq-a { max-height: 200px; padding-top: 15px; }
/* Geolokacijski gumb na karti */
.geolocate-btn {
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    padding: 4px;
    color: var(--accent-amber) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.geolocate-btn:hover {
    background-color: var(--accent-terracotta) !important;
    color: #fff !important;
    border-color: var(--accent-terracotta) !important;
}
/* ========================================================
   MODERNA SVIJETLA KARTA (OSM stiliziran filterom)
   ======================================================== */

.leaflet-container {
    background: #eef2f3;
    border-radius: 12px;
}

/* Filter koji pretvara standardnu OSM kartu u modernu, svijetlu kartu */
.leaflet-tile-pane {
    filter: grayscale(0.3) brightness(1.05) contrast(0.95) saturate(0.8);
}

/* Osiguravamo da naši markeri ostaju oštri i u izvornim bojama */
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-control-container,
.leaflet-shadow-pane {
    filter: none !important;
}

/* Zoom gumbi */
.leaflet-bar a {
    background-color: rgba(6,34,38,.85) !important;
    color: var(--accent-amber) !important;
    border-color: var(--border-strong) !important;
    backdrop-filter: blur(8px);
}
.leaflet-bar a:hover {
    background-color: var(--accent-terracotta) !important;
    color: #fff !important;
}

/* Popup na karti (Zadržavamo tamnu temu za popup da se istakne) */
.leaflet-popup-content-wrapper {
    background: rgba(6,34,38,.95) !important;
    color: var(--fg-primary) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
    border-radius: 12px !important;
}
.leaflet-popup-tip {
    background: rgba(6,34,38,.95) !important;
}
.leaflet-popup-content {
    margin: 14px 18px !important;
    font-family: 'Manrope', sans-serif !important;
}
.leaflet-popup-content h4 {
    font-family: 'Fraunces', serif !important;
    color: var(--accent-amber) !important;
    margin-bottom: 4px !important;
}
.leaflet-popup-content p {
    color: var(--fg-secondary) !important;
    font-size: 12px !important;
}
.leaflet-container a.leaflet-popup-close-button {
    color: var(--fg-muted) !important;
}
.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--fg-primary) !important;
}