/* ============================================================
   TENTANG-V2.CSS — Halaman Tentang (revisi 2, sesuai mockup)
   Dipakai oleh: tentang.html (Yayasan), tentang-buku.html,
   tentang-pengarang.html, tentang-back-to-bible.html
   Bergantung pada: base.css, layout.css, desktop.css (nav+footer).
   Semua kelas berprefix .tt- agar tidak bentrok dengan style lama.
   ============================================================ */

/* ===== Kontainer standar halaman ini ===== */
.tt-wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 var(--pad); }
@media (min-width:1024px){ .tt-wrap { padding:0 40px; } }

.tt-eyebrow {
  font-family:Arial,sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tosca); margin-bottom:.6rem;
}
.tt-h2 {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:2rem; line-height:1.03; text-transform:uppercase;
  color:var(--tosca); margin-bottom:1.5rem;
}
@media (min-width:1024px){ .tt-h2 { font-size:3rem; } }

.tt-btn-orange, .tt-btn-tosca {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; font-weight:700; font-size:.9rem;
  padding:.8rem 2rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:filter .18s, opacity .18s;
}
.tt-btn-orange { background:var(--orange); color:var(--black); border-color:var(--orange); }
.tt-btn-tosca  { background:var(--tosca);  color:#fff; border-color:var(--tosca); }
.tt-btn-orange:hover, .tt-btn-tosca:hover { filter:brightness(.95); }

/* ============================================================
   SUB-NAV TENTANG (Yayasan · Buku · Pengarang · Back to Bible)
   ============================================================ */
.tt-subnav-bar { background:var(--tosca); }
.tt-subnav-inner {
  max-width:1180px; margin:0 auto; padding:.35rem var(--pad) 1.4rem;
  display:flex; gap:1.5rem; flex-wrap:wrap; align-items:baseline;
}
@media (min-width:1024px){ .tt-subnav-inner { padding:.5rem 40px 1.75rem; gap:2.25rem; } }
.tt-subnav-tab {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:1.15rem; text-transform:uppercase; letter-spacing:.01em;
  color:rgba(255,255,255,.42); transition:color .15s;
}
.tt-subnav-tab:hover { color:rgba(255,255,255,.8); }
.tt-subnav-tab.is-active { color:#fff; }
@media (min-width:1024px){ .tt-subnav-tab { font-size:1.75rem; } }

/* ============================================================
   HERO (teal) + dekorasi daun
   ============================================================ */
.tt-hero { position:relative; background:var(--tosca); color:#fff; overflow:hidden; }
.tt-hero-decor {
  position:absolute; top:-40px; left:-60px; width:min(62%,540px);
  opacity:1; pointer-events:none; z-index:0;
}
.tt-hero-decor g { opacity:.09; }
.tt-hero > .tt-wrap, .tt-hero > .tt-subnav-bar { position:relative; z-index:1; }
.tt-hero-body { position:relative; z-index:1; padding:1rem var(--pad) 3rem; }
@media (min-width:1024px){ .tt-hero-body { padding:1rem 40px 4.5rem; max-width:1180px; margin:0 auto; } }

/* ============================================================
   HALAMAN YAYASAN — Sejarah Singkat
   ============================================================ */
.tt-sejarah-title {
  font-family:Arial,sans-serif; font-weight:700; font-size:1.5rem;
  margin:.5rem 0 1.1rem;
}
.tt-sejarah-cols { display:grid; grid-template-columns:1fr; gap:1.1rem; max-width:1000px; }
.tt-sejarah-cols p { font-size:.9rem; line-height:1.7; opacity:.96; margin-bottom:.9rem; }
.tt-sejarah-cols p:last-child { margin-bottom:0; }
@media (min-width:900px){
  .tt-sejarah-title { font-size:1.9rem; }
  .tt-sejarah-cols { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .tt-sejarah-cols p { font-size:.95rem; }
}

/* ===== Kutipan ayat (band krem) ===== */
.tt-verse { background:#fffde7; padding:2.5rem var(--pad); text-align:center; }
.tt-verse-text {
  font-size:1rem; line-height:1.6; color:var(--black);
  max-width:52rem; margin:0 auto 1rem;
}
.tt-verse-ref { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.15rem; color:var(--black); }
@media (min-width:1024px){
  .tt-verse { padding:3.25rem 0; }
  .tt-verse-text { font-size:1.15rem; }
}

/* ===== Aktivitas Penyebaran (3 badge + garis) ===== */
.tt-activities { background:#fff; padding:3rem var(--pad); }
.tt-act-head { text-align:center; margin-bottom:2.5rem; }
.tt-act-head .tt-eyebrow { color:var(--tosca); }
.tt-act-head .tt-h2 { margin-bottom:0; }
.tt-act-row {
  display:grid; grid-template-columns:1fr; gap:2rem;
  max-width:980px; margin:0 auto; position:relative;
}
.tt-act { text-align:center; position:relative; z-index:1; }
.tt-act-badge {
  width:78px; height:78px; border-radius:50%; background:var(--tosca);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem;
}
.tt-act-badge svg { width:38px; height:38px; }
.tt-act-title { font-family:Arial,sans-serif; font-weight:700; font-size:1.1rem; margin-bottom:.4rem; }
.tt-act-desc { font-size:.85rem; color:var(--gray); line-height:1.5; max-width:16rem; margin:0 auto; }
@media (min-width:820px){
  .tt-act-row { grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  .tt-act-row::before {
    content:''; position:absolute; top:39px; left:16%; right:16%;
    height:3px; background:var(--tosca); z-index:0;
  }
}

/* ===== Visi & Misi (teal) ===== */
.tt-vismis { background:var(--tosca); color:#fff; padding:3rem var(--pad) 3.5rem; }
.tt-vismis-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-vismis { padding:4.5rem 0 5rem; } .tt-vismis-inner{ padding:0 40px; } }

.tt-block-title {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:2.4rem; line-height:1; margin-bottom:1rem;
}
@media (min-width:1024px){ .tt-block-title { font-size:3.2rem; } }

.tt-vis { display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; align-items:center; }
.tt-vis-text .tt-vis-lead { font-size:1.05rem; font-weight:400; line-height:1.55; margin-bottom:1rem; }
.tt-vis-text .tt-vis-body { font-size:.85rem; line-height:1.7; opacity:.9; }
.tt-vis-img img { width:100%; border-radius:14px; display:block; box-shadow:0 12px 30px rgba(0,0,0,.25); }
@media (min-width:900px){
  .tt-vis { grid-template-columns:1.1fr .9fr; gap:3rem; }
  .tt-vis-text .tt-vis-lead { font-size:1.25rem; max-width:30rem; }
}

.tt-mis-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.tt-mis-item h3 { font-family:Arial,sans-serif; font-weight:700; font-size:1rem; line-height:1.3; margin-bottom:.5rem; }
.tt-mis-item p { font-size:.85rem; line-height:1.65; opacity:.88; }
@media (min-width:820px){ .tt-mis-grid { grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* ===== Parachurch card ===== */
.tt-parachurch { background:var(--tosca); padding:0 var(--pad) 3.5rem; }
@media (min-width:1024px){ .tt-parachurch { padding:0 0 5rem; } }
.tt-parachurch-card {
  max-width:1180px; margin:0 auto; background:var(--offwhite); color:var(--black);
  border-radius:16px; padding:2rem 1.75rem;
  display:grid; grid-template-columns:1fr; gap:1.75rem; align-items:center;
}
@media (min-width:900px){
  .tt-parachurch-card { grid-template-columns:.85fr 1.15fr 1fr; gap:2.5rem; padding:2.5rem; margin:0 40px; }
}
@media (min-width:1200px){ .tt-parachurch-card { margin:0 auto; } }
.tt-pc-head {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:1.5rem; line-height:1.1; color:var(--tosca);
}
.tt-pc-list { display:flex; flex-direction:column; gap:.9rem; }
.tt-pc-list li { display:flex; gap:.6rem; font-size:.85rem; line-height:1.5; color:#333; }
.tt-pc-list li::before { content:'●'; color:var(--tosca); font-size:.55rem; margin-top:.45rem; flex-shrink:0; }
.tt-pc-img img { width:100%; border-radius:10px; display:block; }

/* ===== Kisah Kami (timeline) ===== */
.tt-story { background:var(--offwhite); padding:3rem var(--pad); }
.tt-story-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-story { padding:4.5rem 0; } .tt-story-inner{ padding:0 40px; } }
.tt-story-lead { font-size:1.15rem; font-weight:400; color:#333; line-height:1.5; margin:0 0 1.5rem; max-width:46rem; }
.tt-story-body p { font-size:.88rem; color:var(--gray); line-height:1.75; margin-bottom:1rem; max-width:46rem; }
.tt-timeline { display:grid; grid-template-columns:1fr; gap:1.75rem; margin-top:2.5rem; position:relative; }
.tt-tl-item { display:flex; gap:1rem; align-items:flex-start; position:relative; z-index:1; }
.tt-tl-dot {
  width:52px; height:52px; border-radius:50%; background:var(--tosca); color:#fff;
  font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tt-tl-title { font-family:Arial,sans-serif; font-weight:700; font-size:1rem; color:#555; margin-bottom:.35rem; }
.tt-tl-desc { font-size:.82rem; color:var(--gray); line-height:1.55; }
@media (min-width:900px){
  .tt-timeline { grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:3rem; }
  .tt-timeline::before {
    content:''; position:absolute; top:26px; left:12.5%; right:12.5%;
    height:4px; background:#8a8a8a; z-index:0;
  }
  .tt-tl-item { flex-direction:column; gap:1rem; }
}

/* ===== Nilai: Yang Kami Percaya (kartu teal) ===== */
.tt-values { padding:3rem var(--pad) 3.5rem; }
.tt-values.on-cream { background:var(--offwhite); }
.tt-values.on-white { background:#fff; }
.tt-values-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-values { padding:4.5rem 0 5rem; } .tt-values-inner{ padding:0 40px; } }
.tt-values-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:.5rem; }
.tt-vcard { background:var(--tosca); color:#fff; border-radius:16px; padding:2rem 1.75rem; }
.tt-vcard h3 { font-family:Arial,sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:.7rem; }
.tt-vcard p { font-size:.85rem; line-height:1.65; opacity:.95; }
@media (min-width:768px){ .tt-values-grid { grid-template-columns:1fr 1fr; gap:1.75rem; } }
@media (min-width:1024px){ .tt-vcard { padding:2.5rem 2.25rem; } }

/* ============================================================
   HALAMAN BUKU
   ============================================================ */
.tt-buku-hero-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
.tt-buku-head {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:2.6rem; line-height:1; text-transform:uppercase; margin-bottom:1.25rem;
}
.tt-buku-body p { font-size:.88rem; line-height:1.7; opacity:.95; margin-bottom:1rem; }
.tt-buku-cover { display:flex; justify-content:center; }
.tt-buku-cover img { width:min(78%,320px); filter:drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
@media (min-width:900px){
  .tt-buku-hero-grid { grid-template-columns:1.15fr .85fr; gap:3.5rem; }
  .tt-buku-head { font-size:3.6rem; }
  .tt-buku-body p { font-size:.95rem; }
}

/* Why / Mengapa seri ini hadir */
.tt-why { background:var(--offwhite); padding:3rem var(--pad) 3.5rem; }
.tt-why-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-why { padding:4.5rem 0 5rem; } .tt-why-inner{ padding:0 40px; } }
.tt-why-grid { display:grid; grid-template-columns:1fr; gap:1.75rem; }
.tt-why-item h3 { font-family:Arial,sans-serif; font-weight:700; font-size:1.3rem; color:var(--tosca); margin-bottom:.6rem; }
.tt-why-item p { font-size:.85rem; color:var(--gray); line-height:1.65; }
@media (min-width:820px){ .tt-why-grid { grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* Voices / testimonial (teal) */
.tt-voices { background:var(--tosca); color:#fff; padding:3rem var(--pad) 3.5rem; }
.tt-voices-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-voices { padding:4.5rem 0 5rem; } .tt-voices-inner{ padding:0 40px; } }
.tt-voices .tt-eyebrow { color:rgba(255,255,255,.75); }
.tt-voices .tt-h2 { color:#fff; }
.tt-voices-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.tt-voice-card { background:#fff; color:#333; border-radius:14px; padding:1.5rem 1.4rem; }
.tt-voice-head { display:flex; gap:.7rem; align-items:center; margin-bottom:1rem; }
.tt-voice-text { font-size:.9rem; line-height:1.6; }
.tt-voices-cta { text-align:center; margin-top:2.25rem; }
@media (min-width:768px){ .tt-voices-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.tt-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; font-weight:700; font-size:.9rem; color:#fff;
  object-fit:cover; overflow:hidden;
}
.tt-avatar img { width:100%; height:100%; object-fit:cover; }
.tt-person-name { color:var(--tosca); font-weight:700; font-size:.95rem; }
.tt-person-meta { font-size:.72rem; color:var(--gray); margin-top:1px; }

/* Join / komunitas pembaca */
.tt-join { background:var(--offwhite); padding:3rem var(--pad) 3.5rem; }
.tt-join-inner { max-width:1180px; margin:0 auto; }
@media (min-width:1024px){ .tt-join { padding:4.5rem 0 5rem; } .tt-join-inner{ padding:0 40px; } }
.tt-join-desc { font-size:.9rem; color:var(--gray); line-height:1.6; max-width:42rem; margin-bottom:2rem; }
.tt-join-stats { display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin-bottom:2rem; }
.tt-stat-val { font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:2.4rem; color:var(--tosca); line-height:1; }
.tt-stat-lbl { font-size:.75rem; color:var(--tosca); margin-top:4px; }
.tt-join-btns { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.75rem; }
.tt-reviews { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.tt-review-stars { color:var(--tosca); letter-spacing:2px; font-size:1rem; margin-bottom:.7rem; }
.tt-review-text { font-size:.88rem; line-height:1.6; color:#333; margin-bottom:1.1rem; }
.tt-review-author { display:flex; gap:.6rem; align-items:center; }
@media (min-width:768px){ .tt-reviews { grid-template-columns:repeat(3,1fr); gap:1.75rem; } }

/* ============================================================
   HALAMAN PENGARANG
   ============================================================ */
.tt-author-hero-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; }
.tt-author-photo { display:flex; justify-content:center; }
.tt-author-photo img { width:min(80%,360px); display:block; }
.tt-author-name {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:1.5rem; line-height:1.15; margin-bottom:.25rem;
}
.tt-author-dates { font-style:italic; font-weight:700; font-size:1rem; margin-bottom:1rem; opacity:.95; }
.tt-author-bio { font-size:.9rem; line-height:1.8; opacity:.97; max-width:34rem; }
@media (min-width:900px){
  .tt-author-hero-grid { grid-template-columns:.9fr 1.1fr; gap:3rem; }
  .tt-author-photo { justify-content:flex-start; }
  .tt-author-photo img { width:100%; max-width:420px; }
  .tt-author-name { font-size:2rem; }
  .tt-author-dates { font-size:1.2rem; }
  .tt-author-bio { font-size:1rem; line-height:1.9; }
}
.tt-creds { background:var(--offwhite); padding:3rem var(--pad) 3.5rem; }
.tt-creds-grid {
  display:grid; grid-template-columns:1fr; gap:1.25rem 4rem;
  max-width:1180px; margin:0 auto;
}
.tt-cred { display:flex; gap:.75rem; align-items:flex-start; }
.tt-cred::before { content:''; flex-shrink:0; width:14px; height:14px; border-radius:50%; background:var(--tosca); margin-top:.3rem; }
.tt-cred p { font-size:.9rem; line-height:1.5; color:var(--tosca); font-weight:500; }
@media (min-width:768px){
  .tt-creds-grid { grid-template-columns:1fr 1fr; grid-auto-flow:row; }
}
@media (min-width:1024px){ .tt-creds { padding:3.5rem 0 4rem; } .tt-creds-grid { padding:0 40px; gap:1.5rem 5rem; } }

/* ============================================================
   HALAMAN BACK TO BIBLE (template + video)
   ============================================================ */
.tt-bt-head {
  font-family:'Arial Black',Arial,sans-serif; font-weight:900;
  font-size:2.4rem; line-height:1.02; text-transform:uppercase; margin-bottom:1rem;
}
.tt-bt-lead { font-size:1rem; line-height:1.7; opacity:.95; max-width:44rem; }
@media (min-width:1024px){ .tt-bt-head { font-size:3.4rem; } .tt-bt-lead { font-size:1.1rem; } }

.tt-bt-video-sec { background:var(--offwhite); padding:3rem var(--pad); }
.tt-video-frame {
  max-width:900px; margin:0 auto; position:relative;
  aspect-ratio:16/9; background:#0c2f2c; border-radius:16px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.tt-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.tt-video-ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; color:#fff; text-align:center; padding:1.5rem;
}
.tt-video-ph .play {
  width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
}
.tt-video-ph .play svg { width:28px; height:28px; margin-left:4px; }
.tt-video-ph p { font-size:.9rem; opacity:.85; }
@media (min-width:1024px){ .tt-bt-video-sec { padding:4.5rem 0; } }

.tt-bt-blocks { background:#fff; padding:3rem var(--pad) 3.5rem; }
.tt-bt-inner { max-width:1180px; margin:0 auto; }

/* ============================================================
   HALAMAN PENGARANG — Khotbah & Doa
   ============================================================ */
.tt-media-sec { background:var(--offwhite); padding:3rem var(--pad); }
.tt-media-head { text-align:center; margin-bottom:2rem; }
.tt-media-head .tt-eyebrow { color:var(--tosca); }
.tt-media-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; max-width:1180px; margin:0 auto; }
.tt-media-item h3 { font-family:Arial,sans-serif; font-weight:700; font-size:1.05rem; margin-bottom:.8rem; text-align:center; color:var(--black); }
.tt-media-item .tt-video-frame { max-width:none; }
@media (min-width:768px){ .tt-media-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .tt-media-sec { padding:4.5rem 0 5rem; } }
@media (min-width:1024px){ .tt-bt-blocks { padding:4.5rem 0 5rem; } .tt-bt-inner{ padding:0 40px; } }
.tt-bt-grid { display:grid; grid-template-columns:1fr; gap:1.75rem; }
.tt-bt-item { border-left:3px solid var(--orange); padding-left:1rem; }
.tt-bt-item h3 { font-family:Arial,sans-serif; font-weight:700; font-size:1.1rem; color:var(--tosca); margin-bottom:.5rem; }
.tt-bt-item p { font-size:.85rem; color:var(--gray); line-height:1.65; }
@media (min-width:820px){ .tt-bt-grid { grid-template-columns:repeat(3,1fr); gap:2.5rem; } }

/* Penanda konten placeholder (untuk diisi kemudian) */
.tt-placeholder {
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#8a6d00; background:#fff3c4;
  border:1px dashed #e0b800; border-radius:6px; padding:.25rem .6rem; margin-bottom:1rem;
}