/* ============================================================
   BASKIOSK — app.css (ÜRETİLDİ, ELLE DÜZENLEME)
   Kaynak: static/css/src/  ·  Derle: python3 tools/build_css.py
   ============================================================ */

@layer base, components, layout, pages, utilities;

/* Tokenlar: static/css/src/tokens.json dosyasından üretilir. */
:root {
  --color-bg: #FAF9F8;
  --color-surface: #FEFDFC;
  --color-surface-raised: #FFFFFF;
  --color-fill: #FAF9F8;
  --color-fill-strong: #E8E7EA;
  --color-border: #E8E7EA;
  --color-track: #E8E7EA;
  --color-control-bg: #FEFDFC;
  --color-control-border: #E8E7EA;
  --color-segment-bg: #E8E7EA;
  --color-segment-selected: #FFFFFF;
  --color-segment-selected-text: #15161A;
  --color-chip-selected-bg: #FDEEEE;
  --color-chip-selected-border: #F15C61;
  --color-chip-selected-text: #15161A;
  --color-chip-selected-meta: #F15C61;
  --color-text: #15161A;
  --color-text-secondary: #484A52;
  --color-text-muted: #9A9DA8;
  --color-text-on-accent: #FFFFFF;
  --color-accent: #F15C61;
  --color-accent-hover: #E14B50;
  --color-accent-pressed: #D03A40;
  --color-accent-strong: #D03A40;
  --color-accent-subtle: #FDEEEE;
  --color-accent-faint: #FFF6F6;
  --color-accent-border: #F5C6C2;
  --color-accent-a15: rgba(241, 92, 97, .15);
  --color-accent-a40: rgba(241, 92, 97, .4);
  --color-success: #1F8A5C;
  --color-success-subtle: #E6F4EC;
  --color-danger: #D6304B;
  --color-danger-subtle: #FDEDEF;
  --color-danger-border: #F5C6CC;
  --color-focus: #F15C61;
  --color-inverse-bg: #15161A;
  --color-inverse-text: #FFFFFF;
  --color-paper: #FFFFFF;
  --color-paper-hint: #9A9DA8;
  --color-media: #000000;
  --color-scrim: rgba(21, 22, 26, .45);
  --color-scrim-immersive: rgba(0, 0, 0, .9);
  --color-scrim-soft: rgba(112, 114, 124, .58);
  --color-glass: rgba(18, 18, 20, .62);
  --color-glass-strong: rgba(18, 18, 20, .72);
  --color-glass-accent: rgba(241, 92, 97, .88);
  --color-on-image: #FFFFFF;
  --color-on-image-muted: rgba(255, 255, 255, .9);
  --color-on-image-fill: rgba(255, 255, 255, .18);
  --color-image-scrim: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .82) 100%);
  --color-chart-1: #2A78D6;
  --color-chart-2: #EB6834;
  --color-chart-3: #1BAF7A;
  --color-chart-4: #EDA100;
  --color-chart-5: #E87BA4;
  --color-chart-6: #8A63D2;
  --color-chart-7: #008300;
  --gradient-accent: linear-gradient(135deg, #FF7A7F 0%, #F15C61 55%, #D03A40 100%);
  --gradient-accent-soft: linear-gradient(135deg, #FDEEEE 0%, #FFF6F6 100%);
  --gradient-accent-fade: linear-gradient(180deg, #FDEEEE 0%, #FAF9F8 100%);
  --gradient-accent-glow: radial-gradient(circle, rgba(241, 92, 97, .12) 0%, transparent 70%);
  --gradient-magic: linear-gradient(120deg, #FDEBEC 0%, #F2E9FB 50%, #E4EEFF 100%);
  --color-magic-border: rgba(120, 110, 230, .22);
  --color-magic-icon: #6A63E6;
  --color-inverse-muted: rgba(255, 255, 255, .66);
  --color-inverse-fill: rgba(255, 255, 255, .07);
  --color-inverse-border: rgba(255, 255, 255, .12);
  --gradient-hue: conic-gradient(#FF5F5F, #FFD25F, #8BE05F, #5FD6E0, #5F7CFF, #C25FFF, #FF5F5F);
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Nunito', 'Roboto', -apple-system, sans-serif;
  --font-icon: 'Material Symbols Outlined';
  --font-hand: 'Baskiosk El', 'Segoe Print', 'Bradley Hand', cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-display-sm: clamp(1.625rem, 5vw, 2.25rem);
  --text-display-md: clamp(1.75rem, 6vw, 2.5rem);
  --text-display-lg: clamp(2rem, 7vw, 3.25rem);
  --text-display-xl: clamp(2.375rem, 9vw, 4.25rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-caps: 0.05em;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 32px;
  --icon-3xl: 40px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(15, 15, 20, .07), 0 1px 2px rgba(15, 15, 20, .05);
  --shadow-md: 0 4px 16px rgba(15, 15, 20, .1);
  --shadow-lg: 0 12px 40px rgba(15, 15, 20, .22);
  --shadow-xl: 0 24px 64px rgba(21, 22, 26, .28), 0 2px 8px rgba(21, 22, 26, .08);
  --shadow-sheet: 0 -4px 32px rgba(0, 0, 0, .12);
  --shadow-drawer: 4px 0 24px rgba(0, 0, 0, .1);
  --shadow-accent-sm: 0 2px 10px rgba(241, 92, 97, .28);
  --shadow-accent-md: 0 6px 18px rgba(241, 92, 97, .38), 0 2px 4px rgba(241, 92, 97, .24);
  --shadow-accent-lg: 0 8px 32px rgba(241, 92, 97, .45);
  --shadow-paper: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .12);
  --shadow-paper-on-dark: 0 6px 40px rgba(0, 0, 0, .6);
  --shadow-float: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-thumb: 0 1px 6px rgba(0, 0, 0, .35);
  --shadow-text-on-image: 0 2px 24px rgba(0, 0, 0, .3);
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-sheet: 300;
  --z-dialog: 400;
  --z-editor: 500;
  --z-editor-overlay: 600;
  --z-onboarding: 700;
  --z-toast: 1000;
  --size-blur-glass: 8px;
  --size-header: 56px;
  --size-logo: 27px;
  --size-logo-sm: 20px;
  --size-content-app: 480px;
  --size-content-page: 720px;
  --size-content-wide: 1080px;
  --size-panel-sidebar: 248px;
  --size-drawer: 280px;
  --size-control-xs: 32px;
  --size-control-sm: 36px;
  --size-control-md: 40px;
  --size-control-lg: 52px;
  --size-control-xl: 56px;
  --size-tap: 44px;
  --size-border: 1px;
  --size-border-strong: 1.5px;
  --size-focus-width: 2px;
  --size-focus-offset: 2px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  --duration-loop-fast: 1000ms;
  --duration-loop: 2000ms;
  --duration-loop-slow: 3000ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121214;
  --color-surface: #1B1B1E;
  --color-surface-raised: #232327;
  --color-fill: rgba(255, 255, 255, .08);
  --color-fill-strong: rgba(255, 255, 255, .16);
  --color-border: rgba(255, 255, 255, .08);
  --color-track: rgba(255, 255, 255, .18);
  --color-control-bg: rgba(255, 255, 255, .1);
  --color-control-border: rgba(255, 255, 255, .25);
  --color-segment-bg: rgba(255, 255, 255, .08);
  --color-chip-selected-bg: #FFFFFF;
  --color-chip-selected-border: #FFFFFF;
  --color-text: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, .75);
  --color-text-muted: rgba(255, 255, 255, .5);
  --color-accent-subtle: rgba(255, 255, 255, .08);
  --color-accent-border: rgba(255, 255, 255, .25);
  --color-danger: #FF6B6B;
  --color-focus: #FFFFFF;
  --color-inverse-bg: #FFFFFF;
  --color-inverse-text: #15161A;
  --color-inverse-muted: rgba(21, 22, 26, .66);
  --color-inverse-fill: rgba(21, 22, 26, .05);
  --color-inverse-border: rgba(21, 22, 26, .12);
}


/* ---- base.css ---- */
@layer base {
/* Temel: yazı tipleri (sunucudan; dış kaynağa istek yok), sıfırlama, belge ve tipografi varsayılanları. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* El yazısı (tanıtım sayfalarındaki notlar): düzenleyicideki "Kalem" yazı tipinin aynısı */
@font-face {
  font-family: 'Baskiosk El';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/metin-kalem-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baskiosk El';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/metin-kalem-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* İkonlar: yalnızca kullanılan ikonları içeren alt küme (tools/icons.py üretir) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/static/fonts/material-symbols.woff2') format('woff2');
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  background: var(--color-bg);   /* iPhone'da sayfa uçlarında esnerken beyaz alan görünmesin */
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
p { line-height: var(--leading-relaxed); }
em { font-style: normal; }
a { color: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
code { font-family: var(--font-mono); }

:focus-visible {
  outline: var(--size-focus-width) solid var(--color-focus);
  outline-offset: var(--size-focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* Açık katman varken arkadaki belge kaymaz (ui.open) */
html.is-locked > body { overflow: hidden; }

/* Ortak hareketler */
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
}


/* ---- components/icon.css ---- */
@layer components {
/* İkon — Material Symbols (yalnızca kullanılan ikonlar). Şablonda {{ icon('ad') }}, JS'te ui.icon('ad').
   Boyut değiştiriciyle verilir; varsayılan --icon-xl (24px). Düğme gibi bileşenler içindeki ikonun boyutunu
   bileşen belirler. */
.icon {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-icon);
  font-size: var(--icon-xl);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.icon--xs { font-size: var(--icon-xs); }
.icon--sm { font-size: var(--icon-sm); }
.icon--md { font-size: var(--icon-md); }
.icon--lg { font-size: var(--icon-lg); }
.icon--xl { font-size: var(--icon-xl); }
.icon--2xl { font-size: var(--icon-2xl); }
.icon--3xl { font-size: var(--icon-3xl); }
.icon--accent { color: var(--color-accent); }
.icon--muted { color: var(--color-text-muted); }
}


/* ---- components/button.css ---- */
@layer components {
/* Düğme — tek bileşen, tür + boyut + biçim değiştiricileri.
   Tür:   --primary  ana eylem (Devam, Öde)            --secondary  vurgulu ikincil (çerçeveli, vurgu rengi)
          --neutral  sakin (Geri, İptal, panel işlemi)  --caution    sakin, üzerine gelince tehlike rengi
          --tonal    yumuşak dolgu
          --plain    yalnızca metin                     --success / --danger  sonuç eylemleri
          --brand    pazarlama çağrısı (degrade + parıltı)  --glass  fotoğraf üstünde buzlu cam
   Boyut: --sm (32) · --md (40) · varsayılan (52) · --xl (56)
   Biçim: --block (tam genişlik) · --pill (tam yuvarlak)
   İçindeki ikonun boyutunu düğme belirler. Alt alta düğmeler .stack içinde durur. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--size-control-lg);
  padding: 0 var(--space-5);
  border: var(--size-border-strong) solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast),
              box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast);
}
.btn .icon { font-size: var(--icon-md); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; }

/* Türler */
.btn--primary { background: var(--color-accent); color: var(--color-text-on-accent); box-shadow: var(--shadow-accent-sm); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-pressed); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] {
  background: var(--color-fill-strong);
  color: var(--color-text-muted);
  box-shadow: none;
}

.btn--secondary { background: var(--color-control-bg); border-color: var(--color-accent); color: var(--color-accent); }
.btn--secondary:active { background: var(--color-accent-subtle); }

.btn--neutral { background: var(--color-control-bg); border-color: var(--color-control-border); color: var(--color-text-secondary); }
.btn--neutral:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn--neutral:active { background: var(--color-fill); }

.btn--caution { background: var(--color-control-bg); border-color: var(--color-control-border); color: var(--color-text-secondary); }
.btn--caution:hover { border-color: var(--color-danger); color: var(--color-danger); }

.btn--tonal { background: var(--color-fill); color: var(--color-text); }
.btn--tonal:active { background: var(--color-fill-strong); }

.btn--plain { background: transparent; color: var(--color-text-secondary); }
.btn--plain:hover { color: var(--color-text); }

.btn--glass {
  background: var(--color-glass-strong);
  color: var(--color-on-image);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(var(--size-blur-glass));
  backdrop-filter: blur(var(--size-blur-glass));
}

.btn--success { background: var(--color-success); color: var(--color-text-on-accent); }
.btn--danger { background: var(--color-danger); color: var(--color-text-on-accent); }

.btn--brand {
  border-color: transparent;
  background: var(--gradient-accent);
  background-origin: border-box;   /* degrade saydam kenarın altına da yayılır: köşede dolguyla uyuşmayan şerit kalmaz */
  color: var(--color-text-on-accent);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-accent-md);
}
.btn--brand:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent-lg); }
.btn--brand:active { transform: none; box-shadow: var(--shadow-accent-sm); }

.btn--neutral:disabled, .btn--caution:disabled, .btn--secondary:disabled, .btn--tonal:disabled,
.btn--plain:disabled, .btn--success:disabled, .btn--danger:disabled { opacity: .5; }


/* Boyutlar */
.btn--sm { min-height: var(--size-control-xs); padding: 0 var(--space-3-5); border-radius: var(--radius-sm); font-size: var(--text-xs); gap: var(--space-1-5); }
.btn--sm .icon { font-size: var(--icon-sm); }
.btn--md { min-height: var(--size-control-md); padding: 0 var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); gap: var(--space-1-5); }
.btn--md .icon { font-size: var(--icon-md); }
.btn--xl { min-height: var(--size-control-xl); padding: 0 var(--space-8); font-size: var(--text-md); font-weight: var(--weight-bold); }
.btn--xl .icon { font-size: var(--icon-lg); }

/* Biçim */
.btn--block { display: flex; width: 100%; }
.btn--pill { border-radius: var(--radius-full); }

/* <label> olarak kullanılan düğme (dosya seçici) <button> ile aynı yükseklikte */
label.btn { line-height: var(--leading-none); }
}


/* ---- components/icon-button.css ---- */
@layer components {
/* İkon düğmesi — yalnızca ikon içeren düğme (menü, kapat, sepet, adet, döndür …). aria-label zorunludur.
   Tür:   varsayılan sade (zemin yok) · --soft (dolgu, sönük ikon) · --tonal (dolgu, belirgin ikon) · --outline (çerçeve)
         · --accent (vurgu tonu; basılamazken --soft gibi sönük: kaydırıcı satırındaki sıfırla/ortala)
   Boyut: --sm (32) · varsayılan (40) · --lg (44)      Biçim: --round (daire)
   İkon yerine kısa simge yazısı (ör. "0°"): .icon-btn__text */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-control-md);
  height: var(--size-control-md);
  border: var(--size-border-strong) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
}
.icon-btn .icon { font-size: var(--icon-xl); }
.icon-btn:hover { background: var(--color-fill); color: var(--color-text); }
.icon-btn:active { background: var(--color-fill-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.icon-btn--soft { background: var(--color-fill); color: var(--color-text-muted); }
.icon-btn--tonal { background: var(--color-fill); color: var(--color-text); }
.icon-btn--accent { background: var(--color-accent-a15); color: var(--color-accent); }
.icon-btn--accent:active { background: var(--color-accent-a40); }
.icon-btn--accent:disabled { background: var(--color-fill); color: var(--color-text-muted); }
.icon-btn--outline { background: var(--color-control-bg); border-color: var(--color-control-border); color: var(--color-text-secondary); }
.icon-btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-control-bg); }

.icon-btn--sm { width: var(--size-control-xs); height: var(--size-control-xs); border-radius: var(--radius-sm); }
.icon-btn--sm .icon { font-size: var(--icon-md); }
.icon-btn__text { font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.icon-btn--lg { width: var(--size-tap); height: var(--size-tap); }
.icon-btn--round { border-radius: 50%; }

/* Tehlike durumu (ör. adet 1 iken eksi düğmesi silme olur) */
.icon-btn.is-danger { border-color: var(--color-danger-border); color: var(--color-danger); }
[data-theme="dark"] .icon-btn.is-danger { border-color: var(--color-control-border); }
}


/* ---- components/badge.css ---- */
@layer components {
/* Sayaç rozeti ve etiket.
   .badge  küçük sayı balonu (sepet, menüdeki uyarı sayısı). Boşken görünmez.  --neutral · --dot (yalnızca nokta)
   .tag    durum/özet etiketi (Aktif, Basıldı, Vintage …).
           Ton: varsayılan nötr · --accent · --success · --danger · --outline · --surface · --inverse (koyu bantta)
           Boyut: --sm (11px) · varsayılan (12px) · --lg (ikonlu büyük hap) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
}
.badge:empty { display: none; }
.badge--neutral { background: var(--color-text-secondary); }
.badge--ring { box-shadow: 0 0 0 2px var(--color-surface); }
.badge--dot { min-width: 0; width: 8px; height: 8px; padding: 0; box-shadow: 0 0 0 2px var(--color-surface); }
.badge--dot:empty { display: inline-flex; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  background: var(--color-fill);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  white-space: nowrap;
}
.tag .icon { font-size: var(--icon-md); }
.tag--accent { background: var(--color-accent-subtle); color: var(--color-accent); }
.tag--success { background: var(--color-success-subtle); color: var(--color-success); }
.tag--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.tag--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.tag--surface { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text); }
.tag--surface .icon, .tag--lg .icon { color: var(--color-accent); }
.tag--sm { padding: var(--space-0-5) var(--space-2); font-size: var(--text-2xs); }
.tag--lg { padding: var(--space-2-5) var(--space-5); font-size: var(--text-sm); color: var(--color-text); }
/* Koyu zemin rengi kendinde: koyu bantta çerçeveli hap, açık sayfada koyu hap (her yerde okunur) */
.tag--inverse, .tag--lg.tag--inverse { border: var(--size-border) solid var(--color-inverse-border); background: var(--color-inverse-bg); color: var(--color-inverse-text); }
}


/* ---- components/chip.css ---- */
@layer components {
/* Seçim çipi — tek seçimli/aç-kapa hap düğmeler (baskı boyutu, dönem filtresi, gelen kutusu sekmesi).
   Seçili durum: aria-checked="true" (role=radio) ya da aria-pressed="true" (aç-kapa).
   .chip-group çipleri dizer; --fill eşit genişlik verir.  .chip__meta ikincil bilgi (fiyat).
   Boyut: varsayılan (36) · --lg (40). Koyu zeminde (data-theme="dark") kendiliğinden uyum sağlar. */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-group--fill { flex-wrap: nowrap; }
.chip-group--fill > .chip { flex: 1; min-width: 0; }

.chip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--size-control-sm);
  padding: var(--space-2) var(--space-3);
  border: var(--size-border-strong) solid var(--color-control-border);
  border-radius: var(--radius-full);
  background: var(--color-control-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.chip:hover { border-color: var(--color-accent); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] {
  border-color: var(--color-chip-selected-border);
  background: var(--color-chip-selected-bg);
  color: var(--color-chip-selected-text);
}
.chip:disabled { opacity: .45; cursor: default; }
.chip.is-unavailable { opacity: .45; text-decoration: line-through; }
.chip .badge { align-self: center; }

.chip__label { color: var(--color-text); }
.chip[aria-checked="true"] .chip__label, .chip[aria-pressed="true"] .chip__label { color: var(--color-chip-selected-text); }
.chip__meta { color: var(--color-text-muted); font-weight: var(--weight-regular); }
.chip[aria-checked="true"] .chip__meta, .chip[aria-pressed="true"] .chip__meta { color: var(--color-chip-selected-meta); }

.chip--lg { min-height: var(--size-control-md); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
}


/* ---- components/segmented.css ---- */
@layer components {
/* Segment denetimi — birbirini dışlayan 2–3 seçenek tek kapsül içinde (Sığdır / Doldur).
   Seçili öğe: aria-checked="true". */
.segmented {
  display: flex;
  flex: 1;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-segment-bg);
}
.segmented__item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--size-control-sm);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.segmented__item .icon { font-size: var(--icon-md); }
.segmented__item[aria-checked="true"] { background: var(--color-segment-selected); color: var(--color-segment-selected-text); }
}


/* ---- components/stepper.css ---- */
@layer components {
/* Adet seçici — eksi / sayı / artı. Eksi, adet 1 iken silme olur (.icon-btn.is-danger, ikon "delete").
   --lg: büyük önizleme ekranı. */
.stepper { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.stepper__value {
  min-width: 22px;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.stepper--lg { gap: var(--space-5); }
.stepper--lg .stepper__value { min-width: 48px; font-size: var(--text-xl); line-height: var(--leading-none); }
}


/* ---- components/field.css ---- */
@layer components {
/* Form alanı.
   .form            alanları dikey dizer
   .field           etiket + girdi + ipucu        .field-row  yan yana iki alan
   .field__label    üst etiket (BÜYÜK HARF)       .field__required (*) · .field__optional ((opsiyonel))
   .field__hint     alttaki açıklama
   .input           metin/e-posta/sayı/arama; <select> ve <textarea> da .input'tur
                    --search (solda ikon; .input-wrap içinde) · --multiline · durum: .is-invalid
   .select          <select> sarmalayıcısı (sağda ok ikonu)
   .check           onay kutusu + metin */
.form { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.field-row { display: flex; gap: var(--space-2-5); }
.field-row > .field { flex: 1; }
.field__label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.field__required { color: var(--color-accent); }
.field__optional { color: var(--color-text-muted); font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); text-transform: none; }
.field__hint { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }

.input {
  width: 100%;
  min-height: var(--size-control-md);
  padding: var(--space-2-5) var(--space-3);
  border: var(--size-border-strong) solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-control-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duration-fast);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { border-color: var(--color-accent); }
.input.is-invalid { border-color: var(--color-danger); }
.input--multiline { min-height: 120px; resize: vertical; }
.input--center { text-align: center; }

.input-wrap { position: relative; flex: 1; }
.input-wrap > .icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--icon-md);
  pointer-events: none;
}
.input--search { padding-left: var(--space-10); background: var(--color-fill); font-size: var(--text-sm); }

.select { position: relative; }
.select > .input { padding-right: var(--space-10); cursor: pointer; }
.select > .icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--icon-lg);
  pointer-events: none;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}
.check input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--color-accent); }
.check--sm { gap: var(--space-1-5); color: var(--color-text-secondary); font-size: var(--text-xs); }
.check--sm input { width: auto; height: auto; }
}


/* ---- components/slider.css ---- */
@layer components {
/* Kaydırıcı — <input type="range" class="slider">. Dolu kısım --bas/--son değişkenleriyle çizilir
   (iki yönlü kaydırıcıda ortadan); değerleri ui.sliderPaint() ayarlar, sürüklemeyi ui.sliderDrag() yönetir
   (çubuğun her yerinden, iPhone dahil).
   .slider-row    tek satır: ad/ikon · kaydırıcı · değer (fotoğraf düzenleyici)
   .slider-field  üstte ad + değer, altta uç değerler (gelir varsayımları)
   Satır sonunda küçük düğme olabilir (icon-btn--accent icon-btn--sm: sıfırla/ortala); düğmesiz satırda yerine .slider-row__spacer.
   Pasif: kapsayıcıda .is-disabled */
.slider {
  --bas: 0%;
  --son: 0%;
  flex: 1;
  width: 100%;
  height: var(--size-control-xs);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
}
.slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-track) var(--bas), var(--color-accent) var(--bas),
                              var(--color-accent) var(--son), var(--color-track) var(--son));
}
.slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-track) var(--bas), var(--color-accent) var(--bas),
                              var(--color-accent) var(--son), var(--color-track) var(--son));
}
.slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: var(--shadow-thumb);
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: var(--shadow-thumb);
}
.slider:active::-webkit-slider-thumb, .slider.is-dragging::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-focus); }
.slider:disabled { cursor: default; }

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-control-md);
  transition: opacity var(--duration-fast);
}
.slider-row.is-disabled, .slider-field.is-disabled { opacity: .4; }
/* Satır sonundaki küçük düğme (ortala, 0°): basılabilirken vurgu renginde, pasifken sönük — durum açıkça okunur */
/* Satır sonundaki küçük düğmenin (icon-btn--sm) yeri: düğmesiz satır düğmeli satırlarla hizalı kalır */
.slider-row__spacer { flex-shrink: 0; width: var(--size-control-xs); }
.slider-row__label { min-width: 58px; color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.slider-row > .icon { color: var(--color-text-muted); font-size: var(--icon-lg); }
.slider-row__value {
  min-width: 48px;
  padding: var(--space-1) 0;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.slider-row__value.is-snapped { color: var(--color-accent); }   /* değer bir yapışma noktasına oturdu */

.slider-field { display: block; padding: var(--space-2) 0; transition: opacity var(--duration-fast); }
.slider-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.slider-field__label { color: var(--color-text-secondary); font-size: var(--text-sm); }
.slider-field__value {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slider-field__range { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: var(--text-2xs); }
}


/* ---- components/switch.css ---- */
@layer components {
/* Anahtar — <button role="switch" aria-checked> . İçinde .switch__track > .switch__thumb ve metin. */
.switch {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2-5);
  min-height: var(--size-control-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.switch__track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-track);
  transition: background-color var(--duration-fast);
}
.switch__thumb {
  position: absolute;
  top: var(--space-0-5);
  left: var(--space-0-5);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: var(--shadow-thumb);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.switch[aria-checked="true"] .switch__track { background: var(--color-accent); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(18px); }
.switch:focus-visible { outline-offset: 3px; border-radius: var(--radius-full); }
}


/* ---- components/card.css ---- */
@layer components {
/* Kart — yüzey + kenarlık + hafif gölge.
   İç boşluk: --pad-sm (10) · --pad-md (20) · --pad-lg (24) · --flush (0, içerik kenara dayanır)
   Köşe:      varsayılan 16 · --xl (24) · --2xl (32)
   Tür:       --link (tıklanır; üzerine gelince yükselir) · --soft (vurgu degradesi) · --sunken (iç içe gömülü kutu)
   Parçalar:  .card__head (başlık + sağda eylem) · .card__title · .card__header (üst şerit, BÜYÜK HARF) */
.card {
  position: relative;
  border: var(--size-border) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.card--pad-sm { padding: var(--space-2-5); }
.card--pad-md { padding: var(--space-5); }
.card--pad-lg { padding: var(--space-6); }
.card--flush { overflow: hidden; }
.card--xl { border-radius: var(--radius-xl); }
.card--2xl { border-radius: var(--radius-2xl); }

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.card--link:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.card--soft { border-color: var(--color-accent-a15); background: var(--gradient-accent-soft); box-shadow: none; overflow: hidden; }
.card--soft::before {   /* sağ üstte yavaşça nefes alan vurgu halesi */
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-12));
  right: calc(-1 * var(--space-12));
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--gradient-accent-glow);
  animation: card-glow var(--duration-loop-slow) ease-in-out infinite;
  pointer-events: none;
}
@keyframes card-glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } }
.card--soft > * { position: relative; }

.card--sunken { border: 0; background: var(--color-fill); box-shadow: none; }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.card__title { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); }
.card__header {
  padding: var(--space-3) var(--space-3-5) var(--space-2);
  border-bottom: var(--size-border) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
}


/* ---- components/list.css ---- */
@layer components {
/* Liste satırları.
   .list-row   küçük resim/ikon · başlık + alt satır · sağda değer/eylem   (sepet, sipariş özeti, siparişler)
               parçalar: __thumb (--lg, --icon: resim yerine ikon) · __body · __title · __sub · __end · __value
               --action  dokunulabilir satır (<button>; parçalar <span>); sondaki ikon dokunulabildiğini gösterir
   .kv         anahtar–değer satırı (otomat bilgileri, gelir dökümü, özet satırları)
               --total kalın son satır · değer tonları: .kv__value--success/--danger/--muted
   .divided    içindeki satırları ince çizgiyle ayırır (son satır çizgisiz) */
.divided > * + * { border-top: var(--size-border) solid var(--color-border); }
.divided--soft > * + * { border-top-color: var(--color-fill); }

.list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3-5); }
.list-row--top { align-items: flex-start; }
.list-row--action {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.list-row--action:active { background: var(--color-fill); }
.list-row--action:focus-visible { outline-offset: calc(-1 * var(--size-focus-width)); }   /* taşan kartta kırpılmasın */
.list-row--action > .icon { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--icon-md); }
.list-row__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: var(--size-border) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-fill);
  object-fit: cover;
  overflow: hidden;
}
.list-row__thumb--lg { width: 52px; height: 52px; border-radius: var(--radius-md); }
.list-row__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.list-row__thumb--icon { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.list-row__body { flex: 1; min-width: 0; }
.list-row__title { display: block; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.list-row__title--strong { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.list-row__sub { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.list-row__end { flex-shrink: 0; text-align: right; }
.list-row__value { color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }

.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.kv__label { color: var(--color-text-muted); }
.kv__value { max-width: 65%; color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; }
.kv__value--success { color: var(--color-success); font-weight: var(--weight-semibold); }
.kv__value--danger { color: var(--color-danger); font-weight: var(--weight-semibold); }
.kv__value--muted { color: var(--color-text-muted); }
.kv__value--accent { color: var(--color-accent); }
.kv--total { color: var(--color-text); font-weight: var(--weight-bold); }
.kv--total .kv__value { font-weight: var(--weight-bold); }
.kv--inset { padding: var(--space-2-5) var(--space-3-5); }
}


/* ---- components/notice.css ---- */
@layer components {
/* Bilgi kutusu — ikon + kısa metin (karekod gerekli, test modu, otomat bağlı …).
   Ton: varsayılan vurgu · --danger · --magic (kırmızıdan maviye hafif degrade; ipucu). Metindeki <b> vurgulanır.
   Kapatılabilir: .notice__close (sağ üst köşede çarpı).
   .note — tek satırlık küçük açıklama (gelir notu); --danger uyarı rengi. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3-5);
  border: var(--size-border) solid var(--color-accent-border);
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
}
.notice > .icon { margin-top: var(--space-0-5); color: var(--color-accent); font-size: var(--icon-lg); }
.notice__text { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.notice__text b { color: var(--color-accent-strong); font-weight: var(--weight-bold); }
.notice--danger { border-color: var(--color-danger-border); background: var(--color-danger-subtle); }
.notice--danger > .icon { color: var(--color-danger); }
.notice--magic { border-color: var(--color-magic-border); background: var(--gradient-magic); }
.notice--magic > .icon { color: var(--color-magic-icon); }
.notice__text .icon { font-size: var(--icon-sm); vertical-align: -.2em; }   /* metin içindeki ikon (ör. kalem) yazı boyunda */
.notice:has(> .notice__close) { padding-right: var(--space-10); }   /* çarpı metnin üstüne binmesin */
.notice__close { position: absolute; top: var(--space-1-5); right: var(--space-1-5); }

.note { color: var(--color-text-muted); font-size: var(--text-xs); }
.note--danger { color: var(--color-danger); font-weight: var(--weight-semibold); }
}


/* ---- components/overlay.css ---- */
@layer components {
/* Katmanlar — açılır her şey bu üç desenden biridir; açma/kapama ui.open(el) / ui.close(el) ile
   (.is-open sınıfı, odak yönetimi, Esc, arka plan kaydırma kilidi).
   .backdrop  karartma perdesi (--drawer / --sheet: hangi katmanın altında olduğu)
   .drawer    soldan açılan menü          parçalar: __header · __body · __footer
   .sheet     alttan açılan panel          parçalar: __handle · __header · __title · __meta · __body · __footer
              --confirm: ortalanmış kısa onay (başlık + metin + düğmeler)
   .dialog    ortada pencere (kendi perdesiyle; her zaman açık/beyaz zemin)  --blur · katman: --onboarding / --over-editor
              .dialog__panel  --sm (340) · --flush (iç boşluksuz)
              parçalar: __close · __header · __heading · __title · __text · __actions */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base), visibility 0s linear var(--duration-base);
}
.backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--duration-base); }
.backdrop--drawer { z-index: calc(var(--z-drawer) - 1); }
.backdrop--sheet { z-index: calc(var(--z-sheet) - 1); }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(var(--size-drawer), 86vw);
  height: 100dvh;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}
.drawer.is-open { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-standard); }
.drawer__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--size-header);
  padding: 0 var(--space-3) 0 var(--space-5);
  border-bottom: var(--size-border) solid var(--color-border);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.drawer__footer { padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }

.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  max-width: var(--size-content-app);
  max-height: 80dvh;
  margin: 0 auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}
.sheet.is-open { transform: none; visibility: visible; transition: transform var(--duration-slow) var(--ease-standard); }
.sheet.is-dragging { transition: none; }
.sheet__handle { display: flex; flex-shrink: 0; justify-content: center; padding: var(--space-2-5) 0 var(--space-1); }
.sheet__handle::before { content: ''; width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--color-border); }
.sheet__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-5) var(--space-3-5);
  border-bottom: var(--size-border) solid var(--color-border);
}
.sheet__title { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); }
.sheet__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.sheet__body { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.sheet__body > .list-row { padding: var(--space-2-5) var(--space-5); }
.sheet__footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: var(--size-border) solid var(--color-border);
}
.sheet--confirm {
  max-width: 400px;
  padding: var(--space-6) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom));
  text-align: center;
}
.sheet--confirm .sheet__title { margin-bottom: var(--space-1-5); }
.sheet__text { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base), visibility 0s linear var(--duration-base);
}
.dialog.is-open { opacity: 1; visibility: visible; transition: opacity var(--duration-base); }
.dialog--blur { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dialog--onboarding { z-index: var(--z-onboarding); }
.dialog--over-editor { z-index: calc(var(--z-editor-overlay) + 1); }

.dialog__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - var(--space-10));
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-xl);
  transform: translateY(12px) scale(.98);
  transition: transform var(--duration-base) var(--ease-out);
}
.dialog.is-open .dialog__panel { transform: none; }
.dialog__panel--sm { max-width: 340px; text-align: center; }
.dialog__panel--flush { padding: 0; overflow: hidden; }
.dialog__close { position: absolute; top: var(--space-3); right: var(--space-3); }
.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--size-border) solid var(--color-border);
}
.dialog__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
.dialog__heading .icon { color: var(--color-accent); font-size: var(--icon-md); }
.dialog__title { margin-bottom: var(--space-1-5); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); }
.dialog__text + .dialog__text { margin-top: calc(-1 * var(--space-3)); }
.dialog__text { margin-bottom: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
}


/* ---- components/toast.css ---- */
@layer components {
/* Bildirim — kısa süreli mesaj; ui.toast('metin') gösterir. Ekranın üstünde çıkar, alttaki düğmeleri kapatmaz.
   --card: ortada ikonlu kart (ör. fotoğraf sınırı uyarısı). */
.toast {
  position: fixed;
  top: calc(var(--size-header) + var(--space-4) + env(safe-area-inset-top));
  left: 50%;
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(calc(100vw - var(--space-8)), 440px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-16px);
  transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-out);
}
.toast.is-open { opacity: 1; transform: translateX(-50%); }

.toast--card {
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(86vw, 320px);
  padding: var(--space-6);
  border: var(--size-border) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  transform: translate(-50%, -50%) scale(.95);
}
.toast--card.is-open { transform: translate(-50%, -50%); }
.toast--card > .icon { color: var(--color-accent); font-size: var(--icon-2xl); }
}


/* ---- components/tabs.css ---- */
@layer components {
/* Sekme çubuğu — hap içinde sekmeler (düzenleyicide Düzenle / Filtre / Stüdyo / Metin, panel sekmeleri). Seçili: aria-selected="true".
   Seçili sekmenin arkasındaki zemin (::before) sekmeler arasında kayarak geçer; yeri ve genişliği yalnızca CSS'ten
   gelir (kaç sekme var, kaçıncısı seçili), JS gerekmez. 2–6 sekme desteklenir. */
.tabbar {
  --tab: 0;
  --tabs: 1;
  position: relative;
  display: flex;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-fill);
}
.tabbar::before {
  content: "";
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: var(--space-1);
  width: calc((100% - 2 * var(--space-1)) / var(--tabs));
  border-radius: var(--radius-full);
  background: var(--color-fill-strong);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--tab) * 100%));
  transition: transform var(--duration-base) var(--ease-out);
}
.tabbar:has(> :nth-child(2):last-child) { --tabs: 2; }
.tabbar:has(> :nth-child(3):last-child) { --tabs: 3; }
.tabbar:has(> :nth-child(4):last-child) { --tabs: 4; }
.tabbar:has(> :nth-child(5):last-child) { --tabs: 5; }
.tabbar:has(> :nth-child(6):last-child) { --tabs: 6; }
.tabbar:has(> :nth-child(2)[aria-selected="true"]) { --tab: 1; }
.tabbar:has(> :nth-child(3)[aria-selected="true"]) { --tab: 2; }
.tabbar:has(> :nth-child(4)[aria-selected="true"]) { --tab: 3; }
.tabbar:has(> :nth-child(5)[aria-selected="true"]) { --tab: 4; }
.tabbar:has(> :nth-child(6)[aria-selected="true"]) { --tab: 5; }
.tabbar__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: var(--size-tap);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}
.tabbar__item .icon { font-size: var(--icon-md); }
.tabbar__item[aria-selected="true"] { color: var(--color-text); }
.tabbar__item:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--size-focus-width)); }
/* :has() desteklemeyen eski tarayıcılar: kayan zemin yerine seçili sekmenin kendi zemini */
@supports not selector(:has(*)) {
  .tabbar::before { display: none; }
  .tabbar__item[aria-selected="true"] { background: var(--color-fill-strong); }
}
}


/* ---- components/accordion.css ---- */
@layer components {
/* Akordeon — soru/cevap. Düğmede aria-expanded; açık öğe .is-open. */
.accordion { border-top: var(--size-border) solid var(--color-border); }
.accordion__item { border-bottom: var(--size-border) solid var(--color-border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-align: left;
  transition: color var(--duration-fast);
}
.accordion__trigger:hover, .accordion__item.is-open .accordion__trigger { color: var(--color-accent); }
.accordion__trigger .icon {
  color: var(--color-text-muted);
  font-size: var(--icon-lg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.accordion__item.is-open .accordion__trigger .icon { color: var(--color-accent); transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-standard);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
}


/* ---- components/stat.css ---- */
@layer components {
/* Gösterge (KPI) — etiket · büyük değer · alt açıklama.
   Tür:   varsayılan gömülü kutu · --card (kart; bağlantıysa üzerine gelince yükselir) · --alert (dikkat)
          --center (ortalanmış, değer vurgu renginde: otomat istatistiği)
   Değer: --positive / --negative (kazanç/zarar)
   .stat-grid göstergeleri dizer (2 sütun; geniş ekranda 4). */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stat-grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.stat-grid--row { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--space-2); }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-fill);
  color: inherit;
  text-decoration: none;
}
.stat__label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.stat__label .icon { font-size: var(--icon-md); }
.stat__value {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat__sub { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.stat--positive .stat__value { color: var(--color-success); }
.stat--negative .stat__value { color: var(--color-danger); }

.stat--card {
  gap: var(--space-1-5);
  padding: var(--space-4) var(--space-5);
  border: var(--size-border) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast), transform var(--duration-fast) var(--ease-standard);
}
.stat--card .stat__value { font-size: var(--text-xl); }
.stat--card .stat__sub { color: var(--color-text-muted); }
a.stat--card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.stat--alert { border-color: var(--color-accent-a40); background: linear-gradient(135deg, var(--color-accent-subtle) 0%, var(--color-surface) 70%); }
.stat--alert .stat__value, .stat--alert .stat__label { color: var(--color-accent); }

.stat--center { align-items: center; padding: var(--space-3) var(--space-1); border-radius: var(--radius-lg); text-align: center; }
.stat--center .stat__value { order: -1; color: var(--color-accent); font-size: var(--text-lg); white-space: nowrap; }

@media (min-width: 600px) { .stat-grid:not(.stat-grid--auto):not(.stat-grid--row) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}


/* ---- components/progress.css ---- */
@layer components {
/* İlerleme çubuğu — genişliği JS verir (style.width = '40%'). */
.progress { height: var(--space-1-5); overflow: hidden; border-radius: var(--radius-full); background: var(--color-border); }
.progress__bar { width: 0; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); transition: width var(--duration-reveal) var(--ease-standard); }
.progress__bar.is-instant { transition: none; }

/* Durum listesi — adım adım sipariş durumu (nokta + metin). Satır: .is-done / .is-active */
.status-list { overflow: hidden; border: var(--size-border) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-align: left; }
.status-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); color: var(--color-text); font-size: var(--text-sm); }
.status-list__item + .status-list__item { border-top: var(--size-border) solid var(--color-fill); }
.status-list__item::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.status-list__item.is-done::before { background: var(--color-success); }
.status-list__item.is-active::before { background: var(--color-accent); animation: status-pulse var(--duration-loop-fast) ease-in-out infinite; }
@keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.6); } }

/* Durum noktası — otomat çevrimiçi/çevrimdışı/hata */
.status-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-muted); }
.status-dot--success { background: var(--color-success); }
.status-dot--danger { background: var(--color-danger); }
}


/* ---- components/text.css ---- */
@layer components {
/* Metin stilleri — başlık ve yazı ölçeği yalnızca bunlarla kullanılır.
   .display-xl/-lg/-md/-sm   büyük başlıklar (akışkan boyut; <em> vurgu rengi)
   .heading-lg/-md/-sm       bölüm/kart başlıkları
   .eyebrow                  başlık üstü kısa etiket (vurgu rengi)
   .overline                 küçük BÜYÜK HARF bölüm etiketi
   .lead                     başlık altı açıklama   .body-sm · .caption (içindeki bağlantı altı çizili) · .text-muted · .text-center
   .empty                    boş liste / yükleniyor mesajı
   .prose                    uzun metin (yasal sayfalar): içindeki h2, h3, p, ul/ol, table, a, strong kendiliğinden biçimlenir */
.display-xl, .display-lg, .display-md, .display-sm {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}
.display-xl { font-size: var(--text-display-xl); line-height: var(--leading-none); }
.display-lg { font-size: var(--text-display-lg); line-height: var(--leading-tight); }
.display-md { font-size: var(--text-display-md); line-height: var(--leading-tight); }
.display-sm { font-size: var(--text-display-sm); line-height: var(--leading-tight); }
.display-xl em, .display-lg em, .display-md em, .display-sm em, .heading-lg em { color: var(--color-accent); }

.heading-lg { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.heading-md { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.heading-sm { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: var(--leading-snug); }

.eyebrow { color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); }
.overline {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.lead { color: var(--color-text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }
.body-sm { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.caption { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }
.caption a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.text-muted { color: var(--color-text-muted); }

/* Boş/yükleniyor durumu */
.empty { padding: var(--space-10) var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }

/* Uzun metin: okunur satır aralığı, bölümler arası nefes; tablolar satırı doldurur, uzun değer alt satıra geçer */
.prose { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.prose { margin-top: var(--space-8); }
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-8); color: var(--color-text); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.prose h3 { margin-top: var(--space-5); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-1-5); }
.prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; overflow-wrap: break-word; }   /* iki sütunlu (ad: değer) tablolar için */
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: var(--size-border) solid var(--color-border); text-align: left; vertical-align: top; }
.prose th { color: var(--color-text); font-weight: var(--weight-semibold); }
}


/* ---- layout/site.css ---- */
@layer layout {
/* Site iskeleti — üst çubuk, soldan açılan menü, alt bilgi ve tanıtım sayfalarının bölüm düzeni. */
.site { display: flex; flex-direction: column; min-height: 100dvh; }

/* Üst çubuk */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--size-header);
  padding: 0 var(--space-4);
  border-bottom: var(--size-border) solid var(--color-border);
  background: var(--color-surface);
}
.site-header__logo { display: flex; align-items: center; height: var(--size-logo); }
.site-header__logo img { width: auto; height: 100%; }
.site-header .badge { position: absolute; top: 2px; right: 2px; }

.logo-sm { width: auto; height: var(--size-logo-sm); }
.brand { display: flex; align-items: center; }

/* Menü bağlantıları (çekmece) */
.nav-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  padding: var(--space-3-5) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast);
}
.nav-list__link:hover { background: var(--color-fill); }
.nav-list__link .icon { color: var(--color-text-muted); font-size: var(--icon-lg); }
.nav-list__link[aria-current="page"] { background: var(--color-accent-subtle); color: var(--color-accent); }
.nav-list__link[aria-current="page"] .icon { color: var(--color-accent); }

/* Alt bilgi */
.site-footer { position: relative; z-index: 2; margin-top: auto; border-top: var(--size-border) solid var(--color-border); background: var(--color-surface); }   /* sabit (sticky) giriş görselinin üstünde: en altta arkadan görünmez */
.site-footer__inner {
  max-width: var(--size-content-page);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom));
}
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); padding: var(--space-10); }
.site-footer__divider { height: var(--size-border); margin: var(--space-8) 0; background: var(--color-border); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-footer__link {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.site-footer__link:hover { color: var(--color-accent); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-5); }
.site-footer__legal .site-footer__link { font-size: var(--text-xs); }
.site-footer__copy { margin-top: var(--space-5); }

/* Tanıtım sayfası bölümleri */
.section { width: 100%; max-width: var(--size-content-page); margin: 0 auto; padding: var(--space-12) var(--space-6); }
.section--top { padding-top: var(--space-16); }
.section--wide { max-width: var(--size-content-wide); }   /* iki sütunlu tanıtım bölümleri (görsel + metin) */
.section--tight { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section__head { margin-bottom: var(--space-10); text-align: center; }
.section__head .eyebrow { margin-bottom: var(--space-3); }
.section__head--left { text-align: left; }
.section__lead { max-width: 560px; margin: var(--space-5) auto 0; }
.rule { height: var(--size-border); max-width: var(--size-content-page); margin: 0 auto; background: var(--color-border); }
}


/* ---- layout/app-shell.css ---- */
@layer layout {
/* Sipariş akışı = uygulama iskeleti (body.app).
   Belge hiç kaymaz ve yaylanmaz; üst çubuk, adım çubuğu ve alt düğmeler sabittir. Yalnızca etkin ekranın orta
   alanı (.screen__scroll), içerik sığmazsa kendi içinde kayar. iPhone tarayıcıları overflow:hidden'ı parmakla
   kaydırmada tam uygulamadığı için kök ve gövde ekrana sabitlenir. */
html:has(> body.app) { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
body.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body.app > .site-header { position: relative; }

/* Adım çubuğu */
.steps {
  display: flex;
  flex: none;
  align-items: center;
  padding: var(--space-3) max(var(--space-5), calc((100% - var(--size-content-app)) / 2));
  border-bottom: var(--size-border) solid var(--color-border);
  background: var(--color-surface);
}
.steps__item { display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--space-1-5); }
.steps__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: var(--size-border-strong) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-fill);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
}
.steps__icon img { width: 52px; height: 52px; object-fit: contain; opacity: .4; transition: opacity var(--duration-fast); }
.steps__label {
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  white-space: nowrap;
}
.steps__line {
  flex: 1;
  height: 2px;
  margin: 0 var(--space-1-5) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background-color var(--duration-slow);
}
.steps__item[aria-current="step"] .steps__icon { border-color: var(--color-accent); background: var(--color-accent-subtle); box-shadow: var(--shadow-accent-sm); }
.steps__item[aria-current="step"] .steps__label { color: var(--color-accent); }
.steps__item.is-done .steps__icon { border-color: var(--color-success); background: var(--color-success-subtle); }
.steps__item.is-done .steps__label { color: var(--color-success); }
.steps__item[aria-current="step"] img, .steps__item.is-done img { opacity: 1; }
.steps__line.is-done { background: var(--color-success); }

/* Ekranlar */
.screen { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.screen__scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.screen__content { width: 100%; max-width: var(--size-content-app); margin: 0 auto; padding: var(--space-4) var(--space-4) 0; }
.screen__top { display: flex; flex: none; flex-direction: column; gap: var(--space-2); width: 100%; max-width: var(--size-content-app); margin: 0 auto; padding: var(--space-3) var(--space-4) 0; }

.bottom-bar {
  position: relative;
  z-index: var(--z-sticky);
  flex: none;
  padding: var(--space-3) max(var(--space-4), calc((100% - var(--size-content-app)) / 2)) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: var(--size-border) solid var(--color-border);
  background: var(--color-surface);
}

/* Kısa ekranlar (tarayıcı çubuklarıyla küçülen telefon ekranı): her adım tek ekrana sığsın */
@media (max-height: 720px) {
  .steps { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .steps__item { gap: var(--space-1); }
  .steps__icon { width: 48px; height: 48px; border-radius: var(--radius-md); }
  .steps__icon img { width: 38px; height: 38px; }
}
@media (max-height: 600px) {
  .steps__label { display: none; }
}
}


/* ---- layout/panel.css ---- */
@layer layout {
/* Panel iskeleti — yönetim: masaüstünde sabit yan menü, mobilde soldan açılan çekmece.
   İş ortağı: üst çubuk + tek sütun. Giriş: ortada kart. */
body.panel { --panel-sidebar: var(--size-panel-sidebar); }

.panel-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: var(--panel-sidebar);
  border-right: var(--size-border) solid var(--color-border);
  background: var(--color-surface);
}
.panel-sidebar__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.panel-sidebar__close { display: none; margin-left: auto; }
.panel-nav { display: flex; flex: 1; flex-direction: column; gap: var(--space-0-5); overflow-y: auto; padding: var(--space-1-5) var(--space-3); }
.panel-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 42px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.panel-nav__link .icon { font-size: var(--icon-lg); }
.panel-nav__link:hover { background: var(--color-fill); color: var(--color-text); }
.panel-nav__link[aria-current="page"] { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: var(--weight-semibold); }
.panel-nav__label { flex: 1; }
.panel-sidebar__foot { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-2-5) var(--space-3) var(--space-3-5); border-top: var(--size-border) solid var(--color-border); }
.panel-sidebar__foot .panel-nav__link { color: var(--color-text-muted); }

.panel-main { min-height: 100dvh; margin-left: var(--panel-sidebar); }
.panel-content { max-width: var(--size-content-wide); margin: 0 auto; padding: var(--space-10) var(--space-10) var(--space-16); outline: none; }
.panel-content--narrow { max-width: var(--size-content-page); padding: var(--space-6); }
.panel-topbar { display: none; }
.panel-topbar .badge--dot { position: absolute; top: var(--space-2); right: var(--space-2); }

.panel-section__head { margin-bottom: var(--space-5); }
.panel-section__head + .panel-intro { margin-top: calc(-1 * var(--space-3)); }
.panel-title { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-black); }
.panel-intro { margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.panel-filter { margin-bottom: var(--space-4); }
.panel-intro b { color: var(--color-text-secondary); font-weight: var(--weight-semibold); }

/* İş ortağı üst çubuğu */
.panel-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--size-border) solid var(--color-border);
  background: var(--color-surface);
}
.panel-brand { display: flex; align-items: center; gap: var(--space-3); }
.panel-brand__divider { width: var(--size-border); height: 20px; background: var(--color-border); }
.panel-brand__role { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); }
.panel-header__link { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }

/* Giriş sayfası */
.auth { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: var(--space-6); }
.auth__card { width: 100%; max-width: 380px; padding: var(--space-10) var(--space-8); text-align: center; }
.auth__logo { width: auto; height: var(--size-logo); margin: 0 auto; }
.auth__sub { margin: var(--space-2) 0 var(--space-8); }

/* Geniş ekranda otomat kartları iki sütun */
@media (min-width: 1320px) {
  .panel-machines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .panel-machines > .empty { grid-column: 1 / -1; }
}

/* Mobil ve tablet: menü soldan açılan çekmece */
@media (max-width: 899px) {
  .panel-sidebar {
    width: min(300px, 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
  }
  .panel-sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform var(--duration-base) var(--ease-standard); }
  .panel-sidebar__close { display: inline-flex; }
  .panel-main { margin-left: 0; }
  .panel-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-3);
    padding-top: calc(var(--space-2) + env(safe-area-inset-top));
    border-bottom: var(--size-border) solid var(--color-border);
    background: var(--color-surface);
  }
  .panel-content { padding: var(--space-5) var(--space-4) var(--space-12); }
}
}


/* ---- pages/order.css ---- */
@layer pages {
/* Sipariş akışı desenleri — 1. adım (fotoğraf seç), 2. adım (ödeme), 3. adım (baskı takibi), karekod tarayıcı,
   baskı önizlemesi. Tüm görünüm bileşenlerden gelir; burada yalnızca bu akışa özgü yerleşimler vardır. */

/* Karşılama (fotoğraf yokken): baskı yığını, başlık, tek büyük düğme. Ekranın ortasında durur; alt çubuk boşsa gizlenir. */
.screen.is-empty .screen__scroll { display: flex; flex-direction: column; }
.screen.is-empty .screen__content { margin: auto; padding-bottom: var(--space-10); }
.screen.is-empty .bottom-bar:not(:has(> :not([hidden]))) { display: none; }
.order-hero { padding: var(--space-5) 0 var(--space-5); text-align: center; }
.order-hero__icon { margin-bottom: var(--space-2-5); color: var(--color-accent); font-size: var(--icon-3xl); }
.order-hero__title { margin-bottom: var(--space-1-5); font-size: var(--text-lg); line-height: var(--leading-snug); }
.order-hero__title em { color: var(--color-accent); font-weight: var(--weight-black); }
.order-hero__sub { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Üç baskı kağıdı yelpaze gibi açılır (ilk açılışta bir kez); kağıtların beyaz kenarı baskıdaki payı andırır */
.print-stack { position: relative; width: 244px; height: 214px; margin: 0 auto var(--space-5); }
.print-stack__item {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 128px;
  margin: 0 auto;   /* kağıt yığının ortasında */
  padding: var(--space-1-5);   /* dört kenarda eşit beyaz pay */
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  animation: print-fan var(--duration-slow) var(--ease-spring) both;
}
.print-stack__item img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.print-stack__item:nth-child(1) { --fan: translateX(-68px) rotate(-12deg); }
.print-stack__item:nth-child(2) { --fan: translateX(68px) rotate(11deg); animation-delay: var(--duration-fast); }
.print-stack__item:nth-child(3) { --fan: translateY(-12px) rotate(-2deg); z-index: 1; }
@keyframes print-fan { from { transform: none; } to { transform: var(--fan); } }

/* Ana eylem: galeriyi açan büyük düğme (dosya seçiciyi açan <label>) ve altındaki kısa bilgi */
.upload { margin-top: var(--space-1); box-shadow: var(--shadow-accent-md); }
.upload__hint { margin: var(--space-2-5) 0 var(--space-4); text-align: center; }

.photo-list-title { margin-top: var(--space-1); }
/* Kampanya: "her N. baskın hediye" sayacı (KABUL B19). Yuvarlaklar baskı adedine göre dolar; sonuncusu hediye. */
.gift-meter { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-3); text-align: center; }
.gift-meter__title { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.gift-meter__title .icon { color: var(--color-accent); font-size: var(--icon-md); }
.gift-meter__dots { display: flex; align-items: center; gap: var(--space-2-5); margin: 0; padding: 0; list-style: none; }
.gift-meter__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-xs);
  height: var(--size-control-xs);
  border: var(--size-border-strong) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: background-color var(--duration-base), border-color var(--duration-base), color var(--duration-base);
}
.gift-meter__dot .icon { font-size: var(--icon-sm); }
.gift-meter__dot.is-done { border-color: var(--color-success); background: var(--color-success); color: var(--color-text-on-accent); }
.gift-meter__dot--gift { border-style: dashed; border-color: var(--color-accent); color: var(--color-accent); }
.gift-meter__dot--gift.is-done { border-style: solid; border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-accent); }
.gift-meter__dot.is-new .icon { animation: pop var(--duration-base) var(--ease-spring); }
.gift-meter__text { color: var(--color-text-secondary); font-size: var(--text-xs); }
/* Hediye kazanılınca konfeti: iki kenardan az sayıda küçük kâğıt yolda hafifçe aşağı-yukarı açılarak sayaca doğru gelir, ortada toplanıp karışır,
   küçülerek söner (düşmez). Varış noktası, yoldaki kavis, dönüş ve gecikme her parçaya JS'ten (--dx, --dy, --kx, --ky,
   --rot, --gecikme). Hareketi azalt açıksa hiç oluşturulmaz. */
.confetti { position: fixed; inset: 0; z-index: var(--z-toast); overflow: hidden; pointer-events: none; }
.confetti__piece {
  position: absolute;
  top: var(--y);
  width: var(--space-2);
  height: var(--space-3);
  border-radius: var(--radius-xs);
  opacity: 0;
  animation: konfeti var(--duration-loop) var(--ease-standard) var(--gecikme) both;
}
.confetti__piece--left { left: 0; }
.confetti__piece--right { right: 0; }
.confetti__piece--a { background: var(--color-accent); }
.confetti__piece--b { background: var(--color-success); }
.confetti__piece--c { background: var(--color-chart-4); }
.confetti__piece--d { background: var(--color-chart-1); }
.confetti__piece--e { background: var(--color-chart-5); }
@keyframes konfeti {   /* ölçekler geometri: kenarda küçük doğar, yolda tam boy, ortada noktaya dek küçülür */
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.5); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: translate(var(--kx), var(--ky)) rotate(calc(var(--rot) * .6)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.15); }
}
.gift-meter__win { color: var(--color-accent); font-weight: var(--weight-bold); white-space: nowrap; }   /* "1 hediye kazandın (−100 TL)" */
.gift-meter.is-earned .gift-meter__text { color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.photo-list { display: flex; flex-direction: column; gap: var(--space-2-5); margin: var(--space-2) 0 var(--space-3); }

/* Fotoğraf kartı: solda baskının aynısı (dokununca düzenleyici), sağda ad/fiyat, boyut, düzenleme özeti, adet */
.photo-card { display: flex; align-items: stretch; gap: var(--space-3-5); }
.photo-card.is-invalid { border-color: var(--color-accent); }
.photo-card__print { position: relative; flex: 0 0 84px; align-self: center; }
.photo-card__paper {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-paper);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.photo-card__paper img { width: 100%; height: 100%; object-fit: cover; }
.photo-card__paper.is-loading img { opacity: .55; }
.photo-card__print:active .photo-card__paper { transform: scale(.96); }
.photo-card__print:focus-visible { outline: none; }
.photo-card__print:focus-visible .photo-card__paper { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: 3px; }
.photo-card__edit {   /* kağıdın içinde, alt kenara oturan tam yuvarlak hap */
  position: absolute;
  right: var(--space-1-5);
  bottom: var(--space-1-5);
  left: var(--space-1-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 28px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-glass);
  color: var(--color-on-image);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
}
.photo-card__edit .icon { font-size: var(--icon-xs); }
.photo-card__print.is-edited .photo-card__edit { background: var(--color-glass-accent); }

.photo-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }
.photo-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.photo-card__name { overflow: hidden; font-size: var(--text-sm); font-weight: var(--weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.photo-card__price { font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.photo-card__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }   /* fiyat, altında ölçü etiketi */
.photo-card__footer { display: flex; justify-content: flex-end; margin-top: auto; }
.photo-card .chip { padding-right: var(--space-1-5); padding-left: var(--space-1-5); gap: var(--space-1); }

/* Alt çubuk düzeni */
.bottom-bar .notice { margin-bottom: var(--space-2-5); }

/* 2. adım: ödeme */
.pay-hero { padding: var(--space-3-5) 0 var(--space-4); text-align: center; }
.order-note { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-3); text-align: center; }

/* 3. adım: baskı takibi */
.done { max-width: 400px; margin: 0 auto; padding: var(--space-8) var(--space-1) var(--space-6); text-align: center; }
.done__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-text-on-accent);
  animation: pop var(--duration-slow) var(--ease-spring);
}
.done__icon.is-failed { background: var(--color-danger); }
.done__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.done__text { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.done .progress { margin-bottom: var(--space-5); }
.done .status-list { margin-bottom: var(--space-5); }

/* Karekod tarayıcı */
.scanner { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--color-media); }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.scanner__box { position: relative; width: 54%; height: 54%; border: 2px solid var(--color-on-image-muted); border-radius: var(--radius-lg); }
.scanner__box::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  left: -2px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: scan var(--duration-loop) ease-in-out infinite;
}
@keyframes scan { 0%, 100% { top: -2px; } 50% { top: calc(100% - 1px); } }
.scanner__hint { padding: var(--space-3) var(--space-5); text-align: center; }

/* Baskı önizlemesi (koyu tam ekran) */
.dialog--immersive { padding: 0; background: var(--color-scrim-immersive); }
.preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); width: 100%; max-width: 360px; padding: var(--space-6); }
.preview__dismiss { position: absolute; inset: 0; }
.preview__close { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 2; }
.preview > * { position: relative; }
.preview__label { color: var(--color-text-muted); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.preview__paper {   /* ölçü ve kenar payını JS seçilen boyuta göre verir (baskının birebir aynısı) */
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  box-shadow: var(--shadow-paper-on-dark);
  transition: width var(--duration-fast), height var(--duration-fast), padding var(--duration-fast);
}
.preview__paper img { width: 100%; height: 100%; object-fit: fill; }
.preview__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3-5); width: 100%; }
.preview__controls .chip-group { width: 100%; max-width: 300px; }
.preview__controls .chip { min-height: var(--size-control-md); font-size: var(--text-sm); }

@media (max-height: 720px) {
  .order-hero { padding: var(--space-2-5) 0 var(--space-3); }
  .print-stack { height: 168px; margin-bottom: var(--space-3); transform: scale(.78); transform-origin: 50% 100%; }
  .done { padding: var(--space-4) var(--space-1) var(--space-3); }
  .done__icon { width: 52px; height: 52px; margin-bottom: var(--space-2-5); }
  .done__title { margin-bottom: var(--space-1); }
  .done__text { margin-bottom: var(--space-3); }
  .done .progress { margin-bottom: var(--space-3); }
  .done .status-list { margin-bottom: var(--space-2); }
}
@media (max-height: 600px) {
  .order-hero { padding: var(--space-1-5) 0 var(--space-2-5); }
  .order-hero__sub, .done__icon, .print-stack { display: none; }
}
}


/* ---- pages/editor.css ---- */
@layer pages {
/* Fotoğraf düzenleyici — koyu tam ekran (data-theme="dark"). Kağıt dik ve seçilen boyutun oranında; ekranda
   görülen = basılan. Bileşenler (düğme, segment, kaydırıcı, anahtar, sekme) koyu temada kendiliğinden uyum sağlar. */
.editor {
  position: fixed;
  inset: 0;
  z-index: var(--z-editor);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-bg);
  color: var(--color-text);
}
/* Dokunma/basılı tutma metin seçmez, telefonun büyüteç/kopyala menüsü açılmaz */
.editor, .editor * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.editor__bar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: var(--space-2); }
.editor__bar .btn { min-width: 72px; }
.editor__history { display: flex; gap: var(--space-2); }

.editor__stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
/* Kağıdı (beyaz zemin, pay, çerçeve) tuval kendisi çizer; kutunun kendi zemini olmaz — olsaydı tuvalin kenarında
   yarım piksel açıkta kalıp koyu çerçevenin yanında ince beyaz çizgi olarak görünürdü. */
.editor__paper { position: relative; border-radius: var(--radius-xs); box-shadow: var(--shadow-paper-on-dark); }
.editor__paper canvas { border-radius: var(--radius-xs); touch-action: none; cursor: grab; }
.editor__paper canvas:active { cursor: grabbing; }
/* Önizleme: kağıdın sağındaki boşlukta, kağıdın altıyla hizalı (yeri JS'ten; fotoğrafın üstüne binmez).
   Metin sürüklenirken gizlenir, aynı yerde çöp kutusu çıkar. */
.editor__preview {
  position: fixed;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  border-radius: var(--radius-lg);
  background: var(--color-fill-strong);
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}
.editor__preview .icon { font-size: var(--icon-md); }
.editor__badge {   /* basılı tutarken "Orijinal" */
  position: absolute;
  top: var(--space-2-5);
  left: 50%;
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-glass-strong);
  color: var(--color-on-image);
  box-shadow: var(--shadow-float);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  pointer-events: none;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(var(--size-blur-glass));
  backdrop-filter: blur(var(--size-blur-glass));
}

.editor__dock { flex-shrink: 0; border-top: var(--size-border) solid var(--color-border); background: var(--color-surface); }
.editor__dock .tabbar { margin: 0 var(--space-4) var(--space-3); }
/* Sabit yükseklik: en dolu sekme (Düzenle: şablon + çerçeve + renk/desen satırı) sığar; sekme değişince fotoğraf zıplamaz */
.editor__panel { display: flex; flex-direction: column; gap: var(--space-2); height: 244px; padding: var(--space-3) var(--space-4) var(--space-2); }
.editor__row { display: flex; align-items: center; gap: var(--space-2-5); }
.editor__row--split { justify-content: space-between; }
.editor__template { flex: 0 1 auto; }   /* Standart / Polaroid: içeriği kadar, sağda Çevir ve Sıfırla */
.editor__template .segmented__item { padding: 0 var(--space-3); }
.editor__actions { display: flex; align-items: center; gap: var(--space-1); }
.editor__row--frame { gap: var(--space-3-5); }
.editor__row--frame .slider-row { flex: 1; }

/* Filtre küçük resimleri */
.editor__effects { display: flex; gap: var(--space-2); padding: var(--space-0-5) 0 var(--space-2); overflow-x: auto; scrollbar-width: none; }   /* tek satır, yana kayar (Instagram gibi) */
.editor__effects::-webkit-scrollbar { display: none; }
.editor__effect { display: flex; flex: 0 0 64px; flex-direction: column; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--color-text-secondary); font-size: var(--text-2xs); white-space: nowrap; }
.editor__effect canvas { width: 100%; height: auto; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--radius-md); }
.editor__effect[aria-checked="true"] { color: var(--color-text); font-weight: var(--weight-semibold); }
.editor__effect[aria-checked="true"] canvas { border-color: var(--color-text); }

/* Düzenle araçları: ikon + ad, değişmişse değer rozeti */
.editor__tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.editor__tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1) var(--space-1-5);
  border-radius: var(--radius-md);
  background: var(--color-fill);
  color: var(--color-text-secondary);
  font-size: var(--text-2xs);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.editor__tool .icon { font-size: var(--icon-xl); }
.editor__tool[aria-pressed="true"] { background: var(--color-fill-strong); color: var(--color-text); font-weight: var(--weight-semibold); }
.editor__tool-value { position: absolute; top: var(--space-1); right: var(--space-1-5); color: var(--color-accent); font-size: var(--text-2xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* Çerçeve rengi: hazır renkler, desenler ve serbest renk seçici */
/* Tek satır: beyaz, siyah, üç desen, "Renk seç" (hepsi görünür; dar ekranda alta kayar) */
.swatches { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-2-5); min-width: 0; }
.swatch {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--swatch, transparent);   /* renk veridir: JS --swatch ile verir */
  box-shadow: inset 0 0 0 1px var(--color-control-border);
  cursor: pointer;
}
/* "Yok" (arka plansız): içi boş, çapraz çizgili yuvarlak */
.swatch--none { background: linear-gradient(135deg, transparent calc(50% - 1px), var(--color-text) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.swatch[aria-checked="true"], .swatch.is-selected { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); }
/* Serbest renk seçici: renk tayfı yuvarlağı ve "Renk seç" yazısı olan hap; seçilen renk yuvarlağın ortasında */
.swatch-pick {
  --swatch: transparent;
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1-5);
  height: 28px;
  padding: 0 var(--space-2-5) 0 var(--space-0-5);
  border-radius: var(--radius-full);
  background: var(--color-fill);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
}
.swatch-pick__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--swatch) 0 5px, transparent 5.5px), var(--gradient-hue);
}
.swatch-pick.is-selected { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); }
.swatch-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swatch-pick:focus-within { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: 3px; }

/* Tam ekran önizleme (yakınlaştır/kaydır) */
.editor-zoom { position: fixed; inset: 0; z-index: var(--z-editor-overlay); background: var(--color-scrim-immersive); animation: fade-in var(--duration-fast) ease; }
.editor-zoom__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.editor-zoom__stage img {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100dvh - 120px);
  box-shadow: var(--shadow-paper-on-dark);
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
}
.editor-zoom__close { position: absolute; top: calc(var(--space-3) + env(safe-area-inset-top)); right: var(--space-3); z-index: 1; }
.editor-zoom__hint { position: absolute; right: 0; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); left: 0; text-align: center; pointer-events: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 600px) {
  .editor__dock { width: 100%; max-width: 560px; margin: 0 auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* Metinler: tuvalde çizilir; bu katmandaki saydam kutular yalnızca dokunma alanıdır (kağıdın dışına taşmaz) */
.editor-texts { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; border-radius: var(--radius-xs); }
.editor-text {
  position: absolute;
  padding: var(--space-1-5);
  color: transparent;
  white-space: pre;   /* satır yüksekliği JS'ten: tuvaldeki çizimle aynı */
  text-align: center;
  touch-action: none;
  cursor: move;
  pointer-events: auto;
}
.editor-text:focus-visible, .editor-text.is-selected:focus-visible { outline: var(--size-focus-width) dashed var(--color-focus); }
/* Arka planlı metin: dolgu ve köşe yazı boyunun katı (--text-bg-*, METIN_ZEMIN'den; baskıyla aynı) */
.editor-text.is-filled { padding: var(--text-bg-y) var(--text-bg-x); border-radius: var(--radius-text-bg); }
/* Seçili metin: kesik çizgili çerçeve (büyütme ve döndürme iki parmakla ya da kaydırıcılarla) */
.editor-text.is-selected { outline: var(--size-border-strong) dashed color-mix(in srgb, var(--color-text) 62%, transparent);   /* %38 şeffaf */ outline-offset: var(--size-focus-offset); border-radius: var(--radius-xs); }
/* Ortaya hizalama kılavuzları */
/* Polaroid not ipucu: beyaz kağıdın alt boşluğunda kesik çizgili, soluk yazı. Yeri, yazı tipi ve boyu JS'ten (notun
   kendisiyle aynı); tuvale çizilmez, basılmaz. */
.editor-note {
  position: absolute;
  z-index: 1;
  padding: var(--space-1-5) var(--space-3);
  border: var(--size-border-strong) dashed var(--color-paper-hint);
  border-radius: var(--radius-sm);
  color: var(--color-paper-hint);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  cursor: text;
}
.editor-guide { position: absolute; z-index: 2; background: var(--color-accent); pointer-events: none; }
.editor-guide--v { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.editor-guide--h { top: 50%; right: 0; left: 0; height: 1px; transform: translateY(-50%); }

/* Metni sürüklerken çıkan çöp kutusu: kağıdın dışında (yerini JS seçer: sahnenin sağ alt köşesi, kağıdın altı ya da
   alt panel); üstüne gelince kırmızı ve büyük */
.editor-trash {
  position: fixed;
  z-index: var(--z-editor-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  border-radius: 50%;
  background: var(--color-fill-strong);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-spring), background-color var(--duration-fast);
}
.editor-trash .icon { font-size: var(--icon-lg); }
.editor-trash.is-hot { background: var(--color-danger); transform: scale(1.25); }

.editor__panel--dense { gap: var(--space-1-5); }   /* Metin: düğme ve dört kaydırıcı sığsın */

/* Metin yazma: açık tonlu, hafif perde (siyah da beyaz da okunur), fotoğraf arkada görünür. Perde her zaman tüm ekranı kaplar; içerik
   (gövde) klavye açılınca JS ile görünür alana sığdırılır, araçlar klavyenin hemen üstünde kalır. */
.text-compose {
  position: fixed;
  inset: 0;
  z-index: var(--z-editor-overlay);
  background: var(--color-scrim-soft);
  animation: fade-in var(--duration-fast) ease;
}
/* Yazarken düzenleyicinin kendi çubukları perdenin arkasında görünmez (yalnızca fotoğraf kalır) */
.editor.is-composing > .editor__bar, .editor.is-composing > .editor__dock, .editor.is-composing .editor__preview { visibility: hidden; }
.text-compose__tools .segmented { flex: 0 0 auto; background: var(--color-glass-strong); }
.text-compose__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.text-compose__stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: var(--space-4); }
.text-compose__input {
  width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  resize: none;
  overflow: hidden;
  font-size: var(--text-2xl);   /* yazı tipi, renk ve arka plan JS'ten (veri) */
  caret-color: var(--color-accent);
  -webkit-user-select: text;
  user-select: text;
}
.text-compose__input:focus { outline: none; }
.text-compose__input::placeholder { color: var(--color-on-image-muted); }
.text-compose__input.is-filled { padding: var(--text-bg-y) var(--text-bg-x); border-radius: var(--radius-text-bg); }
.text-compose__tools { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-3); }
/* Seçilen grubun seçenekleri tek satırda, yana kayar; yükseklik sabit: grup değişince düzen zıplamaz */
.text-compose__options { display: flex; align-items: center; min-height: var(--size-control-md); }
/* Renkler tek satır: çoğu telefonda kaydırmadan sığar (küçük yuvarlaklar, serbest renk yalnızca gökkuşağı yuvarlağı);
   çok dar ekranda yana kayar (dokunuş renk düğmesinde başlasa da kaydırma açıkça serbest) */
.text-compose__swatches { flex-wrap: nowrap; gap: var(--space-1-5); padding: var(--space-1); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; }
.text-compose__swatches .swatch, .text-compose__swatches .swatch-pick { width: 26px; height: 26px; touch-action: pan-x; }
.swatch-pick--dot { justify-content: center; padding: 0; }
.swatch-pick--dot .swatch-pick__dot { width: 26px; height: 26px; }
.text-compose__swatches::-webkit-scrollbar { display: none; }
.text-compose__fonts { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.text-compose__fonts::-webkit-scrollbar { display: none; }
.text-compose__fonts .chip { flex-shrink: 0; font-size: var(--text-md); }
}


/* ---- pages/onboarding.css ---- */
@layer pages {
/* İlk ziyaret tanıtımı — üç adım, numaralı halkalar arasında dikey ilerleme çizgisi. Pencere: .dialog--onboarding */
.onboarding { padding: var(--space-7) var(--space-6) var(--space-5); }
.onboarding__logo { width: auto; height: 30px; margin: var(--space-1) auto var(--space-4); }
.onboarding__title { text-align: center; font-size: var(--text-lg); font-weight: var(--weight-black); }
.onboarding__sub { margin: var(--space-1-5) 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }

.onboarding__steps { margin-bottom: var(--space-6); }
.onboarding__step { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-5); }
.onboarding__step:last-child { padding-bottom: 0; }
.onboarding__step::before {   /* halkadan bir sonrakine uzanan çizgi */
  content: '';
  position: absolute;
  top: var(--space-10);
  bottom: var(--space-1);
  left: calc(var(--space-4) + 1px);   /* halkanın ortası */
  width: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(var(--color-accent), var(--color-accent-a15));
}
.onboarding__step:last-child::before { display: none; }
.onboarding__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  box-shadow: inset 0 0 0 2px var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}
.onboarding__step:first-child .onboarding__num { background: var(--color-accent); color: var(--color-text-on-accent); }
.onboarding__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-top: var(--space-1-5); }
.onboarding__text strong { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.onboarding__text span { color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); }

/* Adımlar sırayla belirir */
.dialog.is-open .onboarding__step { animation: step-in var(--duration-slow) ease both; }
.dialog.is-open .onboarding__step:nth-child(2) { animation-delay: calc(var(--duration-fast) / 2); }
.dialog.is-open .onboarding__step:nth-child(3) { animation-delay: var(--duration-fast); }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}


/* ---- pages/landing.css ---- */
@layer pages {
/* Tanıtım sayfaları (Baskiosk nedir?, İş ortağı ol) — görselli kahraman alanı, üstüne binen içerik yaprağı,
   özellik kartları, bant ve çağrı alanları. */

/* Görselli kahraman alanı: yerinde sabit kalır (sticky), sayfanın devamı (.page-sheet) bir perde gibi üstüne kayar;
   kaydırdıkça fotoğraf hafifçe uzaklaşır (hakkimizda.js) */
.hero-image {
  position: sticky;
  top: var(--size-header);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* metin altta, koyulaşan zeminde: fotoğraftaki otomat ve insanlar görünür kalır */
  height: calc(100svh - var(--size-header));
  min-height: 560px;
  overflow: hidden;
  contain: paint;   /* ölçeklenen arka plan görseli hiçbir tarayıcıda alanın dışına taşmaz */
  padding: var(--space-6) var(--space-6) calc(var(--space-16) + var(--space-12));   /* "Keşfet" ve üstüne binen yaprağa yer */
  text-align: center;
}
.hero-image__bg { position: absolute; inset: 0; z-index: 0; transform: scale(1.15); will-change: transform; }
.hero-image__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-image__bg::after { content: ''; position: absolute; inset: 0; background: var(--color-image-scrim); }
.hero-image__content { position: relative; z-index: 1; max-width: 600px; }
.hero-image__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-on-image-fill);
  color: var(--color-on-image);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  -webkit-backdrop-filter: blur(var(--size-blur-glass));
  backdrop-filter: blur(var(--size-blur-glass));
}
.hero-image__title { margin-bottom: var(--space-5); color: var(--color-on-image); text-shadow: var(--shadow-text-on-image); }
.hero-image__sub { max-width: 440px; margin: 0 auto var(--space-8); color: var(--color-on-image-muted); font-size: var(--text-md); text-shadow: var(--shadow-text-on-image); }
.hero-image__scroll {   /* "Keşfet": buzlu cam hap, ok aşağı doğru nefes alır; üstüne binen yaprağın üstünde kalır */
  position: absolute;
  bottom: calc(var(--space-6) + var(--space-8));
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: var(--size-border) solid var(--color-on-image-fill);
  border-radius: var(--radius-full);
  background: var(--color-on-image-fill);
  color: var(--color-on-image);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  transform: translateX(-50%);
  transition: background-color var(--duration-fast);
  -webkit-backdrop-filter: blur(var(--size-blur-glass));
  backdrop-filter: blur(var(--size-blur-glass));
}
.hero-image__scroll:hover { background: var(--color-glass); }
.hero-image__scroll .icon { animation: nudge-down var(--duration-loop) ease-in-out infinite; }
@keyframes nudge-down { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

/* Yumuşak zeminli kahraman alanı (görselsiz) */
.hero-soft { padding: var(--space-12) var(--space-6) calc(var(--space-12) + var(--space-6)); background: var(--gradient-accent-fade); text-align: center; }
.hero-soft__inner { max-width: 780px; margin: 0 auto; }
.hero-soft .eyebrow { margin-bottom: var(--space-4); text-transform: uppercase; }
.hero-soft .display-lg { margin-bottom: var(--space-5); }
.hero-soft .lead { max-width: 560px; margin: 0 auto var(--space-8); font-size: var(--text-lg); }
.hero-soft__note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); font-size: var(--text-sm); }

/* Kahraman alanının üstüne binen içerik yaprağı */
.page-sheet {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-6));
  padding-top: var(--space-4);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-sheet);
}

/* Özellik kartları */
.feature-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.feature-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.feature-card { padding: var(--space-8) var(--space-6); text-align: center; }
.feature-card__num {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
}
.feature-card > .icon { margin: var(--space-2) 0; color: var(--color-accent); font-size: var(--icon-2xl); }
.feature-card h3 { margin-bottom: var(--space-2); }
.feature-card p { max-width: 320px; margin: 0 auto; color: var(--color-text-muted); }
.feature-card--left { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); text-align: left; }
.feature-card--left h3 { margin-bottom: 0; }
.feature-card--left p { max-width: none; margin: 0; }
.icon-box {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}
.icon-box .icon { font-size: var(--icon-xl); }
.icon-box--sm { border-radius: var(--radius-md); }

/* Vurgulu bant (iş ortağı kazancı) */
.band { margin: var(--space-8) 0; padding: var(--space-10) var(--space-6); border-radius: var(--radius-2xl); background: var(--color-accent-subtle); text-align: center; }
.band__inner { max-width: 640px; margin: 0 auto; }
.band__text { margin: var(--space-5) 0 var(--space-6); color: var(--color-text-secondary); }

.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.spec { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
.spec .icon { color: var(--color-accent); font-size: var(--icon-lg); }

.callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 640px;
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
}
.callout .icon { font-size: var(--icon-md); }

.reassure { max-width: 640px; margin: 0 auto; padding: var(--space-8); text-align: center; }
.reassure > .icon { margin-bottom: var(--space-4); color: var(--color-accent); font-size: var(--icon-3xl); }
.reassure h3 { margin-bottom: var(--space-4); font-size: var(--text-xl); font-weight: var(--weight-black); }
.reassure p { color: var(--color-text-secondary); }

@media (min-width: 768px) {
  .feature-grid { flex-direction: row; }
  .feature-grid > .feature-card { flex: 1; }
}
@media (max-width: 599px) {
  .feature-grid--2 { grid-template-columns: 1fr; }
}

/* ---------- Baskiosk nedir? (yeniden tasarım): el yazısı notlar, elle çizilmiş karalamalar, sağlı sollu adımlar,
   dağınık baskılar, koyu Stüdyo bandı, çizgili güvence kartları ---------- */

/* El yazısı not (düzenleyicideki Kalem yazı tipi) */
.hand-note { color: var(--color-text-secondary); font-family: var(--font-hand); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.hand-note--on-image { margin-top: var(--space-4); color: var(--color-on-image-muted); transform: rotate(-3deg); }

/* Elle çizilmiş karalamalar (templates/_cizim_*.svg): çizgi rengi currentColor, varsayılan vurgu rengi */
.doodle { display: block; color: var(--color-accent); pointer-events: none; }
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.doodle--under { position: absolute; bottom: -12%; left: -2%; width: 104%; height: 26%; }

/* Nasıl çalışır: web uygulamasındaki adım çubuğunun dikey hâli. Solda görsel kutusu ve altından inen çizgi,
   sağda metin; adım ekrana girince (data-reveal) çizgi vurgu rengine dolar. */
.howto { max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.howto__item { display: flex; gap: var(--space-5); }
.howto__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.howto__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: var(--size-border-strong) solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-subtle);
  box-shadow: var(--shadow-accent-sm);
}
.howto__icon img { width: 52px; height: 52px; object-fit: contain; }
.howto__line {
  flex: 1;
  width: 2px;
  min-height: var(--space-10);
  margin: var(--space-2) 0;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background-color var(--duration-slow);
}
.howto__item.is-visible .howto__line { background: var(--color-accent); }
.howto__body { padding: var(--space-1) 0 var(--space-10); }
.howto__item:last-child .howto__body { padding-bottom: 0; }
.howto__num { display: block; margin-bottom: var(--space-1); color: var(--color-accent); font-family: var(--font-hand); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.howto__body .display-sm { margin-bottom: var(--space-2); }

/* Galeride değil, elinde: üst üste binen, hafif eğik baskılar */
.prints-showcase__lead { max-width: 520px; margin: var(--space-4) auto 0; }
.print-scatter { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-4) 0 var(--space-10); }
.print-scatter__item {
  position: relative;
  width: 36%;
  max-width: 240px;
  margin: 0 -3%;
  padding: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  box-shadow: var(--shadow-lg);
}
.print-scatter__item img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.print-scatter__item figcaption { padding: var(--space-2) 0; color: var(--color-text); font-size: var(--text-md); text-align: center; }
.print-scatter__item:nth-child(1) { z-index: 1; transform: translateY(var(--space-6)) rotate(-7deg); }
.print-scatter__item:nth-child(2) { z-index: 2; transform: rotate(2deg); }
.print-scatter__item:nth-child(3) { z-index: 1; transform: translateY(var(--space-8)) rotate(8deg); }
.print-scatter > .doodle--spark { position: absolute; top: 0; right: 10%; width: 40px; }

/* Neden basalım? — kaydırarak anlatım. hakkimizda.js bölüme --p (0→1) verir; her parça kendi aralığını --a…--e ile
   alır (0→1). JS yoksa ya da "hareketi azalt" açıksa --p 1 kalır: yalnızca son kare (üç baskı) görünür.
   Aralıklar: --b ok çizilir · --a telefon karekoda gider · --c ödendi · --d1..3 baskılar çıkar · --e son kare. */
.print-story {
  --p: 1;
  --b: clamp(0, calc((var(--p) - .16) / .1), 1);
  --a: clamp(0, calc((var(--p) - .26) / .14), 1);
  --c: clamp(0, calc((var(--p) - .43) / .08), 1);
  --d1: clamp(0, calc((var(--p) - .58) / .07), 1);
  --d2: clamp(0, calc((var(--p) - .64) / .07), 1);
  --d3: clamp(0, calc((var(--p) - .70) / .07), 1);
  --e: clamp(0, calc((var(--p) - .82) / .15), 1);
  position: relative;
  padding: var(--space-12) var(--space-6);
}
.print-story.is-live { height: 360svh; padding-top: 0; padding-bottom: 0; }   /* sahne 2,6 ekran kaydırma boyunca yapışık kalır
   (adımlar okunacak kadar yavaş). svh: ekranın en küçük hâli; adres çubuğuyla ya da uygulama içi tarayıcının yanlış
   bildirdiği ekran boyuyla değişmez (JS ölçmez) */
.print-story__sticky { display: flex; flex-direction: column; align-items: center; }
.print-story.is-live .print-story__sticky { position: sticky; top: var(--size-header); justify-content: center; min-height: calc(100svh - var(--size-header)); padding: var(--space-4) 0; }   /* sabit menünün altında */
.print-story__head { margin-bottom: var(--space-4); }
.print-story__steps { display: none; position: relative; min-height: 1.6em; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.print-story.is-live .print-story__steps { display: block; }
.print-story__steps li { position: absolute; inset: 0; color: var(--color-accent); opacity: 0; transition: opacity var(--duration-base); }
.print-story__steps li.is-active { opacity: 1; }
.print-story__stage { position: relative; width: min(100%, 560px, 56svh); aspect-ratio: 1; }
.print-story__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(1 - var(--e)); }
.print-story__prints {
  position: absolute;
  inset: 0;
  align-items: center;
  padding: 0;
  opacity: var(--e);
  transform: scale(calc(.18 + .82 * var(--e)));
  transform-origin: 61.5% 48.7%;   /* baskı ağzı (sahne ortaya kaydıktan sonraki yeri): baskılar makineden büyüyerek çıkar */
}
.print-story__lead { text-align: center; opacity: var(--e); }

/* İnce çizgili teknik çizim: çizgiler ekran boyutundan bağımsız hep aynı incelikte (non-scaling-stroke); kapalı
   şekiller sayfa zemini rengiyle dolar (arkada kalan çizgiyi örter), --open yalnızca çizgidir. Renkli tek şey logo. */
.print-story__line { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.print-story__line--open { fill: none; }
.print-story__line--muted { stroke: var(--color-text-muted); }
.print-story__line--dashed { stroke-dasharray: 6 4; }
.print-story__dot { fill: var(--color-text-muted); }
.print-story__qr { fill: var(--color-text); }
.print-story__text { fill: var(--color-text); font-family: var(--font-sans); }   /* boyu çizimde (font-size özniteliği: çizim ölçüsü) */
.print-story__text--bold { font-family: var(--font-display); font-weight: var(--weight-bold); }
.print-story__text--small { fill: var(--color-text-secondary); }
.print-story__scan { fill: none; stroke: var(--color-text); stroke-width: 1.25px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: calc(var(--a) * (1 - var(--c))); }
.print-story__mini { transform: translateY(calc(var(--t) * 118px)) rotate(calc(var(--t) * var(--r))); transform-box: fill-box; transform-origin: 50% 0; }
.print-story__mini--1 { --t: var(--d1); --r: -9deg; }
.print-story__mini--2 { --t: var(--d2); --r: 4deg; }
.print-story__mini--3 { --t: var(--d3); --r: 12deg; }

/* Sahne: telefon otomata giderken (--a) ikisi birlikte çizim ortasına kayar ve %6 yakınlaşır (sol taraf boş kalmaz).
   136 = kaymadan sonra telefon + otomat ortası 500'e gelsin diye (çizim birimi); baskılar bundan sonra çıkar. */
.print-story__scene {
  transform: translate(calc(var(--a) * -136px), 0) scale(calc(1 + var(--a) * .06));
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* Telefon ve elle çizilmiş ok (aynı ince çizgi) */
.print-story__phone {
  transform: translate(calc(var(--a) * 262px), calc(var(--a) * -128px)) rotate(calc(var(--a) * -8deg));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.print-story__paid { opacity: var(--c); }
.print-story__arrow {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--b) - var(--a));   /* --b uçtan çizer; telefon giderken (--a) kuyruktan kısalır */
  opacity: calc(1 - var(--c));
}
.print-story__arrow--head {   /* sap çizilirken sona doğru belirir; sap telefonun arkasında bitince (--a ≈ 1) onunla birlikte söner */
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--b) - .8) * 5), 1));
  opacity: calc((1 - var(--c)) * clamp(0, calc((1 - var(--a)) * 8), 1));
}

/* Baskiosk Stüdyo: koyu zeminli kontrast bandı */
.studio-band { margin: var(--space-8) 0; background: var(--color-inverse-bg); color: var(--color-inverse-text); }
.studio { display: grid; align-items: center; gap: var(--space-10); padding-top: var(--space-16); padding-bottom: var(--space-16); }
.studio .display-md { color: var(--color-inverse-text); }
.studio__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
  padding: var(--space-1-5) var(--space-3);
  border: var(--size-border) solid var(--color-inverse-border);
  border-radius: var(--radius-full);
  background: var(--color-inverse-fill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
}
.studio__badge .icon { color: var(--color-accent); font-size: var(--icon-sm); }
.studio__lead { margin: var(--space-4) 0 var(--space-6); color: var(--color-inverse-muted); }
.studio__features { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.studio__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--size-border) solid var(--color-inverse-border);
  border-radius: var(--radius-xl);
  background: var(--color-inverse-fill);
}
.studio__feature .heading-sm { margin-bottom: var(--space-1); color: var(--color-inverse-text); }
.studio__feature p { color: var(--color-inverse-muted); font-size: var(--text-sm); }
.studio__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.studio__print { position: absolute; margin: 0; border-radius: var(--radius-xs); background: var(--color-paper); box-shadow: var(--shadow-lg); }
.studio__print img { display: block; width: 100%; height: auto; object-fit: cover; }
.studio__print--back { width: 44%; max-width: 230px; padding: var(--space-2); transform: translate(-40%, -8%) rotate(-9deg); }
.studio__print--back img { aspect-ratio: 2 / 3; }
.studio__print--polaroid { width: 56%; max-width: 290px; padding: var(--space-3) var(--space-3) 0; transform: translate(16%, 4%) rotate(4deg); }
.studio__print--polaroid img { aspect-ratio: 1; }
.studio__print--polaroid figcaption { padding: var(--space-3) 0 var(--space-4); color: var(--color-text); font-size: var(--text-lg); text-align: center; white-space: nowrap; }
.studio__chip {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-paper);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.studio__chip .icon { color: var(--color-accent); font-size: var(--icon-sm); }
.studio__chip--a { top: 6%; right: 4%; transform: rotate(4deg); }
.studio__chip--b { bottom: 20%; left: 0; transform: rotate(-5deg); }
.studio__chip--c { right: 2%; bottom: 4%; transform: rotate(-2deg); }
.studio__visual > .doodle--loop { position: absolute; top: 2%; left: 4%; width: 110px; }

/* Stüdyo görseli ekrana girince (hakkimizda.js .is-visible ekler): baskılar iki yandan hafifçe kayarak yerine oturur,
   karalama kalemle çiziliyormuş gibi belirir, etiketler sırayla yerine yerleşir. Son hâl yukarıdaki kurallardır. */
.studio__print, .studio__chip { transition: opacity var(--duration-reveal) var(--ease-standard), translate var(--duration-reveal) var(--ease-standard), rotate var(--duration-reveal) var(--ease-standard), scale var(--duration-reveal) var(--ease-spring); }
.studio__visual > .doodle--loop path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--duration-reveal) * 2) var(--ease-standard) calc(var(--duration-reveal) * .6); }
.studio__visual:not(.is-visible) .studio__print { opacity: 0; }
.studio__visual:not(.is-visible) .studio__print--back { translate: -18% 4%; rotate: -5deg; }
.studio__visual:not(.is-visible) .studio__print--polaroid { translate: 18% 6%; rotate: 5deg; }
.studio__visual:not(.is-visible) .studio__chip { opacity: 0; scale: .6; }
.studio__visual:not(.is-visible) > .doodle--loop path { stroke-dashoffset: 1; }
.studio__print--polaroid { transition-delay: calc(var(--duration-fast) * .8); }
.studio__chip--a { transition-delay: calc(var(--duration-reveal) * .8); }
.studio__chip--b { transition-delay: calc(var(--duration-reveal) * 1); }
.studio__chip--c { transition-delay: calc(var(--duration-reveal) * 1.2); }

/* Gizlilik ve kalite: standart kart (card card--2xl card--pad-lg) içinde ikon, başlık, metin */
/* Gizlilik: koyu bant (Stüdyo bandı gibi), fotoğrafın yolculuğu. Telefonda alt alta, geniş ekranda dört sütun;
   son adım (silinir) vurgu renginde. */
.privacy-band { margin: var(--space-8) 0; background: var(--color-inverse-bg); color: var(--color-inverse-text); }
.privacy { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.privacy .display-md { color: var(--color-inverse-text); }
.privacy__lead { max-width: 560px; margin: var(--space-4) auto 0; color: var(--color-inverse-muted); }
.photo-trip { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: adim; }
.photo-trip__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--size-border) solid var(--color-inverse-border);
  border-radius: var(--radius-xl);
  background: var(--color-inverse-fill);
  counter-increment: adim;
}
.photo-trip__step .heading-sm { margin-bottom: var(--space-1); }
.photo-trip__step .heading-sm::before { content: counter(adim) ". "; color: var(--color-accent); }
.photo-trip__step .heading-sm { color: var(--color-inverse-text); }
.photo-trip__step p { color: var(--color-inverse-muted); font-size: var(--text-sm); }
.photo-trip__step--final { border-color: var(--color-accent); }
.photo-trip__step--final .icon-box { background: var(--color-accent); color: var(--color-text-on-accent); }
.privacy__tags { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.privacy__note { margin-top: var(--space-4); color: var(--color-inverse-muted); text-align: center; transform: rotate(-2deg); }
@media (min-width: 900px) {   /* geniş ekranda dört sütun: ikon üstte */
  .photo-trip { grid-template-columns: repeat(4, 1fr); }
  .photo-trip__step { flex-direction: column; gap: var(--space-3); }
}

.promise-grid { display: grid; gap: var(--space-4); }
.promise { display: flex; flex-direction: column; gap: var(--space-3); }
.promise p { color: var(--color-text-secondary); }

@media (min-width: 768px) {
  .studio { grid-template-columns: 1.05fr 1fr; }
  .studio__features { grid-template-columns: 1fr 1fr; }
  .studio__visual { min-height: 520px; }
  .studio__print--polaroid figcaption { padding: var(--space-4) 0 var(--space-5); font-size: var(--text-xl); }
  .promise-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Stüdyo vitrini (Stüdyo bandının içinde): bölüm uzundur, içindeki katman yapışık (sticky) kalır; kaydırdıkça adım
   şeridi sola kayar, ortadaki adım fotoğrafa uygulanır. Bölüm yüksekliği ve şerit konumu hakkimizda.js'ten. */
.filter-show { position: relative; }
.filter-show.is-live { height: calc(100svh + var(--adimlar) * 25svh); }   /* adım başına çeyrek ekran; --adimlar JS'ten */
.filter-show__sticky {
  position: sticky;
  top: var(--size-header);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: calc(100svh - var(--size-header));
  padding: var(--space-4) 0;
  overflow: hidden;
}
.filter-show__head { text-align: center; }
.filter-show__head .eyebrow { margin-bottom: var(--space-1); }
.filter-show__head .display-sm { color: var(--color-inverse-text); }
.filter-show__photo {
  position: relative;
  flex: 0 1 auto;
  height: min(52svh, 540px);
  aspect-ratio: 2 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-reveal) var(--ease-spring), box-shadow var(--duration-reveal);
}
.filter-show__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard); }
.filter-show__img.is-active { opacity: 1; }
.filter-show__photo.is-final { box-shadow: var(--shadow-lg), var(--shadow-accent-md); transform: rotate(-3deg) scale(1.03); }   /* baskıya hazır */
.filter-show__note { min-height: 1.4em; color: var(--color-inverse-muted); text-align: center; }
.filter-show__rail { position: relative; width: 100%; }
.filter-show__track { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; will-change: transform; }
.filter-show__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1-5);
  width: 72px;
  color: var(--color-inverse-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.filter-show__item img { width: var(--size-tap); height: auto; aspect-ratio: 2 / 3; border: var(--size-border-strong) solid transparent; border-radius: var(--radius-xs); object-fit: cover; transition: border-color var(--duration-fast); }   /* baskının kendi oranı: polaroid kesilmez */
.filter-show__item.is-active { color: var(--color-inverse-text); transform: scale(1.12); }
.filter-show__item.is-active img { border-color: var(--color-accent); }
.studio__cta { display: flex; justify-content: center; padding: var(--space-8) var(--space-6) var(--space-16); }
}


/* ---- pages/contact.css ---- */
@layer pages {
/* İletişim ve başvuru formları — form kartı, yanında iletişim kartları, gönderildi durumu. */
.contact-layout { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-layout__aside { display: flex; flex-direction: column; gap: var(--space-3); }

.form-card { padding: var(--space-7) var(--space-6); }
.form-card .btn--block { margin-top: var(--space-1); }
.form-card__note { margin-top: var(--space-3); text-align: center; }
.form-card__note .icon { vertical-align: middle; }

.contact-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); }
.contact-card__body { flex: 1; min-width: 0; }
.contact-card__body h3 { margin-bottom: var(--space-0-5); }
.contact-card__body p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.contact-card > .icon { color: var(--color-text-muted); font-size: var(--icon-md); }

.success { display: flex; flex-direction: column; align-items: center; gap: var(--space-3-5); padding: var(--space-8) var(--space-4); text-align: center; }
.success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success-subtle);
  color: var(--color-success);
  animation: pop var(--duration-slow) var(--ease-spring);
}
.success p { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 768px) {
  .contact-layout { flex-direction: row; align-items: flex-start; gap: var(--space-8); }
  .contact-layout > .form-card { flex: 1; }
  .contact-layout__aside { flex-shrink: 0; width: 280px; }
}
}


/* ---- pages/locations.css ---- */
@layer pages {
/* Baskiosk noktaları — harita, arama, ipucu şeridi ve nokta listesi. */
.locations { display: flex; flex-direction: column; min-height: calc(100dvh - var(--size-header)); }
.map { position: relative; width: 100%; height: 45vh; min-height: 260px; background: var(--color-fill-strong); }
.map > div { width: 100%; height: 100%; }

.search-bar { width: 100%; max-width: var(--size-content-page); margin: 0 auto; padding: var(--space-4); border-bottom: var(--size-border) solid var(--color-border); background: var(--color-surface); }
.tip-strip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-4); border-bottom: var(--size-border) solid var(--color-border); }
.tip-strip .icon { color: var(--color-accent); font-size: var(--icon-sm); }

.location-list { width: 100%; max-width: var(--size-content-page); margin: 0 auto; padding: var(--space-2) 0 var(--space-6); }
.location { padding: var(--space-5); border-bottom: var(--size-border) solid var(--color-border); cursor: pointer; transition: background-color var(--duration-fast); }
.location:active { background: var(--color-fill); }
.location__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1-5); }
.location__name { font-size: var(--text-base); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.location__address { margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
}


/* ---- pages/panel-pages.css ---- */
@layer pages {
/* Panel içerikleri — otomat kartı (açılır), takvim, sipariş/gelen kutusu listesi, gelir hesapları. */

/* Otomat kartı */
.machine { overflow: hidden; margin-bottom: var(--space-4); }
.panel-machines .machine { margin-bottom: 0; }
.machine__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-5); text-align: left; }
.machine__identity { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; }
.machine__identity > div { min-width: 0; }
.machine__name { overflow: hidden; font-size: var(--text-md); text-overflow: ellipsis; white-space: nowrap; }
.machine__state { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.machine__state--success { color: var(--color-success); }
.machine__state--danger { color: var(--color-danger); }
.machine__state--muted { color: var(--color-text-muted); }
.machine__state .icon { color: var(--color-text-muted); transition: transform var(--duration-base) var(--ease-standard); }
.machine.is-open .machine__state .icon { transform: rotate(180deg); }
.machine__detail { display: grid; grid-template-rows: 0fr; border-top: var(--size-border) solid transparent; transition: grid-template-rows var(--duration-slow) var(--ease-standard); }
.machine.is-open .machine__detail { grid-template-rows: 1fr; border-top-color: var(--color-border); }
.machine__detail > div { overflow: hidden; }
.machine__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.machine__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.machine__actions > .btn { flex: 1 1 calc(50% - var(--space-2)); min-width: 140px; }
.machine__paper { padding: var(--space-4); }
.machine__paper .btn { margin-top: var(--space-2); }

/* Takvim (günlük baskı) */
.calendar { padding: var(--space-4); }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.calendar__dow { padding: var(--space-1) 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; }
.calendar__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.calendar__day.has-print { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: var(--weight-bold); }
.calendar__day[aria-pressed="true"] { background: var(--color-accent); color: var(--color-text-on-accent); }
.calendar__count { margin-top: var(--space-0-5); font-size: var(--text-2xs); line-height: var(--leading-none); opacity: .8; }
.calendar__selected { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; }
.calendar__selected-value { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-black); }

/* Sipariş ve gelen kutusu listeleri */
.record-list:empty { display: none; }
.record__error { margin-top: var(--space-0-5); color: var(--color-danger); font-size: var(--text-xs); }
.record__refund { margin-top: var(--space-1); color: var(--color-danger); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.record.is-new { background: var(--color-accent-faint); }
.record__message { margin-top: var(--space-1-5); color: var(--color-text); font-size: var(--text-sm); white-space: pre-wrap; word-break: break-word; }
.record__links { margin-top: var(--space-1-5); font-size: var(--text-xs); }
.record__links a { color: var(--color-accent); font-weight: var(--weight-semibold); text-decoration: none; }
.record .list-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1-5); }
.panel-summary { margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.key-code { display: block; margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-fill); font-size: var(--text-sm); word-break: break-all; user-select: all; }

/* Gelir */
.revenue-card { margin-bottom: var(--space-4); }
.revenue-breakdown { border-top: var(--size-border) solid var(--color-border); }
.revenue-breakdown > .kv { border-bottom: var(--size-border) solid var(--color-border); }
.revenue-breakdown > .kv--total { border-bottom: 0; }
.revenue-machines { margin-top: var(--space-3); }
.revenue-chart { margin-bottom: var(--space-5); }
.revenue-chart__title { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.revenue-chart__bar { display: flex; gap: var(--space-0-5); height: 14px; overflow: hidden; border-radius: var(--radius-xs); background: var(--color-fill); }
.revenue-chart__bar > span { min-width: 2px; background: var(--legend); }   /* --legend: --color-chart-* (JS verir) */
.revenue-chart__legend { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.legend-row { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; color: var(--color-text-secondary); font-size: var(--text-xs); }
.legend-row.is-total { color: var(--color-text); font-weight: var(--weight-semibold); }
.legend-row__dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-xs); background: var(--legend); }
.legend-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-row__value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.revenue-group-title { margin: var(--space-5) 0 var(--space-2); }
.revenue-group-title span { font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); text-transform: none; }
.revenue-group { margin: var(--space-2) 0; padding: var(--space-2) var(--space-4) var(--space-3); border: var(--size-border) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-fill); }
.revenue-group .check { padding: var(--space-3) 0 var(--space-1); }
.revenue-group .check + * , .revenue-group * + .check { border-top: var(--size-border) solid var(--color-border); margin-top: var(--space-2); }
.revenue-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.revenue-save__status { margin-right: auto; }
.revenue-save__status.is-changed { color: var(--color-accent); font-weight: var(--weight-semibold); }

@media (min-width: 600px) {
  .revenue-chart__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .stat-grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stat-grid--auto .stat--card { gap: var(--space-1); padding: var(--space-3-5); }
  .stat-grid--auto .stat--card .stat__value { font-size: var(--text-lg); }
}

/* Gider/gelir ve Notlar */
.panel-tabs { margin-bottom: var(--space-4); }
.ledger-totals { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: var(--space-3); }
.ledger-totals .stat__value { font-size: var(--text-md); white-space: nowrap; }
.ledger-row__end { display: flex; align-items: center; gap: var(--space-1); }
.ledger-row__amount { margin-right: var(--space-1-5); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-row__amount--plus { color: var(--color-success); }
.ledger-row__amount--minus { color: var(--color-danger); }
/* Karşılaştırmada ay ay iki çubuk: gelir (yeşil) ve gider (kırmızı); boy oranı veridir (JS genişlik verir) */
.compare-bars { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.compare-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-success); }
.compare-bar--expense { background: var(--color-danger); }
.note-row__tag { margin-bottom: var(--space-1); }
}


/* ---- pages/design-system.css ---- */
@layer pages {
/* Tasarım sistemi sayfası (/admin/tasarim) — örnek kutuları. --sample: gösterilen token (JS verir). */
.ds { display: flex; flex-direction: column; gap: var(--space-10); }
.ds-section { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.ds-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.ds-token { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: var(--text-xs); }
.ds-token code { overflow: hidden; color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.ds-swatch { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--sample); box-shadow: inset 0 0 0 1px var(--color-border); }
.ds-type { min-width: 64px; font-size: var(--sample); line-height: var(--leading-none); }
.ds-space { flex-shrink: 0; width: var(--sample); height: 12px; border-radius: var(--radius-xs); background: var(--color-accent); }
.ds-radius { flex-shrink: 0; width: 48px; height: 48px; border: 2px solid var(--color-accent); border-radius: var(--sample); }
.ds-shadow { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--sample); }
.ds-dark { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg); }
.ds-image { display: flex; align-items: flex-end; justify-content: flex-end; height: 120px; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--gradient-accent); }
}


/* ---- utilities.css ---- */
@layer utilities {
/* Yardımcılar — az ve genel. Görünüm bileşenlerde tanımlanır; burada yalnızca düzen yardımcıları vardır. */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-toast); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--shadow-sm); transform: translateY(-300%); }
.skip-link:focus { transform: none; }

/* Dikey yığın: alt alta öğeler eşit aralıkla */
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.stack--xs { gap: var(--space-1); }
.stack--md { gap: var(--space-4); }
/* Yatay küme: yan yana, sığmazsa alta kayar */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster--center { justify-content: center; }
.cluster--md { gap: var(--space-3); }
.cluster--lg { gap: var(--space-4); }

/* Görünür olunca beliren öğeler (ui.reveal) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-reveal) ease, transform var(--duration-reveal) ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal]:nth-child(3n+2) { transition-delay: calc(var(--duration-fast) * .67); }   /* yan yana kartlar sırayla */
[data-reveal]:nth-child(3n) { transition-delay: calc(var(--duration-fast) * 1.33); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 1ms !important; transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}
}