/* ============================================================================
   TNYI — Site chrome (navbar + footer)
   ----------------------------------------------------------------------------
   Shared by every guest page (loaded from frontend/base.blade.php) and by the
   Homepage V2 preview. Class names are prefixed `tnav-` / `tfoot-` so nothing
   here can collide with Bootstrap's `.navbar`/`.footer` or the legacy rules
   still living in style.css.
   ========================================================================== */

:root{
  --tnyi-navy:#131F45;
  --tnyi-navy-deep:#0E1834;
  --tnyi-blue:#1E42AF;
  --tnyi-orange:#D04F26;
  --tnyi-ink:#1B2333;
  --tnyi-body:#4B5468;
  --tnyi-muted:#7C8598;
  --tnyi-line:#E4E7EF;
  --tnyi-soft:#F6F7FB;
  --tnyi-max:1240px;
  --tnyi-font:"Montserrat-Regular",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ── Buttons used inside the chrome ─────────────────────────────────────── */
.tnav-btn{
  display:inline-flex; align-items:center; gap:9px;
  font:700 14px/1 "Montserrat-Bold",sans-serif;
  padding:12px 20px; border-radius:9px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:all .18s ease;
}
.tnav-btn.tnav-btn-primary{background:var(--tnyi-navy); color:#fff;}
.tnav-btn.tnav-btn-primary:hover,
.tnav-btn.tnav-btn-primary:focus-visible{background:var(--tnyi-blue); color:#fff; transform:translateY(-1px);}

/* ============================================================================
   NAVBAR
   ========================================================================== */
.tnav{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tnyi-line);
  font-family:var(--tnyi-font);
}
.tnav-inner{
  max-width:var(--tnyi-max); margin:0 auto; padding:0 32px; height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.tnav-left{display:flex; align-items:center; gap:40px; min-width:0;}
.tnav-logo{display:flex; align-items:center; flex-shrink:0;}
.tnav-logo img{height:34px; width:auto; display:block;}

.tnav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.tnav-links > li{position:relative;}
.tnav-links a.tnav-link{
  display:inline-block; text-decoration:none;
  font:600 14px/1 "Montserrat-Medium",sans-serif;
  color:var(--tnyi-ink); padding:8px 2px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.tnav-links a.tnav-link:hover,
.tnav-links a.tnav-link:focus-visible{color:var(--tnyi-blue);}
.tnav-links a.tnav-link.is-active{color:var(--tnyi-blue); border-bottom-color:var(--tnyi-orange);}

/* Panel is centred under its trigger (left-aligning made it jut off to one
   side and look detached) and sits 10px below it. That 10px gap used to be
   "dead" — crossing it left the <li> and the menu closed before the cursor
   arrived — so `::before` bridges it with an invisible strip that still
   counts as hovering the <li>. `::after` draws the caret. */
.tnav-dropdown{
  position:absolute; top:100%; left:50%; min-width:212px;
  transform:translateX(-50%) translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  background:#fff; border:1px solid var(--tnyi-line); border-radius:14px;
  box-shadow:0 20px 44px rgba(19,31,69,.16); padding:8px; margin-top:10px;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.tnav-dropdown::before{
  content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.tnav-dropdown::after{
  content:''; position:absolute; top:-6px; left:50%; margin-left:-5px;
  width:10px; height:10px; background:#fff; border-radius:2px 0 0 0;
  border-left:1px solid var(--tnyi-line); border-top:1px solid var(--tnyi-line);
  transform:rotate(45deg);
}
/* full-height trigger so there is no dead space between the text and the
   bottom edge of the navbar either */
.tnav-links > li{display:flex; align-items:center; height:76px;}
.tnav-links > li:hover .tnav-dropdown,
.tnav-links > li:focus-within .tnav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.tnav-dropdown a{
  display:block; padding:9px 14px; border-radius:9px; text-decoration:none;
  font:500 14px/1.35 "Montserrat-Medium",sans-serif; color:var(--tnyi-ink);
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.tnav-dropdown a:hover,
.tnav-dropdown a:focus-visible{background:var(--tnyi-soft); color:var(--tnyi-blue);}

.tnav-right{display:flex; align-items:center; gap:14px;}
.tnav-burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px; cursor:pointer;
}
.tnav-burger span{width:22px; height:2px; background:var(--tnyi-navy); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
.tnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.tnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.tnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.tnav-mobile{
  display:none; flex-direction:column;
  background:#fff; border-top:1px solid var(--tnyi-line);
  box-shadow:0 16px 30px rgba(19,31,69,.1);
  max-height:calc(100vh - 76px); overflow-y:auto;
}
.tnav-mobile.is-open{display:flex;}
.tnav-mobile a{
  padding:15px 32px; text-decoration:none;
  font:600 15px "Montserrat-Medium",sans-serif; color:var(--tnyi-ink);
  border-bottom:1px solid var(--tnyi-line);
}
.tnav-mobile a:hover,.tnav-mobile a:focus-visible{background:var(--tnyi-soft); color:var(--tnyi-blue);}
.tnav-mobile .tnav-mobile-sub{padding-left:48px; font-weight:500; font-size:14px; color:var(--tnyi-body);}
.tnav-mobile .tnav-mobile-cta{padding:18px 32px; border-bottom:none;}
.tnav-mobile .tnav-mobile-cta .tnav-btn{width:100%; justify-content:center;}

:where(.tnav, .tfoot) :focus-visible{outline:3px solid var(--tnyi-orange); outline-offset:2px; border-radius:4px;}

/* ── Transparent variant — navbar over a dark hero (see header.blade.php's
   $transparent flag). Starts see-through with white text/logo so it reads
   as part of the hero; .tnav--solid (added by JS once scrolled past the
   hero) switches it back to the normal solid navbar. ── */
.tnav.tnav--on-dark{
  position:absolute; left:0; right:0; top:0;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; transition:background .25s ease, border-color .25s ease;
}
.tnav.tnav--on-dark .tnav-logo-inverse{display:block;}
/* The inverse logo asset is a square PNG whose wordmark fills only the
   middle ~60% x 17% (same file the footer compensates for below), so at
   the navbar's 34px it rendered ~20px wide. Draw it at 160px and pull the
   transparent padding back with negative margins: the visible wordmark is
   ~96x28px and the link's box is exactly the wordmark. pointer-events:none
   keeps the invisible padding from catching clicks outside the logo link.
   If the CMS "logo-invers" is ever replaced with a tightly cropped file,
   drop the size/margin here and let it use the normal 34px height. */
.tnav.tnav--on-dark .tnav-logo img.tnav-logo-inverse{
  height:160px; width:160px; max-width:none; margin:-66px -32px; pointer-events:none;
}
.tnav.tnav--on-dark .tnav-logo-default{display:none;}
.tnav.tnav--on-dark .tnav-link{color:#fff;}
.tnav.tnav--on-dark .tnav-link:hover,
.tnav.tnav--on-dark .tnav-link:focus-visible{color:#fff; opacity:.75;}
.tnav.tnav--on-dark .tnav-link.is-active{color:#fff; border-bottom-color:var(--tnyi-orange);}
/* dropdown panel itself always stays solid white for legibility */
.tnav.tnav--on-dark .tnav-dropdown a{color:var(--tnyi-ink);}
.tnav.tnav--on-dark .tnav-btn-primary{background:transparent; border-color:rgba(255,255,255,.55); color:#fff;}
.tnav.tnav--on-dark .tnav-btn-primary:hover,
.tnav.tnav--on-dark .tnav-btn-primary:focus-visible{background:rgba(255,255,255,.14); border-color:#fff; color:#fff;}
.tnav.tnav--on-dark .tnav-burger span{background:#fff;}

.tnav.tnav--on-dark.tnav--solid{
  position:sticky;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--tnyi-line);
}
.tnav.tnav--on-dark.tnav--solid .tnav-logo-inverse{display:none;}
.tnav.tnav--on-dark.tnav--solid .tnav-logo-default{display:block;}
.tnav.tnav--on-dark.tnav--solid .tnav-link{color:var(--tnyi-ink);}
.tnav.tnav--on-dark.tnav--solid .tnav-link:hover,
.tnav.tnav--on-dark.tnav--solid .tnav-link:focus-visible{color:var(--tnyi-blue); opacity:1;}
.tnav.tnav--on-dark.tnav--solid .tnav-link.is-active{color:var(--tnyi-blue); border-bottom-color:var(--tnyi-orange);}
.tnav.tnav--on-dark.tnav--solid .tnav-btn-primary{background:var(--tnyi-navy); border-color:transparent; color:#fff;}
.tnav.tnav--on-dark.tnav--solid .tnav-btn-primary:hover,
.tnav.tnav--on-dark.tnav--solid .tnav-btn-primary:focus-visible{background:var(--tnyi-blue); color:#fff;}
.tnav.tnav--on-dark.tnav--solid .tnav-burger span{background:var(--tnyi-navy);}
/* mobile dropdown panel + burger icon always render solid, regardless of
   scroll position, so the open menu stays legible over any hero */
.tnav.tnav--on-dark .tnav-mobile{background:#fff;}
.tnav.tnav--on-dark .tnav-mobile a{color:var(--tnyi-ink);}

@media (max-width:980px){
  .tnav-inner{padding:0 20px; height:68px;}
  .tnav-links{display:none;}
  .tnav-right .tnav-cta-desktop{display:none;}
  .tnav-burger{display:flex;}
  .tnav-mobile{max-height:calc(100vh - 68px);}
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.tfoot{
  background:
    radial-gradient(circle at 88% 0%, rgba(208,79,38,.16), transparent 45%),
    linear-gradient(160deg,var(--tnyi-navy-deep) 0%,#152449 60%,#1B2C5E 100%);
  color:#C6CEE4; font-family:var(--tnyi-font);
  padding:72px 0 0; position:relative;
}
.tfoot-wrap{max-width:var(--tnyi-max); margin:0 auto; padding:0 32px;}

/* top: brand + link columns */
.tfoot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:48px;
  padding-bottom:52px;
}
/* The inverse logo asset is a square PNG with generous transparent padding,
   so it needs a larger box than the header logo to read at the same size. */
.tfoot-brand img{height:74px; width:auto; margin:-10px 0 14px -8px; display:block;}
.tfoot-tagline{font:400 14px/1.7 var(--tnyi-font); color:#A9B3CE; max-width:280px;}

.tfoot-col h4{
  font:700 11px/1 "Montserrat-Bold",sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:#8FA7E8; margin:0 0 18px;
}
.tfoot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.tfoot-col a{
  text-decoration:none; font:400 14px/1.5 var(--tnyi-font); color:#C6CEE4;
  transition:color .18s ease, padding-left .18s ease;
}
.tfoot-col a:hover,.tfoot-col a:focus-visible{color:#fff; padding-left:4px;}

/* contact list */
.tfoot-contact{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.tfoot-contact li{display:flex; align-items:flex-start; gap:12px; font:400 14px/1.6 var(--tnyi-font); color:#C6CEE4;}
.tfoot-contact .ico{
  width:32px; height:32px; flex-shrink:0; border-radius:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; color:#8FA7E8; font-size:13px;
}
.tfoot-contact a{color:inherit; text-decoration:none; transition:color .18s ease;}
.tfoot-contact a:hover{color:#fff;}

/* social */
.tfoot-social{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.tfoot-social a{
  width:38px; height:38px; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:#C6CEE4; font-size:15px;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.tfoot-social a:hover,.tfoot-social a:focus-visible{
  background:var(--tnyi-orange); border-color:var(--tnyi-orange); color:#fff; transform:translateY(-2px);
}

/* bottom bar */
.tfoot-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  /* extra right padding keeps the links clear of the fixed WhatsApp button
     that sits in the bottom-right corner of every public page */
  padding:24px 180px 28px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font:400 13px/1.5 var(--tnyi-font); color:#8B96B5;
}
.tfoot-bottom a{color:#8B96B5; text-decoration:none; transition:color .18s ease;}
.tfoot-bottom a:hover,.tfoot-bottom a:focus-visible{color:#fff;}
.tfoot-bottom-links{display:flex; gap:22px; flex-wrap:wrap;}

@media (max-width:980px){
  .tfoot-top{grid-template-columns:1fr 1fr; gap:36px;}
  .tfoot-brand{grid-column:1 / -1;}
}
@media (max-width:980px){
  /* stacked layout: clear the floating button vertically instead */
  .tfoot-bottom{padding-right:0; padding-bottom:84px;}
}
@media (max-width:640px){
  .tfoot{padding-top:52px;}
  .tfoot-wrap{padding:0 20px;}
  .tfoot-top{grid-template-columns:1fr; gap:32px; padding-bottom:36px;}
  .tfoot-bottom{flex-direction:column; align-items:flex-start; gap:12px;}
}

/* ============================================================================
   RICH-TEXT CONTENT IMAGES
   ----------------------------------------------------------------------------
   Images inserted through the admin Summernote editors (Article body, Bulletin
   content, Case Study body / Tentang Kami). Summernote writes the alignment as
   an inline `float` plus a `.note-float-*` class; these rules give the floats
   breathing room and keep every image inside its column on small screens.
   ========================================================================== */
.article-detail-container .content img,
.bulletin-body img,
.rich-content img{
  max-width:100%; height:auto;
}
.article-detail-container .content img.note-float-left,
.bulletin-body img.note-float-left,
.rich-content img.note-float-left,
.article-detail-container .content img[style*="float:left"],
.bulletin-body img[style*="float:left"],
.rich-content img[style*="float:left"]{
  margin:6px 22px 14px 0;
}
.article-detail-container .content img.note-float-right,
.bulletin-body img.note-float-right,
.rich-content img.note-float-right,
.article-detail-container .content img[style*="float:right"],
.bulletin-body img[style*="float:right"],
.rich-content img[style*="float:right"]{
  margin:6px 0 14px 22px;
}
/* an image on its own line gets vertical rhythm */
.article-detail-container .content img.note-float-none,
.bulletin-body img.note-float-none,
.rich-content img.note-float-none{
  display:block; margin:18px auto;
}
/* phones are too narrow to wrap text beside an image */
@media (max-width:640px){
  .article-detail-container .content img,
  .bulletin-body img,
  .rich-content img{
    float:none !important; display:block; margin:16px auto !important;
  }
}