/*==================================================================
  util.css — reset, font, dan design token halaman Login
  ------------------------------------------------------------------
  File ini HANYA dipakai application/views/login.php (dikonfirmasi
  lewat grep ke seluruh application/views & application/controllers).
  Komponen visualnya ada di main.css.
==================================================================*/


/*------------------------------------------------------------------
  [ Font lokal ]
  Semua .ttf sudah ada di repo — tidak ada request ke CDN eksternal.
------------------------------------------------------------------*/
@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/raleway/Raleway-Regular.ttf') format('truetype');
}

@font-face {
  font-family: Raleway;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway/Raleway-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: Raleway;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/raleway/Raleway-Bold.ttf') format('truetype');
}


/*------------------------------------------------------------------
  [ Design token ]
  Merah brand diambil langsung dari palet PNG logo YPT
  (assets/images/logo/logo-ypt.png → #ED151D / #EE0000).
------------------------------------------------------------------*/
:root {
  --ypt-red:        #e8121a;
  --ypt-red-bright: #ff3b2f;
  --ypt-red-deep:   #a50e17;
  --ypt-maroon:     #7d0c15;
  --ypt-ink:        #2b0609;
  --ypt-ink-dark:   #1a0407;

  --surface:        #ffffff;
  --surface-tint:   #fdfbfb;
  --surface-sink:   #efe9ea;

  --text-strong:    #1d1216;
  --text-body:      #4a3f43;
  --text-muted:     #857478;
  --text-onbrand:   #ffffff;

  --line:           #e7dfe1;
  --line-strong:    #d6cacd;
  --danger:         #c62828;

  --radius-card:    18px;
  --radius-field:   11px;
  --radius-pill:    999px;

  --ease:           cubic-bezier(.22, .61, .36, 1);
}


/*------------------------------------------------------------------
  [ Reset ]
------------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  background-color: var(--surface-tint);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  max-width: 100%;
  border: 0;
}

input,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

/* Fokus terlihat jelas untuk navigasi keyboard, tapi tidak mengganggu
   saat elemen diklik dengan mouse. */
:focus-visible {
  outline: 2px solid var(--ypt-red);
  outline-offset: 3px;
}


/*------------------------------------------------------------------
  [ Utility kecil ]
------------------------------------------------------------------*/
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}