@charset "utf-8";
/* CSS Document */



/* ---------- Font families (prioritas: webfont, fallback system) ---------- */
.font-oswald       	{ font-family: "Oswald", "Arial Narrow", Arial, sans-serif; }
.font-roboto       	{ font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.font-montserrat   	{ font-family: "Montserrat", "Segoe UI", "Helvetica", Arial, sans-serif; }
.font-lato         	{ font-family: "Lato", "Segoe UI", "Helvetica", Arial, sans-serif; }
.font-merriweather 	{ font-family: "Merriweather", "Georgia", "Times New Roman", serif; }
.font-exbed 		{ font-family: "Exbed", "Oswald", "Arial Narrow", Arial, sans-serif;}
.font-doxent 		{ font-family: "Doxent", "Montserrat", "Segoe UI", Arial, sans-serif;}
.font-therilo 		{ font-family: "Therilo", "Lato", "Helvetica Neue", Arial, sans-serif;}
.font-goodly 		{ font-family: "Goodly", "Roboto", "Segoe UI", Helvetica, sans-serif;}
.font-dustrone 		{ font-family: "Dustrone", "Merriweather", "Georgia", serif;}
.font-aqualium 		{ font-family: "Aqualium", "Montserrat", "Segoe UI", Arial, sans-serif;}


/* Generic helper sizes */
.text-xs  { font-size: clamp(0.55rem, 1vw, 0.75rem); }
.text-sm  { font-size: clamp(0.70rem, 1.3vw, 0.875rem); }
.text-md  { font-size: clamp(0.85rem, 1.6vw, 1rem); }
.text-lg  { font-size: clamp(1rem, 2vw, 1.25rem); }
.text-xl  { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.text-2xl { font-size: clamp(1.6rem, 3.5vw, 2rem); }
.text-3xl { font-size: clamp(2.1rem, 4.5vw, 2.5rem); }
.text-4xl { font-size: clamp(2.6rem, 6vw, 3rem); }

/* ---------- Variants (reusable utility classes) ---------- */
/* Regular (default) */
.fw-regular { font-weight: 400; font-style: normal; }

/* Bold */
.fw-bold { font-weight: 700; }

/* Italic */
.fw-italic { font-style: italic; }

/* Shadow (text shadow for emphasis) */
.text-shadow {
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.35);
}

/* Subtle drop shadow using box-shadow for containers */
.box-shadow {
  box-shadow: var(--shadow-default);
}

/* Outline - best effort cross-browser:
   1) use -webkit-text-stroke where supported
   2) fallback: multiple text-shadow directions to mimic outline */
.text-outline {
  /* color will be the fill color; outline color set via --outline-color */
  --outline-color: #000;
  color: white;
  -webkit-text-stroke: var(--outline-stroke) var(--outline-color); /* Chrome, Safari */
  text-stroke: var(--outline-stroke) var(--outline-color);         /* future spec */
  text-shadow: var(--text-shadow-outline);                         /* fallback */
}

.text-pinggir {
 
  font-weight: bold;
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000;
}

.nopinggir {
outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Colored outline version (example) */
.text-color-black {color: #000; }
.text-color-dark  {color: #222; }
.text-color-red   {color: #a00; }
.text-color-yellow   {color: #f6ff00; }
.text-color-whith   {color: #ffffff; }
.text-color-biru   {color: #00c0ff; }


.text-outline--black { --outline-color: #000; }
.text-outline--dark  { --outline-color: #222; }
.text-outline--red   { --outline-color: #a00; }
.text-outline--yellow   { --outline-color: #f6ff00; }
/* Heavy outline for display headings */
.text-outline-heavy {
  --outline-stroke: 2.4px;
  text-shadow: 
    2px 2px 0 var(--outline-color),
    -2px -2px 0 var(--outline-color),
    2px -2px 0 var(--outline-color),
    -2px 2px 0 var(--outline-color);
}

/* Glow / neon style (variant of shadow) */
.text-glow {
  text-shadow:
    0 0 6px rgba(255,255,255,0.6),
    0 0 12px rgba(0,150,255,0.35),
    0 4px 18px rgba(0,0,0,0.6);
}

/* Small caps utility (works with some typefaces) */
.text-smallcaps { font-variant: small-caps; }

/* ---------- Convenience: combined font + variant classes examples ---------- */
/* Example: Oswald bold with shadow */
.oswald--bold-shadow { composes: font-oswald; } /* note: 'composes' for explanation; use classes together */

/* ---------- Example responsive heading styles (practical use) ---------- */
.h-display {
  font-size: clamp(1.75rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem 0;
}