/* =====================================================================
   Katman sırası: base (Tailwind preflight) < components (bileşenler) < katmansız utility'ler
   Preflight'ı katmana almamızın nedeni: katmansız `a{color:inherit}` kuralı,
   katmanlı .btn/.pill renklerini eziyordu (bağlantı olan butonlarda koyu yazı).
   ===================================================================== */
@layer base, components;
@layer base {
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}
}

/* =====================================================================
   collectall.net — Tasarım Sistemi (Stitch "Collector Archival System")
   Tüm renk/boşluk/yarıçap değerleri CSS değişkenlerinden okunur.
   Tailwind config (comp/layout-head.php) bu değişkenleri kullanır.
   ===================================================================== */
:root {
  /* Marka renkleri (RGB üçlü — Tailwind alpha desteği için) */
  --c-primary: 45 27 132;            /* #2D1B84 koyu mor (ana)      */
  --c-primary-deep: 24 0 101;        /* #180065 başlık moru          */
  --c-primary-container: 45 27 132;  /* #2D1B84                      */
  --c-on-primary: 255 255 255;
  --c-on-primary-container: 151 139 244;
  --c-primary-fixed: 228 223 255;    /* #E4DFFF */
  --c-primary-fixed-dim: 199 191 255;/* #C7BFFF */
  --c-on-primary-fixed: 24 0 101;
  --c-on-primary-fixed-variant: 68 54 155;

  --c-secondary: 143 78 0;           /* #8F4E00 koyu turuncu metin   */
  --c-secondary-container: 242 138 22; /* #F28A16 canlı turuncu (CTA) */
  --c-on-secondary: 255 255 255;
  --c-on-secondary-container: 101 53 0;
  --c-secondary-fixed: 255 220 194;
  --c-secondary-fixed-dim: 255 183 123;
  --c-on-secondary-fixed: 46 21 0;
  --c-on-secondary-fixed-variant: 109 58 0;

  --c-tertiary: 35 0 92;
  --c-tertiary-container: 60 0 145;
  --c-on-tertiary: 255 255 255;
  --c-on-tertiary-container: 167 131 255;
  --c-tertiary-fixed: 233 221 255;
  --c-tertiary-fixed-dim: 208 188 255;
  --c-on-tertiary-fixed: 35 0 92;
  --c-on-tertiary-fixed-variant: 85 22 190;

  --c-background: 246 247 251;       /* #F6F7FB açık arka plan       */
  --c-surface: 246 247 251;
  --c-surface-bright: 251 248 255;
  --c-surface-dim: 215 217 238;
  --c-surface-container-lowest: 255 255 255;
  --c-surface-container-low: 243 242 255;
  --c-surface-container: 236 236 255;
  --c-surface-container-high: 229 231 252;
  --c-surface-container-highest: 224 225 246;
  --c-surface-variant: 224 225 246;
  --c-on-surface: 21 24 39;          /* #151827 ana metin            */
  --c-on-surface-variant: 102 112 133; /* #667085 ikincil metin      */
  --c-on-background: 21 24 39;
  --c-inverse-surface: 45 48 64;
  --c-inverse-on-surface: 240 239 255;
  --c-inverse-primary: 199 191 255;
  --c-outline: 120 117 131;
  --c-outline-variant: 201 196 212;

  --c-error: 229 72 77;              /* #E5484D */
  --c-on-error: 255 255 255;
  --c-error-container: 253 240 240;
  --c-on-error-container: 147 0 10;

  /* Koleksiyon durum renkleri */
  --c-success: 23 166 115;           /* #17A673 Bende Var  */
  --c-success-bg: 232 247 240;       /* #E8F7F0 */
  --c-missing: 229 72 77;            /* #E5484D Bende Yok  */
  --c-missing-bg: 253 240 240;       /* #FDF0F0 */
  --c-warning: 245 158 11;           /* #F59E0B Arıyorum   */
  --c-warning-text: 217 119 6;       /* #D97706 */
  --c-warning-bg: 254 247 236;       /* #FEF7EC */
  --c-trade: 139 92 246;             /* #8B5CF6 Takaslık   */
  --c-trade-bg: 244 240 255;         /* #F4F0FF */

  /* Tipografi */
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Yarıçap */
  --r-sm: 0.25rem; --r: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px;

  /* Boşluk */
  --sp-2xs: .25rem; --sp-xs: .5rem; --sp-sm: .75rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem;

  /* Gölgeler (mor tonlu) */
  --sh-1: 0px 2px 8px -2px rgba(45,27,132,.04), 0px 8px 20px -4px rgba(45,27,132,.06);
  --sh-2: 0px 6px 16px -4px rgba(45,27,132,.08), 0px 16px 32px -8px rgba(45,27,132,.10);
  --sh-3: 0px 24px 48px -12px rgba(45,27,132,.18);

  --header-h: 5rem;
  --sidebar-w: 260px;
  --bottomnav-h: 4rem;
}

/* Site temel stilleri — preflight ile aynı 'base' katmanında (bileşen renkleri her zaman kazanır) */
@layer base {
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: rgb(var(--c-background)); color: rgb(var(--c-on-surface));
  font-family: var(--font-body); font-size: 14px; line-height: 20px;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); margin: 0; }
h1,h2 { letter-spacing: -0.02em; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
}
::-webkit-scrollbar { width: 0; height: 0; }
.no-scrollbar { scrollbar-width: none; }

/* Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none; flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  /* Font yüklenmeden önce / yüklenemezse ikon adı metni taşma yapmasın: her ikon 1em kare */
  width: 1em; height: 1em; overflow: hidden; text-align: center; vertical-align: middle;
}
.material-symbols-outlined.filled, .is-filled .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Safe-area yardımcıları (Stitch: pt-safe / pb-safe) */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.h-13 { height: 3.25rem; } .w-13 { width: 3.25rem; }
.active\:scale-98:active { transform: scale(.98); }

/* Font token sınıfları (Tailwind config'de de tanımlı; JS kapalıyken de doğru görünsün) */
.font-headline-xl,.font-headline-lg,.font-headline-md,.font-headline-sm,.font-label-lg,.font-label-md,.font-label-sm,.font-headline-xl-mobile,.font-headline-lg-mobile { font-family: var(--font-head); }
.font-body-lg,.font-body-md,.font-body-sm { font-family: var(--font-body); }

/* ---------------------------------------------------------------------
   Bileşenler
   --------------------------------------------------------------------- */
@layer components {
.container-x { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .container-x { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container-x { padding-left: 2.5rem; padding-right: 2.5rem; } }

.card { background: rgb(var(--c-surface-container-lowest)); border-radius: var(--r-lg); box-shadow: var(--sh-1); border: 1px solid rgba(21,24,39,.06); }
.card-hover { transition: transform .3s, box-shadow .3s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 3rem; padding: 0 1.5rem; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 20px; transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; border: 1px solid transparent; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: rgb(var(--c-primary-container)); color: #fff; box-shadow: 0 4px 12px -4px rgba(45,27,132,.4); }
.btn-primary:hover { background: rgb(var(--c-primary-deep)); transform: translateY(-1px); }
.btn-accent { background: rgb(var(--c-secondary-container)); color: #fff; box-shadow: 0 2px 8px rgba(242,138,22,.3); }
.btn-accent:hover { background: rgb(var(--c-secondary)); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: rgb(var(--c-on-surface)); border-color: rgba(21,24,39,.12); }
.btn-ghost:hover { background: rgb(var(--c-background)); }
.btn-soft { background: rgb(var(--c-surface-container-low)); color: rgb(var(--c-primary)); }
.btn-soft:hover { background: rgb(var(--c-primary-container)); color: #fff; }
.btn-danger { background: rgb(var(--c-missing-bg)); color: rgb(var(--c-missing)); }
.btn-danger:hover { background: rgb(var(--c-missing)); color: #fff; }
.btn-sm { height: 2.5rem; padding: 0 1rem; font-size: 13px; }
.btn-xs { height: 2.25rem; padding: 0 .75rem; font-size: 12px; border-radius: var(--r); }
.btn-lg { height: 3.5rem; padding: 0 2rem; font-size: 15px; }
.btn-icon { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--r-full); }

.input { width: 100%; height: 3rem; padding: 0 1rem; border-radius: var(--r-md); background: #fff; border: 1.5px solid #E4E7EC; color: rgb(var(--c-on-surface)); font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: rgb(var(--c-primary-container)); box-shadow: 0 0 0 3px rgba(45,27,132,.12); }
.input::placeholder { color: rgb(var(--c-outline)); }
textarea.input { height: auto; padding: .75rem 1rem; min-height: 6rem; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }
.input-soft { background: rgb(var(--c-surface-container-low)); border-color: transparent; }
.input-soft:focus { background: #fff; }
.label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 20px; color: rgb(var(--c-on-surface)); margin-bottom: .375rem; }
.help { font-size: 12px; color: rgb(var(--c-on-surface-variant)); }
.field-error { font-size: 12px; color: rgb(var(--c-missing)); margin-top: .25rem; }

/* Durum rozetleri */
.badge-status { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: .375rem; font-family: var(--font-head); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .04em; border: 1px solid transparent; white-space: nowrap; }
.badge-var    { background: rgb(var(--c-success-bg)); color: rgb(var(--c-success)); border-color: rgba(23,166,115,.2); }
.badge-yok    { background: rgb(var(--c-missing-bg)); color: rgb(var(--c-missing)); border-color: rgba(229,72,77,.2); }
.badge-aranan { background: rgb(var(--c-warning-bg)); color: rgb(var(--c-warning-text)); border-color: rgba(245,158,11,.2); }
.badge-takas  { background: rgb(var(--c-trade-bg)); color: rgb(var(--c-trade)); border-color: rgba(139,92,246,.2); }
.badge-favori { background: rgb(var(--c-missing-bg)); color: rgb(var(--c-missing)); border-color: rgba(229,72,77,.2); }
.badge-status.lg { font-size: 12px; padding: .25rem .625rem; border-radius: var(--r-full); }
.pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: var(--r-full); font-family: var(--font-head); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; background: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-on-surface)); box-shadow: var(--sh-1); border: 1px solid transparent; transition: background .2s, color .2s; }
.pill:hover { background: rgb(var(--c-surface-container-low)); }
.pill.active, .pill[aria-pressed="true"], .pill.active:hover, .pill[aria-pressed="true"]:hover { background: rgb(var(--c-primary-container)); color: #fff; }
.chip { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: .25rem; background: rgb(var(--c-surface-container-high)); color: rgb(var(--c-primary)); font-family: var(--font-head); font-size: 10px; font-weight: 700; line-height: 14px; }

/* İlerleme çubuğu */
.progress { width: 100%; height: .5rem; border-radius: var(--r-full); background: rgba(45,27,132,.08); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: var(--r-full); background: rgb(var(--c-primary-container)); transition: width .5s ease; }
.progress.gradient > span { background: linear-gradient(90deg, rgb(var(--c-primary-container)), rgb(var(--c-primary-container)) 60%, rgb(var(--c-secondary-container))); }
.progress > span.done { background: rgb(var(--c-success)); }
.progress > span.accent { background: rgb(var(--c-secondary-container)); }

/* Uyarı / bildirim */
.alert { display: flex; gap: .625rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--r-md); font-size: 14px; line-height: 20px; border: 1px solid transparent; }
.alert-success { background: rgb(var(--c-success-bg)); color: #0d7a52; border-color: rgba(23,166,115,.25); }
.alert-error   { background: rgb(var(--c-missing-bg)); color: #b3262b; border-color: rgba(229,72,77,.25); }
.alert-warning { background: rgb(var(--c-warning-bg)); color: #9a5a00; border-color: rgba(245,158,11,.25); }
.alert-info    { background: rgb(var(--c-primary-fixed)); color: rgb(var(--c-primary)); border-color: rgba(45,27,132,.15); }
#cl-toast-wrap { position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + 1.25rem); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 1024px) { #cl-toast-wrap { bottom: 1.5rem; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-radius: var(--r-md); background: rgb(var(--c-inverse-surface)); color: rgb(var(--c-inverse-on-surface)); box-shadow: var(--sh-3); font-size: 14px; animation: toast-in .25s ease-out; }
.toast .material-symbols-outlined { font-size: 20px; }
.toast-success .material-symbols-outlined { color: #5ad3a6; } .toast-error .material-symbols-outlined { color: #ff8a8e; } .toast-warning .material-symbols-outlined { color: #ffc46b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Boş durum */
.empty-state { text-align: center; padding: 3rem 1.5rem; border-radius: var(--r-lg); background: rgb(var(--c-surface-container-lowest)); box-shadow: var(--sh-1); }
.empty-state .material-symbols-outlined { font-size: 44px; color: rgb(var(--c-outline-variant)); }

/* Görsel çerçevesi */
.thumb-frame { border-radius: var(--r-md); overflow: hidden; background: rgb(var(--c-surface-container)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.thumb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-contain img { object-fit: contain; background: #fff; padding: .25rem; }
.img-gray img { filter: grayscale(100%); opacity: .7; transition: filter .3s, opacity .3s; }
.img-gray:hover img { filter: none; opacity: 1; }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 8px rgba(45,27,132,.05); }
.site-header .nav-link { padding: .5rem .75rem; border-radius: var(--r); font-family: var(--font-head); font-weight: 700; font-size: 14px; line-height: 20px; color: rgb(var(--c-on-surface-variant)); transition: background .2s, color .2s; }
.site-header .nav-link:hover { color: rgb(var(--c-on-surface)); background: rgb(var(--c-surface-container-low)); }
.site-header .nav-link.active { color: rgb(var(--c-primary)); background: rgb(var(--c-surface-container-low)); }
.brand-mark { width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: rgb(var(--c-primary-container)); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sh-1); flex-shrink: 0; }
.brand-text { font-family: var(--font-head); font-weight: 800; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: rgb(var(--c-primary)); }
.brand-text b { color: rgb(var(--c-secondary-container)); font-weight: 800; }
@media (max-width: 380px) { .brand-text { font-size: 17px; } .site-header .container-x { gap: .5rem; } }
.page-offset { padding-top: var(--header-h); }
@media (max-width: 767px) { :root { --header-h: 4rem; } }

/* Mobil çekmece menü */
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(45,48,64,.4); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: 61; width: min(88vw, 360px); background: #fff; box-shadow: var(--sh-3); transform: translateX(100%); transition: transform .3s ease-out; overflow-y: auto; }
.drawer.open { transform: none; }
.drawer .drawer-link { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 600; font-size: 15px; color: rgb(var(--c-on-surface)); min-height: 44px; }
.drawer .drawer-link:hover, .drawer .drawer-link.active { background: rgb(var(--c-surface-container-low)); color: rgb(var(--c-primary)); }

/* Alt navigasyon (mobil) */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -4px 24px rgba(45,27,132,.06); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav .inner { position: relative; display: flex; align-items: center; justify-content: space-around; height: var(--bottomnav-h); padding: 0 .5rem; }
.bottom-nav a.bn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 3.5rem; gap: .25rem; color: rgb(var(--c-on-surface-variant)); font-family: var(--font-head); font-size: 10px; font-weight: 700; line-height: 14px; transition: color .2s; }
.bottom-nav a.bn-item.active { color: rgb(var(--c-primary-container)); }
.bottom-nav a.bn-item .material-symbols-outlined { font-size: 22px; }
.bottom-nav .bn-add { position: relative; top: -1.25rem; width: 3.25rem; height: 3.25rem; min-width: 52px; min-height: 52px; border-radius: var(--r-full); background: rgb(var(--c-secondary-container)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(254,147,34,.38); transition: transform .15s; }
.bottom-nav .bn-add:active { transform: scale(.95); }
.has-bottom-nav { padding-bottom: calc(var(--bottomnav-h) + 1.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .bottom-nav { display: none; } .has-bottom-nav { padding-bottom: 0; } }

/* Kullanıcı paneli kabuğu */
.panel-shell { display: block; }
.panel-sidebar { display: none; }
@media (min-width: 1024px) {
  .panel-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .panel-sidebar { display: block; position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.side-link { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r-md); font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 20px; color: rgb(var(--c-on-surface-variant)); transition: background .2s, color .2s; min-height: 44px; }
.side-link:hover { background: rgb(var(--c-surface-container-low)); color: rgb(var(--c-on-surface)); }
.side-link.active { background: rgb(var(--c-primary-container)); color: #fff; box-shadow: var(--sh-1); }
.side-link .material-symbols-outlined { font-size: 20px; }
.side-link .count { margin-left: auto; font-size: 11px; padding: .1rem .5rem; border-radius: var(--r-full); background: rgb(var(--c-surface-container-high)); color: rgb(var(--c-primary)); }
.side-link .count.count-warn { background: rgb(var(--c-secondary-container)); color: #fff; font-weight: 700; }
.side-link.active .count.count-warn { background: #fff; color: rgb(var(--c-secondary-container)); }
.side-link.active .count { background: rgba(255,255,255,.2); color: #fff; }
.side-title { padding: .5rem .75rem .25rem; font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-outline)); }

/* Alt sayfa (bottom sheet) */
.sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(45,48,64,.4); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: #fff; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -8px 30px rgba(45,27,132,.18); max-height: 88vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .3s ease-out; padding-bottom: env(safe-area-inset-bottom); }
.sheet:not(.open) { pointer-events: none; visibility: hidden; transition: transform .3s ease-out, visibility 0s .3s; }
.sheet.open { transform: none; }
.sheet .grabber { width: 3rem; height: .375rem; border-radius: var(--r-full); background: rgb(var(--c-outline-variant)); margin: .75rem auto .25rem; }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(92vw, 520px); transform: translate(-50%, -50%) scale(.96); opacity: 0; border-radius: var(--r-xl); max-height: 86vh; }
  .sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet:not(.open) { transition: transform .3s ease-out, opacity .3s, visibility 0s .3s; }
  .sheet .grabber { display: none; }
}
.sheet-body { overflow-y: auto; padding: .75rem 1rem 1rem; }

/* Slider */
.hero-slider { position: relative; }
.hero-slider .slides { position: relative; }
.hero-slider .slide { display: none; }
.hero-slider .slide.active { display: flex; flex-direction: column; gap: 1rem; animation: slide-in .5s ease-out; }
.hero-slider:not(.js) .slide:first-child { display: flex; flex-direction: column; gap: 1rem; }
.hero-slider .slide-img { display: none; }
.hero-slider .slide-img.active { display: flex; animation: slide-in .5s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(12px);} to { opacity: 1; transform: none; } }
.hero-dot { width: .5rem; height: .5rem; border-radius: var(--r-full); background: rgb(var(--c-outline-variant)); transition: all .2s; border: 0; padding: 0; }
.hero-dot.active { width: .625rem; height: .625rem; background: rgb(var(--c-primary-container)); }
.hero-dot:hover { background: rgb(var(--c-primary)); }

/* Metin kesme */
.line-clamp-1,.line-clamp-2,.line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; }

/* Blog içerik tipografisi */
.prose { font-size: 16px; line-height: 1.75; color: rgb(var(--c-on-surface)); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 24px; line-height: 32px; margin-top: 2em; scroll-margin-top: 6rem; }
.prose h3 { font-size: 20px; line-height: 28px; margin-top: 1.6em; scroll-margin-top: 6rem; }
.prose h4 { font-size: 17px; margin-top: 1.4em; }
.prose p { margin: 0; }
.prose p + p { margin-top: 1.1em; }
.prose a { color: rgb(var(--c-primary)); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.5rem; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose img { border-radius: var(--r-md); margin: 1.5em auto; display: block; box-shadow: var(--sh-1); }
.prose figure { margin: 1.5em 0; } .prose figcaption { text-align: center; font-size: 13px; color: rgb(var(--c-on-surface-variant)); margin-top: .5em; }
.prose blockquote { border-left: 4px solid rgb(var(--c-secondary-container)); background: rgb(var(--c-surface-container-low)); padding: 1rem 1.25rem; border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: rgb(var(--c-on-surface-variant)); }
.prose pre { background: rgb(var(--c-inverse-surface)); color: rgb(var(--c-inverse-on-surface)); padding: 1rem 1.25rem; border-radius: var(--r-md); overflow-x: auto; font-size: 13px; line-height: 1.6; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgb(var(--c-surface-container)); padding: .1em .35em; border-radius: .25rem; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid rgb(var(--c-outline-variant)); padding: .5rem .75rem; text-align: left; }
.prose th { background: rgb(var(--c-surface-container-low)); font-family: var(--font-head); }
.prose hr { border: 0; border-top: 1px solid rgb(var(--c-outline-variant)); }
.prose iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-md); }
.prose [style*="color:hsl(0, 0%, 0%)"], .prose [style*="color:hsl(0,0%,0%)"] { color: inherit !important; }

/* Tablo (istatistik/liste) */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-head); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-outline)); padding: .625rem .75rem; border-bottom: 1px solid rgb(var(--c-surface-container-high)); }
.table td { padding: .75rem; border-bottom: 1px solid rgb(var(--c-surface-container-low)); vertical-align: middle; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sayfalama */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .375rem; }
.pagination a, .pagination span { min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); font-family: var(--font-head); font-weight: 700; font-size: 13px; background: #fff; color: rgb(var(--c-on-surface)); box-shadow: var(--sh-1); }
.pagination a:hover { background: rgb(var(--c-surface-container-low)); }
.pagination .current { background: rgb(var(--c-primary-container)); color: #fff; }
.pagination .dots { box-shadow: none; background: transparent; color: rgb(var(--c-outline)); }

/* Görünüm seçici */
.view-switch { display: inline-flex; padding: .125rem; border-radius: var(--r); background: rgb(var(--c-surface-container-high)); }
.view-switch button { width: 2rem; height: 1.75rem; border: 0; background: transparent; color: rgb(var(--c-on-surface-variant)); border-radius: .375rem; display: inline-flex; align-items: center; justify-content: center; }
.view-switch button.active { background: #fff; color: rgb(var(--c-primary-container)); box-shadow: var(--sh-1); }
.view-switch .material-symbols-outlined { font-size: 18px; }

/* Grid görünümleri (koleksiyon detay) */
.items-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .items-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .items-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .items-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1440px) { .items-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.items-large { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .items-large { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1280px) { .items-large { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.items-list { display: flex; flex-direction: column; gap: .5rem; }
.items-list .card-large-only, .items-grid .card-large-only { display: none; }
.items-list .card-grid-only, .items-large .card-grid-only { display: none; }
.items-list .card-list-only { display: flex; } .items-grid .card-list-only, .items-large .card-list-only { display: none; }

/* Durum hızlı menü (popover) */
.status-menu { position: absolute; right: .5rem; bottom: 2.5rem; z-index: 20; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-3); padding: .375rem; min-width: 11rem; display: none; }
.status-menu.open { display: block; }
.status-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem; border-radius: var(--r); border: 0; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: rgb(var(--c-on-surface)); text-align: left; min-height: 40px; }
.status-menu button:hover { background: rgb(var(--c-surface-container-low)); }
.status-menu button .material-symbols-outlined { font-size: 18px; }

/* Yardımcılar */
.skeleton { background: linear-gradient(90deg, rgb(var(--c-surface-container)) 25%, rgb(var(--c-surface-container-high)) 50%, rgb(var(--c-surface-container)) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tap { min-height: 44px; min-width: 44px; }
[x-cloak] { display: none !important; }
.hidden-nojs { display: none; }
.js .hidden-nojs { display: initial; }
.js .nojs-only { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- Toplu seçim modu ---- */
.bulk-mode [data-filter-item] [data-product] { position: relative; cursor: pointer; user-select: none; }
.bulk-mode [data-filter-item] [data-product]::before { content: ''; position: absolute; top: .5rem; left: .5rem; z-index: 20; width: 1.5rem; height: 1.5rem; border-radius: var(--r-full); background: rgba(255,255,255,.95); border: 2px solid rgb(var(--c-outline)); box-shadow: var(--sh-1); transition: background .15s, border-color .15s; }
.bulk-mode [data-filter-item] [data-product]::after { content: '✓'; position: absolute; top: .5rem; left: .5rem; z-index: 21; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 14px/1 var(--font-head); opacity: 0; transition: opacity .15s; }
.bulk-mode [data-filter-item].bulk-selected [data-product] { outline: 2px solid rgb(var(--c-primary-container)); outline-offset: 0; }
.bulk-mode [data-filter-item].bulk-selected [data-product]::before { background: rgb(var(--c-primary-container)); border-color: rgb(var(--c-primary-container)); }
.bulk-mode [data-filter-item].bulk-selected [data-product]::after { opacity: 1; }
.bulk-mode [data-filter-item] [data-status-toggle], .bulk-mode [data-filter-item] [data-fav] { pointer-events: none; opacity: .35; }
[data-bulk-toggle][aria-pressed="true"] { background: rgb(var(--c-primary-container)); color: #fff; }
.bulk-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -6px 28px rgba(45,27,132,.12); border-top: 1px solid rgb(var(--c-surface-container-high)); }
.bulk-bar-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.bulk-count { min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: var(--r-full); background: rgb(var(--c-primary-container)); color: #fff; font: 800 13px/2rem var(--font-head); text-align: center; }
.bulk-bar .btn[disabled] { opacity: .5; pointer-events: none; }
@media (min-width: 768px) { .bulk-bar-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 1023px) { body.bulk-open .bottom-nav { display: none; } }
body.bulk-open #cl-toast-wrap { bottom: 9rem !important; }

}

/* Katman dışı güvence: aktif olmayan slayt hiçbir utility ile görünür hale gelemez (eski index.php + yeni CSS kombinasyonu dahil) */
.hero-slider.js .slide:not(.active), .hero-slider .slide-img:not(.active) { display: none !important; }
.hero-slider:not(.js) .slide:not(:first-child) { display: none !important; }