/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root{
  --bg:            #eaf4fb;
  --bg-dot:        rgba(111, 168, 216, 0.10);
  --surface:       #ffffff;
  --surface-alt:   #eef7fc;
  --ink:           #3a4f63;
  --ink-soft:      #7590a4;
  --blue:          #7fb3de;
  --blue-deep:     #5089bd;
  --blue-pale:     #dcedfa;
  --accent:        #f4b3a4;
  --border:        #5089bd;
  --radius:        2px;

  /* drop your own image in here to use a custom background — e.g.
     --bg-image: url('assets/bg/my-background.jpg');
     leave it as none to keep the plain dotted background. the dot
     pattern is drawn on TOP of this so it still reads as texture
     rather than hiding your picture. */
  --bg-image: url('/pattern.png');
  --bg-repeat: repeat;
  --bg-size: 300px 225px;
  
  
  /* drop your own cursor assets in here — e.g.
     --cursor-default: url('assets/cursor/arrow.png') 2 2, auto;
     --cursor-pointer: url('assets/cursor/hand.png') 4 4, pointer;
     leave the browser defaults (auto/pointer) if you don't have one yet */
  --cursor-default: auto;
  --cursor-pointer: pointer;

  /* glossy highlight overlays — layered on top of the flat colors above
     so every glossy element still respects the palette */
  --gloss-shine:      rgba(255,255,255,0.55);
  --gloss-shine-soft: rgba(255,255,255,0.28);
  --gloss-shadow:     rgba(23,51,90,0.35);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family:"Pixelify Sans", "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background-color:var(--bg);

  background-image:
    radial-gradient(var(--bg-dot) 1.4px, transparent 1.4px),
    var(--bg-image);

  background-size:18px 18px, var(--bg-size);
  background-position:0 0, 0 0;
  background-repeat:repeat, var(--bg-repeat);
  background-attachment:scroll, fixed;

  padding-bottom:76px;
  cursor:var(--cursor-default);
}

a, button, .nav-item, .play-btn, .np-toggle, .link-btn, .np-seek{
  cursor: var(--cursor-pointer);
}

a{ color:var(--blue); }

.muted{ color:var(--ink-soft); font-size:0.92rem; }

/* top bar */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fa 46%, #dee9f2 50%, var(--surface) 100%);
  border-bottom:2px solid var(--border);
  box-shadow: inset 0 1px 0 var(--gloss-shine);
}

.topbar-left{ display:flex; align-items:center; gap:10px; }

.topbar-mark{ color:var(--accent); font-size:1.1rem; }

.topbar-title{
  font-family:"Silkscreen", monospace;
  font-size:1rem;
  letter-spacing:1px;
  color:var(--blue-deep);
}

.topbar-links{ display:flex; gap:20px; }

.topbar-links a{
  font-size:0.85rem;
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px dashed transparent;
}
.topbar-links a:hover{ color:var(--blue); border-bottom-color:var(--blue); }

/* layout */

.layout{
  display:flex;
  align-items:flex-start;
  max-width:1180px;
  margin:0 auto;
  padding: 40px 44px 40px 24px;
  gap:56px;
}

/* sidebar */

.sidebar{
  position:relative;
  flex: 0 0 250px;
  background:var(--surface);
  border:2px solid var(--border);
  padding:22px 22px 18px;
  margin-top: 10px;
}

.sidebar-portrait{
  width:100%;
  aspect-ratio: 1 / 1;
  border:2px solid var(--border);
  background:var(--surface-alt);
  margin-bottom:16px;
  overflow:hidden;
  position:relative;
}

.portrait-img{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.portrait-fallback{
  position:absolute;
  z-index:1;
  inset:0;
  background:
    repeating-linear-gradient(135deg, var(--blue-pale) 0 10px, var(--surface-alt) 10px 20px);
}

.sidebar-blurb{
  font-size:0.85rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin: 0 0 18px;
}
.sidebar-blurb em{ color:var(--blue); font-style:italic; }

.nav-list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---------- glossy button base ----------
   shared by nav items, play buttons, the now-playing toggle and inline
   link-buttons: a soft top-lit gradient, a thin shine along the top edge,
   and a "pressed in" look on :active so every clickable pill on the site
   reads as one consistent button system. */

.nav-item,
.play-btn,
.np-toggle{
  background-image:
    linear-gradient(180deg, var(--gloss-shine) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.04) 100%),
    linear-gradient(180deg, var(--surface-alt) 0%, var(--blue-pale) 100%);
  box-shadow:
    0 1px 0 var(--gloss-shine) inset,
    0 2px 3px rgba(23,51,90,0.18);
  transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.1s ease;
}

.nav-item:hover,
.play-btn:hover{
  filter: brightness(1.03);
}

.nav-item:active,
.play-btn:active,
.np-toggle:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(23,51,90,0.25) inset,
    0 0 0 rgba(0,0,0,0);
  filter: brightness(0.97);
}

.nav-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--blue-pale);
  border-radius: 14px;
  font-family:"Pixelify Sans", sans-serif;
  font-size:0.88rem;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
}

.nav-item:hover{ border-color:var(--blue); }

.nav-item.is-active{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color:var(--blue-deep);
  color:#fff;
}

.nav-item.is-active:active{
  box-shadow:
    0 1px 3px rgba(0,0,0,0.4) inset;
}

.nav-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}

.sidebar-foot{
  border-top:1px dashed var(--blue-pale);
  padding-top:10px;
  font-size:0.72rem;
  color:var(--ink-soft);
  font-family:"Silkscreen", monospace;
  letter-spacing:0.5px;
}

/* content / windows */

.content{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:22px;
}

.view{ display:none; width:100%; gap:22px; flex-wrap:wrap; }
.view.is-active{ display:flex; }

/* sliding fade-in whenever a view becomes active (nav click, hash change) —
   the content keeps its normal color, it just eases in from a lower
   opacity while sliding a little from the side. Class is added/removed
   by script.js so it replays every time you switch sections. */
.view.view-animate{
  animation: viewSlideIn 0.32s ease;
}

@keyframes viewSlideIn{
  from{ opacity:0.15; transform: translateX(18px); }
  to{ opacity:1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .view.view-animate{ animation:none; }
}

/* big decorative section name, bottom-right of the viewport — updated
   and slid in every time you switch sections (home/music/guestbook/...)
   from script.js. white-space:nowrap + overflow:hidden on the parent is
   what gives the clipped-letters look instead of wrapping mid-word. */
.section-watermark{
  position:fixed;
  right:-1vw;
  bottom:400px;
  z-index:1;
  /* max-width:16vw; */
  pointer-events:none;
  overflow:visible;
  text-align:right;
}

.section-watermark-text{
  display:block;
  font-family:"Silkscreen", monospace;
  font-weight:700;
  font-size:clamp(2.2rem, 6vw, 5.5rem);
  line-height:0.92;
  letter-spacing:2px;
  color:var(--blue-deep);
  opacity:0.14;
  white-space:nowrap;
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

.section-watermark.watermark-animate{
  animation: viewSlideIn 0.4s ease;
}

@media (max-width: 1300px){
  .section-watermark{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .section-watermark.watermark-animate{ animation:none; }
}

.window{
  background:var(--surface);
  border:2px solid var(--border);
  box-shadow: 4px 4px 0 var(--blue-pale);
}

.window-wide{ width:100%; }
.window-half{ width:calc(50% - 11px); }

.window-titlebar{
  display:flex;
  align-items:center;
  gap:8px;
  height:26px;
  padding:0 10px;
  background:     
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  background-image:
      linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.12) 100%),
      linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-bottom:2px solid var(--border);
}

.titlebar-box{
  width:11px; height:11px;
  background:var(--surface);
  border:1px solid var(--blue-deep);
  flex-shrink:0;
}
.titlebar-box-right{ margin-left:auto; }

.window-title{
  font-family:"Silkscreen", monospace;
  font-size:0.72rem;
  color:#fff;
  letter-spacing:0.5px;
  text-shadow: 1px 1px 0 var(--blue-deep);
}

.window-body{
  padding:20px 22px;
  line-height:1.6;
  font-size:0.95rem;
}

.window-body p{ margin:0 0 12px; }
.window-body p:last-child{ margin-bottom:0; }

.window-body-tight{ padding:14px 18px; }

.hero-heading{
  font-family:"Silkscreen", monospace;
  font-size:1.4rem;
  line-height:1.5;
  color:var(--blue-deep);
  margin:0 0 14px;
}

.link-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--blue);
  text-decoration:underline;
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}

.link-btn:active{ transform:none; box-shadow:none; }

.play-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* drop icons/play.png and icons/pause.png in your icons folder to use
   your own artwork here — both images sit in the DOM at once and CSS
   just swaps which one is visible depending on .is-playing on the
   button. if BOTH images 404 (removed by onerror below), the plain
   ▶ / ❚❚ glyph in .play-icon-fallback shows through automatically. */
.play-icon-img{
  display:none;
  width:14px;
  height:14px;
  object-fit:contain;
}

.play-btn .play-icon-img-play,
.np-toggle .play-icon-img-play{ display:inline-block; }

.play-btn.is-playing .play-icon-img-play,
.np-toggle.is-playing .play-icon-img-play{ display:none; }

.play-btn.is-playing .play-icon-img-pause,
.np-toggle.is-playing .play-icon-img-pause{ display:inline-block; }

.play-icon-img ~ .play-icon-fallback{ display:none; }

/* mini lists on home / updates */

.mini-list, .log-list{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px;
  font-size:0.9rem;
}

.mini-date{
  font-family:"Silkscreen", monospace;
  font-size:0.68rem;
  color:var(--blue);
  margin-right:8px;
}

/* status.cafe embed (Home) */

.window-status .window-body{ padding-bottom:16px; }

.status-embed{
  min-height:52px;
  display:flex;
  align-items:center;
  border:1px dashed var(--blue);
  padding:12px 16px;
}

.status-placeholder{ margin:0; }

/* music grid */

.track-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:20px;
  width:100%;
}

.track-card{
  background:var(--surface);
  border:2px solid var(--border);
  box-shadow: 3px 3px 0 var(--blue-pale);
  display:flex;
  flex-direction:column;
}

.cover-art{
  width:100%;
  aspect-ratio: 1 / 1;
  background-color: var(--blue-pale);
  background-image: repeating-linear-gradient(45deg, var(--blue-pale) 0 8px, var(--surface-alt) 8px 16px);
  background-size:cover;
  background-position:center;
  border-bottom:2px solid var(--border);
}

.track-card-body{ padding:12px 14px 14px; }

.track-name{
  font-family:"Silkscreen", monospace;
  font-size:0.82rem;
  margin:0 0 4px;
  color:var(--blue-deep);
}

.track-meta{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin:0 0 10px;
}

.play-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--blue-deep);
  color:var(--ink);
  padding:6px 12px;
  font-family:"Pixelify Sans", sans-serif;
  font-size:0.8rem;
  cursor:pointer;
  border-radius: 14px;
}

.play-btn:hover{ filter:brightness(1.05); }

.play-btn.is-playing{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color:var(--blue-deep);
  color:#fff;
}

.play-btn-row{
  width:26px; height:26px;
  padding:0;
  justify-content:center;
  border-radius:50%;
  margin-right:8px;
}

/* playlists */

.playlist-list{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
  font-size:0.9rem;
}
.playlist-list li{ display:flex; align-items:center; }

/* guestbook */

.guestbook-embed{
  width:100%;
  min-height:340px;
  border:2px dashed var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-size:0.85rem;
  text-align:center;
  padding:20px;
  margin-top:14px;
}

.guestbook-embed iframe{
  width:100%;
  min-height:420px;
  border:2px solid var(--border);
}

/* links page */

.button-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.button-placeholder{
  width:88px; height:31px;
  border:1px dashed var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:0.62rem;
  color:var(--blue);
  font-family:"Silkscreen", monospace;
}

/* now playing bar */

.now-playing{
  position:fixed;
  left:0; right:0; bottom:0;
  height:66px;
  background: linear-gradient(180deg, #7fb3de 0%, var(--blue-deep) 55%, #3b6c94 100%);
  border-top:2px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 22px;
  z-index:50;
}

.np-toggle{
  width:36px; height:36px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid #fff;
  color:#fff;
  font-size:0.95rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.05) 45%, rgba(0,0,0,0.15) 100%),
    linear-gradient(180deg, #7fb3de 0%, var(--blue-deep) 100%);
}
.np-toggle:hover{ filter:brightness(1.1); }

.np-info{
  flex: 0 0 180px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.np-title{
  font-family:"Silkscreen", monospace;
  font-size:0.78rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.np-artist{
  font-size:0.72rem;
  color:var(--blue-pale);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.np-scrub{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:520px;
}

.np-time{
  font-family:"Silkscreen", monospace;
  font-size:0.65rem;
  color:var(--blue-pale);
  width:34px;
  flex-shrink:0;
}
.np-time#npDuration{ text-align:right; }

.np-seek{
  flex:1;
  accent-color:var(--blue-deep);
  height:4px;
}

/* ---------- HTML Comment Box (guestbook) reskin ---------- */
#HCB_comment_box{
  font-family:"Pixelify Sans", "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:transparent;
}

#HCB_comment_box h3,
#HCB_comment_box .hcb-title{
  font-family:"Silkscreen", monospace;
  color:var(--blue-deep);
  letter-spacing:0.5px;
}

/* input & textarea */
#HCB_comment_box #hcb_form_content,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_website{
  background-color:var(--surface-alt);
  border:1px solid var(--blue);
  border-radius:var(--radius);
  color:var(--ink);
  font-family:"Pixelify Sans", sans-serif;
  font-size:0.9rem;
}

#HCB_comment_box #hcb_form_content:focus,
#HCB_comment_box #hcb_form_email:focus,
#HCB_comment_box #hcb_form_name:focus,
#HCB_comment_box #hcb_form_website:focus{
  border-color:var(--blue-deep);
  outline:2px solid var(--accent);
  outline-offset:1px;
}

#HCB_comment_box textarea{
  height:140px;
}

/* watermark placeholder text ("Comments", "Name", dst) */
#HCB_comment_box .text-blur{ color:var(--ink-soft); }
#HCB_comment_box .text-focus{ color:var(--blue-deep); }

/* tombol Comment — dibikin senada sama play-btn/nav-item kamu */
#HCB_comment_box .submit{
  background:none;
  background-image:
    linear-gradient(180deg, var(--gloss-shine) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,0.04) 100%),
    linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border:1px solid var(--blue-deep);
  border-radius:14px;
  color:#fff;
  font-family:"Pixelify Sans", sans-serif;
  font-size:0.85rem;
  padding:8px 18px;
  box-shadow:
    0 1px 0 var(--gloss-shine) inset,
    0 2px 3px rgba(23,51,90,0.18);
}
#HCB_comment_box .submit:hover{ filter:brightness(1.05); }
#HCB_comment_box .submit:active{
  transform:translateY(1px);
  box-shadow:0 1px 2px rgba(23,51,90,0.25) inset;
}

/* list komentar yang sudah masuk */
#HCB_comment_box blockquote{
  background:var(--surface);
  border:2px solid var(--border);
  box-shadow:3px 3px 0 var(--blue-pale);
  padding:12px 14px;
  margin:0 0 12px;
  color:var(--ink);
}

#HCB_comment_box .author-name{
  font-family:"Silkscreen", monospace;
  font-size:0.75rem;
  color:var(--blue-deep);
}

#HCB_comment_box .hcb-comment-body{
  font-size:0.9rem;
  line-height:1.5;
}

#HCB_comment_box .hcb-comment-tb a,
#HCB_comment_box a{ color:var(--blue); }
#HCB_comment_box a:hover{ color:var(--blue-deep); }

#HCB_comment_box label{
  color:var(--ink-soft);
  font-size:0.85rem;
}

/* responsive */

@media (max-width: 880px){
  .layout{ flex-direction:column; padding:24px 18px; gap:28px; }
  .sidebar{ flex-basis:auto; width:100%; }
  .window-half{ width:100%; }
  .np-scrub{ display:none; }
  .np-info{ flex:1; }
}

/* reduced motion / focus */

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .nav-item, .play-btn, .np-toggle{ transition:none; }
}

button:focus-visible, a:focus-visible, input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}