:root{
  --green:#075f38;
  --green-dark:#043d25;
  --green-deep:#043d25;
  --green-mid:#075f38;
  --green-soft:#0b7550;

  --gold:#d6a928;
  --gold-light:#f0cf69;

  --cream:#f7f9f7;
  --cream-soft:#edf2ee;

  --ink:#173126;
  --text-soft:#65736c;

  --line:rgba(7,95,56,.13);
  --white-soft:rgba(255,255,255,.88);
  --card:rgba(255,255,255,.94);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  color:var(--ink);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  /*
    BACKGROUND UTAMA
    Tanpa gambar.
    Hanya gradient + cahaya sangat halus.
  */
  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(214,169,40,.10),
      transparent 26rem
    ),
    radial-gradient(
      circle at 82% 78%,
      rgba(255,255,255,.035),
      transparent 30rem
    ),
    linear-gradient(
      135deg,
      #043d25 0%,
      #075f38 48%,
      #064d30 76%,
      #043d25 100%
    );

  background-attachment:fixed;
}

/* =====================================================
   PAGE
===================================================== */

.page{
  width:min(820px,66.666vw);
  min-width:620px;
  margin:42px auto 34px;
}

/* =====================================================
   HEADER
===================================================== */

.header{
  min-height:96px;
  padding:12px 20px;

  display:grid;
  grid-template-columns:92px 1fr 92px;

  gap:16px;
  align-items:center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(214,173,66,.08),
      transparent 18rem
    ),
    linear-gradient(
      135deg,
      #07543a,
      #032a1d 60%,
      #064630
    );

  border:1px solid rgba(214,173,66,.45);

  border-radius:
    24px
    24px
    12px
    12px;

  box-shadow:
    0 18px 42px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* =====================================================
   NAVIGATION
===================================================== */

.nav{
  min-height:64px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#fff;

  text-decoration:none;

  font:
    bold 11px
    Arial,
    sans-serif;

  background:
    linear-gradient(
      145deg,
      #08704b,
      #043522
    );

  border:
    1px solid
    rgba(214,173,66,.48);

  border-radius:14px;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.nav:hover{
  transform:translateY(-2px);

  border-color:var(--gold);

  background:
    linear-gradient(
      145deg,
      #0a8056,
      #05452c
    );

  box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    0 0 18px rgba(214,173,66,.07);
}

.ico{
  margin-bottom:2px;

  font:
    28px
    Arial,
    sans-serif;

  color:var(--gold-light);
}

/* =====================================================
   BRAND
===================================================== */

.brand{
  display:flex;
  justify-content:center;
  align-items:baseline;

  gap:13px;

  color:#fff;

  white-space:nowrap;
}

.brand b{
  color:var(--gold-light);

  font-size:
    clamp(35px,4.2vw,57px);

  letter-spacing:1px;

  text-shadow:
    0 2px 15px rgba(0,0,0,.18);
}

.brand span{
  font-size:
    clamp(16px,2vw,24px);

  color:
    rgba(255,255,255,.92);
}

/* =====================================================
   MAIN
===================================================== */

.main{
  margin-top:18px;

  padding:
    30px
    34px
    38px;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);

  border-radius:25px;

  box-shadow:
    0 18px 42px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.8);
}

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

.title{
  text-align:center;
  margin-bottom:22px;
}

.star{
  color:var(--gold);

  font-size:17px;

  text-shadow:
    0 0 10px rgba(214,173,66,.18);
}

.title h1{
  margin:
    2px
    0
    8px;

  color:white;

  font-size:
    clamp(42px,5.2vw,67px);

  font-weight:400;

  line-height:.95;

  letter-spacing:-1px;
}

.title h1 em{
  font-style:italic;
}

.title p{
  margin:0;

  color:rgba(255,255,255,.82);

  font-size:16px;

  letter-spacing:3px;
}

.rule{
  width:70%;
  height:1px;

  margin:
    11px
    auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold),
      transparent
    );

  opacity:.8;
}

/* =====================================================
   SEARCH
===================================================== */

.search{
  width:100%;
  height:42px;

  margin:
    0
    0
    20px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(112,139,124,.35);

  border-radius:12px;

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

  font:
    14px
    Georgia,
    "Times New Roman",
    serif;

  color:var(--ink);

  outline:none;

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

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.search::placeholder{
  color:#829087;
}

.search:focus{
  border-color:var(--gold);

  box-shadow:
    0 0 0 3px rgba(214,173,66,.10),
    0 5px 15px rgba(0,0,0,.05);
}

/* =====================================================
   SONG GRID
===================================================== */

.songs{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:20px;
}

/* =====================================================
   SONG CARD
===================================================== */

.song-card{
  overflow:hidden;

  background:var(--card);
  border:1px solid var(--line);

  border-radius:
    23px
    23px
    15px
    15px;

  box-shadow:
    0 12px 25px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.song-card:hover{
  transform:translateY(-3px);

  border-color:
    rgba(214,173,66,.75);

  box-shadow:
    0 18px 30px rgba(0,0,0,.27),
    0 0 20px rgba(214,173,66,.035);
}

/* =====================================================
   SONG HEADER
===================================================== */

.song-head{
  min-height:132px;

  padding:
    14px
    9px;

  text-align:center;

  color:#fff0a8;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(214,169,40,.16),
      transparent 45%
    ),
    linear-gradient(
      160deg,
      #075f38,
      #043d25
    );

  border-bottom:
    1px solid
    rgba(214,173,66,.45);
}

.song-no{
  color:var(--gold-light);

  font:
    bold 11px
    Arial,
    sans-serif;

  letter-spacing:2px;
}

.song-head h2{
  margin:
    7px
    0
    3px;

  font-size:21px;

  line-height:1.08;
}

.song-caption{
  font-size:8px;

  letter-spacing:1.4px;

  opacity:.72;
}

/* =====================================================
   SONG MENU
===================================================== */

.song-menu{
  padding:9px;

  background:
    rgba(2,32,22,.18);
}

/* =====================================================
   MEDIA BUTTON
===================================================== */

.media-btn{
  min-height:48px;

  padding:
    6px
    8px;

  display:grid;

  grid-template-columns:
    30px
    1fr
    15px;

  gap:8px;

  align-items:center;

  color:var(--ink);

  text-decoration:none;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #f1f5f2
    );

  border-bottom:
    1px solid
    rgba(84,111,96,.18);

  transition:
    background .15s ease,
    padding-left .15s ease;
}

.media-btn:first-child{
  border-radius:
    10px
    10px
    0
    0;
}

.media-btn:last-child{
  border-radius:
    0
    0
    10px
    10px;

  border:0;
}

.media-btn:hover{
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #e9f1ec
    );

  padding-left:12px;
}

/* =====================================================
   MEDIA ICON
===================================================== */

.mi{
  width:29px;
  height:29px;

  display:grid;
  place-items:center;

  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      #08734d,
      #03331f
    );

  color:#fff;

  font:
    bold 12px
    Arial,
    sans-serif;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06);
}

.arr{
  color:#b48512;

  font:
    bold 23px
    Arial,
    sans-serif;
}

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

.disabled{
  opacity:.30;

  cursor:default;

  user-select:none;
}

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

.footer{
  min-height:58px;

  margin-top:15px;

  padding:10px;

  text-align:center;

  color:#f2d984;

  background:
    linear-gradient(
      135deg,
      #07543a,
      #032a1c 60%,
      #064630
    );

  border:
    1px solid
    rgba(214,173,66,.42);

  border-radius:13px;

  box-shadow:
    0 10px 25px rgba(0,0,0,.18);
}

.footer b,
.footer small{
  display:block;
}

.footer b{
  font-size:14px;
}

.footer small{
  font-size:9px;
  margin-top:2px;
  opacity:.82;
}

/* =====================================================
   BACK TO TOP
===================================================== */

.top{
  position:fixed;

  right:22px;
  bottom:20px;

  width:44px;
  height:44px;

  border-radius:50%;

  border:
    1px solid
    rgba(214,173,66,.65);

  background:
    linear-gradient(
      145deg,
      #08734d,
      #03331f
    );

  color:var(--gold-light);

  text-decoration:none;

  display:grid;
  place-items:center;

  font:
    bold 23px
    Arial,
    sans-serif;

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

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.top:hover{
  transform:translateY(-3px);

  box-shadow:
    0 12px 25px rgba(0,0,0,.35),
    0 0 15px rgba(214,173,66,.08);
}

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

@media(max-width:1000px){

  .page{
    width:min(
      760px,
      calc(100% - 80px)
    );

    min-width:0;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:620px){

  body{
    background:
      radial-gradient(
        circle at 50% 5%,
        rgba(214,169,40,.08),
        transparent 20rem
      ),
      linear-gradient(
        135deg,
        #043d25,
        #075f38 48%,
        #043d25
      );

    background-attachment:scroll;
  }

  .page{
    width:
      calc(100% - 18px);

    min-width:0;

    margin:
      10px
      auto
      18px;
  }

  .header{
    min-height:74px;

    grid-template-columns:
      55px
      1fr
      55px;

    gap:6px;

    padding:7px;

    border-radius:
      17px
      17px
      8px
      8px;
  }

  .nav{
    min-height:56px;

    border-radius:11px;

    font-size:7px;
  }

  .ico{
    font-size:24px;
  }

  .brand{
    flex-direction:column;

    align-items:center;

    gap:2px;

    line-height:1;
  }

  .brand b{
    font-size:29px;
  }

  .brand span{
    font-size:10px;
  }

  .main{
    margin-top:9px;

    padding:
      24px
      10px
      28px;

    border-radius:19px;
  }

  .title{
    margin-bottom:19px;
  }

  .title h1{
    font-size:
      clamp(
        40px,
        13.5vw,
        55px
      );
  }

  .title p{
    font-size:7px;

    letter-spacing:2px;
  }

  .search{
    height:40px;

    margin-bottom:17px;
  }

  .songs{
    grid-template-columns:1fr;

    gap:17px;
  }

  .song-head{
    min-height:128px;
  }

  .media-btn{
    min-height:53px;
  }

  .top{
    right:14px;
    bottom:14px;

    width:42px;
    height:42px;
  }
}

/* =====================================================
   GALERI PICTURE 1 + 2
   Tetap disembunyikan seperti sistem sebelumnya.
===================================================== */

.picture-wrap{
  display:none;
}