/* =========================================================
   tubruk.Tea — Additional CSS
   Tempel semua isi file ini ke:
   Appearance → Customize → Additional CSS
   ========================================================= */

:root{
  --paper: #FBF3E7;
  --paper-deep: #F1E4D0;
  --ink: #241C15;
  --muted: #6E6255;
  --rust: #C0532D;
  --rust-deep: #A54321;
  --brown: #6B4226;
  --gold: #D6A756;
  --sage: #7C8B6F;
  --white: #FFFFFF;
  --radius: 16px;
}

.tt-wrap *{box-sizing:border-box;}
.tt-wrap{
  font-family:'Inter', Arial, sans-serif;
  color:var(--ink);
  line-height:1.65;
}
.tt-wrap h1,.tt-wrap h2,.tt-wrap h3,.tt-wrap h4{
  font-family:'Fraunces', 'Georgia', serif;
  color:var(--ink);
  line-height:1.2;
  font-weight:600;
}
.tt-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}
.tt-section{padding:60px 0;}
.tt-section.tt-paper{background:var(--paper);}
.tt-section.tt-deep{background:var(--paper-deep);}
.tt-section.tt-dark{background:var(--ink);color:var(--paper);}
.tt-section.tt-dark h2, .tt-section.tt-dark h3{color:var(--paper);}

.tt-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--rust);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.tt-eyebrow::before{
  content:'';
  width:22px;height:2px;
  background:var(--rust);
  display:inline-block;
}
.tt-section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 40px;
}
.tt-section-head h2{font-size:1.9rem;margin-bottom:10px;}
.tt-section-head p{color:var(--muted);}

/* ===== HERO ===== */
.tt-hero{
  background:linear-gradient(160deg, var(--paper) 0%, var(--paper-deep) 100%);
  padding:70px 0 50px;
  border-bottom:3px solid var(--ink);
}
.tt-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:44px;
  align-items:center;
}
.tt-badge{
  display:inline-block;
  background:var(--ink);
  color:var(--gold);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:1px;
  padding:6px 14px;
  border-radius:20px;
  margin-bottom:18px;
}
.tt-hero h1{
  font-size:2.5rem;
  margin-bottom:16px;
}
.tt-hero h1 em{
  color:var(--rust);
  font-style:normal;
}
.tt-hero p.tt-lede{
  color:var(--muted);
  font-size:1.05rem;
  max-width:500px;
  margin-bottom:26px;
}
.tt-hero-img{
  border-radius:var(--radius);
  border:3px solid var(--ink);
  overflow:hidden;
  aspect-ratio:4/3.4;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--white);
}
.tt-hero-img img{max-width:70%;}
.tt-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:30px;
}
.tt-point{
  font-size:0.88rem;
  color:var(--ink);
  font-weight:600;
}

/* ===== BUTTONS ===== */
.tt-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:1rem;
  padding:13px 26px;
  border-radius:30px;
  transition:.2s;
  text-decoration:none;
}
.tt-btn-primary{
  background:var(--rust);
  color:var(--white) !important;
  box-shadow:0 10px 22px rgba(192,83,45,0.3);
}
.tt-btn-primary:hover{background:var(--rust-deep);transform:translateY(-2px);}
.tt-btn-outline{
  background:transparent;
  color:var(--ink) !important;
  border:2px solid var(--ink);
}
.tt-btn-outline:hover{background:var(--ink);color:var(--paper) !important;}
.tt-btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px;}

/* ===== SERVICE CARDS ===== */
.tt-service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.tt-service-card{
  background:var(--white);
  border:1px solid rgba(36,28,21,0.1);
  border-radius:var(--radius);
  padding:30px 26px;
  transition:.2s;
}
.tt-service-card:hover{
  border-color:var(--rust);
  transform:translateY(-4px);
  box-shadow:0 14px 26px rgba(36,28,21,0.08);
}
.tt-service-card .tt-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--rust);
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:12px;
  display:block;
}
.tt-service-card h3{font-size:1.15rem;margin-bottom:10px;}
.tt-service-card p{color:var(--muted);font-size:0.92rem;margin-bottom:14px;}
.tt-service-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:0.88rem;}
.tt-service-card ul li{margin-bottom:4px;}

/* ===== PROSES ===== */
.tt-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
}
.tt-step{
  background:var(--white);
  border-radius:var(--radius);
  padding:26px 22px;
  border-top:4px solid var(--gold);
}
.tt-step .tt-num{
  font-family:'Fraunces', serif;
  font-size:1.8rem;
  color:var(--rust);
  display:block;
  margin-bottom:8px;
}
.tt-step h4{font-size:1.05rem;margin-bottom:8px;}
.tt-step p{color:var(--muted);font-size:0.9rem;}

/* ===== PRICING TABLES ===== */
.tt-price-group-title{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  margin:44px 0 8px;
  color:var(--ink);
}
.tt-price-group-desc{
  color:var(--muted);
  font-size:0.92rem;
  margin-bottom:18px;
}
.tt-price-table{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 20px rgba(36,28,21,0.06);
  margin-bottom:14px;
}
.tt-price-table th{
  background:var(--ink);
  color:var(--paper);
  text-align:left;
  padding:13px 18px;
  font-size:0.9rem;
  font-weight:600;
}
.tt-price-table td{
  padding:13px 18px;
  border-bottom:1px solid rgba(36,28,21,0.08);
  font-size:0.9rem;
}
.tt-price-table tr:last-child td{border-bottom:none;}
.tt-price-table tr:nth-child(even) td{background:var(--paper);}
.tt-price-table .tt-amount{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  color:var(--rust);
  white-space:nowrap;
}
.tt-price-note{
  background:var(--paper-deep);
  border-left:5px solid var(--gold);
  padding:14px 18px;
  border-radius:10px;
  font-size:0.86rem;
  color:var(--muted);
  margin:18px 0 40px;
}
.tt-zone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
  margin-bottom:16px;
}
.tt-zone{
  background:var(--white);
  border-radius:12px;
  padding:18px;
  text-align:center;
  border:1px solid rgba(36,28,21,0.1);
}
.tt-zone .tt-zone-name{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--rust);
  font-weight:700;
  margin-bottom:4px;
}
.tt-zone .tt-zone-km{color:var(--muted);font-size:0.82rem;margin-bottom:8px;}
.tt-zone .tt-zone-price{font-family:'Fraunces', serif;font-size:1.3rem;color:var(--ink);}

/* ===== ABOUT ===== */
.tt-about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}
.tt-about-grid img{
  border-radius:var(--radius);
  border:3px solid var(--ink);
}
.tt-about-text p{color:var(--muted);margin-bottom:14px;}
.tt-stat-row{
  display:flex;
  gap:30px;
  margin-top:26px;
  flex-wrap:wrap;
}
.tt-stat b{
  display:block;
  font-family:'Fraunces', serif;
  font-size:1.6rem;
  color:var(--rust);
}
.tt-stat span{color:var(--muted);font-size:0.85rem;}

/* ===== GALERI ===== */
.tt-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.tt-gallery-tile{
  aspect-ratio:4/3;
  border-radius:var(--radius);
  border:2px dashed var(--ink);
  background:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}
.tt-gallery-tile .tt-icon{font-size:2.3rem;margin-bottom:10px;}
.tt-gallery-tile h4{font-family:'Fraunces', serif;font-size:1rem;color:var(--ink);margin-bottom:4px;}
.tt-gallery-tile p{color:var(--muted);font-size:0.8rem;}
.tt-gallery-tile:nth-child(4n+1){background:#FDEDE6;border-color:var(--rust);}
.tt-gallery-tile:nth-child(4n+2){background:#F4EFE3;border-color:var(--gold);}
.tt-gallery-tile:nth-child(4n+3){background:#EFF1EA;border-color:var(--sage);}
.tt-gallery-tile:nth-child(4n+4){background:#F1E9DD;border-color:var(--brown);}

/* ===== CTA BANNER ===== */
.tt-cta-banner{
  background:var(--ink);
  color:var(--paper);
  border-radius:20px;
  padding:38px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.tt-cta-banner h3{color:var(--paper);font-size:1.4rem;margin-bottom:6px;}
.tt-cta-banner p{color:#d9cdbb;}

/* ===== KONTAK ===== */
.tt-contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}
.tt-contact-panel{
  background:var(--white);
  border-radius:var(--radius);
  padding:32px;
  border:1px solid rgba(36,28,21,0.1);
}
.tt-contact-panel h3{margin-bottom:20px;font-size:1.2rem;}
.tt-contact-row{
  display:flex;
  gap:14px;
  margin-bottom:18px;
  align-items:flex-start;
}
.tt-contact-row .tt-glyph{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--paper-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.tt-contact-row h5{font-size:0.98rem;margin-bottom:2px;}
.tt-contact-row p, .tt-contact-row a{color:var(--muted);font-size:0.9rem;}
.tt-contact-row a:hover{color:var(--rust);}
.tt-wa-panel{
  background:var(--rust);
  border-radius:var(--radius);
  padding:32px;
  color:var(--white);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.tt-wa-panel h3{color:var(--white);margin-bottom:8px;}
.tt-wa-panel p{color:#ffe3d6;font-size:0.9rem;margin-bottom:20px;}
.tt-wa-big{
  background:#25D366;
  color:var(--white) !important;
  padding:15px;
  border-radius:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
}
.tt-wa-big:hover{background:var(--ink);}
.tt-map-frame{
  width:100%;
  min-height:300px;
  border:0;
  border-radius:var(--radius);
  border:1px solid rgba(36,28,21,0.15);
}

/* ===== TESTIMONI ===== */
.tt-testi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}
.tt-testi-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:24px;
  border-left:4px solid var(--gold);
}
.tt-testi-card p{font-style:italic;color:var(--ink);font-size:0.92rem;margin-bottom:14px;}
.tt-testi-name{font-weight:700;font-size:0.88rem;}
.tt-testi-role{color:var(--muted);font-size:0.78rem;}

/* ===== FLOATING WA ===== */
.tt-wa-float{
  position:fixed;
  bottom:22px;
  right:22px;
  background:#25D366;
  color:var(--white) !important;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  z-index:998;
  text-decoration:none;
  animation:tt-pulse 2s infinite;
}
@keyframes tt-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .tt-hero-grid,.tt-about-grid,.tt-contact-grid{grid-template-columns:1fr;}
  .tt-hero h1{font-size:2rem;}
  .tt-cta-banner{flex-direction:column;text-align:center;}
}