/* ============================================================
   ASME GOLD - Temel stiller ve bilesenler
   Derleme adimi yok: el yazimi modern CSS.
   ============================================================ */

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

/* Kok yazi boyu her uygulamada kendi dosyasinda: site 16 px (tipografi.css,
   2026-10-11 Rima hiyerarsisi; 10-10'daki 15 px kalkti), panel 15 px
   (yonetim.css, 3 Ekim'den beri). Dokunmatik cihazda girdiler 16 px
   (asagida: iOS kucuk yazili girdide sayfayi yakinlastirir). */
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--yuzey);
    color: var(--metin);
    font-family: var(--yazi-govde);
    font-size: var(--olcu-govde);
    line-height: var(--satir-govde);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Duz rakam (2026-09-28): eski baslik yazi tipi Cormorant'ta "1 Gram"
       basligindaki 1, Turkcedeki "ı" gibi okunuyordu. Urbanist zaten duz rakam
       kullaniyor; kural, eski usul rakamli bir yedek yazi tipine karsi duruyor. */
    font-variant-numeric: lining-nums;
}

h1, h2, h3 {
    font-family: var(--yazi-baslik);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 var(--uzay-3);
}

/* Ikonlarin varsayilan boyutu - GUVENLIK AGI (2026-09-28).
   ikon() SVG'ye genislik/yukseklik yazmaz; boyutu her bilesen kendisi verir.
   Kurali unutulan viewBox'li bir SVG kapsayicisini doldurur (674 ve 1152
   piksel olculdu; dort kez yasandi). :where() ile ozgulluk SIFIR: bir
   bilesenin kendi boyutu her zaman kazanir, bu kural yalnizca kimsenin boyut
   vermedigi ikonu metin boyuna indirir. */
:where(svg[viewBox="0 0 24 24"]) { width: 1.25em; height: 1.25em; }

/* Varsayilan baslik olcegi - PANEL bununla kalir; site tipografi.css'te Rima'nin
   olcegini kullanir (2026-10-11).
   Basliklar Urbanist (patron, 2026-09-29). h1 bir kademe kalin (700), h2/h3
   600. Urbanist'in x-yuksekligi eski Cormorant'tan buyuk: ayni punto daha iri
   gorunur, h1'in en buyuk olcusu 44'ten 40 piksele indi (patronun ornegi de
   40px). Harf araligi kalin geometrik yazida biraz daha sik. */
h1 {
    font-weight: 700;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    letter-spacing: -.02em;
}
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }

p { margin: 0 0 var(--uzay-4); }

a {
    color: var(--vurgu);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--gecis);
}
a:hover { color: var(--vurgu-yuzey); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Klavye kullanicilari icin gorunur odak - erisilebilirligin temeli.
   :focus-visible kullaniliyor ki fare tiklamasinda halka cikmasin. */
:focus-visible {
    outline: 2px solid var(--odak-halka);
    outline-offset: 2px;
    border-radius: var(--yuvarlak-sm);
}

/* Hareket hassasiyeti olan kullanicilar icin animasyonlari kis. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Duzen --- */
.kapsayici {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--uzay-4);
}

@media (min-width: 768px) {
    .kapsayici { padding-inline: var(--uzay-5); }
}

.yigin > * + * { margin-top: var(--uzay-4); }

/* Ekran okuyucuya acik, gorsel olarak gizli. */
.gorsel-gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Klavyeyle gezenler icin icerige atlama baglantisi. */
.atla {
    position: absolute;
    left: var(--uzay-4);
    top: -100px;
    z-index: 100;
    padding: var(--uzay-3) var(--uzay-4);
    background: var(--yuzey-yukseltilmis);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge-lg);
    transition: top var(--gecis);
}
.atla:focus { top: var(--uzay-4); }

/* --- Buton --- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uzay-2);
    min-height: 44px;            /* dokunma hedefi: WCAG 2.5.8 */
    padding: var(--uzay-3) var(--uzay-5);
    border: 1px solid transparent;
    border-radius: var(--yuvarlak);
    font: inherit;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme:active { transform: translateY(1px); }

.dugme--birincil {
    background: var(--dugme-zemin);
    color: var(--dugme-metin);
}
.dugme--birincil:hover { background: var(--dugme-zemin-hover); color: var(--dugme-metin); }

.dugme--ikincil {
    background: transparent;
    border-color: var(--kenarlik-girdi);
    color: var(--metin);
}
.dugme--ikincil:hover { background: var(--yuzey-batik); }

.dugme[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Form --- */
.alan { display: block; margin-bottom: var(--uzay-4); }

.alan__etiket {
    display: block;
    margin-bottom: var(--uzay-2);
    font-size: .9rem;
    font-weight: 500;
}

.alan__girdi {
    width: 100%;
    min-height: 44px;
    padding: var(--uzay-3);
    background: var(--yuzey-yukseltilmis);
    color: var(--metin);
    border: 1px solid var(--kenarlik-girdi);
    border-radius: var(--yuvarlak);
    font: inherit;
    transition: border-color var(--gecis);
}
.alan__girdi:hover { border-color: var(--vurgu); }

.alan__yardim { margin-top: var(--uzay-2); font-size: .85rem; color: var(--metin-soluk); }
.alan__hata { margin-top: var(--uzay-2); font-size: .85rem; color: var(--hata); }

/* --- Kart --- */
.kart {
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    padding: var(--uzay-5);
    box-shadow: var(--golge-sm);
}

/* --- Fiyat etiketi --- */
.fiyat {
    font-variant-numeric: tabular-nums;  /* rakamlar kaymasin */
    font-weight: 600;
    color: var(--vurgu);
}
.fiyat--buyuk { font-size: 1.5rem; }

/* Agirlik gosterimi: tek aralikli, hizalanmis. */
.agirlik {
    font-family: var(--yazi-tek);
    font-size: .9rem;
    color: var(--metin-soluk);
    font-variant-numeric: tabular-nums;
}

/* --- Rozet --- */
.rozet {
    display: inline-flex;
    align-items: center;
    padding: var(--uzay-1) var(--uzay-3);
    border-radius: var(--yuvarlak-tam);
    font-size: .8rem;
    font-weight: 500;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
}

/* --- Yardimci siniflar ---
   Satir ici style="" kullanilmaz: CSP'de style-src nonce'u oznitelikleri
   kapsamaz, dolayisiyla inline stiller tarayici tarafindan engellenir. */
.bolum { padding-block: var(--uzay-8); }
.bolum--genis { padding-block: var(--uzay-9); }
.ortala { text-align: center; }

/* Dokunmatik cihazda girdiler en az 16 px (2026-10-10). iOS Safari 16
   pikselden kucuk yazili bir girdiye odaklaninca sayfayi yakinlastirir ve
   geri uzaklastirmaz: mobilde arama kutusu (.9rem) bugune kadar boyleydi.
   !important bilerek: bilesenlerin kendi (medya sorgulu) olculerini de
   ezmesi gerekiyor; masaustu (fare) olculeri degismez. */
@media (pointer: coarse) {
    :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: 16px !important; }
}