/* =====================================================
   Alam Viewer
   style.css
   PART 2A-1
===================================================== */

:root{

--primary:#5a7562;
--primary-dark:#415447;

--secondary:#779680;

--bg:#f6f6fa;

--card:#ffffff;

--border:#dededf;

--text:#232428;

--text-light:#606060;

--danger:#dc2626;

--shadow:
0 1px 3px rgba(0,0,0,.05);

--radius:10px;

--transition:.25s ease;

--sidebar-width:330px;

--hero-height:200px;

--header-height:72px;

--font:'Noto Sans',sans-serif;

}



/* =====================================================
Dark
===================================================== */

body.dark{

--bg:#202124;

--card:#232327;

--border:#303136;

--text:#f8f9fa;

--text-light:#7f8893;

--shadow:
0 1px 3px rgba(0,0,0,.3);

}



/* =====================================================
Reset
===================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:var(--font);

background:var(--bg);

color:var(--text);

transition:.3s;

line-height:1.6;

overflow-x:hidden;

}



img{

display:block;

max-width:100%;

}



button{

font-family:inherit;

border:none;

background:none;

cursor:pointer;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



/* =====================================================
Viewer
===================================================== */

#viewer{

min-height:100vh;

display:flex;

flex-direction:column;

}



/* =====================================================
Container
===================================================== */

.viewer-layout{

width:min(1500px,95%);

margin:auto;

display:grid;

grid-template-columns:

var(--sidebar-width)

1fr;

gap:24px;

padding:30px 0;

align-items:start;

}



/* =====================================================
Card
===================================================== */

.card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:22px;

transition:var(--transition);

}



.card:hover{

transform:translateY(-2px);

box-shadow:0 6px 16px rgba(0,0,0,.08);

}



body.dark .card:hover{

box-shadow:0 6px 20px rgba(0,0,0,.4);

}



.card h3{

display:flex;

align-items:center;

gap:10px;

margin-bottom:18px;

font-size:18px;

font-weight:700;

color:var(--text);

}



.card h3 i{

color:var(--primary);

}

/* =====================================================
   PART 2A-2
   Loader + Hero
===================================================== */

/* ===========================
LOADER
=========================== */

#loader{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
180deg,
#eef2ef,
#ffffff
);

z-index:99999;

transition:.35s;

}

body.dark #loader{

background:#202124;

}

#loader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

.loader-box{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:18px;

text-align:center;

}

.loader-circle{

width:72px;

height:72px;

border-radius:50%;

border:6px solid rgba(90,117,98,.15);

border-top-color:var(--primary);

animation:loaderSpin 1s linear infinite;

}

.loader-box h2{

font-size:24px;

font-weight:700;

color:var(--text);

}

.loader-box p{

font-size:15px;

color:var(--text-light);

}

@keyframes loaderSpin{

to{

transform:rotate(360deg);

}

}


/* ===========================
HERO
=========================== */

.hero{

position:relative;

height:var(--hero-height);

overflow:hidden;

display:flex;

align-items:flex-end;

padding:28px 36px;

color:#fff;

background:

linear-gradient(
135deg,
#5a7562,
#415447
);

}

.hero-cover{

position:absolute;

inset:0;

background-size:cover;

background-position:center;

filter:blur(1px);

transform:scale(1.05);

opacity:.35;

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.20),

rgba(0,0,0,.55)

);

}

.hero-content{

position:relative;

z-index:2;

width:min(1500px,95%);

margin:0 auto;

display:flex;

justify-content:space-between;

align-items:flex-end;

gap:24px;

}

.hero-left{

max-width:720px;

display:flex;

flex-direction:column;

gap:8px;

}

/* ===========================
BADGE
=========================== */

.badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:6px 14px;

border-radius:999px;

background:rgba(255,255,255,.16);

backdrop-filter:blur(10px);

font-size:12px;

font-weight:600;

width:max-content;

}


/* ===========================
ROUTE BADGE
=========================== */

/* ===========================
TITLE
=========================== */

#track-title{

font-size:26px;

font-weight:800;

line-height:1.2;

text-shadow:

0 4px 18px rgba(0,0,0,.35);

}

#track-route{

font-size:14px;

opacity:.94;

max-width:650px;

}


/* ===========================
THEME BUTTON
=========================== */

/* =====================================================
   PART 2A-3
   Sidebar + Content + Map
===================================================== */

/* ===========================
SIDEBAR
=========================== */

.sidebar{

display:flex;

flex-direction:column;

gap:24px;

align-self:start;

position:sticky;

top:24px;

}


/* ===========================
CONTENT
=========================== */

.content{

display:flex;

flex-direction:column;

gap:24px;

min-width:0;

}


/* ===========================
MAP CARD
=========================== */

.map-card{

padding:0;

overflow:hidden;

position:relative;

}


/* ===========================
TOOLBAR
=========================== */

.toolbar{

position:absolute;

top:18px;

right:18px;

z-index:500;

display:flex;

gap:10px;

}

.toolbar button{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

box-shadow:

0 6px 20px rgba(0,0,0,.15);

font-size:17px;

color:#36383a;

transition:.25s;

}

.toolbar button:hover{

transform:translateY(-2px);

background:#ffffff;

color:var(--primary);

}

.toolbar button:active{

transform:scale(.95);

}


/* ===========================
MAP
=========================== */

#map{

width:100%;

height:620px;

background:#dbeafe;

position:relative;

overflow:hidden;

}


/* ===========================
MAP LOADING
=========================== */

.map-loading{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:600;

color:var(--text-light);

background:

linear-gradient(

180deg,

#f3f7f4,

#ffffff

);

z-index:2;

}


/* ===========================
LEAFLET
=========================== */

.leaflet-container{

width:100%;

height:100%;

font-family:var(--font);

background:#dbeafe;

}


/* Zoom */

.leaflet-control-zoom{

border:none !important;

box-shadow:

0 8px 20px rgba(0,0,0,.18);

overflow:hidden;

border-radius:14px;

}

.leaflet-control-zoom a{

width:42px;

height:42px;

line-height:42px;

font-size:18px;

background:#fff;

color:#36383a;

transition:.2s;

}

.leaflet-control-zoom a:hover{

background:var(--primary);

color:#fff;

}


/* Popup */

.leaflet-popup-content-wrapper{

border-radius:14px;

padding:4px;

box-shadow:

0 10px 30px rgba(0,0,0,.18);

}

.leaflet-popup-content{

margin:14px 16px;

font-size:14px;

line-height:1.5;

}

.leaflet-popup-tip{

box-shadow:none;

}


/* Attribution */

.leaflet-control-attribution{

font-size:11px;

padding:3px 8px;

background:rgba(255,255,255,.9);

backdrop-filter:blur(8px);

}


/* ===========================
TRACK LINE
=========================== */

.track-line{

filter:

drop-shadow(

0 2px 6px rgba(0,0,0,.35)

);

}


/* ===========================
START & FINISH
=========================== */

.marker-start,

.marker-finish{

display:flex;

align-items:center;

justify-content:center;

width:18px;

height:18px;

border-radius:50%;

border:3px solid #fff;

box-shadow:

0 4px 12px rgba(0,0,0,.30);

}

.marker-start{

background:#16a34a;

}

.marker-finish{

background:#dc2626;

}

/* =====================================================
   PART 2A-4
   Footer + Responsive + Utility
===================================================== */

/* ===========================
INFO TABLE
=========================== */

.info-table{

width:100%;

border-collapse:collapse;

}

.info-table tr{

border-bottom:1px solid var(--border);

}

.info-table tr:last-child{

border-bottom:none;

}

.info-table td{

padding:12px 4px;

font-size:14px;

}

.info-table td:first-child{

width:42%;

font-weight:600;

color:var(--text-light);

}

.info-table td:last-child{

font-weight:600;

color:var(--text);

word-break:break-word;

}


/* ===========================
FOOTER
=========================== */

footer{

margin-top:auto;

padding:30px 20px;

text-align:center;

font-size:14px;

color:var(--text-light);

border-top:1px solid var(--border);

background:var(--card);

}

footer strong{

color:var(--primary);

font-weight:700;

}


/* ===========================
UTILITY
=========================== */

.hidden{

display:none !important;

}

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.mt-16{

margin-top:16px;

}

.mt-24{

margin-top:24px;

}

.mb-16{

margin-bottom:16px;

}

.mb-24{

margin-bottom:24px;

}

.w-100{

width:100%;

}


/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:transparent;

}

::-webkit-scrollbar-thumb{

background:#9f9f9f;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#606060;

}

body.dark ::-webkit-scrollbar-thumb{

background:#464c53;

}

body.dark ::-webkit-scrollbar-thumb:hover{

background:#7f8893;

}


/* ===========================
ANIMATION
=========================== */

.fade-in{

animation:fadeIn .35s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:none;

}

}

.slide-up{

animation:slideUp .35s ease;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}


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

@media (max-width:1200px){

.viewer-layout{

grid-template-columns:1fr;

}

.sidebar{

position:relative;

top:auto;

order:2;

}

.content{

order:1;

}

#map{

height:560px;

}

}


@media (max-width:768px){

.hero{

padding:20px 20px;

height:auto;

min-height:150px;

}

.hero-content{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

#track-title{

font-size:22px;

}

#track-route{

font-size:13px;

}

.viewer-layout{

width:94%;

padding:18px 0;

gap:18px;

}

.card{

padding:18px;

}

.toolbar{

top:12px;

right:12px;

gap:8px;

}

.toolbar button{

width:42px;

height:42px;

border-radius:12px;

}

#map{

height:420px;

}

footer{

padding:22px 16px;

font-size:13px;

}

}


@media (max-width:480px){

.badge{

font-size:12px;

padding:6px 12px;

}

#track-title{

font-size:20px;

}

.stats-grid{

grid-template-columns:1fr;

}

#map{

height:340px;

}

.card h3{

font-size:16px;

}

}

/* =====================================================
   PART 2B-1
   Statistics
===================================================== */

/* ===========================
STATS GRID
=========================== */

.stats-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:14px;

margin-top:8px;

}


/* ===========================
STAT CARD
=========================== */

.stat{

display:flex;

flex-direction:column;

justify-content:center;

padding:18px;

border-radius:16px;

background:

linear-gradient(
180deg,
rgba(90,117,98,.05),
rgba(90,117,98,.02)
);

border:1px solid rgba(90,117,98,.08);

transition:.25s;

min-height:96px;

}

.stat:hover{

transform:translateY(-3px);

box-shadow:

0 10px 22px rgba(0,0,0,.08);

border-color:rgba(90,117,98,.18);

}

body.dark .stat{

background:

rgba(255,255,255,.03);

border-color:

rgba(255,255,255,.06);

}

body.dark .stat:hover{

border-color:

rgba(255,255,255,.15);

}


/* ===========================
LABEL
=========================== */

.stat span{

font-size:13px;

font-weight:500;

color:var(--text-light);

margin-bottom:8px;

}


/* ===========================
VALUE
=========================== */

.stat strong{

font-size:26px;

font-weight:800;

line-height:1.1;

color:var(--primary);

letter-spacing:-.5px;

}

body.dark .stat strong{

color:#94ad9b;

}


/* ===========================
UNIT
=========================== */

.stat small{

margin-top:6px;

font-size:12px;

color:var(--text-light);

}


/* ===========================
ANIMATION
=========================== */

.stat{

animation:fadeIn .35s ease;

}

/* =====================================================
   PART 2B-2
   Download Card
===================================================== */

/* ===========================
DOWNLOAD LIST
=========================== */

.download-list{

display:flex;

flex-direction:column;

gap:14px;

margin-top:10px;

}


/* ===========================
DOWNLOAD BUTTON
=========================== */

.download-btn{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

padding:16px 18px;

border-radius:16px;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

font-weight:600;

font-size:15px;

transition:.25s;

box-shadow:
0 10px 22px rgba(90,117,98,.22);

}

.download-btn i{

font-size:18px;

}


/* ===========================
HOVER
=========================== */

.download-btn:hover{

transform:translateY(-3px);

box-shadow:
0 16px 34px rgba(90,117,98,.30);

}

.download-btn:active{

transform:scale(.97);

}


/* ===========================
DISABLED
=========================== */

.download-btn.disabled{

background:#ebeaf0;

color:#606060;

pointer-events:none;

box-shadow:none;

}

body.dark .download-btn.disabled{

background:#242528;

color:#7f8893;

}


/* ===========================
DOWNLOAD TYPE
=========================== */

.download-btn::after{

content:"↗";

font-size:14px;

opacity:.75;

transition:.25s;

}

.download-btn:hover::after{

transform:translateX(4px);

opacity:1;

}


/* ===========================
EMPTY
=========================== */

.empty{

padding:20px;

border-radius:14px;

background:rgba(0,0,0,.03);

text-align:center;

font-size:14px;

color:var(--text-light);

}

body.dark .empty{

background:rgba(255,255,255,.04);

}


/* ===========================
DOWNLOAD BADGE
=========================== */

.download-badge{

display:inline-flex;

align-items:center;

padding:5px 10px;

border-radius:999px;

font-size:11px;

font-weight:700;

background:rgba(255,255,255,.18);

color:#fff;

margin-left:auto;

}

/* =====================================================
   PART 2B-3
   Waypoint + Elevation + Info
===================================================== */


/* ===========================
WAYPOINT LIST
=========================== */

#waypoint-list{

display:flex;

flex-direction:column;

gap:14px;

margin-top:10px;

}


/* ===========================
WAYPOINT ITEM
=========================== */

.waypoint{

display:flex;

align-items:flex-start;

gap:14px;

padding:16px;

border:1px solid var(--border);

border-radius:16px;

background:var(--card);

transition:.25s;

position:relative;

overflow:hidden;

cursor:pointer;

}

.waypoint:hover{

transform:translateY(-3px);

box-shadow:
0 12px 28px rgba(0,0,0,.08);

}

.waypoint.active{

border-color:var(--primary);

box-shadow:
0 0 0 2px rgba(90,117,98,.25);

}

body.dark .waypoint{

background:#232327;

}


/* ===========================
WAYPOINT DOT
=========================== */

.waypoint-dot{

width:14px;

height:14px;

border-radius:50%;

background:var(--primary);

margin-top:6px;

flex-shrink:0;

position:relative;

}

.waypoint-dot::after{

content:"";

position:absolute;

left:50%;

top:100%;

width:2px;

height:42px;

background:rgba(90,117,98,.25);

transform:translateX(-50%);

}

.waypoint:last-child .waypoint-dot::after{

display:none;

}

/* ===========================
POI ITEM (beda dari breakdown Pos Jalur -- gak ada garis
penghubung timeline, dot-nya nampilin emoji ikon kategori)
=========================== */

.poi-item .waypoint-dot.poi-dot{

width:28px;

height:28px;

border-radius:50%;

background:rgba(90,117,98,.12);

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

margin-top:0;

}

.poi-item .waypoint-dot.poi-dot::after{

display:none;

}

body.dark .poi-item .waypoint-dot.poi-dot{

background:rgba(255,255,255,.08);

}

#poi-card .waypoint{

cursor:pointer;

}


/* ===========================
WAYPOINT CONTENT
=========================== */

.waypoint-content{

flex:1;

display:flex;

flex-direction:column;

gap:4px;

}

.waypoint-title{

font-size:15px;

font-weight:700;

color:var(--text);

}

.waypoint-subtitle{

font-size:13px;

color:var(--text-light);

}

.waypoint-distance{

font-size:12px;

font-weight:600;

color:var(--primary);

margin-top:6px;

}


/* ===========================
ELEVATION CARD
=========================== */

#elevation-chart{

width:100%;

height:320px !important;

display:block;

}


/* ===========================
INFO TABLE
=========================== */

.info-table{

width:100%;

border-collapse:collapse;

margin-top:6px;

}

.info-table td{

padding:13px 4px;

font-size:14px;

border-bottom:1px solid var(--border);

}

.info-table tr:last-child td{

border-bottom:none;

}

.info-table td:first-child{

font-weight:600;

color:var(--text-light);

width:40%;

}

.info-table td:last-child{

font-weight:700;

color:var(--text);

text-align:right;

}


/* ===========================
BADGES
=========================== */

.info-badge{

display:inline-flex;

align-items:center;

padding:6px 12px;

border-radius:999px;

background:rgba(90,117,98,.12);

color:var(--primary);

font-size:12px;

font-weight:700;

}


/* ===========================
CARD HOVER
=========================== */

.card{

transition:
transform .25s,
box-shadow .25s;

}

.card:hover{

transform:translateY(-2px);

box-shadow:
0 18px 36px rgba(0,0,0,.08);

}


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

@media (max-width:768px){

.waypoint{

padding:14px;

}

.waypoint-title{

font-size:14px;

}

.waypoint-subtitle{

font-size:12px;

}

#elevation-chart{

height:240px !important;

}

.info-table td{

font-size:13px;

}

}

/* =====================================================
   PART 2C
   Final Polish
===================================================== */

/* ===========================
LEAFLET POPUP
=========================== */

.leaflet-popup-content-wrapper{

border:none;

border-radius:18px;

padding:0;

overflow:hidden;

box-shadow:
0 18px 45px rgba(0,0,0,.22);

}

.leaflet-popup-content{

margin:18px;

font-size:14px;

line-height:1.6;

}

.leaflet-popup-tip{

box-shadow:none;

}

.leaflet-container a{

color:var(--primary);

font-weight:600;

}


/* ===========================
TOOLTIP
=========================== */

.leaflet-tooltip{

padding:8px 12px;

border:none;

border-radius:12px;

background:rgba(31,41,55,.92);

color:#fff;

font-size:12px;

font-weight:600;

box-shadow:
0 8px 22px rgba(0,0,0,.22);

}

body.dark .leaflet-tooltip{

background:#1f1f1f;

}


/* ===========================
MARKERS
=========================== */

.marker-start,
.marker-finish{

display:flex;

align-items:center;

justify-content:center;

width:18px;

height:18px;

border-radius:50%;

border:3px solid #fff;

box-shadow:
0 4px 12px rgba(0,0,0,.25);

}

.marker-start{

background:#16a34a;

}

.marker-finish{

background:#dc2626;

}

.marker-waypoint{

width:12px;

height:12px;

border-radius:50%;

background:#f59e0b;

border:2px solid #fff;

}


/* ===========================
CHART
=========================== */

.chart-container{

position:relative;

width:100%;

height:320px;

}

canvas{

max-width:100%;

}


/* ===========================
LOADING SKELETON
=========================== */

.skeleton{

position:relative;

overflow:hidden;

background:#ebeaf0;

border-radius:12px;

}

.skeleton::after{

content:"";

position:absolute;

inset:0;

transform:translateX(-100%);

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.6),

transparent

);

animation:skeleton 1.3s infinite;

}

body.dark .skeleton{

background:#242528;

}

@keyframes skeleton{

100%{

transform:translateX(100%);

}

}


/* ===========================
BADGES
=========================== */

.badge-success{

background:#16a34a;

color:#fff;

}

.badge-warning{

background:#f59e0b;

color:#fff;

}

.badge-danger{

background:#dc2626;

color:#fff;

}

.badge-info{

background:#0284c7;

color:#fff;

}


/* ===========================
BUTTONS
=========================== */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 18px;

border-radius:14px;

font-weight:600;

transition:.25s;

cursor:pointer;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:var(--primary-dark);

}

.btn-outline{

border:1px solid var(--border);

background:var(--card);

}

.btn-outline:hover{

border-color:var(--primary);

color:var(--primary);

}


/* ===========================
HELPER
=========================== */

.flex{

display:flex;

}

.flex-center{

display:flex;

align-items:center;

justify-content:center;

}

.space-between{

display:flex;

justify-content:space-between;

align-items:center;

}

.gap-8{gap:8px;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.gap-24{gap:24px;}

.text-muted{

color:var(--text-light);

}

.text-primary{

color:var(--primary);

}

.rounded{

border-radius:16px;

}

.shadow{

box-shadow:var(--shadow);

}


/* ===========================
PRINT
=========================== */

@media print{

.hero,
.toolbar,
.download-list,
footer{

display:none !important;

}

.viewer-layout{

display:block;

width:100%;

}

.sidebar{

display:none;

}

.content{

width:100%;

}

#map{

height:500px;

}

.card{

box-shadow:none;

border:1px solid #ccc;

page-break-inside:avoid;

}

}


/* ===========================
SMALL DEVICES
=========================== */

@media(max-width:576px){

.stats-grid{

grid-template-columns:1fr;

}

.download-btn{

font-size:14px;

padding:14px;

}

.card{

padding:16px;

}

.toolbar{

flex-direction:column;

}

}


/* ===========================
LARGE SCREEN
=========================== */

@media(min-width:1600px){

.viewer-layout{

max-width:1600px;

}

#map{

height:720px;

}

}


/* ===========================
SELECTION
=========================== */

::selection{

background:rgba(90,117,98,.18);

color:inherit;

}


/* ===========================
END
===================================================== */
/* ===========================
INFO TOGGLE BUTTON (arah jalur)
=========================== */

.card h3{
position:relative;
display:flex;
align-items:center;
gap:8px;
}

.info-toggle-btn{
margin-left:auto;
border:none;
background:transparent;
color:inherit;
opacity:.55;
cursor:pointer;
font-size:15px;
padding:2px 4px;
transition:opacity .2s;
}

.info-toggle-btn:hover{
opacity:1;
}

.direction-panel{
font-size:13px;
line-height:1.5;
background:rgba(90,117,98,.1);
border-left:3px solid #5a7562;
padding:10px 12px;
border-radius:6px;
margin-bottom:12px;
}

/* ===========================
PRINT BUTTON (di dalam #download-list)
=========================== */

button.download-btn{
width:100%;
font:inherit;
cursor:pointer;
}

/* ===========================
PRINT / SAVE PDF
=========================== */

@media print{

.toolbar,
#download-list,
.map-loading,
#loader{
display:none !important;
}

.viewer-layout{
display:block !important;
}

.sidebar,
.content{
width:100% !important;
max-width:100% !important;
}

.card{
break-inside:avoid;
box-shadow:none !important;
border:1px solid #ddd;
}

#map{
height:380px !important;
}

.hero{
break-inside:avoid;
}

body{
background:#fff !important;
color:#000 !important;
}

}