/* ============================================================
   Salih Usta Pastanesi — tema temel stilleri
   Claude Design (.dc.html) → GlobalScript Blade dönüşümü
   Inline stiller Blade'de korunur; burada yalnızca
   keyframes + base + reveal + jenerik yardımcılar var.
   style-hover / style-focus davranışları salih-usta.js'te.
   ============================================================ */

:root {
    --su-cream: #F8F4EB;
    --su-dark: #17120C;
    --su-ink: #201910;
    --su-gold: #B08D4A;
    --su-gold-dark: #9A7A3E;
    --su-muted: #6E6353;
    --su-light: #F3EAD8;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--su-cream);
    -webkit-font-smoothing: antialiased;
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--su-ink);
    overflow-x: hidden;
}

img { max-width: 100%; }

/* ---- Keyframes (tasarımın <helmet><style> bloğundan) ---- */
@keyframes suFadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes cueDrop {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes floatY   { from { transform: translateY(-16px); } to { transform: translateY(16px); } }
@keyframes rowR     { from { transform: translateX(0); } to { transform: translateX(576px); } }
@keyframes rowL     { from { transform: translateX(0); } to { transform: translateX(-576px); } }
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- Reveal-on-scroll (JS .su-in class'ı ekler) ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
[data-reveal].su-in {
    opacity: 1;
    transform: none;
}

/* Reduce-motion: animasyonları kapat, içerik görünür kalsın */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    html { scroll-behavior: auto; }
}

/* ---- Yatay scrollbar gizle (vitrin şeridi vb.) ---- */
.su-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.su-noscroll::-webkit-scrollbar { display: none; }

/* ---- Focus erişilebilirlik ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--su-gold);
    outline-offset: 2px;
}