:root { --ink:#15120f; --muted:#746b63; --paper:#f7f1e8; --sand:#e7dbcd; --coffee:#352018; --line:#d8cbbd; --white:#fffdfa; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
    a { color:inherit; text-decoration:none; }

    .wrap { width:min(1120px, calc(100% - 40px)); margin:auto; }
    .eyebrow { font:500 10px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
    .btn { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:0 20px; border:1px solid var(--ink); border-radius:999px; font-size:14px; font-weight:600; transition:.2s; }

    .btn.dark { background:var(--ink); color:var(--paper); }
    .btn:hover { transform:translateY(-2px); }
    header { position:sticky; top:0; z-index:10; background:rgba(247,244,239,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(220,213,203,.7); }

    .nav { height:70px; display:flex; align-items:center; justify-content:space-between; }
    .logo { font:700 30px "Playfair Display",serif; letter-spacing:-.08em; }
    .logo i { color:var(--coffee); }
    .navlinks { display:none; gap:24px; font-size:13px; font-weight:600; }
    .navlinks a:hover { color:var(--coffee); }

    .menu-toggle { border:0; background:transparent; font:500 11px "DM Mono",monospace; letter-spacing:.1em; cursor:pointer; }
    .mobile-nav { display:none; padding:0 20px 20px; grid-template-columns:1fr 1fr; gap:9px; }
    .mobile-nav.open { display:grid; }
    .mobile-nav a { padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; }

    .hero { min-height:680px; padding:78px 20px 20px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; background:var(--coffee); color:white; }
    .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(23, 12, 7, 0.78) 0%,
      rgba(23, 12, 7, 0.4) 2%,
      rgba(23, 12, 7, 0.08) 8%
    ),
    url("../img/bestcafeinkl.jpg");
background-position: center, center;
background-repeat: no-repeat;
background-size: cover, cover;
background-color: var(--coffee);
}
    .hero::after { content:""; width:290px; height:290px; border:1px solid rgba(255,255,255,.25); border-radius:50%; position:absolute; right:-120px; top:72px; }
    .hero-copy { position:relative; z-index:1; }
    h1 { margin:16px 0 100px; max-width:700px; font:600 clamp(47px,14vw,108px)/.93 "Playfair Display",serif; letter-spacing:-.07em; }
    h1 em { color:var(--white); }
    .hero .eyebrow, .hero p { color:rgba(255,255,255,.8); }
    .hero .btn { border-color:white; color:white; }
    .hero p { max-width:460px; font-size:16px; line-height:1.55; margin-bottom:28px; }
    .hero-bottom { display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; z-index:1; }
    .hero-card { min-height:190px; border-radius:18px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
    .hero-card.coffee { background:var(--coffee); color:white; }
    .hero-card.light { background:rgba(247,244,239,.92); color:var(--ink); }
    .hero-card .big { font:600 29px/1 "Playfair Display",serif; letter-spacing:-.05em; }
    .hero-card small { font-size:12px; line-height:1.35; max-width:105px; }

    section { padding:84px 0; border-top:1px solid var(--line); }
    .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:34px; }
    h2 { margin:0; font:600 clamp(36px,9vw,65px)/.95 "Playfair Display",serif; letter-spacing:-.06em; }
    
.about-grid { display:grid; gap:34px; }
    .about-copy { font-size:21px; line-height:1.35; letter-spacing:-.03em; }
    .about-copy span { color:var(--muted); }

    .note { padding:20px; background:var(--coffee); border-radius:14px; color:var(--paper); font-size:14px; line-height:1.45; }

    .menu-list { border-top:1px solid var(--ink); }
    .menu-item { padding:18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:88px 1fr auto; gap:14px; align-items:center; }
    .menu-image { display:block; width:88px; height:116px; object-fit:cover; border-radius:10px; grid-row:span 2; }
    .menu-item h3 { margin:0 0 7px; font-size:19px; letter-spacing:-.04em; }
    .menu-item p { margin:0; max-width:340px; color:var(--muted); font-size:14px; line-height:1.45; }
    .price { font:500 13px "DM Mono",monospace; }
    .menu-tag { font:500 10px "DM Mono",monospace; letter-spacing:.08em; color:var(--coffee); text-transform:uppercase; }
    .menu-category { margin:48px 0 16px; padding-top:18px; border-top:1px solid var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
    .menu-category h3 { margin:0; font:600 29px/1 "Playfair Display",serif; letter-spacing:-.05em; }

    .photo-menu { display:grid; grid-template-columns:1fr 1fr; gap:11px; }

    .photo-card { position:relative; min-height:245px; border-radius:15px; overflow:hidden; background:var(--sand); border: 1px solid rgba(53, 32, 24, 0.16);
	box-shadow: 0 10px 24px rgba(53, 32, 24, 0.10); }

    .photo-card.wide { grid-column:span 2; min-height:245px; }
    .photo-card img { display:block; width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .35s ease; }
    .photo-card:hover img { transform:scale(1.04); }
    .photo-card .photo-label { position:absolute; left:12px; right:12px; bottom:12px; color:var(--white); background:rgba(21,18,15,.82); backdrop-filter:blur(8px); padding:10px 12px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; }

    .full-menu-wrap { display:flex; justify-content:center; padding-top:30px; }
    .full-menu-button { cursor:pointer; background:transparent; }

    dialog { width:min(700px,calc(100% - 28px)); border:0; padding:0; border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px rgba(0,0,0,.35); }
    dialog::backdrop { background:rgba(21,18,15,.7); backdrop-filter:blur(4px); }
    .dialog-inner { padding:26px; }
    .dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
    .dialog-close { border:0; background:none; font:500 12px "DM Mono",monospace; letter-spacing:.08em; cursor:pointer; }

    .full-menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .full-menu-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; }

    .location-grid { display:grid; gap:12px; }
    .location-card { border-radius:16px; padding:26px; min-height:220px; }
    .location-card:first-child { background:#d6c8b8; display:flex; flex-direction:column; justify-content:space-between; }
    .location-card:last-child { background:var(--ink); color:var(--paper); }
    .location-card h3 { font:600 28px/1 "Playfair Display",serif; margin:0 0 14px; letter-spacing:-.05em; }
    .location-card p { font-size:14px; line-height:1.55; margin:0; }

    .map-pin { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:var(--paper); font-size:21px; }
    .hours { display:grid; grid-template-columns:1fr auto; gap:13px; padding-top:14px; border-top:1px solid #52504b; font-size:13px; }

    .gallery { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:160px 110px; gap:10px; }
    .gallery div { border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; padding:15px; color:white; font:500 10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
    .gallery div:first-child { grid-row:span 2; background:linear-gradient(145deg,#271b17 0%,#855a3e 63%,#d6a078 100%); }
    .gallery div:nth-child(2) { background:linear-gradient(135deg,#e7dbcd,#6d5041); }
    .gallery div:nth-child(3) { background:linear-gradient(135deg,#b7a094,#563c32); }
    .reviews { display:grid; gap:12px; }
    blockquote { margin:0; padding:23px; border:1px solid var(--line); border-radius:15px; font:600 21px/1.2 "Playfair Display",serif; letter-spacing:-.04em; }
    .google-review { border-radius:18px; padding:28px; background:var(--coffee); color:var(--paper); display:grid; gap:22px; }
    .google-review p { margin:0; max-width:570px; font:600 clamp(24px,6vw,40px)/1.1 "Playfair Display",serif; letter-spacing:-.05em; }
    .google-review .review-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
    .stars {
  display: inline-block;
  color: #fffdfa;
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}
    .google-review .btn { border-color:var(--paper); color:var(--paper); }
    blockquote footer { margin-top:22px; font:400 10px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
    footer.site-footer { padding:40px 0 24px; background:var(--ink); color:var(--paper); }
    .footer-top { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:38px; }
    .footer-top h2 { max-width:280px; }
    .footer-bottom { border-top:1px solid #504e49; padding-top:18px; display:flex; justify-content:space-between; color:#aaa59d; font:10px "DM Mono",monospace; }

    @media (min-width:700px) { 
		.wrap { width:min(1850px, calc(100% - 80px)); }
		.navlinks { display:flex; } 
		.menu-toggle { display:none; }
		.hero { min-height:680px; padding:115px 40px 40px; } .hero-bottom { grid-template-columns:260px 260px; justify-content:end; } 
		.menu-item { grid-template-columns:130px 1fr auto; padding:24px 0; } 
		.menu-image { width:130px; height:145px; }
		.chef-menu {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  grid-template-rows: repeat(2, 230px);
  gap: 12px;}

.chef-menu .photo-card {min-height: auto;}

.chef-menu .photo-card.wide {grid-column: 1;grid-row: 1 / span 2;height: auto;}

.chef-menu .photo-card:nth-child(2) {grid-column: 2;grid-row: 1;}

.chef-menu .photo-card:nth-child(3) {grid-column: 2;grid-row: 2;}

.photo-menu.drinks {grid-template-columns: repeat(2, minmax(0, 1fr));max-width: none;}

.photo-menu.drinks .photo-card { min-height: 370px;}
		
		.about-grid { grid-template-columns:1.4fr .6fr; align-items:start; } 
		.location-grid { grid-template-columns:1fr 1fr; } 
		.gallery { grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:220px; }
		.gallery div:first-child { grid-row:auto; }
		.reviews { grid-template-columns:repeat(3,1fr); } }


#location {
  position: relative;
  background:
    linear-gradient(rgba(53, 32, 24, 0.72), rgba(53, 32, 24, 0.72)),
    #251112 center / cover no-repeat;
  color: #fffdfa;
}

#location .eyebrow,
#location .location-card p {
  color: #fffdfa;
}

#location .location-card {
  backdrop-filter: blur(8px);
}

#location .location-card:first-child {
  background: rgba(247, 241, 232, 0.92);
  color: #302323;
}

#location .location-card:first-child p {
  color: #302323;
}

#location .location-card:last-child {
  background: #24120d;
  border: 1px solid rgba(255, 253, 250, 0.12);
}



/* Full menu pop-up */
#full-menu-dialog {
  max-height: 90vh;
  overflow-y: auto;
}

.full-menu-image {
  padding: 4px;
  background: var(--paper);
}

.full-menu-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
  border-radius: 10px;
}

.about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.about-images figure {
  margin: 0;
}

.about-images img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 14px;
}

.about-images figcaption {
  margin-top: 8px;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 500px) {
  .about-images {
    grid-template-columns: 1fr;
  }

  .about-images img {
    height: 260px;
  }
}

.location-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 14px;
}

.location-info {
  display: grid;
  gap: 14px;
}

.opening-card {
  min-height: 260px;
}

.map-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sand);
}

.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  filter: saturate(0.7) contrast(0.95);
}

.map-button {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 13px 17px;
  border-radius: 999px;
  background: var(--coffee);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 700px) {
  .location-grid {
    grid-template-columns: 1fr;
  }

  .map-card,
  .map-card iframe {
    min-height: 360px;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.gallery-grid img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
}

.gallery-grid img:nth-child(1),
.gallery-grid img:nth-child(4) {
  grid-column: span 2;
  height: 320px;
}

@media (min-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-grid img {
    height: 250px;
  }

  .gallery-grid img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    height: 512px;
  }

  .gallery-grid img:nth-child(4) {
    grid-column: span 2;
    height: 250px;
  }
}

#roadside-slideshow {
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

#roadside-slideshow.fade-out {
  opacity: 0;
}


.ticker {
  overflow: hidden;
  padding: 15px 0;
  background: var(--coffee);
  color: var(--white);
  border-top: 1px solid rgba(255, 253, 250, 0.2);
  border-bottom: 1px solid rgba(255, 253, 250, 0.2);
}

.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 40px;
  animation: ticker-move 50s linear infinite;
  white-space: nowrap;
}

.ticker-track span {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.ticker-track span::after {
  content: "✦";
  margin-left: 34px;
  color: var(--paper);
}

@keyframes ticker-move {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .ticker-track {
    gap: 24px;
    animation-duration: 16s;
  }

  .ticker-track span {
    font-size: 10px;
  }

  .ticker-track span::after {
    margin-left: 24px;
  }
}

.navlinks a,
.mobile-nav a {
  position: relative;
}

.navlinks a.active {
  color: var(--coffee);
}

.navlinks a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background: var(--coffee);
}

.mobile-nav a.active {
  color: var(--coffee);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  display: block;
  width: 88px;
  height: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.footer-socials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
}

.footer-socials .eyebrow {
  color: #aaa59d;
}

.footer-socials div {
  display: flex;
  gap: 18px;
}

.footer-socials a {
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.footer-socials a:hover {
  opacity: 0.65;
}

@media (max-width: 500px) {
  .footer-socials {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}

/* Satu background untuk semua content, bukan section asing */
main {
  background: #f7f1e8;
  transition: background-color 0.9s ease;
}

main[data-theme="dark"] {
  background: #352018;
}

/* Semua section tunjuk background dari main */
main > section:not(.hero) {
  background: transparent !important;
}

/* Text hanya putih bila main dah bertukar dark */
main[data-theme="dark"] #menu,
main[data-theme="dark"] #gallery {
  color: #fffdfa;
}

main[data-theme="dark"] #menu .eyebrow,
main[data-theme="dark"] #gallery .eyebrow {
  color: #e7d5c4;
}

main[data-theme="dark"] #menu .menu-category {
  border-color: rgba(255, 253, 250, 0.45);
}

main[data-theme="dark"] #menu .btn,
main[data-theme="dark"] #gallery .btn {
  border-color: #fffdfa;
  color: #fffdfa;
}

/* Horizontal Google review rail */
.review-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -8px 0 26px;
}

.review-intro > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
}

.review-intro strong {
  font-size: 14px;
}

.review-stars {
  color: var(--coffee);
  font-size: 17px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.review-controls {
  display: flex;
  gap: 8px;
}

.review-controls button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  cursor: pointer;
  transition: 0.2s ease;
}

.review-controls button:hover {
  background: var(--coffee);
  border-color: var(--coffee);
  color: var(--white);
}

.review-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 2px 0 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.review-rail::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 min(82vw, 390px);
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(53, 32, 24, 0.18);
  border-radius: 18px;
  background: rgba(255, 253, 250, 0.66);
  box-shadow: 0 12px 25px rgba(53, 32, 24, 0.08);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.review-person {
  display: flex;
  align-items: center;
  gap: 11px;
}

.review-person > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coffee);
  color: var(--white);
  font: 500 11px "DM Mono", monospace;
  letter-spacing: 0.05em;
}

.review-person strong,
.review-person small {
  display: block;
}

.review-person strong {
  font-size: 14px;
}

.review-person small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.review-card p {
  margin: auto 0 0;
  font: 600 23px/1.18 "Playfair Display", serif;
  letter-spacing: -0.04em;
}

@media (min-width: 700px) {
  .review-card {
    flex-basis: min(32vw, 410px);
  }
}

@media (max-width: 500px) {
  .review-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .review-card {
    min-height: 275px;
  }

  .review-card p {
    font-size: 21px;
  }
}

/* About — closing story section */
#about {
  overflow: hidden;
}

.about-title-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}

.about-route {
  color: var(--muted);
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 0.1em;
}

.about-editorial {
  display: grid;
  gap: 14px;
}

.about-main-photo,
.about-side-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--coffee);
}

.about-main-photo {
  min-height: 480px;
}

.about-main-photo::after,
.about-side-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 48%,
    rgba(21, 18, 15, 0.72) 100%
  );
  pointer-events: none;
}

.about-main-photo img,
.about-side-photo img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.about-main-photo:hover img,
.about-side-photo:hover img {
  transform: scale(1.04);
}

.about-main-photo figcaption,
.about-side-photo figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 17px;
  left: 18px;
  color: var(--white);
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-story-copy {
  position: relative;
  padding: 34px 24px;
  border-radius: 18px;
  background: var(--coffee);
  color: var(--white);
}

.about-number {
  display: block;
  margin-bottom: 52px;
  color: #d8cbbd;
  font: 500 11px "DM Mono", monospace;
  letter-spacing: 0.12em;
}

.about-story-copy h2 {
  max-width: 480px;
  margin-bottom: 26px;
  color: var(--white);
}

.about-story-copy h2 em {
  color: #d8cbbd;
}

.about-story-copy p {
  max-width: 460px;
  margin: 0 0 16px;
  color: rgba(255, 253, 250, 0.82);
  font-size: 16px;
  line-height: 1.58;
}

.about-line {
  width: 100%;
  max-width: 460px;
  height: 1px;
  margin: 30px 0 18px;
  background: rgba(255, 253, 250, 0.25);
}

.about-story-copy .about-small-note {
  margin: 0;
  color: var(--white);
  font: 600 19px/1.2 "Playfair Display", serif;
  letter-spacing: -0.04em;
}

.about-side-photo {
  min-height: 310px;
}



@media (min-width: 700px) {
  .about-editorial {
    grid-template-columns: 1.15fr 0.9fr;
    grid-template-rows: 1fr 0.72fr;
  }

  .about-main-photo {
    grid-row: span 2;
    min-height: 720px;
  }

  .about-story-copy {
    padding: 42px;
  }

  .about-side-photo {
    min-height: auto;
  }

}

@media (max-width: 500px) {
  .about-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-main-photo {
    min-height: 380px;
  }

  .about-side-photo {
    min-height: 250px;
  }
}
	
.menu-toggle,
.full-menu-button {
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

#menu .full-menu-button {
  color: #352018;
  border-color: #352018;
}
	
	button.menu-toggle {
  color: #15120f !important;
  -webkit-text-fill-color: #15120f;
}

button.full-menu-button,
#menu button.full-menu-button {
  color: #352018 !important;
  border-color: #352018 !important;
  -webkit-text-fill-color: #352018;
}