/* ============================================================
   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: #B8333A;
  --color-text: #15161A;
  --color-text-secondary: #484A52;
  --color-text-muted: #6E717C;
  --color-text-on-accent: #FFFFFF;
  --color-accent: #F15C61;
  --color-accent-strong: #D03A40;
  --color-accent-solid: #D03A40;
  --color-accent-solid-hover: #B8333A;
  --color-accent-text: #D03A40;
  --color-accent-text-strong: #B8333A;
  --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: #18774F;
  --color-success-subtle: #E6F4EC;
  --color-success-vivid: #2EC27E;
  --color-danger: #C22E3D;
  --color-danger-subtle: #FDEDEF;
  --color-danger-border: #F5C6CC;
  --color-warning: #8A5A00;
  --color-warning-subtle: #FFF4DC;
  --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-scene: rgba(0, 0, 0, .38);
  --color-scrim-soft: rgba(112, 114, 124, .58);
  --color-glass: rgba(18, 18, 20, .62);
  --color-glass-strong: rgba(18, 18, 20, .72);
  --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;
  --color-chart-8: #5F6B7A;
  --gradient-accent: linear-gradient(135deg, #F15C61 0%, #D03A40 50%, #B8333A 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-glass: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 3px rgba(15, 15, 20, .1);
  --shadow-well: 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(15, 15, 20, .07), 0 0 7px rgba(15, 15, 20, .05), inset 0 0 12px rgba(15, 15, 20, .055), inset 0 4px 9px rgba(15, 15, 20, .035);
  --shadow-orb-success: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -6px 10px rgba(31, 138, 92, .18), 0 6px 14px -8px rgba(31, 138, 92, .7);
  --shadow-orb-accent: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -6px 10px rgba(241, 92, 97, .18), 0 6px 14px -8px rgba(241, 92, 97, .7);
  --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-slider-thumb: 28px;
  --size-slider-track: 6px;
  --size-blur-scene: 28px;
  --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);
  --ease-smooth: cubic-bezier(.45, 0, .55, 1);
  --ease-glide: cubic-bezier(.22, .55, .4, 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-warning: #EDA100;
  --color-warning-subtle: rgba(237, 161, 0, .16);
  --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);
  --color-accent-text: #F15C61;
}


/* ---- 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;
}
/* Düzenleyicinin metin yazı tipleri (fotoğrafa yazılan yazı, baskıya da gider; static/js/duzenle.js METIN_FONTLARI).
   Tarayıcı yalnızca kullanılan harflerin dosyasını indirir; tuvale çizmeden önce düzenleyici bunları yükletir. */
@font-face {
  font-family: 'BK Modern';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/metin-modern-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: 'BK Modern';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/metin-modern-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: 'BK Kalem';
  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: 'BK Kalem';
  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;
}
@font-face {
  font-family: 'BK Daktilo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/metin-daktilo-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: 'BK Daktilo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/metin-daktilo-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: 'BK Zarif';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/metin-zarif-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: 'BK Zarif';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/metin-zarif-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: 'BK Eglenceli';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/metin-eglenceli-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: 'BK Eglenceli';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/metin-eglenceli-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;
}
/* Başka alfabeler (Kiril, Yunan, Arap, Çince, Japonca): her ailenin aynı tarzdaki eşi aynı aile adıyla
   static/css/fontlar*.css'te (tools/fontlar.py üretir) */
/* İ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);
  overflow-x: clip;   /* hiçbir öğe sayfayı yana taşırmasın (iPhone Safari gizli tam ekran katmanları da hesaba katar); sticky bozulmaz */
  overscroll-behavior: none;
  overflow-wrap: break-word;   /* çok uzun tek kelime (Almanca bileşik kelimeler) kutusundan taşmasın, gerekirse bölünsün */
  -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); } }

/* Arapça: harfler birbirine bağlı yazılır; harf aralığı bağları koparır. Başlık ve etiketlerdeki aralık sıfırlanır
   (seçici, bileşenlerin tek sınıflı kurallarından güçlü olsun diye html + body ile; ikonlara dokunmaz). */
html:lang(ar) body *:not(.icon) { letter-spacing: var(--tracking-normal); }
/* Japonca ve Çince: satır sonunda noktalama kuralları sıkı (satır 、。 ile başlamaz); Japoncada destekleyen tarayıcı
   kelime öbeğinin ortasından kırmaz */
html:lang(ja) body, html:lang(zh) body { line-break: strict; }
html:lang(ja) body { word-break: auto-phrase; }
}


/* ---- 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;
}
/* Yön bildiren ikonlar (ileri/geri ok, ok başı): sağdan sola dillerde (Arapça) aynalanır. Sınıfı ikon yardımcıları
   (şablonda icon(), JS'te ui.icon) ada bakarak kendileri ekler. */
[dir="rtl"] .icon--yon { transform: scaleX(-1); }
.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-text); }
.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)
          --secondary-success  çerçeveli, başarı yeşili (tamamlanmış ikincil eylem: düzenlenmiş fotoğraf)
          --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) · --icon-only (yazı gizlenir, ikon kare düğmede kalır; yer
          yetmeyince JS ekler, düğmenin aria-label'ı olmalı)
   İç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-solid); color: var(--color-text-on-accent); box-shadow: var(--shadow-accent-sm); }
.btn--primary:hover { background: var(--color-accent-solid-hover); }
.btn--primary:active { background: var(--color-accent-solid-hover); }
.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-text); }
.btn--secondary:active { background: var(--color-accent-subtle); }
.btn--secondary-success { background: var(--color-control-bg); border-color: var(--color-success); color: var(--color-success); }
.btn--secondary-success:active { background: var(--color-success-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-text); }
.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. --sm ve --md'de görünmez katman dokunma alanını en az --size-tap yüksekliğine tamamlar */
.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--sm, .btn--md { position: relative; }
.btn--sm::after, .btn--md::after { content: ''; position: absolute; inset: calc((100% - var(--size-tap)) / 2) 0; }
.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%; white-space: normal; text-wrap: balance; line-height: var(--leading-tight); }   /* uzun dilde sığmazsa iki satıra iner, taşmaz */
.btn--pill { border-radius: var(--radius-full); }
.btn--icon-only { aspect-ratio: 1; padding: 0; }
.btn--icon-only > :not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* görünmez, ekran okuyucuda kalır */

/* <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)
         · --raised (cam düğme: açık buzlu cam, ince açık kenar, vurgu renginde ikon; cam hap adet seçicide)
   Boyut: --sm (32) · --snug (36) · 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-text); }
.icon-btn--accent:active { background: var(--color-accent-a40); }
.icon-btn--accent:disabled { background: var(--color-fill); color: var(--color-text-muted); }
.icon-btn--raised {
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-on-image));
  background: linear-gradient(to bottom, var(--color-surface), var(--color-fill));
  box-shadow: var(--shadow-glass);
  color: var(--color-accent-text);
}
.icon-btn--raised:active { transform: scale(.94); }
.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-text); 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--snug { width: var(--size-control-sm); height: var(--size-control-sm); }
.icon-btn--snug .icon { font-size: var(--icon-md); }
/* Dokunma alanı görünenden büyük: görünmez katman her boyutu en az --size-tap (44) kareye tamamlar (--sm, --snug, varsayılan 40) */
.icon-btn::after { content: ''; position: absolute; inset: calc((100% - var(--size-tap)) / 2); }
.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 · --warning (orta seviye) · --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-solid);
  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--wrap { max-width: 100%; white-space: normal; text-wrap: balance; }   /* uzun etiket (çeviride uzayan cümle) satıra sığmazsa alta iner */
.tag--accent { background: var(--color-accent-subtle); color: var(--color-accent-text-strong); }   /* açık mercan zeminde okunur */
.tag--success { background: var(--color-success-subtle); color: var(--color-success); }
.tag--danger { background: var(--color-danger-subtle); color: var(--color-danger); }
.tag--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.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-text); }
.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: center;   /* yazı ve ikon dikeyde ortada; ad + fiyat (chip__meta) olan çipte taban çizgisinde */
  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:has(.chip__meta) { align-items: baseline; }
.chip .icon { font-size: var(--icon-sm); }

.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);
  position: relative;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
/* Dokunma alanı en az --size-tap yüksekliğinde (görünen kapsül daha ince) */
.segmented__item::after { content: ''; position: absolute; inset: calc((100% - var(--size-tap)) / 2) 0; }
.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ı.
   --pill: içeriği kadar, buzlu cam yuvarlak hap; iki uçta beyaz düğmeler (icon-btn--raised icon-btn--snug icon-btn--round),
   ortada sayı ve altında birim (.stepper__unit, ör. "adet"). Fotoğraf kartı. */
.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--pill {   /* hafif göçük taşıyıcı (hediye kanalıyla aynı): üst kenarın içinde yumuşak gölge, alt dudakta ışık; dış gölge ve kenar yok */
  gap: var(--space-2);
  padding: var(--space-0-5);
  border-radius: var(--radius-full);
  background: var(--color-fill);   /* kenar her yönden içeri sönen yumuşak halka (gölge); keskin çizgi yok */
  box-shadow: var(--shadow-well);
}
.stepper--pill .stepper__value { display: flex; flex-direction: column; align-items: center; font-size: var(--text-md); line-height: var(--leading-none); }
.stepper__unit { margin-top: var(--space-0-5); color: var(--color-text-muted); font-size: var(--text-2xs); font-weight: var(--weight-semibold); }
.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 (telefonda alt alta)
   .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; }
@media (max-width: 599px) { .field-row { flex-direction: column; } }   /* telefonda alt alta: e-posta kutusu daralıp yazı kesilmesin */
.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-text); }
.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%;
  inset-inline-start: var(--space-3);
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--icon-md);
  pointer-events: none;
}
.input--search { padding-inline-start: var(--space-10); background: var(--color-fill); font-size: var(--text-base); }   /* 16 px: iPhone odaklanınca yakınlaştırmaz */

.select { position: relative; }
.select > .input { padding-inline-end: var(--space-10); cursor: pointer; }
.select > .icon {
  position: absolute;
  top: 50%;
  inset-inline-end: 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-md);   /* satırın tamamı dokunma alanı (parmak dostu) */
  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: var(--size-slider-track);
  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: var(--size-slider-track);
  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: var(--size-slider-thumb);
  height: var(--size-slider-thumb);
  margin-top: calc((var(--size-slider-track) - var(--size-slider-thumb)) / 2);   /* çubuğun ortasında */
  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: var(--size-slider-thumb);
  height: var(--size-slider-thumb);
  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-text); }   /* 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/ruler.css ---- */
@layer components {
/* Açı cetveli — ince açı (Düzelt) için yana kaydırılan derece çizgileri; ortadaki işaret sabit durur.
   <div class="ruler"><span class="ruler__scale" aria-hidden="true"><span class="ruler__zero"></span></span>
     <input class="ruler__input" type="range" min="-45" max="45" step="0.1" value="0" data-default="0"
            data-snap="0" data-snap-range="0.5" aria-label="…"></div>
   Davranış ui.rulerDrag(input) (göreli sürükleme, 0'a yapışma, çift dokunuş); çizgilerin yeri ui.rulerPaint(input)
   ile verilen değişkenlerden: --ruler-span (min…max), --ruler-pos (değer − min), --ruler-zero (0 − min),
   --ruler-nudge (ortadaki işaret ve 0° çizgisi tam ekran pikselinde, üst üste).
   Her derece ince çizgi, 5° kalın çizgi, 0° ayrıca belirgin. Kenarlara doğru söner. Satırda .slider-row içinde
   ikon ve .slider-row__value ile kullanılır. Açı yönü dilden bağımsızdır (sağdan sola dilde de soldan sağa). */
.ruler {
  --ruler-unit: var(--space-1-5);   /* bir derecenin genişliği */
  --ruler-span: 90;
  --ruler-pos: 45;
  --ruler-zero: 45;
  --ruler-nudge: 0px;   /* merkezin tam piksele kayması (ui.rulerPaint) */
  position: relative;
  flex: 1;
  min-width: 0;
  height: var(--size-control-md);
  overflow: hidden;
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  direction: ltr;
  cursor: grab;
  touch-action: none;
  /* Kenarlara doğru söner ama uçlarda da seçilir (tamamen kaybolmaz) */
  -webkit-mask-image: linear-gradient(to right, color-mix(in srgb, currentColor 20%, transparent), currentColor 14%, currentColor 86%, color-mix(in srgb, currentColor 20%, transparent));
  mask-image: linear-gradient(to right, color-mix(in srgb, currentColor 20%, transparent), currentColor 14%, currentColor 86%, color-mix(in srgb, currentColor 20%, transparent));
}
.ruler.is-dragging { cursor: grabbing; }
.ruler:has(.ruler__input:focus-visible) { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: calc(var(--size-focus-offset) * -1); }
.ruler__scale {
  position: absolute;
  inset-block: var(--space-2-5);
  left: calc(50% + var(--ruler-nudge));
  width: calc(var(--ruler-span) * var(--ruler-unit) + var(--size-border));
  transform: translateX(calc(var(--ruler-pos) * var(--ruler-unit) * -1));
  background:
    repeating-linear-gradient(to right, currentColor 0 var(--size-border), transparent var(--size-border) var(--ruler-unit)) calc(var(--size-border) / -2) center / 100% 50% no-repeat,
    repeating-linear-gradient(to right, currentColor 0 var(--size-border-strong), transparent var(--size-border-strong) calc(5 * var(--ruler-unit))) calc(var(--size-border-strong) / -2) center / 100% 85% no-repeat;
  /* Her çizgi kendi derecesinin tam üstünde ortalanır (yarı kalınlığı kadar sola): 0° çizgisi ve ortadaki işaret aynı
     noktada, piksel piksel üst üste */
}
.ruler__zero {
  position: absolute;
  inset-block: 0;
  left: calc(var(--ruler-zero) * var(--ruler-unit));
  width: var(--size-focus-width);
  margin-left: calc(var(--size-focus-width) / -2);   /* derecesinin üstünde ortalı (ortadaki işaretle aynı merkez) */
  border-radius: var(--radius-full);
  background: var(--color-text);
}
/* Ortadaki sabit işaret: değerin okunduğu yer */
.ruler::after {
  content: '';
  position: absolute;
  inset-block: var(--space-1);
  left: calc(50% + var(--ruler-nudge));
  width: calc(var(--size-focus-width) * 1.5);   /* çizgilerden kalın: değerin okunduğu yer hemen seçilsin */
  margin-left: calc(var(--size-focus-width) * -0.75);
  border-radius: var(--radius-full);
  background: var(--color-accent-solid);
  box-shadow: 0 0 var(--space-1-5) var(--color-accent-solid);   /* hafif ışıma */
  pointer-events: none;
}
.ruler__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
}
.ruler.is-disabled { opacity: .4; }
}


/* ---- 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>/<a>; parçalar <span>); sondaki ikon dokunulabildiğini gösterir;
                         seçili satır aria-current="true" (başlık vurgu renginde) ve sonda __check tiki
   .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: start;
  text-decoration: none;   /* <a> olarak da kullanılır (dil seçici) */
  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: end; }
.list-row__check { flex-shrink: 0; color: var(--color-accent-text); font-size: var(--icon-md); }   /* seçili satırın tiki (dil seçici) */
.list-row--action[aria-current="true"] .list-row__title { color: var(--color-accent-text); font-weight: var(--weight-bold); }
.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: end; 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-text); }
.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-text); 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-inline-end: var(--space-10); }   /* çarpı metnin üstüne binmesin */
.notice__close { position: absolute; top: var(--space-1-5); inset-inline-end: 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 · --immersive (tam ekran koyu perde)
              · 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;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(var(--size-drawer), 86vw);
  height: 100dvh;
  border-start-end-radius: var(--radius-xl);
  border-end-end-radius: var(--radius-xl);
  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);
}
[dir="rtl"] .drawer:not(.is-open) { transform: translateX(100%); }   /* sağdan sola dillerde sağdan açılır */
.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--immersive { padding: 0; background: var(--color-scrim-immersive); }   /* tam ekran koyu (karekod tarayıcı, büyük önizleme) */
.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); inset-inline-end: 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-text); 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-text); 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.
   Sekme adı .tabbar__label içinde olabilir; --icons: yalnızca ikon (ad gizli, sekmede aria-label olur). */
.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__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tabbar--icons .tabbar__label { display: none; }
.tabbar--icons .tabbar__item .icon { font-size: var(--icon-lg); }
.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: start;
  transition: color var(--duration-fast);
}
.accordion__trigger:hover, .accordion__item.is-open .accordion__trigger { color: var(--color-accent-text); }
.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-text); 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-text); }

.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-text); 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)); } }
/* --auto dar ekranda (panel, telefon): iki sütun, sıkı kartlar */
@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); }
}
}


/* ---- 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: start; }
.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/monitor.css ---- */
@layer components {
/* İzleme bileşenleri (yönetim paneli → İzleme; KABUL P)
   .topology            sunucu + otomat şeması: .topology__server (bileşen düğümleri yan yana),
                        .topology__machines (her otomat bir sütun: modem → Pi → yazıcı → ekran, aralarında bağ çizgisi)
     .topology__machine   bir otomat sütunu; .topology__head ad + durum
     .topology__node      dokunulabilir düğüm (<button>); --ok · --warn · --danger · --unknown kenar ve bağ rengi;
                          içinde .topology__node-title ve .topology__node-rows (.topology__node-key / -value <span> çiftleri;
                          düğme içinde yalnızca satır içi öğe)
   .timeline            olayların zaman çizelgesi: .timeline__row (etiket + iz), .timeline__track (göreli),
                        .timeline__block (konum/genişlik JS'ten --bas / --uzunluk yüzdesiyle); --kritik · --yuksek · --orta · --bilgi
                        .timeline__scale alt satırda başlangıç/bitiş zamanı
   .status-strip        saatlik durum şeridi: .status-strip__seg --ok · --sorun · --yok (veri yok)
   .line-chart          saf SVG çizgi grafik: .line-chart__svg; __grid, __axis, __line, __area, __dot;
                        renk --1 … --4 (grafik tokenları --color-chart-*)
   .heatmap             takvim ısı haritası: .heatmap__grid (7 sütun), .heatmap__cell --0 … --4 (olay yoğunluğu)
   Sabit ölçüler yalnızca geometri: sütunların en dar genişliği (sunucu 150, otomat 220 px), çizelge etiket sütunu (72 px)
   ve iz yüksekliği (22 px), en ince olay bloğu (3 px), şerit (14 px), grafik yüksekliği (140 px = grafik.js Y),
   takvimin en geniş hâli (320 px).
*/

.topology { display: flex; flex-direction: column; gap: var(--space-5); }
.topology__server { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.topology__machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.topology__machine {
  display: flex; flex-direction: column; gap: var(--space-0-5);
  padding: var(--space-3); border: var(--size-border) solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
}
.topology__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); }
.topology__node {
  --dugum-renk: var(--color-text-muted);
  position: relative; display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-height: var(--size-tap);
  padding: var(--space-2-5) var(--space-3); border: var(--size-border-strong) solid var(--dugum-renk); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); text-align: start; cursor: pointer;
  transition: background-color var(--duration-fast);
}
.topology__node:hover { background: var(--color-fill); }
.topology__node[aria-pressed="true"] { background: var(--color-fill); box-shadow: inset 0 0 0 var(--size-border) var(--dugum-renk); }
.topology__machine .topology__node + .topology__node { margin-top: var(--space-4); }
.topology__machine .topology__node + .topology__node::before {   /* bağ çizgisi: alttaki düğümün durum rengi */
  content: ''; position: absolute; inset-inline-start: 50%; bottom: 100%; width: var(--size-border-strong);
  height: calc(var(--space-4) + var(--size-border-strong)); background: var(--dugum-renk);
}
.topology__node--ok { --dugum-renk: var(--color-success); }
.topology__node--warn { --dugum-renk: var(--color-warning); }
.topology__node--danger { --dugum-renk: var(--color-danger); }
.topology__node--unknown { --dugum-renk: var(--color-fill-strong); }
.topology__node-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.topology__node-title .icon { color: var(--dugum-renk); font-size: var(--icon-md); }
.topology__node-rows { display: grid; grid-template-columns: auto 1fr; gap: var(--space-0-5) var(--space-2); font-size: var(--text-xs); }
.topology__node-key { color: var(--color-text-muted); }
.topology__node-value { overflow-wrap: anywhere; }

.timeline {
  --etiket: 72px; --iz: 22px; display: flex; flex-direction: column; gap: var(--space-2); overflow-x: auto;
  padding-block: calc((var(--size-tap) - var(--iz)) / 2);   /* blokların büyütülmüş dokunma alanı kırpılmasın */
}
.timeline__row { display: grid; grid-template-columns: var(--etiket) minmax(480px, 1fr); align-items: center; gap: var(--space-2); }
.timeline__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.timeline__track { position: relative; height: var(--iz); border-radius: var(--radius-xs); background: var(--color-fill); }
.timeline__block {
  position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--bas, 0) * 1%); width: max(3px, calc(var(--uzunluk, 0) * 1%));
  border: 0; border-radius: var(--radius-xs); padding: 0; cursor: pointer; background: var(--color-text-muted);
}
.timeline__block::before {   /* görünen blok ince, dokunma alanı en az --size-tap yüksekliğinde */
  content: ''; position: absolute; inset-block: calc((var(--iz) - var(--size-tap)) / 2); inset-inline: calc(var(--space-1) * -1);
}
.timeline__block--kritik { background: var(--color-danger); }
.timeline__block--yuksek { background: var(--color-chart-2); }
.timeline__block--orta { background: var(--color-warning); }
.timeline__block--bilgi { background: var(--color-chart-1); }
.timeline__scale { display: flex; justify-content: space-between; padding-inline-start: calc(var(--etiket) + var(--space-2)); font-size: var(--text-2xs); color: var(--color-text-muted); }

.status-strip { display: flex; height: 14px; overflow: hidden; border-radius: var(--radius-xs); background: var(--color-fill); }
.status-strip__seg { flex: 1 1 0; min-width: 0; }
.status-strip__seg--ok { background: var(--color-success-vivid); }
.status-strip__seg--sorun { background: var(--color-danger); }
.status-strip__seg--yok { background: var(--color-fill); }

.line-chart { --cizgi: var(--color-chart-1); width: 100%; }
.line-chart--1 { --cizgi: var(--color-chart-1); }
.line-chart--2 { --cizgi: var(--color-chart-2); }
.line-chart--3 { --cizgi: var(--color-chart-3); }
.line-chart--4 { --cizgi: var(--color-chart-4); }
.line-chart__svg { display: block; width: 100%; height: 140px; overflow: visible; }
.line-chart__grid { stroke: var(--color-border); stroke-width: 1; }
.line-chart__axis { fill: var(--color-text-muted); font-size: var(--text-2xs); }
.line-chart__line { fill: none; stroke: var(--cizgi); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart__area { fill: var(--cizgi); opacity: .12; }
.line-chart__dot { fill: var(--cizgi); }

.heatmap__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); max-width: 320px; }
.heatmap__cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs);
  font-size: var(--text-2xs); color: var(--color-text-muted); background: var(--color-fill);
}
.heatmap__cell--0 { background: var(--color-fill); }
.heatmap__cell--1 { background: var(--color-warning-subtle); color: var(--color-text); }
.heatmap__cell--2 { background: var(--color-warning); color: var(--color-text-on-accent); }
.heatmap__cell--3 { background: var(--color-chart-2); color: var(--color-text-on-accent); }
.heatmap__cell--4 { background: var(--color-danger); color: var(--color-text-on-accent); }
}


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

.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-text); 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-text); }

/* 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-inline-start: 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); 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: start; 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%; }
/* En dar telefonlarda (320 px) logo küçülür: menü, logo ve "Baskı al" birbirine değmeden sığar */
@media (max-width: 359px) {
  .site-header { padding: 0 var(--space-3); }
  .site-header__logo { height: var(--size-logo-sm); }
}
.site-header .badge { position: absolute; top: 2px; inset-inline-end: 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-text); }
.nav-list__link[aria-current="page"] .icon { color: var(--color-accent-text); }

/* 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-text); }
.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: start; }
.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-text); }
.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; }
}
/* Dar telefon (320 px) ve uzun diller ("3. Récupérez vos tirages"): adım adı ekrandan taşmaz, iki satıra iner */
@media (max-width: 359px) {
  .steps__item { min-width: 0; }
  .steps__label { white-space: normal; overflow-wrap: break-word; hyphens: auto; }   /* sığmayan uzun kelime tireyle bölünür */
}
}


/* ---- 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-text); 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-sidebar__version { padding: var(--space-2) var(--space-3) 0; }   /* canlıdaki commit (SURUM), bağlantılarla aynı hizada */

.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-text); 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-text); 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-text); font-size: var(--icon-md); }
.gift-meter__dots {   /* yuvarlakların ve çizgilerin şeklini izleyen göçük: her yuvarlak kendi çukurunda, çukurlar oluğa bağlı */
  --cukur: var(--space-1);   /* çukurun yuvarlağın çevresinde kalan payı */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gift-meter__slot {   /* yuvarlağın çukuru: kartın içine oyulmuş, kenarı yumuşak (oluğun üstünde, birleşim çukurun içinde kalır) */
  position: relative;
  z-index: 1;
  display: flex;
  /* optik ortalama: üst iç gölge üst halkayı geniş, camın alt ışığı alt halkayı dar gösterir; cam 1 px yukarıda */
  padding: calc(var(--cukur) - var(--size-border)) var(--cukur) calc(var(--cukur) + var(--size-border));
  border-radius: var(--radius-full);
  background: var(--color-fill);
  box-shadow: var(--shadow-well);
}
.gift-meter__dots::before, .gift-meter__dots::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--cukur) + var(--size-control-md) / 2);
  left: calc(var(--cukur) + var(--size-control-md) / 2);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}
.gift-meter__dots::before {   /* çukurları birleştiren oluk */
  height: var(--space-3);
  background: var(--color-fill);
  box-shadow: var(--shadow-well);
}
.gift-meter__dots::after {   /* oluğun içindeki dolu çizgi: yeşil; hediyeye giden son parça yeşilden mercana geçer; dolu kadarı görünür */
  height: var(--space-1);
  /* doğrudan yeşil → mercan (sarı/turuncuya uğramaz); geçiş son parçanın ortasında kısa: ara ton grileşmeden geçer */
  background: linear-gradient(to right in oklab, var(--color-success-vivid) calc((var(--hediye-bas, 1) + (1 - var(--hediye-bas, 1)) * .35) * 100%),
                              var(--color-accent) calc((var(--hediye-bas, 1) + (1 - var(--hediye-bas, 1)) * .7) * 100%));
  clip-path: inset(0 calc((1 - var(--dolu, 0)) * 100%) 0 0 round var(--radius-full));
  transition: clip-path var(--duration-base) var(--ease-standard);
}
/* Sağdan sola dillerde sayaç sağdan başlar (yuvarlakların sırası kendiliğinden döner): dolu çizgi de sağdan dolar */
/* Baskı ilerlemesi (3. adım): hediye sayacının iki yuvarlaklı hâli. Çizgi her adımda o adımın tavanına "önce hızlı, sonra
   yavaş" gider (ease-out, süreyi JS verir): sistem hızlı çalışıyor görünür, hiç durmaz, gerçek adımı geçmez. */
.print-meter { width: 100%; margin: 0 0 var(--space-2); }
.print-meter .gift-meter__dots { --hediye-bas: .5; }   /* çizginin ikinci yarısında yeşilden mercana: eldeki baskıya varış */
.print-meter .gift-meter__dots::after { transition: clip-path var(--ilerleme-sure, var(--duration-reveal)) var(--ease-out); }
.print-meter.is-instant .gift-meter__dots::after { transition: none; }
[dir="rtl"] .gift-meter__dots::after {
  background: linear-gradient(to left in oklab, var(--color-success-vivid) calc((var(--hediye-bas, 1) + (1 - var(--hediye-bas, 1)) * .35) * 100%),
                              var(--color-accent) calc((var(--hediye-bas, 1) + (1 - var(--hediye-bas, 1)) * .7) * 100%));
  clip-path: inset(0 0 0 calc((1 - var(--dolu, 0)) * 100%) round var(--radius-full));
}
.gift-meter__dot {   /* buzlu cam yuvarlak (çukurunun içinde kabarık): boşken açık cam, dolunca renk tonlu cam ve altından hafif ışık */
  --ton: var(--color-success-vivid);   /* yanınca ortadan yayılan ışığın rengi */
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  overflow: hidden;
  border: var(--size-border) solid color-mix(in srgb, var(--color-border) 70%, var(--color-on-image));
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, var(--color-surface), var(--color-fill));
  box-shadow: var(--shadow-glass);   /* göçük kanalın içinde hafif kabarık cam */
  color: var(--color-text-muted);
  transition: background var(--duration-base), border-color var(--duration-base), color var(--duration-base), box-shadow var(--duration-base);
}
.gift-meter__dot::before {   /* camda hafif çapraz parlama (abartısız) */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--color-on-image) 45%, transparent) 42%, transparent 58%);
  opacity: .5;
  pointer-events: none;
}
.gift-meter__dot .icon { position: relative; font-size: var(--icon-md); }
.gift-meter__dot:not(.is-done):not(.gift-meter__dot--gift) .icon { color: color-mix(in srgb, var(--color-text-muted) 40%, transparent); }   /* pasif tik */
.gift-meter__dot.is-done {
  border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-on-image));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-success-vivid) 22%, var(--color-surface)),
                              color-mix(in srgb, var(--color-success-vivid) 40%, var(--color-surface)));   /* canlı yeşil, üstten alta hafif koyulaşır */
  box-shadow: var(--shadow-orb-success);
  color: var(--color-success);
}
.gift-meter__dot--next {   /* sıradaki boş yuvarlak: soluk yeşil kesik çizgi (bir sonraki fotoğraf buraya); hediyeninkinden daha soluk */
  border: var(--size-border-strong) dashed color-mix(in srgb, var(--color-success-vivid) 45%, var(--color-on-image));
}
.gift-meter__dot--gift {
  border: var(--size-border-strong) dashed color-mix(in srgb, var(--color-accent) 70%, var(--color-on-image));
  color: var(--color-accent-text);
}
.gift-meter__dot--gift.is-done {
  border-style: solid;
  border-width: var(--size-border);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-on-image));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)),
                              color-mix(in srgb, var(--color-accent) 30%, var(--color-surface)));
  box-shadow: var(--shadow-orb-accent);
  color: var(--color-accent-text);
}
.gift-meter__dot.is-new .icon { animation: pop var(--duration-base) var(--ease-spring); }
.gift-meter__dot--gift { --ton: var(--color-accent); }
.gift-meter__dot .icon { z-index: 1; }
/* Yeni dolan yuvarlak (is-new): renkli ışık camın ortasından kesintisiz genişleyerek kenarlara yayılır ve söner (parlama yok) */
.gift-meter__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--ton) 32%, transparent) 0, color-mix(in srgb, var(--ton) 22%, transparent) 50%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.gift-meter__dot.is-done.is-new::after { animation: isik-yan var(--duration-loop-fast) var(--ease-standard) both; }
@keyframes isik-yan {   /* ölçekler geometri: ortada küçük bir nokta → camın dışına taşacak kadar geniş (kenarda kırpılır) */
  0% { opacity: 0; transform: scale(0); }
  25% { opacity: .7; }
  70% { opacity: .55; }
  100% { opacity: 0; transform: scale(1.6); }
}
.gift-meter__text { color: var(--color-text-secondary); font-size: var(--text-xs); }
/* Hediye kazanılınca konfeti: hediye sayacının görsel dilinde küçük buzlu cam parçalar (yuvarlak ve kısa hap; renk tonlu
   cam, ince açık kenar, üstte hafif parlama). İki kenardan yolda hafifçe aşağı-yukarı açılarak sayaca doğru gelir, ortada
   toplanıp küçülerek söner. Varış noktası, kavis, dönüş ve gecikme her parçaya JS'ten (--y, --dx, --dy, --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__track {   /* dış katman: yalnızca yana (kenardan ortaya) gider */
  position: absolute;
  top: var(--y);
  animation: konfeti-x var(--duration-loop) var(--ease-glide) var(--gecikme) both;   /* kenardan hızlı fırlar, ortaya yavaşlayarak varır */
}
.confetti__track--left { left: 0; }
.confetti__track--right { right: 0; }
/* İç katman (görünen cam parça): yalnızca yukarı-aşağı gider, döner, büyüyüp küçülür. Yana ve dikey hareket iki ayrı
   katmanda olduğu için yol sert köşeli değil, geniş ve kesintisiz bir yaydır (buluşma anında durup yön değiştirmez,
   son iniş de çapraz süzülür); iç içe iki katman her tarayıcıda (iPhone Safari dahil) aynı çalışır. */
.confetti__piece {
  --ton: var(--color-success-vivid);
  display: block;
  width: var(--space-3);
  height: var(--space-3);
  border: var(--size-border) solid color-mix(in srgb, var(--ton) 45%, var(--color-on-image));
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ton) 55%, var(--color-on-image)), color-mix(in srgb, var(--ton) 88%, var(--color-on-image)));
  box-shadow: inset 0 var(--size-border) 0 color-mix(in srgb, var(--color-on-image) 80%, transparent),
              0 var(--space-0-5) var(--space-1-5) color-mix(in srgb, var(--ton) 28%, transparent);
  opacity: 0;
  animation: konfeti-y var(--duration-loop) var(--ease-smooth) var(--gecikme) both;
}
.confetti__piece--pill { width: var(--space-2-5); height: var(--space-5); }   /* kısa cam hap */
.confetti__piece--a { --ton: var(--color-success-vivid); }
.confetti__piece--b { --ton: var(--color-accent); }
.confetti__piece--c { --ton: var(--color-success); }
.confetti__piece--d { background: linear-gradient(to bottom in oklab, color-mix(in srgb, var(--color-success-vivid) 80%, var(--color-on-image)), color-mix(in srgb, var(--color-accent) 85%, var(--color-on-image))); }
.confetti__piece--e { --ton: var(--color-text-muted); background: linear-gradient(to bottom, var(--color-surface), var(--color-fill-strong)); }   /* şeffaf cam */
@keyframes konfeti-x { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
@keyframes konfeti-y {   /* yolda yarısı yukarı yarısı aşağı açılır, tepede yumuşakça döner, ortaya süzülür; ölçekler geometri */
  0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.5); }
  15% { opacity: 1; }
  50% { transform: translateY(var(--ky)) rotate(calc(var(--rot) * .5)) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--dy)) rotate(var(--rot)) scale(.2); }
}

.gift-meter__win { color: var(--color-accent-text); 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-text); 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__body {   /* iki sütun: solda sıra·ölçü ve Düzenle hapı, sağda fiyat ve adet seçici */
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;   /* sıra·ölçü | fiyat — boyut seçici (birden çok boyut satılırken) — Düzenle | adet */
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.photo-card .chip-group { grid-row: 2; grid-column: 1 / -1; }
.photo-card__name { grid-row: 1; grid-column: 1; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.photo-card__price { font-size: var(--text-sm); font-weight: var(--weight-bold); white-space: nowrap; }
.photo-card__cost { display: flex; flex-wrap: wrap; grid-row: 1; grid-column: 2; justify-content: flex-end; align-items: center; gap: var(--space-1); }   /* fiyat · hediye indirimi; sığmazsa indirim fiyatın altına iner */
.photo-card__edit { grid-row: 3; grid-column: 1; justify-self: start; align-self: end; }
.photo-card__footer { display: flex; grid-row: 3; grid-column: 2; align-self: end; }
.photo-card__footer .stepper { flex: 1; justify-content: space-between; }
.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 okuma (tam ekran): zeminde kameranın bulanık ve hafif karartılmış görüntüsü; ortada net, yuvarlak köşeli
   kare. Karenin içindeki video ekran boyundadır ve ekranın ortasına hizalıdır: kare, zemindeki görüntünün tam o parçasını
   net gösterir (kare ekranın tam ortasında durur). Başlık karenin üstünde, kapatma sol üstte. */
.scan { overflow: hidden; background: var(--color-media); }
.scan:not(.is-open) > * { display: none; }   /* kapalıyken içerik çizilmez: büyütülmüş zemin iPhone'da sayfayı yana taşırmasın */
.scan video { object-fit: cover; }
.scan__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.1); filter: blur(var(--size-blur-scene)); }   /* büyütme: bulanık kenar boşluğu görünmesin */
.scan::after { content: ''; position: absolute; inset: 0; background: var(--color-scrim-scene); pointer-events: none; }
.scan > :not(video) { z-index: 1; }
.scan__close { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); inset-inline-start: var(--space-4); }
.scan__center {   /* ekranın tam ortasında kare; başlık onun üstünde */
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.scan__head {
  position: absolute;
  bottom: 100%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100vw;
  margin-bottom: var(--space-6);
  padding: 0 var(--space-6);
  color: var(--color-on-image);
  text-align: center;
  text-shadow: var(--shadow-text-on-image);
  transform: translateX(-50%);
}
.scan__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.scan__hint { color: var(--color-on-image-muted); font-size: var(--text-base); }
.scan__window { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.scan__window video {   /* ekran boyunda, ekranın ortasına hizalı: zemindeki görüntünün aynı parçası */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100dvh;
  transform: translate(-50%, -50%);
}
.scan__corners {   /* dört köşede kalın beyaz yay: çerçeve, yatay ve dikey kenar şeritlerinin kesişimiyle (köşelerin %22'si) maskelenir */
  position: absolute;
  inset: 0;
  border: var(--space-1) solid var(--color-on-image);
  border-radius: inherit;
  -webkit-mask: linear-gradient(to bottom, var(--color-media) 22%, transparent 22% 78%, var(--color-media) 78%),
                linear-gradient(to right, var(--color-media) 22%, transparent 22% 78%, var(--color-media) 78%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, var(--color-media) 22%, transparent 22% 78%, var(--color-media) 78%),
        linear-gradient(to right, var(--color-media) 22%, transparent 22% 78%, var(--color-media) 78%);
  mask-composite: intersect;
}
/* Baskı önizlemesi (koyu tam ekran) */
.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); inset-inline-end: 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); }
/* Fotoğraflar arası geçiş: oklar kağıdın iki yanındaki sütunun ortasında, noktalar kağıdın altında (yerleri JS'ten) */
.editor__nav { position: fixed; z-index: 2; }
.editor-dots { position: fixed; z-index: 2; display: flex; gap: var(--space-1-5); pointer-events: none; transform: translateX(-50%); }
.editor-dots__dot {   /* nokta; içinde olunan fotoğrafınki uzar (sayfa göstergesi geometrisi) */
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-on-image-fill);
  transition: width var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease;
}
.editor-dots__dot.is-active { width: 18px; background: var(--color-accent); }
.editor-dots__dot.is-edited:not(.is-active) { background: var(--color-success-vivid); }
.editor__preview-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Türkçe dışındaki dillerde yalnızca ikon ("Προεπισκόπηση" düğmeye sığmıyordu); ad aria-label'da */
.editor__preview--icon .editor__preview-label { display: none; }
.editor__preview--icon .icon { font-size: var(--icon-lg); }
.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 + yakınlaştır + düzelt + çerçeve + köşe + 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: 292px; 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__reset .icon { display: none; }   /* geniş ekranda yalnızca yazı; en dar telefonda yalnızca ikon (aşağıda) */
.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-text); 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); }
/* Renk yuvarlakları 28 px görünür; dokunma alanı aradaki boşluğun yarısı kadar her yana büyür (komşuya taşmaz) */
.swatch::after, .swatch-pick::after { content: ''; position: absolute; inset: calc(var(--space-2-5) / -2); }
.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__paper { position: relative; display: flex; transform-origin: center; will-change: transform; }
.editor-zoom__paper img {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100dvh - 120px);
  box-shadow: var(--shadow-paper-on-dark);
  -webkit-user-drag: none;
}
/* Basılı tutunca fotoğrafın üstünde kılavuz ızgarası: dokuzda bir ince, üçte bir belirgin çizgi (düzenleyicideki
   tuval ızgarasıyla aynı). Yeri fotoğrafın kağıttaki dikdörtgeni (--izgara-*: JS, kağıda oranlı). Arkadaki boyut
   1 px büyük: son çizgi kenarın dışına düşer, kenarda çizgi kalmaz. */
.editor-zoom__grid {
  --izgara-x: 0%;
  --izgara-y: 0%;
  --izgara-w: 100%;
  --izgara-h: 100%;
  position: absolute;
  left: var(--izgara-x);
  top: var(--izgara-y);
  width: var(--izgara-w);
  height: var(--izgara-h);
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(100% / 3 - var(--size-border)), color-mix(in srgb, var(--color-on-image) 85%, transparent) calc(100% / 3 - var(--size-border)) calc(100% / 3)),
    repeating-linear-gradient(to bottom, transparent 0 calc(100% / 3 - var(--size-border)), color-mix(in srgb, var(--color-on-image) 85%, transparent) calc(100% / 3 - var(--size-border)) calc(100% / 3)),
    repeating-linear-gradient(to right, transparent 0 calc(100% / 9 - var(--size-border)), color-mix(in srgb, var(--color-on-image) 40%, transparent) calc(100% / 9 - var(--size-border)) calc(100% / 9)),
    repeating-linear-gradient(to bottom, transparent 0 calc(100% / 9 - var(--size-border)), color-mix(in srgb, var(--color-on-image) 40%, transparent) calc(100% / 9 - var(--size-border)) calc(100% / 9));
  background-size: calc(100% + var(--size-border)) calc(100% + var(--size-border));
}
.editor-zoom__grid[hidden] { display: none; }
/* Basılı tutunca önceki hâl (Filtre'de filtresiz, Stüdyo'da ayarsız): aynı boyutta kağıt, resmin tam üstünde */
.editor-zoom__paper .editor-zoom__before { position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: none; }
.editor-zoom__before[hidden] { display: none; }
.editor-zoom__badge { top: calc(var(--space-4) + env(safe-area-inset-top)); }   /* düzenleyicideki rozet; çentiğin altında */
.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,
.editor.is-composing .editor__nav, .editor.is-composing .editor-dots { 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; }
/* En dar telefonlarda (iPhone SE 1) çerçeve renk satırı tek satıra sığsın: "Renk seç" yazısı gizlenir, yalnızca tayf yuvarlağı kalır
   (alt satıra kayınca sabit yükseklikteki panelden taşıp sekme çubuğunun altına giriyordu) */
@media (max-width: 359px) {
  .swatch-pick:not(.swatch-pick--dot) { justify-content: center; width: 28px; padding: 0; }
  .swatch-pick__label { display: none; }
  /* Üst satır (Standart/Polaroid, Çevir, Sıfırla) da sığsın: şablon düğmeleri daralır, Çevir yalnızca ikon */
  .editor__template .segmented__item { padding: 0 var(--space-2); }
  .editor__action-label, .editor__reset-label { display: none; }
  .editor__reset .icon { display: inline-block; }   /* uzun dillerde ("Réinitialiser") satır ekrandan taşmasın */
}
.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; numaralar hediye sayacının dilinde (çukurda buzlu cam, olukla bağlı), açılınca sırayla
   kırmızı yanar (isik-yan: pages/order.css). 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 { --cukur: var(--space-1); margin-bottom: var(--space-6); }   /* --cukur: çukurun camın çevresindeki payı */
.onboarding__step {
  --sira: 0;   /* adımın yanma sırası (0, 1, 2): pencere açılınca 1 → 2 → 3 sırayla yanar */
  --yanma: calc(var(--duration-slow) + var(--sira) * (var(--duration-slow) + var(--duration-base)));
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.onboarding__step:nth-child(2) { --sira: 1; }
.onboarding__step:nth-child(3) { --sira: 2; }
.onboarding__step:last-child { padding-bottom: 0; }
/* Hediye sayacının dili, dikey: her numara kendi çukurunda kabarık buzlu cam; çukurlar dikey olukla bağlı, oluğun
   içinde kırmızı çizgi bir sonraki adıma akar */
.onboarding__step::before, .onboarding__step::after {   /* çukurun ortasından bir sonraki adımın çukurunun ortasına */
  content: '';
  position: absolute;
  top: calc(var(--cukur) + var(--size-control-sm) / 2);
  bottom: calc(-1 * (var(--cukur) + var(--size-control-sm) / 2));
  inset-inline-start: calc(var(--cukur) + var(--size-control-sm) / 2 - var(--cizgi) / 2);   /* çukurun ortası (sağdan sola dillerde sağda) */
  width: var(--cizgi);
  border-radius: var(--radius-full);
}
.onboarding__step::before { --cizgi: var(--space-3); background: var(--color-fill); box-shadow: var(--shadow-well); }   /* oluk */
.onboarding__step::after {   /* oluğun içindeki kırmızı çizgi: adım yanınca aşağı doğru dolar */
  --cizgi: var(--space-1);
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
}
.onboarding__step:last-child::before, .onboarding__step:last-child::after { display: none; }
.onboarding__slot {   /* numaranın çukuru: kartın içine oyulmuş (oluğun üstünde) */
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-self: flex-start;
  /* optik ortalama: üst iç gölge üst halkayı geniş, camın alt ışığı alt halkayı dar gösterir; cam 1 px yukarıda */
  padding: calc(var(--cukur) - var(--size-border)) var(--cukur) calc(var(--cukur) + var(--size-border));
  border-radius: var(--radius-full);
  background: var(--color-fill);
  box-shadow: var(--shadow-well);
}
.onboarding__num {   /* buzlu cam yuvarlak: önce açık cam, yanınca kırmızı tonlu cam ve altından hafif kırmızı ışık */
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  overflow: hidden;
  border: var(--size-border) solid color-mix(in srgb, var(--color-border) 70%, var(--color-on-image));
  border-radius: var(--radius-full);
  background: linear-gradient(to bottom, var(--color-surface), var(--color-fill));
  box-shadow: var(--shadow-glass);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
}
.onboarding__num::before, .onboarding__num::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.onboarding__num::before {   /* kırmızı tonlu cam (yanınca belirir) ve hafif çapraz parlama */
  background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--color-on-image) 45%, transparent) 42%, transparent 58%),
              linear-gradient(to bottom, color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 30%, var(--color-surface)));
  opacity: 0;
}
.onboarding__num::after {   /* yanarken ortadan kenarlara yayılan kırmızı ışık (hediye sayacındaki gibi) */
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 32%, transparent) 0, color-mix(in srgb, var(--color-accent) 22%, transparent) 50%, transparent 72%);
  opacity: 0;
}
/* Pencere her açıldığında: adım sırasıyla yanar, ardından oluktaki çizgi bir sonrakine akar */
.dialog.is-open .onboarding__num { animation: adim-yan var(--duration-base) var(--ease-standard) var(--yanma) both; }
.dialog.is-open .onboarding__num::before { animation: adim-ton var(--duration-base) var(--ease-standard) var(--yanma) both; }
.dialog.is-open .onboarding__num::after { animation: isik-yan var(--duration-loop-fast) var(--ease-standard) var(--yanma) both; }
.dialog.is-open .onboarding__step::after { animation: adim-akis var(--duration-slow) var(--ease-smooth) calc(var(--yanma) + var(--duration-base)) both; }
@keyframes adim-yan {
  to { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-on-image)); box-shadow: var(--shadow-orb-accent); color: var(--color-accent-text); }
}
@keyframes adim-ton { to { opacity: 1; } }
@keyframes adim-akis { to { transform: scaleY(1); } }
.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);
  inset-inline-start: 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-text);
  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-text); 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: start; }
.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-text);
}
.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-text); 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-text);
  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-text); 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 { hyphens: auto; 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-text); 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-text); 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-text); 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-text); 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; text-wrap: balance; }   /* uzun notta (çeviri) iki satıra iner */
.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-text); 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-text); }
.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-solid); 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%; background: var(--color-fill-strong); font-family: inherit; }   /* harita kütüphanesinin gri zemini ve yazı tipi yerine */

.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-text); 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 { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; text-align: start; cursor: pointer; 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); }
/* Otomat ekranı (yönetici): monitörün son görüntüsü, dikey 9:16 (1080×1920), kart genişliğinin yarısı */
.machine__screen { display: block; width: 50%; aspect-ratio: 9 / 16; margin-inline: auto; border: var(--size-border) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-fill); object-fit: cover; }

/* 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-text); font-weight: var(--weight-bold); }
.calendar__day[aria-pressed="true"] { background: var(--color-accent-solid); 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-text); 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-text); 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-text); font-weight: var(--weight-semibold); }

@media (min-width: 600px) {
  .revenue-chart__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 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__title { display: flex; align-items: center; gap: var(--space-2); }   /* paylaşım noktası + gider adı */
.ledger-row__share { align-self: flex-start; margin-top: var(--space-2); }
.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); }

/* İzleme bölümü (izleme.js): olay satırının açılan ayrıntısı ve ham veri */
.event-detail { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-3-5) var(--space-3-5); }
.event-detail__data {
  padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-sm); background: var(--color-fill);
  font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere;
}
.heatmap { overflow-x: auto; }
}


/* ---- 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); inset-inline-start: 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; }
}
}