/* ==========================================================================
   AIRPH — laman induk airph.my · asas.css
   Reset, skala taip, dan komponen yang dipakai lebih daripada satu seksyen.

   Nombor di sini DIAMBIL daripada AIRPH-LANDING-01-Reka-Web.ai:
       grid   desktop 1440 · tepi 120 · kandungan 1200
              mudah alih 390 · tepi 24 · kandungan 342
       taip   hero 60/-30 · tajuk 44/-20 · sub 17 · badan 15 · label 10/+160
       butang tinggi 48 (desktop) / 44 (mudah alih), bulat penuh

   Antara 390 dan 1440 saiz taip DIKIRA dengan clamp(), bukan dilompat pada
   satu titik putus. Sebabnya: reka bentuk hanya ada DUA port pandang, jadi
   segala-galanya di antaranya mesti interpolasi — kalau tidak skrin 900 px
   dapat taip mudah alih dalam lajur selebar desktop.

   Fail ini TIDAK menyebut satu pun kod warna. Semua warna dari token.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* nav melekat 88 px; tanpa ini sasaran #jangkar tersorok di belakangnya */
  scroll-padding-top:104px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--latar);
  color:var(--teks);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
hr{border:0;border-top:1px solid var(--garis);margin:0}

:focus-visible{outline:2.5px solid var(--biru);outline-offset:3px;border-radius:6px}

/* Pautan langkau — nampak hanya bila difokus papan kekunci. Disorok dengan
   translate ke ATAS, bukan left:-9999px: elemen pada -9999px masih menduduki
   ruang mendatar dan boleh mencetuskan skrol sisi pada sesetengah pelayar. */
.langkau{
  position:absolute;left:0;top:0;z-index:100;
  transform:translateY(-120%);
  background:var(--kad);color:var(--biru);
  padding:12px 18px;border:1px solid var(--garis);border-radius:0 0 12px 0;
  font-weight:700;font-size:14px;
}
.langkau:focus{transform:translateY(0)}

.tersembunyi{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------ grid */
:root{--tepi:24px}
@media(min-width:600px){:root{--tepi:32px}}
@media(min-width:1024px){:root{--tepi:48px}}

.bekas{
  width:100%;
  max-width:calc(1200px + var(--tepi)*2);
  margin-inline:auto;
  padding-inline:var(--tepi);
}
/* Pada 1440 tepat: 1200 kandungan + 120 tepi setiap sisi, seperti fail .ai. */
@media(min-width:1440px){:root{--tepi:120px}}

/* ------------------------------------------------------------------ taip */
.label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--biru);
  margin:0;
}
.label--senyap{color:var(--teks3);letter-spacing:.10em}

/* Ayat BM lebih panjang daripada EN untuk makna yang sama, dan fail .ai
   MENGIRA saiz hero daripada baris terpanjang supaya ia tidak melimpah keluar
   lajur 640: BM jatuh ke 50, EN kekal 60. Peraturan itu dibawa ke sini melalui
   atribut lang, yang ditukar oleh butang bahasa. */
.h1{
  font-size:clamp(30px,27.1px + 2.29vw,50px);
  line-height:1.16;
  letter-spacing:-.028em;
  font-weight:700;
  text-wrap:balance;
}
:root:lang(en) .h1{font-size:clamp(30px,27.1px + 2.29vw,60px)}
.h2{
  font-size:clamp(26px,24.8px + 1.33vw,44px);
  line-height:1.17;
  letter-spacing:-.022em;
  font-weight:700;
  text-wrap:balance;
}
.h3{
  font-size:clamp(21px,20.9px + .29vw,26px);
  line-height:1.2;
  letter-spacing:-.012em;
  font-weight:700;
}
.lede{
  font-size:clamp(15px,14.3px + .19vw,17px);
  line-height:1.55;
  color:var(--teks2);
  max-width:62ch;
}
.badan{
  font-size:clamp(14px,13.6px + .10vw,15px);
  line-height:1.5;
  color:var(--teks2);
}
.kecil{
  font-size:13px;
  line-height:1.45;
  color:var(--teks2);
}
.url{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--teks3);
}

/* --------------------------------------------------------------- jenama */
/* Mark mewarisi currentColor, jadi warna ditetapkan pada bekas — bukan
   dalam SVG. Itu yang membolehkan mark yang SAMA dipakai biru (induk/First)
   dan ungu (Plus) tanpa dua fail. */
.mark{width:1em;height:1em;font-size:32px;flex:none}
.mark--biru{color:var(--biru)}
.mark--ungu{color:var(--ungu)}

.wordmark{
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--teks);
  white-space:nowrap;
}
.wordmark i{font-style:normal;margin-left:.2em}
.wordmark--first i{color:var(--biru)}
.wordmark--plus i{color:var(--ungu)}

/* ------------------------------------------------------------- komponen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 24px;
  border-radius:999px;                    /* .ai: jejari = tinggi/2 */
  border:1.4px solid transparent;
  font-size:15px;font-weight:700;line-height:1;
  transition:background-color .16s,border-color .16s,color .16s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px;flex:none}

.btn--biru{background:var(--biru);color:#fff}
.btn--ungu{background:var(--ungu);color:#fff}
.btn--biru:hover,.btn--ungu:hover{filter:brightness(1.08)}
.btn--satu{background:var(--b1-isi);color:var(--b1-teks)}
.btn--dua{background:var(--b2-isi);color:var(--b2-teks)}
.btn--satu:hover,.btn--dua:hover{filter:brightness(.94)}
.btn--garis{border-color:var(--garis);color:var(--teks)}
.btn--garis:hover{border-color:var(--teks3)}

@media(max-width:520px){
  .btn{min-height:44px;font-size:14px;width:100%}
}

/* Butang alat bulat pada bar nav (tema, bahasa, menu). 44 px — saiz sasaran
   sentuh minimum; ikon di dalamnya lebih kecil. */
.alat-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--garis);color:var(--teks2);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  transition:border-color .16s,color .16s;
}
.alat-btn:hover{border-color:var(--teks3);color:var(--teks)}
.alat-btn svg{width:18px;height:18px}

/* Ikon tema: hanya SATU yang nampak pada satu masa. Butang menunjukkan mod
   yang akan DITUKAR KEPADA, bukan mod semasa. */
.alat-btn .ikon-terang{display:none}
:root[data-tema="gelap"] .alat-btn .ikon-terang{display:block}
:root[data-tema="gelap"] .alat-btn .ikon-gelap{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="terang"]) .alat-btn .ikon-terang{display:block}
  :root:not([data-tema="terang"]) .alat-btn .ikon-gelap{display:none}
}

/* Jalur seksyen berlatar selang — penuh lebar skrin, kandungan tetap dalam grid. */
.jalur{background:var(--alt)}
.jalur--cta{background:var(--cta-latar);color:var(--cta-teks)}