/* =====================================================================
   PLANO tanıtım sitesi (ikinci tur) — ortak temel
   ---------------------------------------------------------------------
   Üç alternatifin paylaştığı en alt katman: sıfırlama, kap, erişilebilirlik
   yardımcıları ve kaydırınca beliren içerik. Görünüm (renk, düğme, başlık)
   her alternatifin kendi site.css dosyasındadır; burada tema YOKTUR.
   Yazı ailesi PlanoFont.css'ten gelir (font-family burada yazılmaz).
   ===================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* Kap: içerik genişliği. Alternatif kendi --kap ve --kenar değerini verir. */
.kap {
    width: 100%;
    max-width: calc(var(--kap, 1200px) + var(--kenar, 24px) * 2);
    margin-inline: auto;
    padding-inline: var(--kenar, 24px);
}

/* Ekranda görünmeyen ama ekran okuyucunun okuduğu metin */
.gizli-metin {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* İçeriğe geç bağlantısı — yalnız klavyeyle odaklanınca görünür */
.atla {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s;
}
.atla:focus { top: 12px; }

:focus-visible {
    outline: 3px solid var(--odak, #2563eb);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Kaydırınca belirme. JS yoksa ya da hareket azaltılmışsa içerik baştan
   görünür (sınıf yalnız .js kökünde etkili). */
.js .belir {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.js .belir.gorundu { opacity: 1; transform: none; }
.js .belir.gecikme-1 { transition-delay: .08s; }
.js .belir.gecikme-2 { transition-delay: .16s; }
.js .belir.gecikme-3 { transition-delay: .24s; }
.js .belir.gecikme-4 { transition-delay: .32s; }
.js .belir.gecikme-5 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .belir { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}