/* ============================================================
   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;
}

/* ---- Statik sayfa (Hakkımızda) hikaye grid'i ---- */
.su-about-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 48px 130px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.su-about-grid--single { grid-template-columns: 1fr; max-width: 860px; }
.su-about-media {
    border: 1px solid rgba(176,141,74,.45);
    padding: 14px;
    position: sticky;
    top: 110px;
}
.su-about-media img { width: 100%; height: 560px; object-fit: cover; display: block; }
@media (max-width: 859px) {
    .su-about-grid { grid-template-columns: 1fr; gap: 48px; padding-left: 24px; padding-right: 24px; }
    .su-about-media { position: static; }
    .su-about-media img { height: auto; max-height: 480px; }
}

/* ---- Panelden gelen sayfa gövdesi (HTML) tipografisi ---- */
.su-page-body { display: flex; flex-direction: column; gap: 28px; }
.su-page-body p {
    margin: 0;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: var(--su-muted);
}
.su-page-body > p:first-child {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    line-height: 1.55;
    color: var(--su-ink);
}
.su-page-body h2, .su-page-body h3 {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: var(--su-ink);
}
.su-page-body h2 { font-size: 32px; }
.su-page-body h3 { font-size: 26px; }
.su-page-body a { color: var(--su-gold); }
.su-page-body ul, .su-page-body ol {
    margin: 0;
    padding-left: 22px;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: var(--su-muted);
}
.su-page-body img { max-width: 100%; height: auto; }

/* ---- Menü kategori anchor'ı (fixed nav altına düşmesin) ---- */
.su-cat-anchor { scroll-margin-top: 96px; }