/* gazioglumobilya.com müşteri sitesi — görsel dil (Claude 2026-10-25, AJAN F).
   Mert: site, Gazioğlu Merkez panelinin BİREBİR görsel dilini taşır — "Apple · Işık Altını" (imza-tema.js id 'apple' L paleti) ve koyu "Gece altını"
   (D paleti): Işık altını DUVAR KÂĞIDI (tema-apple.css §2 'altin' katmanları aynen), LIQUID GLASS gezinme (üst çubuk, alt sekme kapsülü, açılır menü,
   sheet, bildirim: yarı saydam dolgu + backdrop-filter + ince parlak kenar), içerik OPAK "inset grouped" kartlar (r 22/24, yumuşak çok katmanlı gölge),
   iOS kapsül düğmeler (birincil = altın-bronz dolgu, ikincil = sıcak gri dolgu + altın yazı), SF / Inter yazı ölçeği (Large Title 34).
   Değişken adları ve değerleri panelle aynı (--bg, --surface, --label-1, --accent, --accent-fill, --brand, --fill-*, --sep, --ap-cam, --ap-blur,
   --ap-kenar, --ap-golge, --e1 ...). Kırmızı yalnız indirimli fiyatta. Tema: sistem + kullanıcı düğmesi (html[data-tema="acik"|"koyu"]). */
@font-face { font-family: 'GM Inter'; font-style: normal; font-weight: 400 800; font-display: optional; src: url(/site/inter.woff2) format('woff2'); }

/* ---------- 1) JETONLAR — Işık Altını (açık) ---------- */
:root {
  --bg: #F3EFE7; --surface: #FFFDF9; --surface-2: #F8F4EC; --surface-3: #ECE5D8;
  --accent: #80602A; --accent-fill: #8C6A33; --brand: #B8925A; --on-accent: #FFFFFF;
  --accent-hover: color-mix(in srgb, #8C6A33 88%, #000); --accent-tint: color-mix(in srgb, #80602A 13%, transparent); --accent-tint-2: color-mix(in srgb, #80602A 20%, transparent);
  --hero-grad: linear-gradient(140deg, #9A7438 0%, #7A5A2C 52%, #4A361A 100%);
  --label-1: #000000; --label-2: rgba(60, 50, 36, .78); --label-3: rgba(60, 50, 36, .32); --label-4: rgba(60, 50, 36, .18);
  --fill-1: #E2D9C9; --fill-2: #E8E0D2; --fill-3: #EEE7DB; --fill-4: #F4EFE6;
  --sep: rgba(90, 70, 40, .16); --sep-strong: rgba(90, 70, 40, .28); --line-soft: rgba(90, 70, 40, .10);
  --positive: #1C7430; --warning: #B33000; --negative: #C4001A;
  --positive-bg: color-mix(in srgb, #1C7430 14%, transparent); --warning-bg: color-mix(in srgb, #B33000 14%, transparent); --negative-bg: color-mix(in srgb, #C4001A 12%, transparent);
  --e1: 0 1px 2px rgba(90, 64, 24, .05), 0 4px 18px rgba(90, 64, 24, .06);
  --ap-cam: rgba(255, 251, 243, .62); --ap-cam-kalin: rgba(253, 249, 241, .84); --ap-cam-ince: rgba(255, 251, 243, .46);
  --ap-blur: blur(22px) saturate(180%);
  --ap-kenar: inset 0 1px 0 rgba(255, 246, 226, .95), inset 0 0 0 .5px rgba(214, 186, 132, .45), inset 0 -.5px 0 rgba(90, 64, 24, .05);
  --ap-cizgi: 0 0 0 .5px rgba(120, 90, 40, .12);
  --ap-golge: 0 8px 30px rgba(90, 64, 24, .10), 0 1px 3px rgba(90, 64, 24, .06);
  --ap-golge-buyuk: 0 24px 70px rgba(90, 64, 24, .18), 0 4px 14px rgba(90, 64, 24, .08);
  --ap-widget: rgba(255, 251, 243, .62);
  --ap-widget-kenar: inset 0 1px 0 rgba(255, 246, 226, .95), inset 0 0 0 .5px rgba(214, 186, 132, .40), 0 0 0 .5px rgba(120, 90, 40, .10);
  --ap-widget-golge: 0 8px 28px rgba(90, 74, 42, .10), 0 1px 3px rgba(90, 74, 42, .06);
  --ap-segment-on: #FFFDF9; --ap-perde-renk: rgba(246, 240, 230, .50);
  --ap-yay: cubic-bezier(.32, .72, 0, 1);
  --ap-wp-taban: linear-gradient(175deg, #FAEEDA 0%, #FCF7EE 52%, #F5E9DA 100%);
  --ap-wp-leke: radial-gradient(70vmax 52vmax at 10% 6%, rgba(244, 200, 132, .58), transparent 70%), radial-gradient(58vmax 46vmax at 94% 16%, rgba(255, 224, 176, .62), transparent 70%), radial-gradient(64vmax 50vmax at 82% 100%, rgba(238, 186, 156, .40), transparent 70%), radial-gradient(54vmax 46vmax at 4% 96%, rgba(255, 238, 200, .60), transparent 70%);
  --ap-wp-dalga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='.6'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3Cstop offset='.42' stop-color='%23FFFFFF' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23F0BE72' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='.7'%3E%3Cstop offset='0' stop-color='%23F0BE72' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23F0BE72' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3Cfilter id='g' x='-10%25' y='-50%25' width='120%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M-120 650C220 470 520 520 830 600S1390 720 1720 430L1720 600C1390 860 1060 800 800 735S250 660-120 850Z' fill='url(%23a)'/%3E%3Cpath d='M-120 330C300 190 650 340 910 430S1420 440 1720 230L1720 330C1420 540 1100 560 880 505S300 330-120 420Z' fill='url(%23b)'/%3E%3C/g%3E%3Cpath d='M-120 662C230 498 530 540 830 616S1390 728 1720 448' fill='none' stroke='%23FFFFFF' stroke-opacity='.8' stroke-width='7' stroke-linecap='round' filter='url(%23g)'/%3E%3C/svg%3E");
  --ap-wp-gren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --gorsel-zemin: #FFFFFF;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "GM Inter", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "GM Inter", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --r: 22px; --r-buyuk: 28px; --r-k: 16px; --kap: 1240px; --alt: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
  /* eski ad eşlemeleri (m.css / önceki site kodu) */
  --kart: var(--surface); --kart2: var(--surface-2); --yazi: var(--label-1); --soluk: var(--label-2); --cizgi: var(--sep);
  --vurgu: var(--accent); --vurgu-yumusak: var(--accent-tint); --altin: var(--brand); --kirmizi: var(--negative); --yesil: var(--positive);
}
/* ---------- Gece altını (koyu): sistem koyuysa ve kullanıcı açığı seçmediyse, ya da kullanıcı koyuyu seçtiyse ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --bg: #0F0D0A; --surface: #1E1A15; --surface-2: #28231C; --surface-3: #332C23;
    --accent: #E2C48C; --accent-fill: #8C6A33; --brand: #D4B07A; --on-accent: #FFFFFF;
    --accent-hover: color-mix(in srgb, #8C6A33 85%, #fff); --accent-tint: color-mix(in srgb, #E2C48C 22%, transparent); --accent-tint-2: color-mix(in srgb, #E2C48C 30%, transparent);
    --label-1: #FFFFFF; --label-2: rgba(245, 236, 220, .66); --label-3: rgba(245, 236, 220, .30); --label-4: rgba(245, 236, 220, .18);
    --fill-1: #3D352A; --fill-2: #363027; --fill-3: #2E2820; --fill-4: #25201A;
    --sep: rgba(120, 100, 70, .45); --sep-strong: rgba(140, 118, 84, .70); --line-soft: rgba(120, 100, 70, .30);
    --positive: #30D158; --warning: #FF9F0A; --negative: #FF7B73;
    --positive-bg: color-mix(in srgb, #30D158 18%, transparent); --warning-bg: color-mix(in srgb, #FF9F0A 18%, transparent); --negative-bg: color-mix(in srgb, #FF7B73 18%, transparent);
    --e1: 0 0 0 .5px rgba(255, 236, 200, .07);
    --ap-cam: rgba(32, 27, 21, .58); --ap-cam-kalin: rgba(30, 26, 21, .84); --ap-cam-ince: rgba(40, 34, 26, .42);
    --ap-blur: blur(22px) saturate(170%);
    --ap-kenar: inset 0 1px 0 rgba(255, 226, 170, .16), inset 0 0 0 .5px rgba(214, 176, 112, .14);
    --ap-cizgi: 0 0 0 .5px rgba(0, 0, 0, .5);
    --ap-golge: 0 8px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --ap-golge-buyuk: 0 24px 70px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .35);
    --ap-widget: rgba(34, 29, 22, .58);
    --ap-widget-kenar: inset 0 1px 0 rgba(255, 226, 170, .16), inset 0 0 0 .5px rgba(214, 176, 112, .12), 0 0 0 .5px rgba(0, 0, 0, .5);
    --ap-widget-golge: 0 10px 30px rgba(0, 0, 0, .45);
    --ap-segment-on: #5A4C38; --ap-perde-renk: rgba(12, 10, 7, .45);
    --ap-wp-taban: linear-gradient(175deg, #171007 0%, #0B0804 58%, #1C1409 100%);
    --ap-wp-leke: radial-gradient(70vmax 52vmax at 10% 6%, rgba(168, 116, 42, .45), transparent 70%), radial-gradient(58vmax 46vmax at 94% 16%, rgba(124, 84, 30, .40), transparent 70%), radial-gradient(64vmax 50vmax at 82% 100%, rgba(196, 146, 64, .24), transparent 70%), radial-gradient(54vmax 46vmax at 4% 96%, rgba(96, 62, 30, .30), transparent 70%);
    --ap-wp-dalga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='.6'%3E%3Cstop offset='0' stop-color='%23E4AC5C' stop-opacity='0'/%3E%3Cstop offset='.42' stop-color='%23E4AC5C' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%238A5A1E' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='.7'%3E%3Cstop offset='0' stop-color='%238A5A1E' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%238A5A1E' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23E4AC5C' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3Cfilter id='g' x='-10%25' y='-50%25' width='120%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M-120 650C220 470 520 520 830 600S1390 720 1720 430L1720 600C1390 860 1060 800 800 735S250 660-120 850Z' fill='url(%23a)'/%3E%3Cpath d='M-120 330C300 190 650 340 910 430S1420 440 1720 230L1720 330C1420 540 1100 560 880 505S300 330-120 420Z' fill='url(%23b)'/%3E%3C/g%3E%3Cpath d='M-120 662C230 498 530 540 830 616S1390 728 1720 448' fill='none' stroke='%23FFDCA0' stroke-opacity='.30' stroke-width='7' stroke-linecap='round' filter='url(%23g)'/%3E%3C/svg%3E");
    --ap-wp-gren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --gorsel-zemin: #FFFFFF;
    color-scheme: dark;
  }
}
:root[data-tema="koyu"] {
    --bg: #0F0D0A; --surface: #1E1A15; --surface-2: #28231C; --surface-3: #332C23;
    --accent: #E2C48C; --accent-fill: #8C6A33; --brand: #D4B07A; --on-accent: #FFFFFF;
    --accent-hover: color-mix(in srgb, #8C6A33 85%, #fff); --accent-tint: color-mix(in srgb, #E2C48C 22%, transparent); --accent-tint-2: color-mix(in srgb, #E2C48C 30%, transparent);
    --label-1: #FFFFFF; --label-2: rgba(245, 236, 220, .66); --label-3: rgba(245, 236, 220, .30); --label-4: rgba(245, 236, 220, .18);
    --fill-1: #3D352A; --fill-2: #363027; --fill-3: #2E2820; --fill-4: #25201A;
    --sep: rgba(120, 100, 70, .45); --sep-strong: rgba(140, 118, 84, .70); --line-soft: rgba(120, 100, 70, .30);
    --positive: #30D158; --warning: #FF9F0A; --negative: #FF7B73;
    --positive-bg: color-mix(in srgb, #30D158 18%, transparent); --warning-bg: color-mix(in srgb, #FF9F0A 18%, transparent); --negative-bg: color-mix(in srgb, #FF7B73 18%, transparent);
    --e1: 0 0 0 .5px rgba(255, 236, 200, .07);
    --ap-cam: rgba(32, 27, 21, .58); --ap-cam-kalin: rgba(30, 26, 21, .84); --ap-cam-ince: rgba(40, 34, 26, .42);
    --ap-blur: blur(22px) saturate(170%);
    --ap-kenar: inset 0 1px 0 rgba(255, 226, 170, .16), inset 0 0 0 .5px rgba(214, 176, 112, .14);
    --ap-cizgi: 0 0 0 .5px rgba(0, 0, 0, .5);
    --ap-golge: 0 8px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --ap-golge-buyuk: 0 24px 70px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .35);
    --ap-widget: rgba(34, 29, 22, .58);
    --ap-widget-kenar: inset 0 1px 0 rgba(255, 226, 170, .16), inset 0 0 0 .5px rgba(214, 176, 112, .12), 0 0 0 .5px rgba(0, 0, 0, .5);
    --ap-widget-golge: 0 10px 30px rgba(0, 0, 0, .45);
    --ap-segment-on: #5A4C38; --ap-perde-renk: rgba(12, 10, 7, .45);
    --ap-wp-taban: linear-gradient(175deg, #171007 0%, #0B0804 58%, #1C1409 100%);
    --ap-wp-leke: radial-gradient(70vmax 52vmax at 10% 6%, rgba(168, 116, 42, .45), transparent 70%), radial-gradient(58vmax 46vmax at 94% 16%, rgba(124, 84, 30, .40), transparent 70%), radial-gradient(64vmax 50vmax at 82% 100%, rgba(196, 146, 64, .24), transparent 70%), radial-gradient(54vmax 46vmax at 4% 96%, rgba(96, 62, 30, .30), transparent 70%);
    --ap-wp-dalga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='.6'%3E%3Cstop offset='0' stop-color='%23E4AC5C' stop-opacity='0'/%3E%3Cstop offset='.42' stop-color='%23E4AC5C' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%238A5A1E' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' y1='0' x2='0' y2='.7'%3E%3Cstop offset='0' stop-color='%238A5A1E' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%238A5A1E' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23E4AC5C' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='34'/%3E%3C/filter%3E%3Cfilter id='g' x='-10%25' y='-50%25' width='120%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M-120 650C220 470 520 520 830 600S1390 720 1720 430L1720 600C1390 860 1060 800 800 735S250 660-120 850Z' fill='url(%23a)'/%3E%3Cpath d='M-120 330C300 190 650 340 910 430S1420 440 1720 230L1720 330C1420 540 1100 560 880 505S300 330-120 420Z' fill='url(%23b)'/%3E%3C/g%3E%3Cpath d='M-120 662C230 498 530 540 830 616S1390 728 1720 448' fill='none' stroke='%23FFDCA0' stroke-opacity='.30' stroke-width='7' stroke-linecap='round' filter='url(%23g)'/%3E%3C/svg%3E");
    --ap-wp-gren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    --gorsel-zemin: #FFFFFF;
    color-scheme: dark;
}

/* ---------- 2) TEMEL ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--label-1); background: transparent;
  font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss03"; letter-spacing: -.006em; }
/* Işık altını duvar kâğıdı: tek sabit katman (kaydırırken yeniden çizilmez); ana sayfa dışında hafif perde (panelde Bugün dışı ekranlar gibi) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg);
  background-image: linear-gradient(var(--ap-perde-k, transparent), var(--ap-perde-k, transparent)), var(--ap-wp-gren), var(--ap-wp-dalga), var(--ap-wp-leke), var(--ap-wp-taban);
  background-size: auto, 160px 160px, cover, auto, auto, auto, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: center;
  transform: translateZ(0); contain: strict;
}
html:not([data-sayfa="ana"]) { --ap-perde-k: var(--ap-perde-renk); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 10px; }
::selection { background: var(--accent-tint-2); }
.atla { position: absolute; left: 12px; top: 8px; z-index: 99; background: var(--surface); padding: 10px 14px; border-radius: 999px; box-shadow: var(--ap-golge); clip-path: inset(50%); white-space: nowrap; }
.atla:focus { clip-path: none; }
.kap { max-width: var(--kap); margin: 0 auto; padding: 0 20px; }
.gizli-ek { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.not { color: var(--label-2); font-size: 13.5px; }
.hata { color: var(--negative); font-size: 14px; }
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13.5px; }

/* ---------- 3) CAM ÜST ÇUBUK (yüzen kapsül) ---------- */
.ust { position: sticky; top: 0; z-index: 40; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0; pointer-events: none; }
.ust-ic { pointer-events: auto; max-width: 1376px; margin: 0 auto; min-height: 60px; padding: 8px 10px 8px 12px; display: flex; align-items: center; gap: 14px;
  border-radius: 24px; background: var(--ap-cam); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge); }
.marka { display: flex; align-items: center; gap: 10px; color: var(--label-1); flex: none; text-decoration: none !important; }
/* Logo 6 "Nokta" (2026-10-26): G metin renginde (açık siyah / koyu beyaz) + tek altın nokta (--brand: #B8925A / #D4B07A), düz renk */
.marka svg, .logo { width: 38px; height: 38px; flex: none; border-radius: 10px; }
.marka svg { border-radius: 0; color: var(--label-1); }
.logo { display: block; font-size: 0; color: transparent; background: #0F0D0A url(/site/favicon.svg?v=1) center / cover no-repeat; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.marka-yazi { display: flex; flex-direction: column; line-height: 1.12; }
.marka-yazi b { font: 600 16px/1.15 var(--font-display); letter-spacing: .1em; }
.marka-yazi small { color: var(--label-2); font-size: 12px; font-weight: 500; }
.menu { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.menu a.dar-menu { display: none; }
.menu.acik a.dar-menu { display: block; }
.menu a { color: var(--label-1); text-decoration: none; font: 500 14.5px/20px var(--font-sans); padding: 8px 11px; border-radius: 999px; white-space: nowrap; transition: background-color .18s; }
.menu a:hover { background: var(--fill-3); text-decoration: none; }
.menu a.aktif { background: var(--fill-3); color: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.ust-sag { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.ikon-dug { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill-3); display: grid; place-items: center;
  font-size: 17px; color: var(--label-1); text-decoration: none !important; transition: background-color .18s, transform .18s var(--ap-yay); flex: none; }
.ikon-dug:hover { background: var(--fill-2); }
.ikon-dug:active { transform: scale(.94); }
.ikon-dug svg { width: 20px; height: 20px; }
.hesap-dug { display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; font: 600 14px/20px var(--font-sans); color: var(--on-accent); background: var(--accent-fill);
  padding: 10px 16px; border-radius: 999px; white-space: nowrap; transition: background-color .18s, transform .18s var(--ap-yay); }
.hesap-dug:hover { background: var(--accent-hover); }
.hesap-dug:active { transform: scale(.97); }
.menu-dug { display: none; }
.rozet { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent);
  font: 700 11px/19px var(--font-sans); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
/* üst arama (cam alan + açılır cam liste) */
.ust-arama { position: relative; flex: 0 1 280px; min-width: 0; }
.arama { display: flex; align-items: center; gap: 8px; background: var(--fill-3); border-radius: 999px; padding: 0 14px; height: 42px; color: var(--label-2); }
.arama:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); background: var(--surface); }
.arama input { flex: 1; min-width: 0; align-self: stretch; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--label-1); }
.arama input::placeholder { color: var(--label-2); }
.arama input::-webkit-search-cancel-button { -webkit-appearance: none; }
.arama-liste { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50; max-height: min(70vh, 520px); overflow: auto; padding: 8px; border-radius: 22px;
  background: var(--ap-cam-kalin); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); min-width: 300px; }
.ar-grup + .ar-grup { margin-top: 4px; padding-top: 4px; border-top: .5px solid var(--sep); }
.ar-baslik { display: block; padding: 6px 10px 4px; font: 600 12px/16px var(--font-sans); color: var(--label-2); }
.ar-oge { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 14px; color: var(--label-1); text-decoration: none !important; font-size: 14.5px; }
.ar-oge small { color: var(--label-2); white-space: nowrap; font-weight: 600; }
.ar-oge:hover, .ar-oge.secili { background: var(--fill-3); }
.ar-urun { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ar-urun span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-urun img { width: 36px; height: 36px; object-fit: contain; background: var(--gorsel-zemin); border-radius: 9px; flex: none; }
.ar-tumu { color: var(--accent); font-weight: 600; }
.ar-bos { padding: 12px; font-size: 14px; color: var(--label-2); }
.ar-bos b { color: var(--label-1); }
.ar-temizle { display: block; margin: 6px 10px 4px auto; font-size: 13px; }
.arama-ac { display: none; }

/* ---------- 4) DÜĞMELER (iOS kapsül) ---------- */
.dug { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 600 15.5px/20px var(--font-sans); letter-spacing: -.01em; text-decoration: none !important; white-space: nowrap;
  background: var(--accent-fill); color: var(--on-accent); transition: transform .18s var(--ap-yay), background-color .18s, opacity .18s; }
.dug:hover { background: var(--accent-hover); }
.dug:active { transform: scale(.97); opacity: .9; }
.dug.altin { background: var(--accent-fill); color: var(--on-accent); }
.dug.ikincil, .dug.cam { background: var(--fill-3); color: var(--accent); }
.dug.ikincil:hover, .dug.cam:hover { background: var(--fill-2); }
.dug.koyu { background: #000; color: #fff; }
.dug.duz { background: transparent; color: var(--accent); padding: 0 10px; }
.dug.duz:hover { background: var(--fill-4); }
.dug.kucuk { min-height: 34px; padding: 0 14px; font-size: 14px; }
.dug.buyuk { min-height: 52px; padding: 0 28px; font-size: 17px; }
.dug.genis { width: 100%; }
.dug[disabled], .dug:disabled, .dug.pasif { background: var(--fill-2); color: var(--label-2); opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
.dug.pasif { pointer-events: none; }
.dug.wa { background: #1C8549; color: #fff; }
.dug.wa:hover { background: #167039; }
.dug-sira { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.baglanti { background: none; border: 0; color: var(--accent); font: 600 14.5px/20px var(--font-sans); padding: 0; text-decoration: none; cursor: pointer; }
.baglanti:hover { text-decoration: underline; text-underline-offset: 3px; }
/* kapsül çip (panel .ds-chip / .bgh-cip) */
.cipler { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill-3);
  color: var(--label-1); font: 500 14px/18px var(--font-sans); text-decoration: none !important; white-space: nowrap; transition: background-color .18s; }
.cip:hover { background: var(--fill-2); }
.cip.aktif { background: var(--accent-fill); color: var(--on-accent); }
.cip .x { font-size: 15px; opacity: .8; }
.hap { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/24px var(--font-sans); background: var(--accent-tint); color: var(--accent); white-space: nowrap; }
.hap.yesil { background: var(--positive-bg); color: var(--positive); }
.hap.turuncu { background: var(--warning-bg); color: var(--warning); }
.hap.kirmizi { background: var(--negative-bg); color: var(--negative); }
.hap.gri { background: var(--fill-3); color: var(--label-2); }
.hap.koyu { background: #000; color: #fff; }
.rozet-hap { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 30px; padding: 6px 14px 6px 10px; border-radius: 999px; background: #000; color: #fff;
  font: 600 12.5px/18px var(--font-sans); letter-spacing: .02em; max-width: 100%; }
.rozet-hap i { flex: none; }
.rozet-hap i { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .22); }
/* segment (iOS) */
.segment { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: var(--fill-3); }
.segment button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--label-1); font: 500 13.5px/18px var(--font-sans); }
.segment button.aktif, .segment button[aria-pressed="true"] { background: var(--ap-segment-on); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .04); }
.segment.genis { display: flex; }
.segment.genis button { flex: 1; }

/* ---------- 5) KARTLAR / YÜZEYLER (opak inset grouped + widget camı) ---------- */
.kart, .grup { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); }
.grup { overflow: hidden; }
.kart-ic { padding: 20px 22px; }
.widget { background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); border-radius: 24px; }
.satir { display: flex; align-items: center; gap: 12px; padding: 13px 18px; position: relative; min-height: 52px; color: var(--label-1); text-decoration: none !important; }
.satir + .satir::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; border-top: .5px solid var(--sep); }
.satir.tik:hover { background: var(--fill-4); }
.satir .sag { margin-left: auto; color: var(--label-2); text-align: right; font-size: 14.5px; }
.satir.tik .sag { color: var(--accent); font-weight: 600; }
.satir-ik { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-tint); font-size: 15px; flex: none; }
.etiket { color: var(--label-2); }
.ikili { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; }
.ikili.hizala-ust { align-items: start; }
.ikili > *, .detay > * { min-width: 0; }
.ikili-gor { width: 100%; border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--e1); }

/* ---------- 6) BAŞLIKLAR / BÖLÜMLER ---------- */
.bolum { padding-top: 40px; padding-bottom: 4px; }
.bolum-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bolum h2 { margin: 0; font: 700 28px/34px var(--font-display); letter-spacing: -.024em; }
.bolum .alt { color: var(--label-2); margin: 4px 0 0; font-size: 15.5px; letter-spacing: -.01em; }
.sayfa-bas { padding: 22px 0 6px; }
.sayfa-bas h1 { margin: 0; font: 700 34px/41px var(--font-display); letter-spacing: -.022em; }
.sayfa-bas p { color: var(--label-2); margin: 6px 0 0; font-size: 16px; max-width: 720px; }
.yol-izi { padding-top: 20px; font: 500 13px/18px var(--font-sans); color: var(--label-2); }
.yol-izi ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.yol-izi li + li::before { content: "›"; margin-right: 4px; color: var(--label-3); }
.yol-izi a { color: var(--label-2); }
.yol-izi a:hover { color: var(--accent); }
.yol-izi [aria-current] { color: var(--label-1); }

/* ---------- 7) ANA SAYFA: hero widget, güven bandı ---------- */
.hero { position: relative; max-width: calc(var(--kap) - 40px); margin: 18px auto 0; border-radius: var(--r-buyuk); overflow: hidden;
  background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); }
.hero-slayt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; min-height: 420px; }
.hero-slayt[hidden] { display: none; }
.hero-ic { position: relative; z-index: 1; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.hero-baslik, .hero h1, .hero h2 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1.06 var(--font-display); letter-spacing: -.03em; color: var(--label-1); max-width: 640px; }
.hero p { margin: 0; font-size: 17px; line-height: 24px; color: var(--label-2); max-width: 560px; letter-spacing: -.012em; }
.hero-dug { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hero-gor { width: 100%; height: 100%; object-fit: cover; min-height: 100%; border-radius: 0; }
.hero-slayt > img { margin: 12px 12px 12px 0; width: calc(100% - 12px); height: calc(100% - 24px); border-radius: 22px; }
.hero-noktalar { position: absolute; left: 40px; bottom: 18px; display: flex; gap: 6px; z-index: 2; }
.hero-nokta { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--label-3); transition: background-color .3s; }
.hero-nokta[aria-current="true"] { width: 22px; background: var(--accent-fill); }
.iskelet-hero { min-height: 360px; }
.iskelet-hero .hero-ic { min-height: 360px; }
.guven-bandi { margin-top: 18px; }
.guven-ic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.guven-oge { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: 20px; background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); min-width: 0; }
.guven-oge b { display: block; font: 600 14px/18px var(--font-sans); }
.guven-oge small { display: block; color: var(--label-2); font-size: 12px; line-height: 16px; }
.guven-ik { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); font-size: 17px; flex: none; }
.gunun-sag { display: flex; align-items: center; gap: 12px; }
.geri-sayim { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #000; color: #fff; font: 600 13px/30px var(--font-sans); font-variant-numeric: tabular-nums; }
.hakkimizda-ozet { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.hakkimizda-ozet .yil { font: 800 64px/1 var(--font-display); letter-spacing: -.04em; background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hakkimizda-ozet p { margin: 0; }
.yorum-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yorum-cta b { font: 600 17px/22px var(--font-sans); }
.yorum-cta p { margin: 2px 0 0; }

/* ---------- 8) ÜRÜN KARTLARI ---------- */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; padding: 16px 0; }
.kaydir { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 260px); gap: 14px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kaydir::-webkit-scrollbar { display: none; }
.kaydir > * { scroll-snap-align: start; }
.ukart { position: relative; background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none !important; color: var(--label-1); transition: transform .25s var(--ap-yay), box-shadow .25s var(--ap-yay); }
.ukart:hover { transform: translateY(-3px); box-shadow: var(--ap-golge); }
.ukart .gor { aspect-ratio: 1 / 1; margin: 8px 8px 0; border-radius: 16px; background: var(--gorsel-zemin); display: grid; place-items: center; padding: 14px; position: relative; overflow: hidden; }
.ukart .gor img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ap-yay); }
.ukart:hover .gor img { transform: scale(1.04); }
.gor-yok { font-size: 40px; opacity: .4; }
.rozetler { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.serit-etiket { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; font: 700 11px/22px var(--font-sans); background: #000; color: #fff; }
.serit-etiket.altin { background: var(--accent-fill); color: var(--on-accent); }
.serit-etiket.gri { background: var(--fill-2); color: var(--label-2); }
.serit-etiket.kirmizi { background: var(--negative); color: #fff; }
.fav-dug { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 16px; color: var(--label-3);
  background: var(--ap-cam-kalin); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi); transition: transform .18s var(--ap-yay), color .18s; }
.fav-dug:hover { color: var(--accent); }
.fav-dug:active { transform: scale(.9); }
.fav-dug.dolu { color: var(--accent-fill); }
.ukart .ic { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ukart .kat { font: 600 12px/16px var(--font-sans); color: var(--label-2); }
.ukart .ad { font: 600 15px/20px var(--font-sans); letter-spacing: -.012em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.ukart .ozl { font-size: 12.5px; line-height: 17px; color: var(--label-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.puan-sat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--label-2); }
.ukart .fiyat-sat { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.fiyat small { display: block; font: 500 11.5px/14px var(--font-sans); color: var(--label-2); }
.fiyat b { font: 700 19px/24px var(--font-display); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fiyat s { display: block; color: var(--label-2); font-size: 12.5px; white-space: nowrap; }
.fiyat .ozel { color: var(--negative); }
.taksit-ipucu { font: 500 12px/16px var(--font-sans); color: var(--accent); }
.ekle { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent-fill); color: var(--on-accent); font-size: 22px; line-height: 1; flex: none;
  display: grid; place-items: center; transition: transform .18s var(--ap-yay), background-color .18s; }
.ekle:hover { background: var(--accent-hover); }
.ekle:active { transform: scale(.9); }
.ekle.var { background: var(--positive); color: #fff; }
.kars-sec { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 12.5px/16px var(--font-sans); color: var(--label-2); cursor: pointer; align-self: flex-start; }
.kars-sec input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-fill); }
/* liste görünümü */
.izgara.liste { grid-template-columns: 1fr; }
.ukart.liste-gorunum { flex-direction: row; }
.ukart.liste-gorunum .gor { width: 190px; flex: none; margin: 8px; aspect-ratio: 1 / 1; }
.ukart.liste-gorunum .ic { padding: 16px 18px 16px 6px; }
.ukart.liste-gorunum .ad { -webkit-line-clamp: 3; font-size: 17px; line-height: 22px; min-height: 0; }
/* kategori kartları */
.kat-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kat-kart { background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge);
  border-radius: var(--r); padding: 16px; text-decoration: none !important; color: var(--label-1); display: flex; flex-direction: column; gap: 4px; min-height: 112px;
  transition: transform .25s var(--ap-yay); }
.kat-kart:hover { transform: translateY(-2px); }
.kat-ik { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); font-size: 21px; margin-bottom: 6px; }
.kat-kart b { font: 600 15px/19px var(--font-sans); letter-spacing: -.01em; }
.kat-kart small { color: var(--label-2); font-size: 12.5px; }
/* özellik (asistan / hizmet) kartları */
.ozellikler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ozellik { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); padding: 18px; color: var(--label-1); text-decoration: none !important; display: flex; flex-direction: column; gap: 6px; transition: transform .25s var(--ap-yay); }
.ozellik:hover { transform: translateY(-2px); }
.oz-ik { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); font-size: 20px; }
.ozellik b { font: 600 17px/22px var(--font-sans); margin-top: 4px; }
.ozellik p { margin: 0; color: var(--label-2); font-size: 14.5px; line-height: 20px; flex: 1; }
.oz-git { color: var(--accent); font: 600 13.5px/18px var(--font-sans); }
/* yıldız */
.yildiz { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: var(--label-4); white-space: nowrap; }
.yildiz-dolu { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--brand); }
.yildiz.buyuk { font-size: 20px; }

/* ---------- 9) İÇERİK (metin, galeri, blog, SSS, kampanya, markalar) ---------- */
.metin-govde { font-size: 16.5px; line-height: 1.7; color: var(--label-1); }
.metin-govde h3 { font: 700 21px/27px var(--font-display); letter-spacing: -.02em; margin: 26px 0 8px; }
.metin-govde h4 { font: 600 17px/22px var(--font-sans); margin: 20px 0 6px; }
.metin-govde p { margin: 0 0 14px; }
.metin-govde ul, .metin-govde ol { padding-left: 22px; margin: 0 0 14px; }
.metin-govde li { margin: 4px 0; }
.metin-govde img { border-radius: var(--r-k); margin: 16px 0; }
.metin-govde blockquote { margin: 16px 0; padding: 12px 18px; border-left: 3px solid var(--brand); background: var(--fill-4); border-radius: 0 14px 14px 0; }
.metin-govde table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.metin-govde td, .metin-govde th { padding: 9px 12px; border-top: .5px solid var(--sep); text-align: left; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.galeri-oge { padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: var(--e1); cursor: zoom-in; }
.galeri-oge img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s var(--ap-yay); }
.galeri-oge:hover img { transform: scale(1.04); }
.video-kutu { border-radius: var(--r-buyuk); overflow: hidden; background: #000; box-shadow: var(--ap-golge); }
.video-kutu video { width: 100%; display: block; aspect-ratio: 16 / 9; }
.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.blog-kart { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); overflow: hidden; text-decoration: none !important; color: var(--label-1); display: flex; flex-direction: column; transition: transform .25s var(--ap-yay); }
.blog-kart:hover { transform: translateY(-3px); }
.blog-gor { margin: 8px 8px 0; border-radius: 16px; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.blog-gor img { width: 100%; height: 100%; object-fit: cover; }
.blog-kart .ic { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.blog-kart b { font: 600 17px/22px var(--font-sans); letter-spacing: -.012em; }
.blog-kart p { color: var(--label-2); font-size: 14.5px; line-height: 20px; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-kart small { color: var(--label-2); font-size: 12.5px; }
.yazi-kap { max-width: 780px; margin: 0 auto; }
.yazi-ozet { font-size: 18px !important; line-height: 26px; }
.yazi-kapak { border-radius: var(--r-buyuk); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin: 14px 0 22px; box-shadow: var(--e1); }
.yazi-govde { background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); padding: 26px 30px; }
.yazi-cta { margin-top: 22px; }
.yazi-cta b { font: 600 18px/23px var(--font-sans); }
.sss { display: flex; flex-direction: column; gap: 10px; }
.sss-oge { background: var(--surface); border-radius: 18px; box-shadow: var(--e1); padding: 0 18px; }
.sss-oge summary { list-style: none; cursor: pointer; padding: 16px 30px 16px 0; font: 600 16px/22px var(--font-sans); position: relative; }
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after { content: "+"; position: absolute; right: 0; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--fill-3); color: var(--accent); display: grid; place-items: center; font-size: 18px; transition: transform .3s var(--ap-yay); }
.sss-oge[open] summary::after { transform: rotate(45deg); }
.sss-oge > :not(summary) { margin: 0 0 14px; color: var(--label-2); line-height: 1.6; }
.kampanya-kart { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; border-radius: var(--r-buyuk); overflow: hidden; background: #000; color: #fff; box-shadow: var(--ap-golge); }
.kampanya-kart h2 { margin: 10px 0 6px; font: 700 30px/36px var(--font-display); letter-spacing: -.024em; }
.kampanya-kart .alt, .kampanya-kart .metin-govde { color: rgba(255, 255, 255, .78); }
.kampanya-kart .hap { background: rgba(226, 196, 140, .18); color: #E2C48C; }
.kampanya-gor { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.marka-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.marka-kart { background: var(--surface); border-radius: 18px; box-shadow: var(--e1); padding: 18px; display: grid; place-items: center; aspect-ratio: 3 / 2; }
.marka-kart img { max-height: 54px; width: auto; object-fit: contain; }
.sayfa-hero { margin-top: 18px; }
.sayfa-hero > .kap { padding-top: 6px; padding-bottom: 30px; }
.sayfa-hero h1 { margin: 12px 0 6px; font: 700 clamp(34px, 5vw, 52px)/1.06 var(--font-display); letter-spacing: -.03em; }
.sayfa-hero p { margin: 0; color: var(--label-2); font-size: 17px; }
.sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.sayilar > div { background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); border-radius: 22px; padding: 16px 18px; }
.sayilar b { display: block; font: 700 28px/34px var(--font-display); letter-spacing: -.026em; }
.sayilar small { color: var(--label-2); font-size: 13px; }
.hizli-yardim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hy-oge { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--fill-4); color: var(--label-1); text-decoration: none !important; font: 500 14.5px/19px var(--font-sans); }
.hy-oge:hover { background: var(--fill-3); }
.politika-kap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.politika-govde { padding: 26px 30px; }
.politika-menu { position: sticky; top: 100px; margin-top: 74px; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 22px; background: var(--ap-widget);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); }
.politika-menu b { font: 600 13px/18px var(--font-sans); color: var(--label-2); padding: 4px 10px 6px; }
.politika-menu a { padding: 8px 10px; border-radius: 12px; color: var(--label-1); font-size: 14.5px; }
.politika-menu a:hover { background: var(--fill-3); text-decoration: none; }

/* ---------- 10) DURUMLAR: boş / hata / iskelet / 404 / bildirim ---------- */
.bos { text-align: center; color: var(--label-2); padding: 46px 20px; background: var(--surface); border-radius: var(--r); box-shadow: var(--e1); margin: 16px 0; }
.bos .ik { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-tint); font-size: 30px; }
.bos b { display: block; color: var(--label-1); font: 700 20px/25px var(--font-display); letter-spacing: -.02em; margin-bottom: 6px; }
.bos p { margin: 0 auto; max-width: 460px; }
.bos-eylem { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.isk { display: block; border-radius: 14px; background: linear-gradient(90deg, var(--fill-3) 0%, var(--fill-4) 50%, var(--fill-3) 100%); background-size: 200% 100%; animation: isk 1.3s ease-in-out infinite; }
@keyframes isk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.isk-baslik { height: 46px; width: min(520px, 80%); }
.isk-satir { height: 18px; width: min(440px, 70%); }
.isk-satir.kisa { width: 40%; }
.isk-kart { height: 330px; border-radius: var(--r); }
.sayfa-404 { text-align: center; padding: 60px 0 30px; max-width: 620px; margin: 0 auto; }
.kod-404 { display: block; font: 800 120px/1 var(--font-display); letter-spacing: -.05em; background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sayfa-404 h1 { font: 700 30px/36px var(--font-display); letter-spacing: -.024em; margin: 8px 0; }
.arama-404 { margin: 22px auto 0; max-width: 440px; height: 50px; background: var(--surface); box-shadow: var(--e1); }
.bildirim { position: fixed; left: 50%; bottom: calc(100px + var(--alt)); transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px;
  background: var(--ap-cam-kalin); color: var(--label-1); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); font: 500 14.5px/20px var(--font-sans); text-align: center; animation: bildir-gel .35s var(--ap-yay); }
.bildirim a { font-weight: 600; margin-left: 4px; }
.bildirim.hata { color: var(--negative); }
.bildirim[hidden] { display: none; }
@keyframes bildir-gel { from { opacity: 0; transform: translate(-50%, 10px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
.onizleme-serit { position: sticky; top: 0; z-index: 90; text-align: center; background: #000; color: #E2C48C; font: 700 12px/30px var(--font-sans); letter-spacing: .08em; }
/* sunucu ön çizimi (SSR): ilk boyamada düzgün görünür; JS çizince kaldırılır */
.ssr { max-width: var(--kap); margin: 18px auto 0; padding: 22px 26px; border-radius: var(--r); background: var(--surface); box-shadow: var(--e1); }
.ssr h1 { font: 700 30px/36px var(--font-display); letter-spacing: -.022em; margin: 0 0 8px; }
.ssr img { max-width: 320px; border-radius: 16px; }

/* ---------- 11) FORMLAR ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.alan-et { display: flex; flex-direction: column; gap: 6px; font: 500 13.5px/18px var(--font-sans); color: var(--label-2); }
.alan { width: 100%; min-height: 48px; border: 0; background: var(--fill-4); border-radius: 14px; padding: 12px 14px; font-size: 16px; color: var(--label-1); outline: none;
  box-shadow: inset 0 0 0 .5px var(--sep); transition: background-color .18s; }
.alan:focus { background: var(--surface); box-shadow: inset 0 0 0 .5px var(--sep), 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.alan[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--negative); }
select.alan { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--label-2) 50%), linear-gradient(135deg, var(--label-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea.alan { resize: vertical; min-height: 100px; line-height: 1.5; }
.alan-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onay { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--label-2); line-height: 1.45; }
.onay input { margin-top: 2px; width: 20px; height: 20px; accent-color: var(--accent-fill); flex: none; }
.dar { max-width: 480px; margin: 0 auto; }
.uyari { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--accent-tint); color: var(--label-1); font-size: 14px; line-height: 1.45; }
.uyari.turuncu { background: var(--warning-bg); }
.uyari.yesil { background: var(--positive-bg); }
.uyari > span:first-child { flex: none; }
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: var(--fill-1); position: relative; cursor: pointer; transition: background-color .25s; flex: none; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .25s var(--ap-yay); }
input[type="checkbox"][role="switch"]:checked { background: var(--positive); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); }

/* ---------- 12) TABLOLAR (taksit, özellik) ---------- */
.taksit-tablo, .ozellik-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.taksit-tablo td, .taksit-tablo th { padding: 11px 16px; border-top: .5px solid var(--sep); text-align: left; font-variant-numeric: tabular-nums; }
.taksit-tablo th { font: 600 12.5px/16px var(--font-sans); color: var(--label-2); border-top: 0; }
.taksit-tablo td:last-child, .taksit-tablo th:last-child { text-align: right; }
.taksit-tablo tr.secili td { background: var(--accent-tint); font-weight: 600; }
.ozellik-tablo td, .ozellik-tablo th { padding: 11px 16px; border-top: .5px solid var(--sep); vertical-align: top; text-align: left; }
.ozellik-tablo tr:first-child td, .ozellik-tablo tr:first-child th { border-top: 0; }
.ozellik-tablo td:first-child, .ozellik-tablo th[scope="row"] { color: var(--label-2); width: 44%; font-weight: 500; }

/* ---------- 13) MODAL / SHEET / TAM EKRAN / ÇEREZ / KARŞILAŞTIRMA ÇEKMECESİ ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(20, 14, 6, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: perde-gel .25s ease; }
.modal-kutu { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--r-buyuk); background: var(--ap-cam-kalin); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); animation: sheet-gel .4s var(--ap-yay); }
.modal-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 6px 22px; }
.modal-ust b { font: 700 20px/25px var(--font-display); letter-spacing: -.02em; }
.modal-ust .ikon-dug { width: 32px; height: 32px; font-size: 14px; color: var(--label-2); }
.modal-govde { padding: 6px 22px 22px; }
@keyframes perde-gel { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-gel { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.tam-ekran { position: fixed; inset: 0; z-index: 90; background: rgba(8, 6, 3, .94); display: grid; place-items: center; }
.te-gor { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 16px; background: #fff; }
.te-kapat, .te-ok { position: absolute; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 22px; color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.te-kapat { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; font-size: 18px; }
.te-ok { top: 50%; transform: translateY(-50%); font-size: 30px; }
.te-ok.sol { left: 16px; }
.te-ok.sag { right: 16px; }
.te-say { position: absolute; bottom: calc(20px + var(--alt)); left: 50%; transform: translateX(-50%); color: #fff; font: 600 13px/28px var(--font-sans); padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.cerez { position: fixed; left: 16px; right: 16px; bottom: calc(16px + var(--alt)); z-index: 75; display: flex; justify-content: center; pointer-events: none; animation: sheet-gel .45s var(--ap-yay); }
.cerez-ic { pointer-events: auto; max-width: 760px; display: flex; gap: 16px; align-items: center; padding: 14px 14px 14px 20px; border-radius: 24px; background: var(--ap-cam-kalin);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); }
.cerez p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--label-2); }
.cerez p b { color: var(--label-1); }
.cerez-dug { flex: none; }
.kars-cekmece { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--alt)); z-index: 60; width: min(880px, calc(100% - 24px)); border-radius: 24px; background: var(--ap-cam-kalin);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); animation: sheet-gel .4s var(--ap-yay); }
.kars-cekmece[hidden] { display: none; }
.kc-ic { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.kc-urunler { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kc-urun { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 6px; border-radius: 16px; background: var(--surface); min-width: 0; flex: 0 1 200px; box-shadow: var(--e1); }
.kc-urun img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--gorsel-zemin); flex: none; }
.kc-ad { font: 500 12.5px/16px var(--font-sans); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; }
.kc-sil { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--fill-3); color: var(--label-2); flex: none; }
.kc-urun.bos-yer { justify-content: center; color: var(--label-2); font-size: 12.5px; background: transparent; box-shadow: inset 0 0 0 1px var(--sep); min-height: 52px; }
.kc-eylem { display: flex; align-items: center; gap: 12px; flex: none; }

/* ---------- 14) ALT BİLGİ ---------- */
.alt-bilgi { margin: 56px auto 0; max-width: calc(var(--kap) - 16px); padding: 0 12px calc(110px + var(--alt)); color: var(--label-2); font-size: 14.5px; }
.alt-bilgi > * { background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.alt-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px !important; max-width: none; border-radius: 28px 28px 0 0; box-shadow: var(--ap-widget-kenar); }
.alt-marka { display: flex; align-items: center; gap: 12px; }
.alt-marka b { display: block; color: var(--label-1); font: 700 18px/22px var(--font-display); }
.alt-marka small { color: var(--label-2); }
.alt-iletisim { display: flex; gap: 8px; flex-wrap: wrap; }
.alt-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 22px 24px; border-top: .5px solid var(--sep); }
.alt-izgara > * { min-width: 0; }
.alt-bilgi b { color: var(--label-1); display: block; margin-bottom: 8px; font: 600 14px/20px var(--font-sans); }
.alt-izgara a { color: var(--label-2); text-decoration: none; display: block; padding: 4px 0; }
.alt-izgara a:hover { color: var(--accent); }
.telif { padding: 16px 24px 22px; border-top: .5px solid var(--sep); border-radius: 0 0 28px 28px; font-size: 12.5px; line-height: 1.6; box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); }
.guvenli { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.guvenli span { display: inline-flex; height: 28px; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--fill-3); color: var(--label-1); font: 500 12.5px/28px var(--font-sans); }

/* ---------- 15) TELEFON ALT SEKME ÇUBUĞU (yüzen cam kapsül) ---------- */
.tab-cubuk { display: none; }

/* ---------- 16) DUYARLI ---------- */
@media (max-width: 1400px) {
  .menu { display: none; }
  .menu-dug { display: grid; }
  .menu.acik { display: flex; position: fixed; top: calc(84px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; flex-direction: column; gap: 2px; padding: 8px; border-radius: 24px;
    background: var(--ap-cam-kalin); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); animation: sheet-gel .35s var(--ap-yay); }
  .menu.acik a { padding: 13px 16px; border-radius: 16px; font-size: 16px; }
}
@media (max-width: 1100px) {
  .guven-ic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ozellikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .politika-kap { grid-template-columns: 1fr; }
  .politika-menu { position: static; margin-top: 0; }
}
@media (max-width: 860px) {
  .ust-arama { display: none; }
  .ust-arama.acik { display: block; position: fixed; top: calc(84px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 55; }
  .ust-arama.acik .arama { height: 50px; background: var(--ap-cam-kalin); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge-buyuk); }
  .arama-ac { display: grid; }
  .hero-slayt { grid-template-columns: 1fr; min-height: 0; }
  .hero-slayt > img { order: -1; margin: 10px 10px 0; width: calc(100% - 20px); height: auto; aspect-ratio: 16 / 9; }
  .hero-ic { padding: 22px 22px 40px; }
  .hero-noktalar { left: 22px; bottom: 16px; }
  .kampanya-kart { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  body { font-size: 17px; }
  .kap { padding: 0 16px; }
  .ust { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 0; }
  .ust-ic { min-height: 56px; padding: 6px 6px 6px 10px; gap: 8px; border-radius: 22px; }
  .marka svg, .logo { width: 34px; height: 34px; }
  .marka-yazi b { font-size: 16px; }
  .marka-yazi small { display: none; }
  .hesap-dug { display: none; }
  .ikon-dug { width: 38px; height: 38px; }
  .hero { margin: 12px 12px 0; }
  .hero-baslik, .hero h1, .hero h2 { font-size: 30px; line-height: 36px; letter-spacing: -.02em; }
  .hero p { font-size: 15px; line-height: 21px; }
  .sayfa-bas h1 { font: 700 28px/34px var(--font-display); letter-spacing: -.02em; }
  .bolum { padding-top: 30px; }
  .bolum h2 { font: 700 22px/28px var(--font-display); letter-spacing: -.02em; }
  .bolum .alt { font-size: 14.5px; }
  .ikili { grid-template-columns: 1fr; gap: 16px; }
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kaydir { grid-auto-columns: minmax(168px, 46%); gap: 10px; }
  .ukart { border-radius: 20px; }
  .ukart .gor { margin: 6px 6px 0; border-radius: 15px; padding: 10px; }
  .ukart .ic { padding: 10px 11px 12px; }
  .ukart .ad { font-size: 14px; line-height: 18px; min-height: 36px; }
  .ukart .ozl { display: none; }
  .fiyat b { font-size: 16px; line-height: 20px; }
  .ekle { width: 36px; height: 36px; font-size: 20px; }
  .fav-dug { width: 30px; height: 30px; font-size: 14px; top: 6px; right: 6px; }
  .ukart.liste-gorunum .gor { width: 120px; }
  .guven-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .guven-oge { padding: 11px; gap: 8px; border-radius: 18px; }
  .guven-ik { width: 30px; height: 30px; font-size: 15px; }
  .guven-oge b { font-size: 13px; line-height: 17px; }
  .guven-oge small { font-size: 11.5px; line-height: 15px; }
  .kat-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kat-kart { padding: 12px 10px; min-height: 100px; border-radius: 20px; align-items: center; text-align: center; }
  .kat-kart b { font-size: 13px; line-height: 17px; }
  .kat-ik { width: 38px; height: 38px; margin-bottom: 2px; }
  .ozellikler { gap: 10px; }
  .ozellik { padding: 14px; }
  .ozellik b { font-size: 15px; line-height: 20px; }
  .ozellik p { font-size: 13px; line-height: 18px; }
  .hakkimizda-ozet { grid-template-columns: 1fr; gap: 6px; }
  .hakkimizda-ozet .yil { font-size: 48px; }
  .sayilar { grid-template-columns: 1fr 1fr; }
  .yazi-govde, .politika-govde { padding: 20px 18px; }
  .hizli-yardim { grid-template-columns: 1fr; }
  .alan-iki { grid-template-columns: 1fr; }
  .alt-bilgi { padding: 0 8px calc(112px + var(--alt)); margin-top: 40px; }
  .alt-izgara { grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px; }
  .alt-ust { padding: 18px !important; }
  .telif { padding: 14px 18px 18px; }
  .cerez { bottom: calc(92px + var(--alt)); left: 10px; right: 10px; }
  .cerez-ic { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .kars-cekmece { bottom: calc(90px + var(--alt)); }
  .kc-urun { flex: 0 0 auto; max-width: 160px; }
  .kc-ad { display: none; }
  .kc-eylem .baglanti { display: none; }
  .bildirim { bottom: calc(96px + var(--alt)); }
  .tab-cubuk { display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(10px + var(--alt)); z-index: 45; padding: 5px; border-radius: 999px;
    background: var(--ap-cam); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge); }
  .tab-cubuk a { flex: 1; position: relative; min-height: 54px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: 500 10.5px/12px var(--font-sans); letter-spacing: .01em; color: var(--label-1); text-decoration: none !important; transition: background-color .3s var(--ap-yay); }
  .tab-cubuk a span { font-size: 21px; line-height: 1; filter: grayscale(1); opacity: .8; }
  .tab-cubuk a.aktif { background: var(--fill-3); color: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
  .tab-cubuk a.aktif span { filter: none; opacity: 1; }
  .tab-cubuk .rozet { top: 3px; right: calc(50% - 22px); }
}
@media (max-width: 400px) {
  .kat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 17) ERİŞİLEBİLİRLİK / YEDEK ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --ap-cam: var(--surface); --ap-cam-kalin: var(--surface); --ap-widget: var(--surface); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --ap-cam: var(--surface); --ap-cam-kalin: var(--surface); --ap-widget: var(--surface); }
}
@media (prefers-contrast: more) { :root { --ap-widget: var(--surface); --label-2: var(--label-1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   MODÜLLER — ürün listesi / ürün sayfası / karşılaştırma / sepet / sipariş / randevu / hesap (aynı panel dili)
   ========================================================================== */
/* ---------- 18) LİSTE + FİLTRE ---------- */
.liste-bas { padding-bottom: 2px; }
.liste-duzen { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 6px; }
.filtre-panel { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; padding: 14px; border-radius: 24px; background: var(--ap-widget);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); scrollbar-width: thin; }
.filtre-bas { padding: 2px 4px 10px; }
.filtre-bas b { font: 700 20px/25px var(--font-display); letter-spacing: -.02em; }
.filtre-ic { display: flex; flex-direction: column; gap: 6px; }
.filtre-anahtar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); font: 600 14.5px/20px var(--font-sans); cursor: pointer; }
.filtre-grup { border-radius: 16px; background: var(--surface); padding: 0 12px; }
.filtre-grup summary { list-style: none; cursor: pointer; padding: 12px 22px 12px 0; position: relative; font: 600 14.5px/20px var(--font-sans); }
.filtre-grup summary::-webkit-details-marker { display: none; }
.filtre-grup summary::after { content: "›"; position: absolute; right: 2px; top: 10px; color: var(--label-2); font-size: 18px; transition: transform .3s var(--ap-yay); }
.filtre-grup[open] summary::after { transform: rotate(90deg); }
.filtre-govde { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.filtre-sec { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; font-size: 14.5px; cursor: pointer; }
.filtre-sec:hover { background: var(--fill-4); }
.filtre-sec input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-fill); flex: none; }
.filtre-sec span { flex: 1; min-width: 0; }
.filtre-sec small { color: var(--label-2); font-variant-numeric: tabular-nums; }
.fiyat-aralik { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.fiyat-aralik .alan { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.cipler.sar { flex-wrap: wrap; overflow: visible; padding: 4px 0; }
.cipler.sar .cip { min-height: 30px; font-size: 13px; padding: 0 12px; }
.liste-arac { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0 8px; }
.liste-sayac { font: 600 15px/20px var(--font-sans); color: var(--label-2); }
.liste-arac-sag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sira-sec { min-height: 38px; width: auto; padding: 6px 36px 6px 14px; border-radius: 999px; background-color: var(--surface); font-size: 14px; box-shadow: var(--e1); }
.gorunum-sec button { min-width: 38px; font-size: 15px; }
.filtre-ac { display: none; }
.secili-filtreler { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 4px; }
.izgara.tek { grid-template-columns: 1fr; }
.daha { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 20px; }
.populer-aramalar { margin-top: 18px; }
.populer-aramalar small { color: var(--label-2); font-weight: 600; }
.kurulum-ipucu { font: 500 12px/16px var(--font-sans); color: var(--positive); }
.sheet-alt { position: sticky; bottom: -22px; padding: 12px 0 4px; margin-top: 10px; background: linear-gradient(transparent, var(--ap-cam-kalin) 30%); }

/* ---------- 19) ÜRÜN SAYFASI ---------- */
.urun-ust { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 14px; }
.galeri-urun { position: sticky; top: 92px; }
.ga-sahne { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-buyuk); background: var(--gorsel-zemin); box-shadow: var(--e1), var(--ap-widget-kenar); overflow: hidden; display: grid; place-items: center; cursor: zoom-in; }
.ga-gor { width: 86%; height: 86%; object-fit: contain; transition: transform .35s var(--ap-yay); }
.ga-sahne.yakin .ga-gor { transform: scale(1.9); }
.ga-say { position: absolute; left: 14px; bottom: 14px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 12px/26px var(--font-sans); }
.ga-say:empty { display: none; }
.ga-ipucu { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ap-cam-kalin); color: var(--label-1);
  -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi); font-size: 16px; }
.ga-kucukler { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.ga-kucukler button { width: 70px; height: 70px; flex: none; padding: 6px; border-radius: 16px; border: 0; background: var(--gorsel-zemin); box-shadow: var(--e1); opacity: .7; transition: opacity .2s, box-shadow .2s; }
.ga-kucukler button.aktif { opacity: 1; box-shadow: 0 0 0 2px var(--accent-fill); }
.ga-kucukler img { width: 100%; height: 100%; object-fit: contain; }
.urun-bilgi { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.urun-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.urun-baslik { margin: 0; font: 700 32px/38px var(--font-display); letter-spacing: -.024em; }
.puan-sat.buyuk { font-size: 14px; color: var(--label-2); }
.puan-sat { text-decoration: none !important; }
.kisa-ozellik { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.kisa-ozellik li { padding: 5px 12px; border-radius: 999px; background: var(--fill-3); font: 500 13px/18px var(--font-sans); }
.fiyat-kart { display: flex; flex-direction: column; gap: 16px; }
.fiyat-blok { display: flex; flex-direction: column; gap: 6px; }
.fb-sat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.fb-fiyat, .fb-ozel { font: 700 40px/46px var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fb-ozel { color: var(--negative); }
.fb-sat s { color: var(--label-2); font-size: 17px; }
.taksit-link { font: 600 14px/20px var(--font-sans); }
.fiyat-blok .not { margin: 0; }
.urun-eylem { display: flex; flex-direction: column; gap: 10px; }
.eylem-ana { display: flex; gap: 10px; }
.eylem-ana .sepete-ekle { flex: 1; }
.eylem-ikinci { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.eylem-ikinci .dug { min-height: 44px; padding: 0 12px; font-size: 14.5px; }
.eylem-ucuncu { display: flex; flex-wrap: wrap; gap: 6px; }
.eylem-ucuncu .dug { color: var(--label-1); }
.eylem-ucuncu .dug.dolu { color: var(--accent); }
.eylem-ucuncu label.dug { cursor: pointer; }
.eylem-ucuncu input { margin: 0; accent-color: var(--accent-fill); }
.adet { display: inline-flex; align-items: center; background: var(--fill-3); border-radius: 999px; flex: none; }
.adet button { width: 44px; height: 44px; border: 0; background: none; color: var(--accent); font-size: 20px; border-radius: 50%; }
.adet button:hover { background: var(--fill-2); }
.adet button[disabled], .adet button:disabled { opacity: .5; color: var(--label-3); background: none; cursor: not-allowed; }
.adet span { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.teslimat-kutu { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; background: var(--ap-widget); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); }
.teslimat-kutu b { font: 600 15px/20px var(--font-sans); }
.teslimat-kutu p { margin: 2px 0 0; color: var(--label-2); font-size: 14px; line-height: 20px; }
.urun-guven { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.urun-gezinti { position: sticky; top: 84px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 30px; padding: 6px; border-radius: 999px; width: max-content; max-width: 100%;
  background: var(--ap-cam); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge); }
.urun-gezinti .cip { background: transparent; }
.urun-gezinti .cip:hover { background: var(--fill-3); }
.urun-sayfa .bolum { scroll-margin-top: 150px; }
.one-cikan-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.oc-kart b { display: block; font: 600 16px/21px var(--font-sans); margin-bottom: 4px; }
.oc-kart b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 8px; vertical-align: 2px; }
.oc-kart p { margin: 0; color: var(--label-2); font-size: 14.5px; line-height: 21px; }
.oz-ara { max-width: 300px; min-height: 40px; border-radius: 999px; }
.oz-gruplar { columns: 2 380px; column-gap: 14px; }
.oz-grup { break-inside: avoid; margin-bottom: 14px; display: block; }
.oz-grup-ad { display: block; padding: 14px 16px 6px; font: 600 13px/18px var(--font-sans); color: var(--accent); }
.taksit-kutu { max-width: 640px; }
.taksit-not { padding: 0 16px 14px; margin: 0; }
.yorum-duzen { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.yorum-duzen > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.yorum-ozet { display: flex; flex-direction: column; gap: 14px; }
.puan-buyuk { display: flex; flex-direction: column; gap: 4px; }
.puan-buyuk b { font: 700 48px/1 var(--font-display); letter-spacing: -.03em; }
.puan-buyuk small { color: var(--label-2); }
.dagilim { display: flex; flex-direction: column; gap: 6px; }
.dagilim-sat { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); }
.cubuk { height: 8px; border-radius: 999px; background: var(--fill-3); overflow: hidden; }
.cubuk i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.yorum-liste { display: flex; flex-direction: column; gap: 10px; }
.yorum-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.yorum b { display: block; font: 600 15.5px/21px var(--font-sans); }
.yorum p { margin: 4px 0 0; line-height: 1.6; }
.yorum-yaz { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.yorum-yaz p { margin: 0; }
.yorum-form { width: 100%; }
.puan-sec { display: flex; gap: 4px; }
.puan-sec button { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--label-4); padding: 2px; transition: transform .15s var(--ap-yay), color .15s; }
.puan-sec button:hover { transform: scale(1.12); }
.puan-sec button.dolu { color: var(--brand); }
.sabit-cubuk { display: none; }

/* ---------- 20) KARŞILAŞTIRMA ---------- */
.kars-kap { overflow-x: auto; }
.kars-tablo { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 14.5px; }
.kars-tablo th, .kars-tablo td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: .5px solid var(--sep); }
.kars-tablo thead th { position: sticky; top: 0; background: var(--surface); border-top: 0; z-index: 1; vertical-align: bottom; }
.kars-tablo tbody th { color: var(--label-2); font-weight: 500; width: 200px; position: sticky; left: 0; background: var(--surface); }
.kars-tablo tr.fark td { background: var(--accent-tint); }
.kars-tablo tr.fark th { box-shadow: inset 3px 0 0 var(--brand); }
.kt-bos { width: 200px; }
.kt-urun { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 160px; }
.kt-urun a { color: var(--label-1); display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; }
.kt-urun img { width: 120px; height: 120px; object-fit: contain; background: var(--gorsel-zemin); border-radius: 16px; padding: 6px; }
.kt-urun b { font: 600 14px/19px var(--font-sans); }
.kt-urun .kc-sil { position: absolute; top: 0; right: 0; }
.kt-fiyat { font: 700 18px/22px var(--font-display); }

/* ---------- 21) SEPET / SİPARİŞ / RANDEVU ---------- */
.sepet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 8px; }
.sepet-duzen > * { min-width: 0; }
.sepet-liste { margin-bottom: 12px; }
.sepet-satir { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 18px; position: relative; }
.sepet-satir + .sepet-satir::before { content: ""; position: absolute; top: 0; left: 116px; right: 0; border-top: .5px solid var(--sep); }
.ss-gor { width: 84px; height: 84px; border-radius: 16px; background: var(--gorsel-zemin); display: grid; place-items: center; padding: 6px; box-shadow: var(--e1); }
.ss-gor img { width: 100%; height: 100%; object-fit: contain; }
.sepet-satir .bilgi { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-ad { color: var(--label-1); font: 600 15.5px/21px var(--font-sans); }
.ss-rozet { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-alt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.ss-alt .adet button { width: 36px; height: 36px; font-size: 17px; }
.ss-alt .baglanti { font-size: 13.5px; color: var(--label-2); }
.ss-fiyat { text-align: right; }
.sepet-ozet { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 10px; }
.oz-baslik { font: 700 20px/25px var(--font-display); letter-spacing: -.02em; }
.oz-sat { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--label-2); }
.oz-sat.indirim span:last-child { color: var(--negative); font-weight: 600; }
.oz-sat.toplam { padding-top: 10px; border-top: .5px solid var(--sep); color: var(--label-1); font-size: 16px; align-items: baseline; }
.oz-sat.toplam b { font: 700 26px/30px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.yesil-yazi { color: var(--positive); font-weight: 600; }
.kupon-sat { display: flex; gap: 8px; margin-top: 4px; }
.kupon-sat .alan { min-height: 44px; text-transform: uppercase; }
.guven-not { text-align: center; margin: 0; }
.oz-urun { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.oz-urun img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--gorsel-zemin); }
.oz-urun b { font-variant-numeric: tabular-nums; }
.adim-gostergesi { list-style: none; margin: 8px 0 16px; padding: 6px; display: flex; gap: 4px; border-radius: 999px; background: var(--ap-widget);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); overflow-x: auto; scrollbar-width: none; }
.adim-gostergesi li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; color: var(--label-2); white-space: nowrap; font-size: 13.5px; }
.adim-gostergesi li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); font: 700 13px/1 var(--font-sans); flex: none; }
.adim-gostergesi li.aktif { background: var(--surface); color: var(--label-1); font-weight: 600; box-shadow: var(--e1); }
.adim-gostergesi li.aktif span { background: var(--accent-fill); color: var(--on-accent); }
.adim-gostergesi li.tamam span { background: var(--positive); color: #fff; }
.adim-govde { display: flex; flex-direction: column; gap: 14px; }
.adim-baslik { margin: 6px 0 0; font: 700 21px/26px var(--font-display); letter-spacing: -.02em; }
.adim-dug { display: flex; justify-content: space-between; gap: 10px; }
.adim-dug .dug.buyuk { margin-left: auto; }
.secenekler { display: grid; gap: 10px; }
.secenekler.iki { grid-template-columns: 1fr 1fr; }
.secenek-kart { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--fill-4); cursor: pointer; transition: background-color .18s, box-shadow .18s; }
.secenek-kart:hover { background: var(--fill-3); }
.secenek-kart.secili { background: var(--surface); box-shadow: 0 0 0 2px var(--accent-fill), var(--e1); }
.secenek-kart input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-fill); flex: none; }
.secenek-kart b { display: block; font: 600 15px/20px var(--font-sans); }
.secenek-kart small { display: block; margin-top: 2px; }
.kod-giris { text-align: center; font: 700 28px/1 var(--font-display) !important; letter-spacing: .4em; max-width: 280px; }
.tesekkur { max-width: 640px; margin: 30px auto 10px; padding: 34px 28px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tesekkur h1 { margin: 6px 0 0; font: 700 30px/36px var(--font-display); letter-spacing: -.024em; }
.tesekkur p { margin: 0; }
.tes-ik { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--positive); color: #fff; font: 700 34px/1 var(--font-sans); box-shadow: 0 10px 30px color-mix(in srgb, var(--positive) 35%, transparent); }
.tes-ik.uyar { background: var(--warning); }
.tes-ozet { width: 100%; text-align: left; margin: 8px 0; }
.tesekkur-mini { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px 0; }
.tesekkur-mini .ik { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--positive); color: #fff; font: 700 26px/1 var(--font-sans); }
.tesekkur-mini b { font: 700 20px/25px var(--font-display); }
.tesekkur-mini p { margin: 0; }
.gun-sec { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.gun { flex: none; width: 64px; padding: 8px 0; border: 0; border-radius: 18px; background: var(--fill-4); color: var(--label-1); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gun small { font-size: 11.5px; color: var(--label-2); }
.gun b { font: 700 20px/24px var(--font-display); }
.gun.secili { background: var(--accent-fill); color: var(--on-accent); }
.gun.secili small { color: rgba(255, 255, 255, .8); }
.saat-sec { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 22) HESAP ---------- */
.ortala { text-align: center; }
.hesap-form .sayfa-bas { display: flex; flex-direction: column; align-items: center; }
.hesap-form .sayfa-bas p { margin-left: auto; margin-right: auto; }
.hesap-form > .kart { margin-top: 16px; }
.hesap-ik { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; background: var(--hero-grad); color: #fff; box-shadow: var(--ap-golge); margin-bottom: 12px; }
.form-alt { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14.5px; }
.form-alt.ortala { justify-content: center; }
.ayrac { display: flex; align-items: center; gap: 12px; color: var(--label-2); font-size: 13px; }
.ayrac::before, .ayrac::after { content: ""; flex: 1; border-top: .5px solid var(--sep); }
.hesap-avantaj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.hesap-avantaj > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--fill-4); }
.hesap-avantaj span { font-size: 20px; }
.hesap-avantaj b { font: 600 13px/17px var(--font-sans); }
.hesap-avantaj small { color: var(--label-2); font-size: 11.5px; }
.sifre-kutu { position: relative; }
.sifre-kutu .alan { padding-right: 48px; }
.sifre-goster { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; font-size: 16px; opacity: .7; }
.hesap-bas { display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin-top: 18px; }
.hesap-bas h1 { margin: 0; font: 700 30px/36px var(--font-display); letter-spacing: -.024em; }
.hesap-bas p { margin: 2px 0 0; }
.hesap-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--hero-grad); color: #fff; font: 700 24px/1 var(--font-display); flex: none; box-shadow: var(--ap-golge); }
.hesap-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.hesap-menu { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 24px; background: var(--ap-widget);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--ap-widget-kenar), var(--ap-widget-golge); }
.hesap-menu a, .hm-cikis { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--label-1); font: 500 14.5px/20px var(--font-sans); text-decoration: none !important; border: 0; background: none; text-align: left; width: 100%; }
.hesap-menu a:hover, .hm-cikis:hover { background: var(--fill-3); }
.hesap-menu a.aktif { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--e1); }
.hesap-menu a small { margin-left: auto; }
.hm-cikis { color: var(--negative); margin-top: 6px; }
.hesap-govde { min-width: 0; }
.bolum.ilk { padding-top: 0; }
.hesap-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-kart { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 16px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--e1); color: var(--label-1); text-decoration: none !important; text-align: left; transition: transform .25s var(--ap-yay); }
.kpi-kart:hover { transform: translateY(-2px); }
.kpi-kart b { font: 700 30px/36px var(--font-display); letter-spacing: -.026em; margin-top: 6px; }
.kpi-kart small { color: var(--label-2); font: 600 13px/18px var(--font-sans); }
.liste-kart { padding: 16px 18px; }
.liste-kart + .liste-kart { border-top: .5px solid var(--sep); }
.lk-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.siparis-kart summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.siparis-kart summary::-webkit-details-marker { display: none; }
.sk-tutar { font-variant-numeric: tabular-nums; }
.sk-govde { margin-top: 10px; border-radius: 16px; background: var(--fill-4); }
.sk-govde .satir { min-height: 44px; padding: 10px 14px; font-size: 14px; }
.sk-govde .satir + .satir::before { left: 14px; }
.adimlar { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.adimlar li { display: flex; flex-direction: column; gap: 6px; }
.adimlar li i { height: 6px; border-radius: 3px; background: var(--fill-2); }
.adimlar li.dolu i { background: var(--brand); }
.adimlar li small { font-size: 11px; line-height: 14px; color: var(--label-2); }
.adimlar li[aria-current] small { color: var(--accent); font-weight: 700; }
.on-satir { white-space: pre-line; margin: 6px 0 0; }
.teklif-detay { margin-top: 8px; border-radius: 16px; background: var(--fill-4); padding: 4px 0 10px; }
.teklif-detay .satir { min-height: 42px; padding: 8px 14px; font-size: 14px; }
.teklif-detay .satir + .satir::before { left: 14px; }
.teklif-detay .fiyat s { display: inline; margin-right: 6px; }
.teklif-detay .fiyat b { font-size: 15px; }
.teklif-detay > :not(.satir) { margin: 8px 14px 0; }

/* ---------- 23) DUYARLI (modüller) ---------- */
@media (max-width: 1100px) {
  .liste-duzen { grid-template-columns: 1fr; }
  .filtre-panel { display: none; }
  .filtre-ac { display: inline-flex; }
  .yorum-duzen { grid-template-columns: 1fr; }
  .hesap-duzen { grid-template-columns: 1fr; }
  .hesap-menu { position: static; flex-direction: row; overflow-x: auto; border-radius: 999px; padding: 6px; scrollbar-width: none; }
  .hesap-menu a, .hm-cikis { width: auto; flex: none; white-space: nowrap; border-radius: 999px; padding: 8px 14px; }
  .hm-cikis { margin-top: 0; }
}
@media (max-width: 900px) {
  .urun-ust { grid-template-columns: 1fr; gap: 16px; }
  .galeri-urun { position: static; }
  .sepet-duzen { grid-template-columns: 1fr; }
  .sepet-ozet { position: static; }
}
@media (max-width: 768px) {
  .liste-arac { gap: 8px; }
  .liste-arac-sag { width: 100%; }
  .sira-sec { flex: 1; min-width: 0; }
  .ga-sahne { border-radius: 24px; }
  .ga-kucukler button { width: 58px; height: 58px; border-radius: 14px; }
  .urun-baslik { font-size: 24px; line-height: 30px; letter-spacing: -.02em; }
  .fb-fiyat, .fb-ozel { font-size: 32px; line-height: 38px; }
  .eylem-ana .adet { display: none; }
  .urun-gezinti { top: 76px; margin-top: 20px; }
  .oz-gruplar { columns: 1; }
  body.sabit-cubuklu .tab-cubuk { display: none; }
  body.sabit-cubuklu .sabit-cubuk { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--alt)); z-index: 46; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px;
    background: var(--ap-cam-kalin); -webkit-backdrop-filter: var(--ap-blur); backdrop-filter: var(--ap-blur); box-shadow: var(--ap-kenar), var(--ap-cizgi), var(--ap-golge); }
  .sc-fiyat { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
  .sc-fiyat small { color: var(--label-2); font-size: 11.5px; }
  .sc-fiyat b { font: 700 19px/22px var(--font-display); letter-spacing: -.02em; }
  body.sabit-cubuklu .bildirim { bottom: calc(86px + var(--alt)); }
  body.sabit-cubuklu .kars-cekmece { bottom: calc(84px + var(--alt)); }
  .sepet-satir { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .sepet-satir + .sepet-satir::before { left: 98px; }
  .ss-gor { width: 72px; height: 72px; }
  .ss-fiyat { grid-column: 2; text-align: left; }
  .adim-gostergesi li small { display: none; }
  .adim-gostergesi li { flex: 0 0 auto; padding: 4px; }
  .adim-gostergesi li.aktif { padding-right: 12px; }
  .adim-gostergesi li.aktif small { display: inline; }
  .secenekler.iki { grid-template-columns: 1fr; }
  .hesap-kpi { grid-template-columns: 1fr 1fr; }
  .hesap-bas { padding: 16px; }
  .hesap-bas h1 { font-size: 24px; line-height: 30px; }
  .siparis-kart summary { grid-template-columns: 1fr auto; }
  .sk-tutar { grid-column: 1 / -1; }
  .hesap-avantaj { grid-template-columns: 1fr; text-align: left; }
  .hesap-avantaj > div { flex-direction: row; align-items: center; gap: 10px; }
  .kars-tablo tbody th, .kt-bos { width: 130px; }
}

/* ---------- 24) YAZDIRMA (ürün sayfası, yasal metinler) ---------- */
@media print {
  body::before, .ust, .tab-cubuk, .alt-bilgi, .sabit-cubuk, .urun-gezinti, .kars-cekmece, .cerez, .bildirim, .urun-eylem, .ga-kucukler, .ga-ipucu, #birlikteYer, #benzerYer, #sonYer, .yorum-yaz, .politika-menu, .yol-izi, .atla { display: none !important; }
  :root { --surface: #fff; --label-1: #000; --label-2: #333; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .kart, .grup, .widget, .teslimat-kutu, .guven-oge, .bos { box-shadow: none !important; border: 1px solid #ccc; background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .urun-ust { grid-template-columns: 40% 1fr; }
  .galeri-urun { position: static; }
  .ga-sahne { box-shadow: none; aspect-ratio: auto; }
  .bolum { break-inside: avoid-page; padding-top: 16px; }
  .oz-gruplar { columns: 2; }
  a { color: #000; text-decoration: none; }
}

/* Eser imzası (Claude 2026-10-26, Mert isteği): en üstte ince satır, başlıkla birlikte kaymaz */
.eser-bant { margin: 0; padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 0; text-align: center; font-size: 12px; letter-spacing: .04em; color: var(--label-2); }
.eser-bant::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--brand, #B8925A); vertical-align: middle; }

/* ETBİS doğrulama karekodu (Claude 2026-10-27): yalnız ayar('etbisUrl') dolunca görünür */
.alt-etbis{display:inline-flex;align-items:center;gap:10px;margin:6px 0;color:var(--label-2);text-decoration:none}
.alt-etbis-img{border-radius:8px;background:#fff;padding:4px}
.alt-etbis-rozet{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line,#d8cdb8);border-radius:8px;font-size:11px;font-weight:700;color:var(--brand,#B8925A);background:#fff}
.alt-etbis small{font-size:12px}

/* ---------- 25) CİLA: erişilebilirlik / dokunma / durum düzeltmeleri (Claude 2026-10-27, Hallmark denetimi "polish", Mert onayı "düzeltmek için ajana ver").
   Görünüm DEĞİŞMEZ: yalnız kusur düzeltmesi. Dokunma alanları görünmez ::after ile 44 px'e büyütülür (düğmenin kendisi aynı boyda kalır);
   dar ekranda (≤389 px) üst çubuk taşmasın diye yazı markası küçülür, ≤359 px'te yalnız G logosu kalır. ---------- */
/* dar telefon: üst çubuk yatay taşma (320 px'te 57 px, 375 px'te 2 px taşıyordu) */
@media (max-width: 389px) {
  .ust-ic { gap: 4px; padding-left: 8px; }
  .marka { gap: 8px; }
  .marka-yazi b { font-size: 14px; letter-spacing: .06em; }
  .ust-sag { gap: 4px; }
}
@media (max-width: 359px) {
  .marka-yazi { display: none; }
}
/* görünmez dokunma alanı (en az 44 × 44 px) */
.ikon-dug::after, .fav-dug::after, .ekle::after, .dug.kucuk::after, .cip::after, .segment button::after, .kc-sil::after, .hero-nokta::after, .baglanti::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); border-radius: inherit; }
.ekle, .dug.kucuk, .cip, .segment button, .kc-sil, .hero-nokta, .baglanti { position: relative; }
.hero-nokta::after { width: 14px; }
.baglanti::after { width: 100%; }
.hy-oge { min-height: 44px; }
@media (pointer: coarse) {
  .alt-izgara a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
/* basılı (:active) durumları: eksik olan kontroller */
.cip:active, .segment button:active, .hy-oge:active, .gun:active, .kc-sil:active { transform: scale(.96); }
.menu a:active { background: var(--fill-2); }
.baglanti:active, .alt-izgara a:active { opacity: .7; }
/* devre dışı (:disabled) durumları: yalnız saydamlık değil, dolgu + yazı + imleç */
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
.alan:disabled { background: var(--fill-3); color: var(--label-3); box-shadow: none; }
.cip:disabled, .segment button:disabled, .ekle:disabled, .ikon-dug:disabled { opacity: .5; color: var(--label-3); cursor: not-allowed; transform: none; }
/* betik kapalıysa: betikle belirmesi beklenen içerik görünür kalır */
@media (scripting: none) {
  .ed-vitrin-oge, .st-kart { opacity: 1 !important; transform: none !important; }
}

/* ---------- 26) SİPARİŞ TAKİBİ ÖN PLANDA (Claude 2026-10-28, Mert: "sitede sipariş sorgu ekranı ön planda değil").
   Üst çubukta "Sipariş takibi" kapsülü (masaüstü), menü sayfasının ilk öğesi + alt sekmede "Takip" (telefon), ana sayfada hero altında
   "Siparişim nerede?" şeridi (satır içi telefon formu → /siparis-takip; doğrulama ve WhatsApp kodu o sayfada, aynen). Yalnız mevcut jetonlar. ---------- */
.takip-dug { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; flex: none;
  background: var(--fill-3); color: inherit; font: 600 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none !important;
  transition: background-color .18s, transform .18s var(--ap-yay); }
.takip-dug svg { width: 18px; height: 18px; color: var(--accent); }
.takip-dug:hover { background: var(--fill-2); }
.takip-dug:active { transform: scale(.97); }
.takip-dug::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.takip-dug[aria-current="page"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-tint-2); }
.menu.acik a.menu-takip { display: flex; align-items: center; gap: 12px; background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.menu a.menu-takip span { display: inline-flex; }
.menu a.menu-takip svg { width: 20px; height: 20px; }
/* ≥1401 px (üst çubuk 1376 px'te sabit): tam menü + yazılı kapsül sığsın diye arama kutusu ve menü aralığı biraz daralır */
@media (min-width: 1401px) { .ust-arama { flex-basis: 200px; } .menu a { padding: 8px 8px; } .ust-ic { gap: 12px; } }
@media (max-width: 1040px) { .takip-dug span { display: none; } .takip-dug { width: 40px; padding: 0; justify-content: center; } }
@media (max-width: 768px) { .takip-dug { display: none; } }

.takip-serit-bolum { padding-top: 16px; }
.takip-serit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 16px 24px; padding: 20px 24px; border-radius: 24px;
  background: var(--surface-2); box-shadow: var(--ap-kenar), var(--ap-golge); }
.ts-bas { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ts-ik { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.ts-ik svg { width: 22px; height: 22px; }
.ts-bas h2 { margin: 0; font: 700 20px/26px var(--font-display); letter-spacing: -.01em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.ts-bas p { margin: 2px 0 0; color: var(--label-2); font-size: 14px; line-height: 19px; }
.ts-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; }
.ts-sira { display: flex; gap: 8px; min-width: 0; }
.ts-sira .alan { flex: 1; min-width: 0; }
.ts-sira .dug { flex: none; min-height: 48px; }
.ts-hata { margin: 0 4px; color: var(--negative); font-size: 13.5px; line-height: 18px; }
@media (max-width: 768px) {
  .takip-serit-bolum { padding-top: 12px; }
  .takip-serit { grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 22px; }
  .ts-bas h2 { font-size: 18px; line-height: 23px; }
  .ts-sira .dug { padding: 0 20px; }
}
@media (max-width: 389px) {
  .tab-cubuk { left: 10px; right: 10px; padding: 4px; }
  .tab-cubuk a { font-size: 10px; }
}