/* =========================================================
   LACAK TB - RESEARCH PAGES
   File: css/research-pages.css
   ========================================================= */

.research-page .navLinkBtn.is-active{
  color:var(--blue); border-color:rgba(11, 99, 255, .12); background:var(--surface-2);
  box-shadow:var(--shadow-in-sm);
}
.research-page .drawerItemBtn.is-active{
  color:var(--blue); background:rgba(11, 99, 255, .07);
}
html[data-theme="dark"] .research-page .navLinkBtn.is-active,
html[data-theme="dark"] .research-page .drawerItemBtn.is-active{
  color:var(--blue-2); border-color:rgba(106, 160, 255, .16); background:rgba(106, 160, 255, .08);
}

.researchPageMain{
  width:100%; max-width:1360px; margin:0 auto; padding:42px 28px 58px;
}
.researchPageHero{
  position:relative; isolation:isolate; min-height:280px; padding:44px 48px; display:flex; align-items:center;
  gap:28px; overflow:hidden; border:1px solid rgba(255, 255, 255, .48); border-radius:32px;
  background:var(--surface); box-shadow:var(--shadow-out);
}
.researchPageHero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(125deg, rgba(11, 99, 255, .07), transparent 52%),
  radial-gradient(circle at 88% 20%, rgba(213, 169, 11, .15), transparent 28%);
}
.researchPageHero::after{
  content:""; position:absolute; right:-90px; bottom:-150px; z-index:-1; width:390px; height:390px;
  border:1px solid rgba(11, 99, 255, .10); border-radius:50%;
  box-shadow:0 0 0 34px rgba(11, 99, 255, .025), 0 0 0 68px rgba(213, 169, 11, .025);
}
html[data-theme="dark"] .researchPageHero{
  border-color:rgba(255, 255, 255, .07);
}
.researchPageHeroIcon{
  width:88px; height:88px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255, 255, 255, .55); border-radius:26px; color:#FFFFFF;
  background:var(--primary-gradient); box-shadow:var(--primary-shadow);
}
.researchPageHeroIcon i{
  color:#FFFFFF; font-size:34px;
}
.researchPageHeroContent{
  position:relative; z-index:1; max-width:880px;
}
.researchPageEyebrow,
.researchSectionKicker{
  display:block; color:var(--grant-gold-deep); font-size:11px; line-height:1.25; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}
html[data-theme="dark"] .researchPageEyebrow,
html[data-theme="dark"] .researchSectionKicker{
  color:var(--grant-gold);
}
.researchPageHero h1{
  max-width:900px; margin:8px 0 12px; color:var(--ink); font-size:clamp(34px, 4.4vw, 58px);
  line-height:1.04; font-weight:800; letter-spacing:-.052em;
}
.researchPageHero p{
  max-width:820px; margin:0; color:var(--muted); font-size:16px; line-height:1.75; font-weight:550;
}

.researchContentSection{
  padding:34px 0 0;
}
.researchFundingOfficialCard,
.researchIntroCard,
.researchAcknowledgmentCard,
.contactProfileCard{
  border:1px solid rgba(255, 255, 255, .48); background:var(--surface);
  box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .researchFundingOfficialCard,
html[data-theme="dark"] .researchIntroCard,
html[data-theme="dark"] .researchAcknowledgmentCard,
html[data-theme="dark"] .contactProfileCard{
  border-color:rgba(255, 255, 255, .07);
}

.researchFundingOfficialCard{
  padding:28px 32px; display:grid; grid-template-columns:minmax(260px, 350px) minmax(0, 1fr);
  align-items:center; gap:34px; border-radius:26px;
}
.researchFundingOfficialLogo{
  padding:18px; border:1px solid rgba(15, 23, 42, .07); border-radius:18px; background:#FFFFFF;
}
.researchFundingOfficialLogo img{
  display:block; width:100%; max-height:100px; object-fit:contain;
}
.researchFundingOfficialBody h2,
.researchIntroCard h2,
.researchAcknowledgmentHeader h2,
.contactFormIntro h2{
  margin:7px 0 10px; color:var(--ink); font-size:clamp(24px, 2.5vw, 36px); line-height:1.15;
  font-weight:800; letter-spacing:-.035em;
}
.researchFundingOfficialBody p,
.researchIntroCard p,
.contactFormIntro > p{
  margin:0; color:var(--muted); font-size:14px; line-height:1.72; font-weight:550;
}

.researchInfoGrid{
  margin-top:24px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;
}
.researchInfoCard{
  min-width:0; padding:22px; display:flex; align-items:flex-start; gap:15px; border:1px solid rgba(255, 255, 255, .46);
  border-radius:22px; background:var(--surface-2); box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .researchInfoCard{
  border-color:rgba(255, 255, 255, .07);
}
.researchInfoIcon{
  width:42px; height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:14px; color:#FFFFFF; background:var(--primary-gradient);
  box-shadow:0 9px 18px rgba(11, 99, 255, .18);
}
.researchInfoIcon i{
  color:#FFFFFF; font-size:16px;
}
.researchInfoCard small,
.contactChannelCard small{
  display:block; color:var(--grant-gold-deep); font-size:10px; line-height:1.2; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}
html[data-theme="dark"] .researchInfoCard small,
html[data-theme="dark"] .contactChannelCard small{
  color:var(--grant-gold);
}
.researchInfoCard h3,
.researchFeatureCard h3,
.researchPrincipleGrid h3,
.contactChannelCard h2{
  margin:5px 0 8px; color:var(--ink); font-size:16px; line-height:1.3; font-weight:800; letter-spacing:-.02em;
}
.researchInfoCard p,
.researchFeatureCard p,
.researchPrincipleGrid p,
.contactChannelCard p{
  margin:0; color:var(--muted); font-size:12.5px; line-height:1.65; font-weight:550;
}
.researchContractNumber{
  color:var(--ink) !important; font-weight:750 !important; overflow-wrap:anywhere;
}

.researchAcknowledgmentCard{
  margin-top:24px; padding:26px 30px; border-radius:24px;
}
.researchAcknowledgmentHeader{
  display:flex; align-items:center; gap:15px;
}
.researchAcknowledgmentHeader > i{
  width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:15px; color:#FFFFFF; background:linear-gradient(145deg, #E8BE2E, #A97C00);
}
.researchAcknowledgmentHeader h2{
  margin-bottom:0; font-size:25px;
}
.researchAcknowledgmentCard blockquote{
  margin:18px 0 0; padding:18px 20px; border-left:4px solid var(--grant-gold);
  border-radius:0 16px 16px 0; color:var(--muted); background:var(--grant-soft);
  font-size:13px; line-height:1.75; font-style:italic; font-weight:550;
}

.researchIntroCard{
  padding:30px 34px; border-radius:26px;
}
.researchIntroCard p{
  max-width:970px;
}
.researchFeatureGrid{
  margin-top:24px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;
}
.researchFeatureCard{
  min-width:0; min-height:155px; padding:20px; display:flex; align-items:center; gap:14px;
  border:1px solid rgba(255, 255, 255, .46); border-radius:22px; background:var(--surface-2);
  box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .researchFeatureCard{
  border-color:rgba(255, 255, 255, .07);
}
.researchFeatureCard img{
  width:74px; height:86px; flex:0 0 auto; object-fit:contain;
  filter:drop-shadow(0 9px 12px rgba(15, 23, 42, .16));
}
.researchFeatureCard small{
  color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.12em;
}
.researchPrincipleGrid{
  margin-top:24px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;
}
.researchPrincipleGrid article{
  padding:22px; border:1px solid rgba(255, 255, 255, .46); border-radius:22px;
  background:var(--surface); box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .researchPrincipleGrid article{
  border-color:rgba(255, 255, 255, .07);
}
.researchPrincipleGrid i{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:14px;
  color:var(--blue); background:rgba(11, 99, 255, .08);
}
.researchSafetyNotice{
  margin-top:24px; padding:20px 22px; display:flex; align-items:flex-start; gap:14px;
  border:1px solid rgba(213, 169, 11, .24); border-radius:20px; background:var(--grant-soft);
}
.researchSafetyNotice > i{
  margin-top:2px; color:var(--grant-gold-deep); font-size:20px;
}
html[data-theme="dark"] .researchSafetyNotice > i{
  color:var(--grant-gold);
}
.researchSafetyNotice strong{
  color:var(--ink); font-size:14px; font-weight:800;
}
.researchSafetyNotice p{
  margin:5px 0 0; color:var(--muted); font-size:12.5px; line-height:1.65;
}

.contactProfileCard{
  display:grid; grid-template-columns:minmax(300px, .78fr) minmax(0, 1.22fr); overflow:hidden;
  border-radius:28px;
}
.contactProfileVisual{
  position:relative; isolation:isolate; min-height:440px; padding:36px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  overflow:hidden; color:#FFFFFF;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, .08), rgba(11, 18, 32, .82)),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .28), transparent 28%),
    linear-gradient(145deg, #2D8BFF 0%, #0B63FF 54%, #063A9D 100%);
}
.contactProfileVisual::before{
  content:""; position:absolute; top:-120px; right:-120px; z-index:-1; width:330px; height:330px;
  border:1px solid rgba(255, 255, 255, .22); border-radius:50%;
  box-shadow:0 0 0 38px rgba(255, 255, 255, .06), 0 0 0 76px rgba(255, 255, 255, .035);
}
.contactProfileVisual::after{
  content:""; position:absolute; right:26px; bottom:26px; z-index:-1; width:128px; height:128px;
  border:1px dashed rgba(255, 255, 255, .22); border-radius:30px; transform:rotate(18deg);
}
.contactProfileIdentityCard{
  position:relative; z-index:2; width:100%; max-width:360px; padding:20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  overflow:hidden; border:1px solid rgba(255, 255, 255, .28); border-radius:26px;
  background:linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10));
  box-shadow:0 20px 38px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.contactProfileBadge{
  position:relative; z-index:1; width:72px; height:72px; flex:0 0 72px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255, 255, 255, .30); border-radius:22px;
  background:rgba(255, 255, 255, .16);
  box-shadow:0 18px 34px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.contactProfileBadge i{
  color:#FFFFFF; font-size:29px;
}
.contactProfileVisualText{
  position:relative; z-index:1; width:100%; max-width:310px;
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
}
.contactProfileVisualText span{
  color:rgba(255, 255, 255, .76); font-size:11px; line-height:1.25; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
}
.contactProfileVisualText strong{
  color:#FFFFFF; font-size:clamp(28px, 3vw, 42px); line-height:1.06; font-weight:800;
  letter-spacing:-.045em;
}
.contactProfileContent{
  min-width:0; padding:38px 40px; display:flex; flex-direction:column; justify-content:center;
}
.contactProfileContent h2{
  margin:7px 0 10px; color:var(--ink); font-size:clamp(28px, 3vw, 42px); line-height:1.08;
  font-weight:800; letter-spacing:-.04em;
}
.contactProfileDescription{
  max-width:680px; margin:0; color:var(--muted); font-size:14px; line-height:1.72; font-weight:550;
}
.contactDetailList{
  margin-top:26px; display:flex; flex-direction:column; gap:14px;
}
.contactDetailItem{
  min-width:0; padding:15px 16px; display:flex; align-items:flex-start; gap:14px;
  border:1px solid rgba(255, 255, 255, .46); border-radius:18px;
  background:var(--surface-2); box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .contactDetailItem{
  border-color:rgba(255, 255, 255, .07);
}
.contactDetailIcon{
  width:42px; height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:14px; color:#FFFFFF; background:var(--primary-gradient);
  box-shadow:0 9px 18px rgba(11, 99, 255, .18);
}
.contactDetailIcon i{
  color:#FFFFFF; font-size:15px;
}
.contactDetailItem > div{
  min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.contactDetailItem small{
  color:var(--grant-gold-deep); font-size:9.5px; line-height:1.2; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
}
html[data-theme="dark"] .contactDetailItem small{
  color:var(--grant-gold);
}
.contactDetailItem strong,
.contactDetailItem a{
  max-width:100%; color:var(--ink); font-size:13px; line-height:1.5; font-weight:800;
  text-decoration:none; overflow-wrap:anywhere;
}
.contactDetailItem a{
  color:var(--blue);
}
.contactDetailItem span:not(.contactDetailIcon){
  color:var(--muted); font-size:11.5px; line-height:1.6; font-weight:550;
}
.contactProfileActions{
  margin-top:24px; display:flex; align-items:center; flex-wrap:wrap; gap:12px;
}
.contactPrimaryAction,
.contactSecondaryAction{
  min-height:48px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:var(--radius-pill); font-size:12px; line-height:1; font-weight:800; text-decoration:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contactPrimaryAction{
  border:0; color:#FFFFFF; background:var(--primary-gradient); box-shadow:var(--primary-shadow);
}
.contactPrimaryAction i{
  color:#FFFFFF;
}
.contactSecondaryAction{
  border:1px solid rgba(255, 255, 255, .45); color:var(--ink); background:var(--surface);
  box-shadow:var(--shadow-out-sm);
}
html[data-theme="dark"] .contactSecondaryAction{
  border-color:rgba(255, 255, 255, .07);
}
.contactPrimaryAction:hover,
.contactSecondaryAction:hover{
  transform:translateY(-1px);
}
.contactPrimaryAction:focus-visible,
.contactSecondaryAction:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
}
.contactCopyStatus{
  min-height:20px; margin:10px 0 0; color:var(--muted); font-size:11.5px; line-height:1.5;
}
.contactCopyStatus.is-success{
  color:#137A42;
}
.contactCopyStatus.is-error{
  color:#B42318;
}
.contactPrivacyNote{
  margin-top:8px; padding:13px 14px; display:flex; align-items:flex-start; gap:10px;
  border:1px solid rgba(11, 99, 255, .11); border-radius:15px; color:var(--muted);
  background:rgba(11, 99, 255, .055); font-size:11.5px; line-height:1.55;
}
.contactPrivacyNote i{
  margin-top:2px; color:var(--blue);
}

.researchPageActionBar{
  margin-top:24px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid rgba(11, 99, 255, .11); border-radius:20px; background:rgba(11, 99, 255, .055);
}
.researchPageActionBar > div{
  display:flex; flex-direction:column; gap:4px;
}
.researchPageActionBar strong{
  color:var(--ink); font-size:13px; font-weight:800;
}
.researchPageActionBar span{
  color:var(--muted); font-size:11.5px; line-height:1.5;
}
.researchPrimaryLink{
  min-height:42px; padding:0 16px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border-radius:var(--radius-pill); color:#FFFFFF; background:var(--primary-gradient);
  box-shadow:var(--primary-shadow); font-size:11.5px; font-weight:800; text-decoration:none;
}

@media (max-width:1120px){
  .researchPageMain{
    padding-top:34px;
  }
  .researchPageHero{
    min-height:240px;
  }
  .researchInfoGrid,
  .researchFeatureGrid,
  .researchPrincipleGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .researchFundingOfficialCard,
  .contactProfileCard{
    grid-template-columns:1fr;
  }
  .contactProfileVisual{
    min-height:300px;
  }
  .researchFundingOfficialLogo{
    max-width:420px;
  }
}

@media (max-width:740px){
  body.research-page{
    min-height:100svh; padding-bottom:0;
  }
  .research-page main{
    padding-bottom:30px;
  }
  .researchPageMain{
    padding:22px 12px 30px;
  }
  .researchPageHero{
    min-height:0; padding:28px 20px; flex-direction:column; align-items:flex-start; gap:18px;
    border-radius:24px;
  }
  .researchPageHero::after{
    right:-180px; bottom:-230px;
  }
  .researchPageHeroIcon{
    width:62px; height:62px; border-radius:20px;
  }
  .researchPageHeroIcon i{
    font-size:24px;
  }
  .researchPageHero h1{
    font-size:32px;
  }
  .researchPageHero p{
    font-size:13px; line-height:1.65;
  }
  .researchContentSection{
    padding-top:20px;
  }
  .researchFundingOfficialCard,
  .researchIntroCard,
  .researchAcknowledgmentCard,
  .contactProfileCard{
    padding:20px 16px; border-radius:22px;
  }
  .researchFundingOfficialCard{
    gap:18px;
  }
  .researchFundingOfficialLogo{
    padding:12px;
  }
  .researchInfoGrid,
  .researchFeatureGrid,
  .researchPrincipleGrid{
    grid-template-columns:1fr; gap:14px;
  }
  .researchInfoCard,
  .researchFeatureCard,
  .researchPrincipleGrid article{
    padding:18px; border-radius:20px;
  }
  .researchFeatureCard{
    min-height:130px;
  }
  .researchFeatureCard img{
    width:64px; height:74px;
  }
  .researchAcknowledgmentCard{
    margin-top:18px;
  }
  .researchAcknowledgmentHeader h2{
    font-size:21px;
  }
  .researchAcknowledgmentCard blockquote{
    padding:14px; font-size:11px;
  }
  .researchPageActionBar{
    padding:17px; flex-direction:column; align-items:stretch;
  }
  .researchPrimaryLink{
    width:100%;
  }
  .contactProfileCard{
    padding:0; overflow:hidden; border-radius:22px;
  }
  .contactProfileVisual{
    min-height:250px; padding:20px;
  }
  .contactProfileIdentityCard{
    width:100%; max-width:none; padding:16px; gap:14px; border-radius:20px;
  }
  .contactProfileBadge{
    width:58px; height:58px; flex-basis:58px; border-radius:18px;
  }
  .contactProfileBadge i{
    font-size:23px;
  }
  .contactProfileVisualText{
    max-width:100%;
  }
  .contactProfileVisualText strong{
    max-width:280px; font-size:28px; line-height:1.08;
  }
  .contactProfileContent{
    padding:24px 16px 20px;
  }
  .contactProfileContent h2{
    font-size:28px;
  }
  .contactDetailItem{
    padding:14px; border-radius:17px;
  }
  .contactProfileActions{
    align-items:stretch; flex-direction:column;
  }
  .contactPrimaryAction,
  .contactSecondaryAction{
    width:100%;
  }
  .research-page .siteFooter{
    position:static; right:auto; bottom:auto; left:auto; min-height:0;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .research-page .footerRight,
  .research-page .footerCopyrightLine{
    transform:none;
  }
  .research-page .footerRight{
    order:2;
  }
  .research-page .footerLeft{
    order:1;
  }
  .research-page .footerCopyrightLine{
    margin-top:4px;
  }
}