@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:wght@400;500;600&display=swap');
:root{
 --night:#16090c;--forest:#351018;--forest2:#501722;--gold:#c9a45e;
 --gold2:#f0d39a;--cream:#f3e7d8;--muted:#d0b8ad;--line:rgba(201,164,94,.48);
 --shadow:0 18px 55px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--night);color:var(--cream);font-family:'EB Garamond',Georgia,serif;font-size:18px;line-height:1.65}
a{color:var(--gold2);text-decoration:none}
button{font:inherit}
header{
 position:sticky;top:0;z-index:50;min-height:82px;padding:12px clamp(18px,4vw,64px);
 display:flex;align-items:center;justify-content:space-between;gap:22px;
 background:rgba(5,17,12,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)
}
.brand{font-family:'Cinzel',serif;font-size:19px;letter-spacing:2px;color:var(--gold2);line-height:1.2;white-space:nowrap}
.brand small{display:block;font-size:9px;letter-spacing:2.3px;color:#d7c8a4}
nav{display:flex;align-items:center;gap:clamp(12px,2vw,30px)}
nav a,.musicBtn{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#e7d8b6}
nav a{padding:10px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--gold2);border-color:var(--gold)}
#menuBtn{display:none;background:transparent;border:1px solid var(--line);color:var(--gold2);padding:8px 12px}
#musicBtn{background:linear-gradient(135deg,#1c3a2a,#0b1b13);border:1px solid var(--gold);padding:12px 16px;color:var(--gold2);font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.hero{
 min-height:min(790px,calc(100vh - 82px));position:relative;isolation:isolate;overflow:hidden;
 display:flex;align-items:center;padding:clamp(48px,8vw,120px) clamp(24px,9vw,150px);
 background:#091710 url("images/hero-sultan.jpg") center 42%/cover no-repeat;
 border-bottom:1px solid var(--gold);
}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:
 linear-gradient(90deg,rgba(5,17,12,.96) 0%,rgba(5,17,12,.82) 36%,rgba(5,17,12,.24) 70%,rgba(5,17,12,.08) 100%),
 linear-gradient(0deg,rgba(5,17,12,.58),transparent 34%,rgba(5,17,12,.15))}
.hero:after{content:"";position:absolute;inset:13px;border:1px solid rgba(220,184,111,.42);pointer-events:none}
.hero>div:first-child{max-width:650px;position:relative;z-index:2}
.hero small,.section>small,.facts small,.cards small,.panel small{font-family:'Cinzel',serif;letter-spacing:2px;color:var(--gold2);font-size:10px}
h1,h2,h3{font-family:'Cinzel',Georgia,serif;font-weight:500;line-height:1.16}
.hero h1{font-size:clamp(48px,6.3vw,94px);letter-spacing:1px;margin:24px 0 10px;color:#f1dfb6;text-shadow:0 5px 24px #0008}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero h3{font-size:clamp(16px,2vw,23px);letter-spacing:2px;color:var(--gold);margin:0 0 22px}
.hero p{max-width:590px;font-size:21px;color:#eee2c8;line-height:1.55;text-shadow:0 2px 10px #000}
.btn{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:13px 24px;background:linear-gradient(135deg,#d8bb79,#a77e3d);border:1px solid #f0d89d;color:#1a1b11;font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 8px 24px #0005;transition:.25s}
.btn:hover{transform:translateY(-3px);filter:brightness(1.08)}
.seal{position:absolute;right:8%;bottom:10%;width:142px;height:168px;display:grid;place-content:center;text-align:center;background:rgba(8,25,17,.76);border:1px solid var(--gold);clip-path:polygon(50% 0,100% 17%,92% 75%,50% 100%,8% 75%,0 17%);font-size:27px;line-height:1.4;color:var(--gold2);text-shadow:0 2px 8px #000}
.seal small{display:block;margin-top:6px;font-size:9px}
.ticker{padding:12px;text-align:center;background:#142d21;color:#d9c18b;border-block:1px solid var(--line);font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px}
.section{position:relative;isolation:isolate;padding:90px clamp(22px,8vw,130px);background:#0b1b13;overflow:hidden;border-bottom:1px solid rgba(201,164,94,.22)}
.section:before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;opacity:.5;filter:saturate(.75) sepia(.12)}
.section:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,19,13,.96),rgba(7,23,16,.84));}
#biografi:before{background-image:url("images/biography-palace.jpg");background-position:center 38%}
#timeline:before{background-image:url("images/timeline-campaign.jpg")}
[id="1453"]:before{background-image:url("images/siege-1453.jpg");background-position:center 45%}
#legasi:before{background-image:url("images/legacy-empire.jpg")}
#rujukan:before{background-image:url("images/manuscript-texture.jpg")}
.section.dark{background:#08150f}
.section>small{display:block;margin-bottom:14px}
h2{font-size:clamp(32px,4.4vw,54px);color:var(--cream);margin:0 0 18px}
h2 em{color:var(--gold2);font-style:normal}
h3{font-size:22px;color:var(--gold2)}
.lead{max-width:850px;font-size:21px;color:#e2d7bf;margin:0 0 32px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:34px 0}
.facts article,.panel,.detail,.cards article,.quiz,blockquote,.real-map{
 background:linear-gradient(145deg,rgba(24,52,37,.94),rgba(8,24,16,.95));
 border:1px solid var(--line);box-shadow:var(--shadow);padding:23px
}
.facts b{display:block;font-family:'Cinzel',serif;font-size:19px;color:var(--gold2);margin:9px 0}
.facts p,.cards p,.panel p,.detail p{color:#d8ceb8;margin-bottom:0}
.columns{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch;margin-top:30px}
blockquote{margin:0;display:flex;flex-direction:column;justify-content:center;font-size:23px;color:#ead9b3;border-left:3px solid var(--gold)}
blockquote small{font:10px 'Cinzel',serif;letter-spacing:2px;color:var(--gold);margin-top:22px}
.years{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}
.years button{background:#10291d;color:var(--gold2);border:1px solid var(--line);padding:10px 17px;font-family:'Cinzel',serif;font-size:12px;cursor:pointer}
.years button.active,.years button:hover{background:var(--gold);color:#142016}
.detail{min-height:220px;padding:32px}
.detail h3{font-size:27px}
.map{padding:15px}
.real-map{background:#12281d}
.real-map img{display:block;width:100%;max-height:520px;object-fit:contain;background:#eee4d0}
.real-map small{display:block;font-size:12px;color:#d4c8ad;margin-top:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards article{transition:transform .25s,border-color .25s}
.cards article:hover{transform:translateY(-5px);border-color:var(--gold)}
.cards h3{font-size:18px}
.note{font-size:14px;color:#c8b99b;border-left:2px solid var(--gold);padding-left:14px}
.quiz{max-width:820px}
.quiz label{display:block;padding:7px 0;color:#e7dcc5}
.quiz input{accent-color:var(--gold)}
.sources{padding-left:22px}
.sources li{padding:14px 12px;border-bottom:1px solid #c9a45e33;color:#e5d9c2}
.sources a{color:var(--gold2);text-decoration:underline}
footer{padding:28px;text-align:center;background:#050e0a;color:#a99b7f;font:10px 'Cinzel',serif;letter-spacing:1px;border-top:1px solid var(--line)}
@media(max-width:1000px){
 header{flex-wrap:wrap}
 nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}
 .facts{grid-template-columns:repeat(2,1fr)}
 .cards.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
 header{min-height:70px;padding:10px 16px}
 .brand{font-size:15px}
 #menuBtn{display:block;margin-left:auto}
 nav{display:none;flex-direction:column;align-items:stretch;gap:0;background:#0a1b12;border:1px solid var(--line);padding:8px}
 nav.open{display:flex}
 nav a{padding:10px 12px}
 #musicBtn{font-size:9px;padding:10px}
 .hero{min-height:690px;padding:52px 26px 90px;background-position:58% center}
 .hero:before{background:linear-gradient(0deg,rgba(5,17,12,.97) 0%,rgba(5,17,12,.82) 50%,rgba(5,17,12,.25) 100%)}
 .hero>div:first-child{max-width:100%;margin-top:auto}
 .hero h1{font-size:clamp(42px,11vw,60px)}
 .hero p{font-size:18px}
 .seal{right:28px;top:25px;bottom:auto;width:88px;height:108px;font-size:18px}
 .section{padding:68px 22px}
 .columns{grid-template-columns:1fr}
 .cards,.cards.four{grid-template-columns:1fr}
 .facts{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.facts{grid-template-columns:1fr}.hero{min-height:720px}}

/* High-resolution individual artwork backgrounds */
#biografi:before{background-image:url("images/biography-palace.jpg");}
#timeline:before{background-image:url("images/timeline-campaign.jpg");}
[id="1453"]:before{background-image:url("images/siege-1453.jpg");}
#legasi:before{background-image:url("images/legacy-empire.jpg");}
#rujukan:before{background-image:url("images/references-manuscript.jpg");}


/* UI POLISH — navigation, controls, button states and responsive feedback */
:root{--gold-bright:#f0d99f;--gold-soft:#b98d4c}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{overflow-x:hidden}
a,button{transition:color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease,filter .22s ease}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:3px}
.scroll-progress{position:fixed;z-index:100;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#8b6737,#f0d99f,#b68b4b);box-shadow:0 0 12px #dcb86f73}
header{min-height:84px;gap:18px}
.brand:hover{color:#fff0c9;letter-spacing:2.5px}
nav a{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:8px 2px;color:#d8c9a8}
nav a:after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:1px;background:linear-gradient(90deg,var(--gold-soft),var(--gold-bright));transition:right .25s ease}
nav a:hover,nav a.active{color:var(--gold-bright)}
nav a:hover:after,nav a.active:after{right:0}
#menuBtn,#musicBtn{min-height:44px;border-radius:3px;cursor:pointer;box-shadow:0 5px 18px #0003}
#menuBtn{font-size:18px;padding:8px 14px}
#menuBtn:hover,#musicBtn:hover{border-color:var(--gold-bright);background:#254632;color:#fff0c9;transform:translateY(-2px);box-shadow:0 8px 24px #0005}
#musicBtn.is-playing{background:linear-gradient(135deg,#c8a45e,#f0d99f);color:#132117;border-color:#f0d99f}
#musicBtn:active,#menuBtn:active{transform:translateY(0) scale(.98)}
.btn{position:relative;overflow:hidden;min-height:48px;align-items:center;justify-content:center;border-radius:2px;cursor:pointer;box-shadow:0 8px 24px #0005,inset 0 1px #ffffff40}
.btn:before{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,transparent,#ffffff40,transparent);transition:transform .55s ease}
.btn:hover:before{transform:translateX(120%) skewX(-18deg)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 13px 30px #0006}
.btn:active{transform:translateY(0) scale(.985)}
.years{gap:10px}
.years button{min-width:76px;min-height:44px;border-radius:2px;font-weight:600;letter-spacing:.7px;box-shadow:inset 0 1px #ffffff0a,0 4px 12px #0003}
.years button:hover{transform:translateY(-2px);border-color:var(--gold-bright);box-shadow:0 8px 18px #0004}
.years button.active{background:linear-gradient(135deg,#d9bd7e,#a77c3f);border-color:#f0d99f;color:#122016;box-shadow:0 5px 18px #c9a45e38}
.detail{border-radius:3px;transition:border-color .25s,box-shadow .25s}
.detail:hover{border-color:#e6c684ad;box-shadow:0 20px 55px #0006}
.quiz{border-radius:4px}
.quiz label{display:flex;align-items:center;gap:12px;margin:7px 0;padding:12px 14px;border:1px solid #c9a45e33;border-radius:3px;background:#05120c5c;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.quiz label:hover{background:#c9a45e1c;border-color:#c9a45e9e;transform:translateX(3px)}
.quiz label:has(input:checked){background:#c9a45e26;border-color:var(--gold);color:#f4e4bd}
.quiz input{width:17px;height:17px;flex:0 0 auto;accent-color:#d5b36f}
#result{min-height:28px;margin:14px 0 0;color:var(--gold-bright);font-weight:600}
#result:not(:empty){padding:13px 15px;border-left:2px solid var(--gold);background:#c9a45e17}
.facts article,.cards article,.panel,.real-map,.quiz,.detail{border-radius:3px;transition:transform .25s,border-color .25s,box-shadow .25s}
.facts article:hover,.cards article:hover{transform:translateY(-5px);border-color:#f0d99fb8;box-shadow:0 22px 48px #0006}
.sources a{display:inline-block;padding:3px 0;color:#f0d99f;text-decoration:none;border-bottom:1px solid #c9a45e73}
.sources a:hover{color:#fff2cf;border-color:#fff2cf;transform:translateX(3px)}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:40;width:48px;height:48px;border:1px solid var(--gold);border-radius:50%;background:#091b13eb;color:var(--gold-bright);font-size:23px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);box-shadow:0 8px 24px #0005;backdrop-filter:blur(8px)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--gold);color:#142016;transform:translateY(-3px);box-shadow:0 12px 28px #0006}
::selection{background:#c9a45e59;color:#fff8e8}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:700px){header{gap:10px}#menuBtn{min-width:44px}nav a{width:100%;min-height:44px}.years button{flex:1 1 68px}.back-to-top{right:16px;bottom:16px;width:44px;height:44px}}


/* GOLD & IMPERIAL CRIMSON PALETTE */
:root{
 --night:#16090c;--forest:#351018;--forest2:#501722;
 --gold:#c9a45e;--gold2:#f0d39a;--cream:#f3e7d8;
 --muted:#d0b8ad;--line:rgba(201,164,94,.5);
 --gold-bright:#ffe2a8;--gold-soft:#a8793d;
}
body{background:#16090c;color:#f3e7d8}
header{background:rgba(25,7,12,.97);border-bottom-color:rgba(201,164,94,.55)}
.brand,.brand small{color:#f0d39a}
nav a{color:#ead7c9}
nav a:hover,nav a.active{color:#ffe2a8}
#menuBtn{background:rgba(78,18,31,.45);color:#f0d39a;border-color:#c9a45e}
#musicBtn{background:linear-gradient(135deg,#6b2028,#310d16);color:#ffe2a8;border-color:#c9a45e}
#musicBtn:hover,#menuBtn:hover{background:#7a2630;color:#fff0d0;border-color:#ffe2a8}
#musicBtn.is-playing{background:linear-gradient(135deg,#d5ad65,#f2d99f);color:#2a0d12}
.hero{background-color:#1a090e}
.hero:before{background:
 linear-gradient(90deg,rgba(23,6,11,.96) 0%,rgba(34,8,15,.83) 36%,rgba(35,8,15,.24) 70%,rgba(35,8,15,.08) 100%),
 linear-gradient(0deg,rgba(23,6,11,.62),transparent 34%,rgba(35,8,15,.15))}
.hero:after{border-color:rgba(230,190,119,.55)}
.hero h1{color:#f6e8d2}
.hero h1 em,.hero h3{color:#f0c77f}
.seal{background:rgba(45,9,18,.82);border-color:#d3aa68;color:#f4d9a4}
.ticker{background:linear-gradient(90deg,#3a1019,#601b28,#3a1019);color:#f1d59b;border-color:#c9a45e}
.section{background-color:#210c12;border-bottom-color:rgba(201,164,94,.28)}
.section:after{background:linear-gradient(90deg,rgba(25,7,12,.95),rgba(42,10,18,.83))}
.section.dark{background:#1a080d}
.facts article,.panel,.detail,.cards article,.quiz,blockquote,.real-map{
 background:linear-gradient(145deg,rgba(91,29,39,.94),rgba(35,9,16,.97));
 border-color:rgba(213,170,99,.48);
}
.facts b,h2 em,h3,.detail h3{color:#f0d39a}
.lead,.facts p,.cards p,.panel p,.detail p{color:#e2cfc3}
blockquote{color:#f0dfc7;border-left-color:#d5ad65}
.years button{background:linear-gradient(145deg,#541923,#2a0b12);color:#f0d39a;border-color:rgba(201,164,94,.5)}
.years button.active,.years button:hover{background:linear-gradient(135deg,#e0bd79,#a8753e);color:#2a0d12;border-color:#ffe2a8}
.quiz label{background:rgba(31,7,13,.48);border-color:rgba(201,164,94,.28);color:#f0dfd0}
.quiz label:hover,.quiz label:has(input:checked){background:rgba(196,145,73,.17);border-color:#d8b36d}
.sources li{color:#e8d7ca;border-bottom-color:rgba(201,164,94,.25)}
.sources a{color:#f4d99f;border-color:rgba(201,164,94,.6)}
footer{background:#100509;color:#c5aa9b;border-top-color:rgba(201,164,94,.48)}
.back-to-top{background:rgba(49,10,19,.94);color:#ffe2a8;border-color:#c9a45e}
.back-to-top:hover{background:#d4ad69;color:#2a0d12}
.scroll-progress{background:linear-gradient(90deg,#8d252e,#d4a95f,#ffe2a8)}
::selection{background:rgba(201,164,94,.42);color:#fff8e8}
@media(max-width:700px){
 nav{background:#260a12;border-color:rgba(201,164,94,.5)}
 .hero:before{background:linear-gradient(0deg,rgba(23,6,11,.97) 0%,rgba(34,8,15,.82) 50%,rgba(35,8,15,.25) 100%)}
 .section:after{background:linear-gradient(0deg,rgba(25,7,12,.96),rgba(42,10,18,.72))}
}