@import url("../fonts/fonts.css");

/* Web fontu yüklenene kadar kullanılan yedekleri, ölçüleri web fontuna yakın olacak
   şekilde ayarla. Böylece font geldiğinde satırlar yeniden dizilmez (görsel kayma). */
@font-face {
  font-family: "Jakarta yedek";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces yedek";
  src: local("Georgia"), local("Times New Roman"), local("serif");
  size-adjust: 102%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* =====================================================================
   AsistanCafe — tasarım belirteçleri
   Sıcak kâğıt tonları, tek vurgu rengi (kırmızı biber), Fraunces + Jakarta.
   ===================================================================== */

:root {
  /* --- mürekkep ve yüzeyler (tümü sıcak gri ailesi) --- */
  --ink:        #1c1714;
  --ink-2:      #443c35;
  --ink-3:      #6d635b;
  --muted:      #8b8078;
  --line:       #e8e1d8;
  --line-soft:  #f2ece4;
  --paper:      #faf7f2;
  --paper-2:    #f4eee6;
  --surface:    #ffffff;

  /* --- tek vurgu: kırmızı biber --- */
  --accent:       #bf4a2c;
  --accent-deep:  #97361d;
  --accent-soft:  #f6e3db;
  --accent-wash:  #fdf4f0;

  /* --- anlamsal (doygunluk düşük) --- */
  --ok:      #3f6b46;   --ok-soft:      #e6efe6;
  --warn:    #97671c;   --warn-soft:    #f8efdd;
  --danger:  #a5382a;   --danger-soft:  #f9e6e3;
  --info:    #3d5a78;   --info-soft:    #e6edf4;

  /* --- yazı --- */
  --font-display: "Fraunces", "Fraunces yedek", "Iowan Old Style", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", "Jakarta yedek", system-ui, "Segoe UI", sans-serif;

  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9063rem;  /* 14.5 */
  --t-md:   1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  3rem;
  --t-5xl:  4rem;

  /* --- ölçü --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 44px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 7px;  --r-md: 11px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* --- gölge: sıcak tonlu, tek ışık kaynağı (üstten) --- */
  --sh-1: 0 1px 2px rgba(58, 40, 26, .06);
  --sh-2: 0 1px 2px rgba(58, 40, 26, .05), 0 6px 16px -10px rgba(58, 40, 26, .22);
  --sh-3: 0 2px 4px rgba(58, 40, 26, .05), 0 18px 40px -22px rgba(58, 40, 26, .32);
  --sh-pop: 0 24px 60px -24px rgba(40, 26, 16, .38);

  /* --- hareket --- */
  --ease: cubic-bezier(.2, .8, .25, 1);
  --dur: 180ms;

  /* --- katman düzeni --- */
  --z-base: 1; --z-sticky: 20; --z-veil: 40; --z-panel: 50; --z-sheet: 60; --z-top: 80;
}

/* dokunuş: çok ince tanecik — düz dijital yüzeyi kırar */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

/* rakamlar hep hizalı: fiyat ve besin tabloları için şart */
table, .num, input[type="number"], .fiyat, .stat b, .tutar { font-variant-numeric: tabular-nums; }

/* klavye erişilebilirliği — her yerde görünür odak halkası */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* içeriğe atla */
.atla {
  position: absolute; left: -9999px; top: 8px; z-index: var(--z-top);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 600;
}
.atla:focus { left: 8px; color: #fff; }

.gizli-erisilebilir {
  /* !important şart: app.css'teki input[type=file]{width:100%} kuralı
     özgüllük olarak bu sınıfı yener ve öğe sayfayı yatayda taşırırdı. */
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}