/*
Theme Name: Kedai Kopi
Theme URI: https://example.com/kedai-kopi
Author: Kedai Kopi Studio
Author URI: https://example.com
Description: Tema WordPress single page untuk coffee shop / kedai kopi. Tinggal upload & aktifkan, semua konten (produk kopi, testimoni, hero, kontak, sosial media) bisa diedit lewat wp-admin tanpa sentuh kode. Terinspirasi dari layout landing page kedai kopi modern.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kedai-kopi
*/

/* ==========================================================================
   0. CSS VARIABLES
   ========================================================================== */
:root{
  --kk-dark:#2b1810;
  --kk-brown:#6f4a34;
  --kk-brown-dark:#4a3123;
  --kk-gold:#c8944f;
  --kk-gold-light:#e8c48c;
  --kk-cream:#f7efe3;
  --kk-cream-2:#fbf6ee;
  --kk-white:#ffffff;
  --kk-text:#2b1810;
  --kk-text-light:#6b5a4f;
  --kk-shadow:0 10px 30px rgba(43,24,16,0.12);
  --kk-radius:16px;
  --kk-font-head:'Playfair Display', Georgia, serif;
  --kk-font-body:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--kk-font-body);
  color:var(--kk-text);
  background:var(--kk-cream-2);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{text-decoration:none;color:inherit;transition:.25s ease;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--kk-font-head);color:var(--kk-dark);margin:0 0 .5em;line-height:1.25;}
p{margin:0 0 1em;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:50px;font-weight:600;font-size:15px;
  border:2px solid var(--kk-gold);cursor:pointer;
}
.btn-primary{background:var(--kk-gold);color:var(--kk-white);}
.btn-primary:hover{background:var(--kk-dark);border-color:var(--kk-dark);color:#fff;}
.btn-outline{background:transparent;color:var(--kk-cream);border-color:var(--kk-cream);}
.btn-outline:hover{background:var(--kk-cream);color:var(--kk-dark);}
.section{padding:90px 0;}
.section-cream{background:var(--kk-cream);}
.section-dark{background:var(--kk-dark);color:var(--kk-cream);}
.section-dark h2, .section-dark h3{color:var(--kk-cream);}
.eyebrow{
  display:inline-block;letter-spacing:3px;text-transform:uppercase;
  font-size:13px;font-weight:600;color:var(--kk-gold);margin-bottom:14px;
}
.section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-head h2{font-size:38px;}
.section-head p{color:var(--kk-text-light);}

/* ==========================================================================
   2. TOP BAR
   ========================================================================== */
.kk-topbar{background:var(--kk-dark);color:var(--kk-cream);font-size:13px;}
.kk-topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.kk-topbar-contact{display:flex;gap:20px;flex-wrap:wrap;}
.kk-topbar-contact a{opacity:.9;}
.kk-topbar-contact a:hover{color:var(--kk-gold);}
.kk-topbar-social{display:flex;gap:14px;}
.kk-topbar-social a{opacity:.85;font-size:14px;}
.kk-topbar-social a:hover{color:var(--kk-gold);}

/* ==========================================================================
   3. HEADER / NAV
   ========================================================================== */
.kk-header{
  background:rgba(247,239,227,0.96);
  position:sticky;top:0;z-index:999;
  box-shadow:0 2px 14px rgba(43,24,16,0.06);
}
.kk-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.kk-logo{display:flex;align-items:center;gap:10px;font-family:var(--kk-font-head);font-size:24px;font-weight:700;color:var(--kk-dark);}
.kk-logo img{max-height:48px;width:auto;}
.kk-nav ul{display:flex;gap:34px;align-items:center;}
.kk-nav a{font-weight:600;font-size:15px;color:var(--kk-dark);position:relative;padding:6px 0;}
.kk-nav a:hover{color:var(--kk-gold);}
.kk-nav .btn{padding:10px 22px;}
.kk-menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--kk-dark);cursor:pointer;}

@media (max-width:860px){
  .kk-topbar-contact a:nth-child(2){display:none;}
  .kk-nav{
    position:fixed;top:0;right:-100%;height:100vh;width:78%;max-width:320px;
    background:var(--kk-cream);padding:90px 30px;box-shadow:-6px 0 24px rgba(0,0,0,.15);
    transition:right .3s ease;z-index:1000;
  }
  .kk-nav.is-open{right:0;}
  .kk-nav ul{flex-direction:column;align-items:flex-start;gap:24px;}
  .kk-menu-toggle{display:block;}
}

/* ==========================================================================
   4. HERO
   ========================================================================== */
.kk-hero{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background-size:cover;background-position:center;background-color:var(--kk-dark);
  color:#fff;
}
.kk-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,12,8,.55) 0%, rgba(20,12,8,.75) 100%);
}
.kk-hero .container{position:relative;z-index:2;max-width:760px;text-align:left;}
.kk-hero .eyebrow{color:var(--kk-gold-light);}
.kk-hero h1{color:#fff;font-size:56px;margin-bottom:20px;}
.kk-hero p.lead{font-size:18px;color:#f1e4d3;max-width:560px;margin-bottom:32px;}
.kk-hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

@media (max-width:640px){
  .kk-hero h1{font-size:36px;}
  .kk-hero{min-height:76vh;}
}

/* ==========================================================================
   5. ABOUT
   ========================================================================== */
.kk-about{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center;}
.kk-about-img{position:relative;}
.kk-about-img img{border-radius:var(--kk-radius);box-shadow:var(--kk-shadow);}
.kk-about-badge{
  position:absolute;bottom:-22px;right:-22px;background:var(--kk-gold);color:#fff;
  border-radius:50%;width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:700;font-size:14px;line-height:1.3;box-shadow:var(--kk-shadow);
  padding:10px;
}
.kk-about-text .eyebrow{color:var(--kk-brown);}
.kk-about-text h2{font-size:34px;}
.kk-about-text p{color:var(--kk-text-light);}
.kk-about-stats{display:flex;gap:32px;margin-top:26px;flex-wrap:wrap;}
.kk-about-stats div strong{display:block;font-size:28px;font-family:var(--kk-font-head);color:var(--kk-brown);}
.kk-about-stats div span{font-size:13px;color:var(--kk-text-light);}

@media (max-width:860px){
  .kk-about{grid-template-columns:1fr;}
  .kk-about-badge{width:96px;height:96px;font-size:12px;}
}

/* ==========================================================================
   6. PRODUK / MENU KOPI
   ========================================================================== */
.kk-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.kk-product-card{
  background:var(--kk-white);border-radius:var(--kk-radius);overflow:hidden;
  box-shadow:var(--kk-shadow);transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.kk-product-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(43,24,16,0.18);}
.kk-product-thumb{position:relative;height:220px;overflow:hidden;background:var(--kk-cream);}
.kk-product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.kk-product-card:hover .kk-product-thumb img{transform:scale(1.08);}
.kk-product-badge{
  position:absolute;top:14px;left:14px;background:var(--kk-gold);color:#fff;font-size:12px;
  font-weight:700;padding:5px 12px;border-radius:50px;letter-spacing:.5px;
}
.kk-product-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.kk-product-body h3{font-size:20px;margin-bottom:8px;}
.kk-product-body p.desc{color:var(--kk-text-light);font-size:14px;flex:1;margin-bottom:16px;}
.kk-product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.kk-price{font-family:var(--kk-font-head);font-size:20px;font-weight:700;color:var(--kk-brown);}
.kk-order-btn{
  background:var(--kk-dark);color:#fff;padding:9px 16px;border-radius:50px;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.kk-order-btn:hover{background:var(--kk-gold);color:#fff;}
.kk-empty-note{text-align:center;color:var(--kk-text-light);border:2px dashed var(--kk-gold-light);padding:40px;border-radius:var(--kk-radius);}

@media (max-width:960px){.kk-products-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.kk-products-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   7. TESTIMONI
   ========================================================================== */
.kk-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.kk-testi-card{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--kk-radius);padding:28px;
}
.kk-testi-stars{color:var(--kk-gold);font-size:16px;margin-bottom:12px;letter-spacing:2px;}
.kk-testi-text{font-size:15px;color:#e8dccb;font-style:italic;margin-bottom:20px;}
.kk-testi-person{display:flex;align-items:center;gap:12px;}
.kk-testi-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;}
.kk-testi-person strong{display:block;color:#fff;font-size:14px;}
.kk-testi-person span{font-size:12px;color:#b7a794;}

@media (max-width:960px){.kk-testi-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.kk-testi-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   8. CTA STRIP
   ========================================================================== */
.kk-cta{
  background:linear-gradient(120deg, var(--kk-brown), var(--kk-dark));
  color:#fff;border-radius:24px;padding:56px;display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;
}
.kk-cta h3{color:#fff;font-size:28px;margin-bottom:8px;}
.kk-cta p{color:#e8dccb;margin:0;}

/* ==========================================================================
   9. CONTACT / MAP
   ========================================================================== */
.kk-contact{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.kk-contact-list li{display:flex;gap:16px;margin-bottom:22px;align-items:flex-start;}
.kk-contact-icon{
  width:46px;height:46px;border-radius:50%;background:var(--kk-gold);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;
}
.kk-contact-list strong{display:block;color:var(--kk-dark);}
.kk-contact-list span, .kk-contact-list a{color:var(--kk-text-light);font-size:14px;}
.kk-map{border-radius:var(--kk-radius);overflow:hidden;box-shadow:var(--kk-shadow);min-height:320px;}
.kk-map iframe{width:100%;height:100%;min-height:320px;border:0;}

@media (max-width:860px){.kk-contact{grid-template-columns:1fr;}}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.kk-footer{background:var(--kk-dark);color:#cbb9a6;padding:50px 0 24px;}
.kk-footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;margin-bottom:30px;}
.kk-footer-logo{font-family:var(--kk-font-head);font-size:24px;color:#fff;margin-bottom:8px;}
.kk-footer-social{display:flex;gap:14px;}
.kk-footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.kk-footer-social a:hover{background:var(--kk-gold);border-color:var(--kk-gold);}
.kk-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:13px;text-align:center;color:#a4917d;}

/* ==========================================================================
   11. FLOATING WHATSAPP
   ========================================================================== */
.kk-float-wa{
  position:fixed;bottom:24px;right:24px;background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:998;
}
.kk-float-wa:hover{transform:scale(1.08);color:#fff;}

/* ==========================================================================
   12. SINGLE PRODUK / GENERIC PAGE
   ========================================================================== */
.kk-single-produk{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:70px 0;}
.kk-single-produk img{border-radius:var(--kk-radius);box-shadow:var(--kk-shadow);}
.kk-back-link{display:inline-block;margin-bottom:20px;color:var(--kk-brown);font-weight:600;}
@media (max-width:860px){.kk-single-produk{grid-template-columns:1fr;}}
.kk-page-content{padding:70px 0;max-width:820px;margin:0 auto;}

/* ==========================================================================
   13. PRODUCT OPTIONS (Gilingan & Jumlah)
   ========================================================================== */
.kk-product-options{border-top:1px dashed var(--kk-gold-light);border-bottom:1px dashed var(--kk-gold-light);padding:14px 0;margin:14px 0;}
.kk-field-label{display:block;font-size:12px;font-weight:600;color:var(--kk-text-light);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.kk-grind-select{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid #e3d5c2;background:var(--kk-cream-2);
  font-family:var(--kk-font-body);font-size:14px;color:var(--kk-text);margin-bottom:14px;
}
.kk-qty-row{display:flex;align-items:center;justify-content:space-between;}
.kk-qty-control{display:flex;align-items:center;border:1px solid #e3d5c2;border-radius:50px;overflow:hidden;}
.kk-qty-btn{
  width:32px;height:32px;border:none;background:var(--kk-cream);color:var(--kk-brown);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
}
.kk-qty-btn:hover{background:var(--kk-gold);color:#fff;}
.kk-qty-input{
  width:44px;text-align:center;border:none;border-left:1px solid #e3d5c2;border-right:1px solid #e3d5c2;
  font-size:14px;font-weight:600;padding:6px 0;-moz-appearance:textfield;
}
.kk-qty-input::-webkit-outer-spin-button,.kk-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.kk-add-cart-btn{border:none;cursor:pointer;font-family:var(--kk-font-body);}

/* ==========================================================================
   14. FLOATING CART BUTTON
   ========================================================================== */
.kk-float-cart{
  position:fixed;bottom:24px;right:94px;background:var(--kk-dark);color:#fff;border:none;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:998;cursor:pointer;
}
.kk-float-cart:hover{background:var(--kk-gold);transform:scale(1.08);}
.kk-cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--kk-gold);color:#fff;font-size:11px;font-weight:700;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--kk-cream-2);
}
@media (max-width:640px){.kk-float-cart{right:88px;bottom:20px;width:52px;height:52px;font-size:19px;}.kk-float-wa{width:52px;height:52px;font-size:24px;}}

/* ==========================================================================
   15. CART DRAWER / CHECKOUT PANEL
   ========================================================================== */
.kk-cart-overlay{
  position:fixed;inset:0;background:rgba(20,12,8,.5);z-index:1001;opacity:0;visibility:hidden;
  transition:opacity .25s ease;
}
.kk-cart-overlay.is-open{opacity:1;visibility:visible;}
.kk-cart-drawer{
  position:fixed;top:0;right:-420px;width:100%;max-width:420px;height:100vh;background:var(--kk-cream-2);
  z-index:1002;box-shadow:-8px 0 30px rgba(0,0,0,.2);transition:right .3s ease;display:flex;flex-direction:column;
}
.kk-cart-drawer.is-open{right:0;}
.kk-cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;padding:20px 24px;
  background:var(--kk-dark);color:#fff;
}
.kk-cart-drawer-head h3{color:#fff;margin:0;font-size:20px;}
.kk-cart-close{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1;}
.kk-cart-intro{font-size:13px;color:var(--kk-text-light);padding:14px 24px 0;margin:0;}
.kk-cart-items{flex:1;overflow-y:auto;padding:14px 24px;}
.kk-cart-empty{text-align:center;color:var(--kk-text-light);padding:40px 10px;font-size:14px;}
.kk-cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #ece0d0;}
.kk-cart-item img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--kk-cream);flex-shrink:0;}
.kk-cart-item-info{flex:1;min-width:0;}
.kk-cart-item-info h4{font-size:14px;margin:0 0 4px;font-family:var(--kk-font-body);font-weight:600;}
.kk-cart-item-info span{display:block;font-size:12px;color:var(--kk-text-light);margin-bottom:4px;}
.kk-cart-item-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.kk-cart-item-qty{display:flex;align-items:center;border:1px solid #e3d5c2;border-radius:50px;overflow:hidden;}
.kk-cart-item-qty button{width:24px;height:24px;border:none;background:var(--kk-cream);cursor:pointer;font-size:14px;color:var(--kk-brown);}
.kk-cart-item-qty span{width:26px;text-align:center;font-size:13px;font-weight:600;margin:0;}
.kk-cart-item-remove{background:none;border:none;color:#c0392b;font-size:12px;cursor:pointer;text-decoration:underline;padding:0;}
.kk-cart-item-price{font-size:13px;font-weight:700;color:var(--kk-brown);white-space:nowrap;}

.kk-cart-summary{padding:16px 24px 24px;border-top:1px solid #ece0d0;background:var(--kk-cream-2);}
.kk-cart-line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--kk-text-light);}
.kk-cart-total{font-size:17px;color:var(--kk-dark);font-weight:700;border-top:1px dashed #d9c7ae;padding-top:10px;margin-top:4px;}
.kk-cart-field{margin-bottom:12px;}
.kk-cart-field label{display:block;font-size:12px;font-weight:600;color:var(--kk-text-light);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.kk-cart-field input,.kk-cart-field textarea,#kkCourierSelect{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid #e3d5c2;background:#fff;
  font-family:var(--kk-font-body);font-size:14px;color:var(--kk-text);resize:vertical;
}
#kkCheckoutBtn{margin-top:6px;}
@media (max-width:480px){.kk-cart-drawer{max-width:100%;}}