@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;1,400&family=Inter:wght@300;400;500&family=IM+Fell+English:ital@0;1&display=swap');

:root{
  --bg:#F7F8FC;--bg2:#EEF2FA;--text:#14141E;--text2:#62637A;--text3:#A8A8C0;
  --ac:#8B5E1A;--border:#DDE0EF;--card:#FFFFFF;
  --tag-bg:#F0EADc;--tag:#6B4818;--title:#142848;
}
body.dark-mode{
  --bg:#100E08;--bg2:#18140C;--text:#F0E8D8;--text2:#907860;--text3:#504030;
  --ac:#C8921A;--border:#241C10;--card:#18140C;
  --tag-bg:#1E1408;--tag:#C8921A;--title:#D4A870;
}

body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:'Lora',Georgia,serif !important;
  transition:background .5s,color .5s !important;
}

/* NAV */
header{
  background:var(--bg) !important;
  border-bottom:1px solid var(--border) !important;
  transition:background .5s,border-color .5s !important;
}
.nav a, .logo a{
  font-family:'Playfair Display',serif !important;
  font-size:17px !important;
  letter-spacing:0.05em !important;
  color:var(--text) !important;
  font-weight:700 !important;
  font-style:italic !important;
  transition:color .5s !important;
}
.nav a:not(.logo a){
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  letter-spacing:0.14em !important;
  color:var(--text2) !important;
  font-weight:500 !important;
  font-style:normal !important;
  text-transform:uppercase !important;
}
.nav a:hover{color:var(--ac) !important}

/* TOGGLE DARK/LIGHT */
#theme-toggle{
  width:36px !important;height:20px !important;
  border-radius:10px !important;
  background:var(--border) !important;
  border:none !important;cursor:pointer !important;
  position:relative !important;
  transition:background .4s !important;
  padding:0 !important;display:inline-block !important;
}
#theme-toggle::after{
  content:'' !important;position:absolute !important;
  top:3px !important;left:3px !important;
  width:14px !important;height:14px !important;
  border-radius:50% !important;
  background:var(--text3) !important;
  transition:transform .4s,background .4s !important;
}
body.dark-mode #theme-toggle{background:var(--ac) !important}
body.dark-mode #theme-toggle::after{transform:translateX(16px) !important;background:#F0E8D8 !important}

/* HOME INFO HERO */
.home-info{
  background:linear-gradient(170deg,#E8F2FF 0%,#F2F6FF 40%,var(--bg) 72%) !important;
  border:none !important;padding:72px 48px 64px !important;
  position:relative !important;overflow:hidden !important;
  transition:background .5s !important;
}
body.dark-mode .home-info{
  background:linear-gradient(170deg,#1A1008 0%,#140E06 40%,var(--bg) 72%) !important;
}
.home-info h1{
  font-family:'Playfair Display',serif !important;
  font-size:clamp(36px,5vw,62px) !important;
  font-weight:700 !important;line-height:1.08 !important;
  color:var(--text) !important;
  letter-spacing:0.01em !important;
  transition:color .5s !important;
}
.home-info p{
  font-family:'Lora',serif !important;
  font-style:italic !important;font-size:15px !important;
  color:var(--text2) !important;line-height:1.8 !important;
  letter-spacing:0 !important;text-transform:none !important;
  transition:color .5s !important;
}

/* ARTIKEL */
.post-entry{
  background:var(--card) !important;
  border:none !important;border-radius:0 !important;
  border-bottom:1px solid var(--border) !important;
  transition:background .4s,transform .3s !important;
  margin-bottom:0 !important;
}
.post-entry:hover{
  background:var(--bg2) !important;
  transform:translateY(-2px) !important;
  border-bottom-color:var(--ac) !important;
}
.post-entry .entry-header h2{
  font-family:'Playfair Display',serif !important;
  font-size:18px !important;font-weight:700 !important;
  color:var(--title) !important;line-height:1.3 !important;
  transition:color .3s !important;
}
.post-entry:hover .entry-header h2{color:var(--ac) !important}
.entry-content p{
  font-family:'Lora',serif !important;
  font-style:italic !important;
  font-size:14px !important;color:var(--text2) !important;
  line-height:1.8 !important;transition:color .4s !important;
}
.entry-footer{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;letter-spacing:0.08em !important;
  color:var(--text3) !important;text-transform:uppercase !important;
  transition:color .4s !important;
}

/* ARTIKEL DETAIL */
.post-header h1{
  font-family:'Playfair Display',serif !important;
  color:var(--title) !important;
  font-size:clamp(28px,4vw,48px) !important;
  line-height:1.15 !important;font-weight:700 !important;
  transition:color .5s !important;
}
.post-meta{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;letter-spacing:0.15em !important;
  color:var(--text3) !important;text-transform:uppercase !important;
}
.post-content{
  font-family:'Lora',serif !important;
  font-size:18px !important;line-height:1.9 !important;
  color:var(--text) !important;transition:color .5s !important;
}
.post-content h2,.post-content h3{
  font-family:'Playfair Display',serif !important;
  color:var(--ac) !important;
}

/* DIVIDER */
hr{
  border:none !important;height:1px !important;
  background:linear-gradient(to right,transparent,var(--border),transparent) !important;
  margin:40px 0 !important;
}

/* FOOTER */
footer{
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;letter-spacing:0.12em !important;
  color:var(--text3) !important;text-transform:uppercase !important;
  transition:background .5s,border-color .5s !important;
}
footer a{color:var(--text3) !important}
footer a:hover{color:var(--ac) !important}

a{color:var(--ac) !important}
a:hover{color:var(--text) !important}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--ac);opacity:.5}