/* =====================================================================
   PT. Tricia Agency Solusi — Homepage (Hero Section)
   Mobile-first. Titik ubah: 600px, 720px, 768px, 1024px, 1241px
   ===================================================================== */

:root{
  --navy:#102A43;
  --gold:#E0B84B;
  --gold-soft:#C79C5A;
  --cream:#FFF4DD;
  --sand:#D8C3A5;
  --ink-2:#33475C;
  --line:#E9E2D2;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:#fff;font-family:var(--font-body)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
svg{display:block}

a:focus-visible,button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:#1D4E89}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 14px;border-radius:6px;background:#fff;color:var(--navy);font-weight:600}
.skip:focus{left:12px;top:12px}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:6px;font-weight:700;white-space:nowrap;transition:filter .2s,transform .2s,background .2s,border-color .2s}
.btn svg{flex:none;width:16px;height:16px}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn--ghost{border:1px solid rgba(255,244,221,.55);color:var(--cream);font-weight:600}
.btn--ghost:hover{background:rgba(255,244,221,.1);border-color:var(--cream)}
.btn--hero{min-height:52px;padding:0 20px;font-size:16px}
.btn--hero svg{width:18px;height:18px}
.btn--ghost{min-height:52px;padding:0 20px;font-size:16px}
.btn--nav{display:none;height:46px;padding:0 22px;font-size:15px}
.btn--drawer{display:flex;min-height:52px;margin-top:16px;padding:0 20px;font-size:16px}
.btn--drawer svg{width:18px;height:18px}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:75px;max-width:1440px;margin:0 auto;padding:0 16px 0 20px}
.brand{display:flex;align-items:center;flex:none}
.brand img{display:block;height:58px;width:auto}

.nav{display:none}
.nav__link{position:relative;padding:8px 0;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav__link:hover{color:var(--navy)}
.nav__link.is-active{font-weight:700;color:var(--navy)}
.nav__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-soft)}

.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid #DCD3BF;border-radius:6px;background:var(--cream);color:var(--navy);cursor:pointer}
.burger__close{display:none}
.burger[aria-expanded="true"] .burger__open{display:none}
.burger[aria-expanded="true"] .burger__close{display:block}

.drawer{position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:25;padding:4px 20px 22px;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:0 22px 34px rgba(4,12,24,.4)}
.drawer[hidden]{display:none}
.drawer__link{box-sizing:content-box;display:flex;align-items:center;min-height:50px;border-bottom:1px solid rgba(16,42,67,.1);font-size:16px;font-weight:500;color:var(--ink-2)}
.drawer__link:nth-last-child(2){border-bottom:0}
.drawer__link.is-active{justify-content:space-between;font-weight:700;color:var(--navy)}
.drawer__dot{display:block;width:7px;height:7px;background:var(--gold-soft);transform:rotate(45deg)}

/* ---------- Hero (dasar = HP) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.hero__photo,.hero__lines,.junction,.plane{display:none}
.hero__stage{position:relative;padding:36px 20px 40px}

.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px}
.eyebrow__line{display:block;width:28px;height:1px;background:var(--gold)}
.eyebrow__text{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold);white-space:nowrap}

.tagline{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:.2em;row-gap:.04em;align-items:baseline;font-size:clamp(30px,10.26vw,40px);line-height:1.05;font-weight:800}
.tagline__small{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:.5em;line-height:1;color:var(--sand)}
.tagline__big{font-family:var(--font-display);font-weight:800;letter-spacing:.012em;text-transform:uppercase;color:#fff}
.tagline__big--gold{color:var(--gold)}

.ornament{display:flex;align-items:center;gap:10px;margin-top:22px}
.ornament__line{display:block;width:56px;height:1px;background:var(--gold)}
.ornament__dot{display:block;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

.lead{margin:20px 0 0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.86)}

.cta{display:flex;flex-direction:column;gap:12px;margin-top:28px}

.hero__visual{position:relative;margin:36px -20px 0}
.banner{position:relative;height:230px;overflow:hidden;background:var(--navy) url(../img/building.jpg) 72% 50%/cover no-repeat}
.banner::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#102A43 0%,rgba(16,42,67,.25) 26%,rgba(16,42,67,.1) 55%,#102A43 100%)}
.banner__lines{position:absolute;top:0;left:0;width:100%;height:100%}

.panels{position:relative;margin-top:-72px;padding:0 20px}
.panel-wrap{display:block}
.panel{position:relative;display:block;height:156px;overflow:hidden;background:#0B1D31;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.panel__img{position:absolute;top:0;left:22%;display:block;width:78%;height:100%;object-fit:cover;object-position:60% 50%}
.panel__img--digital{object-position:50% 40%}
.panel__shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(11,29,49,.97) 0%,rgba(11,29,49,.88) 40%,rgba(11,29,49,.2) 100%)}
.panel__text{position:absolute;left:32px;bottom:20px;width:52%}
.panel__name{display:block;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:#fff;white-space:nowrap}
.panel__rule{display:block;width:28px;height:2px;margin:9px 0;background:var(--gold)}
.panel__desc{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.9)}
.panel__go{box-sizing:content-box;position:absolute;right:16px;bottom:18px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}
.panel__go svg{width:16px;height:16px}
.panel__outline{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.o-d{display:none}

.connector{display:flex;align-items:center;gap:10px;height:14px}
.connector__line{flex:1;height:1px;background:var(--gold);opacity:.55}
.connector__dot{display:block;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

.strengths{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid rgba(224,184,75,.3)}
.strength{box-sizing:content-box;display:flex;align-items:center;gap:14px;min-height:58px;border-bottom:1px solid rgba(255,255,255,.12)}
.strength svg{flex:none;width:28px;height:28px}
.strength span{font-size:14.5px;font-weight:600;line-height:1.4;color:#fff}
.br{display:none}

@media (max-width:359px){
  .eyebrow{gap:10px}
  .eyebrow__text{letter-spacing:.13em}
  .panel__text{left:26px}
}

/* ---------- Tablet kecil (600px+) ---------- */
@media (min-width:600px){
  .hero__stage{padding:48px 40px 56px}
  .tagline{font-size:clamp(44px,7vw,64px)}
  .lead{max-width:560px;margin-top:24px;font-size:17px}
  .cta{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:32px}
  .btn--hero,.btn--ghost{min-height:54px;padding:0 28px}
  .hero__visual{margin:48px -40px 0}
  .banner{height:320px}
  .panels{margin-top:-88px;padding:0 40px}
  .panel{height:180px}
  .panel__text{left:40px}
}

/* ---------- Tablet (720px+): dua panel berdampingan ---------- */
@media (min-width:720px){
  .panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .connector{display:none}
  .panel{height:250px}
  .panel__text{left:36px;right:64px;width:auto}

  .strengths{display:flex;align-items:center;justify-self:start;width:max-content;max-width:100%;margin-top:40px;padding:22px 0 0}
  .strength{min-height:0;gap:12px;padding:0 16px;border-bottom:0;border-left:1px solid rgba(255,255,255,.16)}
  .strength:first-child{padding-left:0;border-left:0}
  .strength:last-child{padding-right:0}
  .strength svg{width:30px;height:30px}
  .strength span{font-size:13.5px}
  .br{display:inline}
}

/* ---------- Header lebih besar (768px+) ---------- */
@media (min-width:768px){
  .site-header__bar{height:95px;padding:0 clamp(24px,6.67vw,96px)}
  .brand img{height:72px}
  .drawer{left:auto;width:min(420px,100%)}
}

/* ---------- Desktop hero (1024px+) ---------- */
@media (min-width:1024px){
  .hero{box-shadow:inset 0 -1px 0 rgba(224,184,75,.35)}

  .hero__photo{display:block;position:absolute;top:0;right:0;bottom:0;left:max(46%,calc(50% - 58px));z-index:1;background:var(--navy) url(../img/building.jpg) 75% 50%/cover no-repeat}
  .hero__photo::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#102A43 0%,rgba(16,42,67,.9) 8%,rgba(16,42,67,0) 40%),rgba(16,42,67,.16)}
  .hero__photo::after{content:"";position:absolute;right:0;bottom:0;left:0;height:210px;background:linear-gradient(0deg,#102A43 0%,rgba(16,42,67,.62) 48%,rgba(16,42,67,0) 100%)}

  .hero__stage{z-index:2;display:grid;grid-template-columns:clamp(420px,40vw,580px) minmax(0,1fr);grid-template-rows:1fr auto;max-width:1440px;min-height:780px;margin:0 auto;padding:72px 0 52px clamp(32px,6.67vw,96px)}
  .hero__text{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:5}

  .eyebrow{gap:14px;margin-bottom:30px}
  .eyebrow__line{width:34px}
  .eyebrow__text{font-size:14px;letter-spacing:.26em}
  .tagline{font-size:clamp(46px,4.72vw,68px)}
  .ornament{margin-top:28px}
  .ornament__line{width:68px}
  .lead{max-width:500px;margin-top:26px;font-size:17px}
  .cta{margin-top:36px}
  .btn--hero{height:54px;min-height:0;padding:0 28px;gap:12px}
  .btn--ghost{height:54px;min-height:0;padding:0 28px}

  .strengths{grid-column:1;grid-row:2;align-self:end;position:relative;z-index:5;max-width:none;margin:0;padding:22px 0 0}
  .strength{padding:0 20px}

  .hero__visual{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;pointer-events:none}
  .hero__lines,.junction{display:block;position:absolute;top:0;right:0;overflow:visible}
  .hero__lines{z-index:2}
  .junction{z-index:4}
  .plane{display:block;position:absolute;right:72px;z-index:2;width:300px;height:296px;background:rgba(29,78,137,.5);clip-path:polygon(118px 0,100% 0,100% 100%,8px 100%)}
  .plane--1{top:103px}
  .plane--2{top:413px}
  .banner{display:none}
  .panels{position:static;display:block;margin:0;padding:0}
  .connector{display:none}

  .panel-wrap{position:absolute;right:56px;z-index:3;width:300px;height:296px;pointer-events:auto;filter:drop-shadow(0 24px 30px rgba(4,12,24,.5))}
  .panel-wrap--1{top:87px}
  .panel-wrap--2{top:397px}
  .panel{position:absolute;top:0;right:0;bottom:0;left:0;height:auto;background:#0E2238;clip-path:polygon(118px 0,100% 0,100% 100%,8px 100%)}
  .panel__img{left:0;width:100%;object-position:60% 55%}
  .panel__img--digital{object-position:50% 40%}
  .panel__shade{top:auto;height:64%;background:linear-gradient(0deg,rgba(8,22,40,.96) 0%,rgba(8,22,40,.84) 46%,rgba(8,22,40,0) 100%)}
  .panel__text{left:62px;right:auto;bottom:22px;width:220px}
  .panel__name{font-size:17px}
  .panel__rule{width:30px;margin:10px 0}
  .panel__desc{max-width:176px;color:rgba(255,255,255,.88)}
  .panel__go{right:18px;bottom:22px;width:34px;height:34px}
  .o-d{display:inline}
  .o-m{display:none}
}

/* ---------- Desktop sempit (1024–1240px): kolom teks sedikit lebih lebar ---------- */
@media (min-width:1024px) and (max-width:1240px){
  .hero__stage{grid-template-columns:clamp(440px,44vw,580px) minmax(0,1fr)}
}

/* ---------- Navigasi desktop penuh (1241px+) ---------- */
@media (min-width:1241px){
  .nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
  .btn--nav{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}