/* MDIX Kafe Prima — audit fixes */

/* Brand strip under the hero only held grey placeholder logos. */
.brand-area {
  display: none !important;
}

/* Small photo over the about image and testimonial avatars are round, like the original placeholders. */
.about-icon img,
.testi-author > img {
  border-radius: 50%;
  object-fit: cover;
}

/* Scroll-reveal blocks (WOW.js) stayed hidden when the page is scrolled quickly or captured;
   show them at once so no section ever looks empty. */
.wow {
  visibility: visible !important;
  animation-name: none !important;
}

/* Hero photos are light; darken them so the white headline stays readable. */
.slider-area .single-slider {
  box-shadow: inset 0 0 0 100vmax rgba(24, 14, 9, 0.55);
}

/* Menu list: square thumbnails of one size, name column takes the free space,
   price never wraps. Below 992px one item per row so names are not squeezed. */
.meal-container {
  align-items: flex-start;
}
.meal-container .meal-img {
  flex: 0 0 auto;
}
.meal-container .meal-img img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
}
.meal-container .meal-content {
  flex: 1 1 auto;
  min-width: 0;
}
.meal-container .line {
  flex: 0 0 10%;
}
.meal-container .meal-price {
  flex: 0 0 auto;
}
.meal-price strong {
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .populer-meal li {
    width: 100%;
  }
}
/* Phone: the dashed leader squeezed the menu names into narrow columns. */
@media (max-width: 575px) {
  .meal-container .line {
    display: none;
  }
  .meal-container .meal-img img {
    width: 64px;
    height: 64px;
  }
  .meal-container .meal-content {
    padding-right: 10px;
  }
  .meal-price strong {
    font-size: 19px;
  }
}

/* Grey placeholder cloud under the booking card (theme leftover). */
.booking-img2 {
  display: none !important;
}

/* Hero kicker: tight theme line-height made the two lines overlap on tablets. */
.slider-content h5 {
  line-height: 1.3;
}

/* "Keunggulan" cards: 4 columns were too narrow below 1200px (words broke mid-word). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .row > .col-md-3:has(> .services-08-item) {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 30px;
  }
}

/* Header top bar 992–1199px: social icons wrapped onto two lines. */
@media (min-width: 992px) {
  .header-top .row > .col-lg-4 {
    display: none !important;
  }
  .header-top .row > .col-lg-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .header-top .header-social span {
    white-space: nowrap;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* About: the CTA did not fit beside the signature and ran off the right edge. */
  .about-content3 .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left !important;
  }
  .about-content3 .row > .col-md-6 + .col-md-6 {
    margin-top: 20px;
  }
}

/* Products: photos of different ratios get one frame; the image link is a block. */
.product__img > a {
  display: block;
}
.product__img img {
  aspect-ratio: 700 / 760;
  object-fit: cover;
}

/* Gallery strip (index): isotope left an empty cell / a white strip; use a fixed grid instead. */
.profile .container-fluid,
.profile .container-fluid > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.profile .container-fluid > .row {
  margin-left: 0;
  margin-right: 0;
}
.profile .masonry-gallery-huge {
  margin: 0;
}
.profile .masonry-gallery-huge .grid {
  display: grid !important;
  height: auto !important;
  grid-template-columns: repeat(2, 1fr);
}
.profile .masonry-gallery-huge .grid-item {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
}
.profile .masonry-gallery-huge .grid-item:first-child {
  grid-column: span 2;
}
.profile .masonry-gallery-huge .grid-item a,
.profile .masonry-gallery-huge .gallery-image {
  display: block;
  height: 100%;
  margin: 0;
}
.profile .masonry-gallery-huge .grid-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .profile .masonry-gallery-huge .grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .profile .masonry-gallery-huge .grid-item:first-child {
    grid-column: auto;
    grid-row: span 2;
  }
  .profile .masonry-gallery-huge .grid-item:first-child img {
    aspect-ratio: auto;
  }
}

/* Testimonial: the quote mark sat under the customer name on phones. */
@media (max-width: 575px) {
  .testimonial-active .qt-img {
    display: none;
  }
}

/* Blog cards on the home page: equal height per row. */
#blog .row > [class*="col-"] {
  display: flex;
}
#blog .single-post2 {
  flex: 1 1 auto;
}

/* Skills photo: theme pr-30 left it off-centre on narrow screens. */
@media (max-width: 991.98px) {
  #skill .col-lg-6.pr-30 {
    padding-right: 15px;
  }
}

/* Touch targets (WCAG 2.2 AA, >= 24px; menu toggle 44px). */
.mean-container a.meanmenu-reveal {
  width: 26px !important;
  height: 26px !important;
  padding: 8px 8px !important;
  box-sizing: content-box;
}
.logo a {
  display: inline-block;
}
.services-08-content > a,
.blog-btn a,
.f-contact a,
.footer-link li a {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}
.footer-social a,
.header-social a {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
/* Slider dots: 24px hit area, the visible dot stays 10px. */
.testimonial-active .slick-dots li button {
  width: 24px;
  height: 24px;
  padding: 7px;
  margin-left: 2px;
  background-clip: content-box;
}
.testimonial-active .slick-dots .slick-active button {
  width: 24px;
}
.home-blog-active .slick-dots li button {
  width: 24px;
  height: 24px;
  margin-left: 0;
  position: relative;
}
.home-blog-active .slick-dots li button::before {
  position: absolute;
  margin: 0;
  left: 7px;
  top: 7px;
}

/* Phone: theme hid the name under the signature (.about-content h3). */
@media (max-width: 767.98px) {
  .about-content .signature h3 {
    display: block;
  }
}

/* Phone: booking form fields were inset twice (card padding + column padding). */
@media (max-width: 575.98px) {
  .booking .contact-bg02 {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Small phones (<400px): menu names broke mid-word next to the price. */
@media (max-width: 399.98px) {
  .meal-container .meal-img img {
    width: 56px;
    height: 56px;
  }
  .meal-content h5 {
    font-size: 20px;
  }
  .meal-price strong {
    font-size: 17px;
  }
}

/* Service sidebar phone number: keep on one line. */
.service-detail-contact a {
  white-space: nowrap;
  font-size: 26px;
}

/* Nav 992–1399px: "Kontak" touched the "Pesan Meja" button. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .second-menu .main-menu ul li {
    margin-left: 22px;
  }
  .second-menu .main-menu ul li:first-child {
    margin-left: 0;
  }
  .second-menu .main-menu {
    padding-right: 20px;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .second-menu .main-menu ul li {
    margin-left: 18px;
  }
}

/* Inner pages: small text links get a 24px+ hit area without moving the layout. */
.pro-cat a,
.product-cat a,
.widget_recent_entries a {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}
.avatar__info-social a {
  display: inline-block;
  min-width: 24px;
  text-align: center;
}
.team-active .slick-dots li button {
  width: 24px !important;
  height: 24px !important;
  padding: 7px !important;
  background-clip: content-box !important;
}

/* Team cards: photos of different ratios made the cards uneven. */
.team-thumb .brd img {
  width: 100%;
  aspect-ratio: 219 / 238;
  object-fit: cover;
}

/* Verifikasi ulang akhir 2026-10-13: teks isi #777 = 4,48:1 (4,11:1 di seksi krem) → #666; harga coret #b5b5b5 → #767676. */
body { color: #666; }
.services-text05 p { color: #666 !important; }
.price span.old-price { color: #767676; }
.single-cta p a { color: #666; }

/* Verifikasi ulang akhir 2026-10-13: avatar penulis & komentar (blog-details) dulunya lingkaran abu-abu
   placeholder di dalam PNG; kini foto wajah persegi → dibulatkan di CSS. */
.avatar__wrap .avatar-img img, .single__comment .comments-avatar img { border-radius: 50%; object-fit: cover; }
/* blog-details: tag terkait #9d9d9d di putih (2,7:1) → #595959; nama di kutipan #ae6957 di latar #101010 (4,49:1) → #c98a78. */
.post__tag ul li a { color: #595959; }
blockquote footer { color: #c98a78; }