/* ==========================================================================
   Kevser Arıcılık — Tasarım Sistemi v2 "Propolis & Altın"
   Koyu propolis zeminler · bal/altın vurgu · petek geometrisi · editoryal tipografi
   Fraunces (opsz, başlık) + DM Sans (metin) — yerel barındırılır
   Geliştirme: Kodem Yazılım
   ========================================================================== */

/* ---------- Fontlar ---------- */
/* Latin dosyaları sitenin kullandığı karakterlere inceltilir: python _build/font_altkume.py (aralık: _build/font-altkume.txt) */
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AE, U+00B0-00B1, U+00B7, U+00BB-00BD, U+00C2, U+00C7, U+00C9, U+00CE, U+00D6-00D7, U+00DB-00DC, U+00E0-00E2, U+00E4, U+00E7-00EB, U+00ED-00EE, U+00F1, U+00F3, U+00F6-00F7, U+00FA-00FC, U+0131, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../fonts/fraunces-tr-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-0103, U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AE, U+00B0-00B1, U+00B7, U+00BB-00BD, U+00C2, U+00C7, U+00C9, U+00CE, U+00D6-00D7, U+00DB-00DC, U+00E0-00E2, U+00E4, U+00E7-00EB, U+00ED-00EE, U+00F1, U+00F3, U+00F6-00F7, U+00FA-00FC, U+0131, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(../fonts/fraunces-tr-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-0103, U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AE, U+00B0-00B1, U+00B7, U+00BB-00BD, U+00C2, U+00C7, U+00C9, U+00CE, U+00D6-00D7, U+00DB-00DC, U+00E0-00E2, U+00E4, U+00E7-00EB, U+00ED-00EE, U+00F1, U+00F3, U+00F6-00F7, U+00FA-00FC, U+0131, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000;
  src: url(../fonts/dm-sans-tr-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-0103, U+011E-011F, U+0130, U+015E-015F; }

/* Türkçe ek dosyaları (-tr) yalnızca Ğ ğ İ Ş ş (+ Ā ā Ă ă) içerir; latin-ext'ten fontTools ile
   alt küme alındı (glifler birebir aynı). Kaynak: _build/ font notu, YAYINLAMA.md. */

/* Boyut uyumlu yedek fontlar: web fontu gelene kadar metin aynı alanı kaplar (CLS yok, LCP ilk çizimde kalır).
   Ölçüler gerçek font dosyalarından hesaplanır: python _build/yedek_font.py */
@font-face { font-family: "DM Sans Yedek"; font-style: normal; src: local("Arial"); size-adjust: 100.89%; ascent-override: 98.33%; descent-override: 30.73%; line-gap-override: 0.00%; }
/* H1 Fraunces yedekleri: ölçekler tüm H1'lerde satır sayısı tutacak şekilde ölçüldü (_build/olcum/yedek-font-ayar.js) */
@font-face { font-family: "Fraunces Yedek K"; font-style: normal; src: local("Georgia"); size-adjust: 105%; ascent-override: 93.14%; descent-override: 24.29%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek B"; font-style: normal; src: local("Georgia"); size-adjust: 104%; ascent-override: 94.04%; descent-override: 24.52%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek Y"; font-style: normal; src: local("Georgia"); size-adjust: 101%; ascent-override: 96.83%; descent-override: 25.25%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek K"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek B"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Yedek Y"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }
/* Hero: satır kırılmaz; italik %97 */
@font-face { font-family: "Fraunces Yedek H"; font-style: normal; src: local("Georgia"); }
@font-face { font-family: "Fraunces Yedek H"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 97%; }

/* ---------- Token'lar ---------- */
@property --aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: light;

  /* Temel palet */
  --gece-950: #0c0906;
  --gece-900: #15100a;
  --gece-800: #1f1810;
  --gece-700: #332819;
  --krem-50: #fffdf8;
  --krem-100: #faf5ea;
  --krem-200: #f2e9d6;
  --krem-300: #e5d7bb;
  --bal-200: #fbe7bd;
  --bal-300: #f7cf7c;
  --bal-400: #efb24a;
  --bal-500: #df971f;
  --bal-600: #a86a0f;
  --bal-700: #8a5300;
  --wa-600: #1c7a43;
  --wa-700: #155f34;
  --kodem: #286454;
  --kodem-vurgu: #3cd4a0;
  --kodem-koyu: #0e1c18;

  /* Anlamsal */
  --zemin: var(--krem-100);
  --yuzey: var(--krem-50);
  --yuzey-2: var(--krem-200);
  --metin: var(--gece-900);
  --metin-2: #5b4f40;
  --cizgi: var(--krem-300);
  --vurgu: var(--bal-700);
  --acik: #f6eedd;
  --acik-2: rgb(246 238 221 / 0.74);
  --acik-cizgi: rgb(246 238 221 / 0.12);
  --altin: linear-gradient(100deg, #fbe0a0 0%, #efb24a 38%, #df971f 62%, #f7cf7c 100%);

  /* Tipografi */
  --f-baslik: "Fraunces", Georgia, "Times New Roman", serif;
  --f-metin: "DM Sans", "DM Sans Yedek", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-kucuk: 0.875rem;
  --fs-metin: 1.0625rem;
  --fs-giris: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
  --fs-h3: 1.25rem;
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);

  /* Boşluk */
  --b-1: 0.25rem; --b-2: 0.5rem; --b-3: 0.75rem; --b-4: 1rem; --b-5: 1.5rem;
  --b-6: 2rem; --b-7: 3rem; --b-8: 4rem; --b-9: 6rem; --b-10: 8rem;

  /* Şekil / derinlik */
  --r-s: 10px; --r-m: 18px; --r-l: 28px; --r-xl: 40px; --r-tam: 999px;
  --golge-1: 0 1px 2px rgb(21 16 10 / 0.05), 0 4px 14px rgb(21 16 10 / 0.05);
  --golge-2: 0 2px 6px rgb(21 16 10 / 0.06), 0 20px 48px -12px rgb(21 16 10 / 0.22);
  --golge-altin: 0 10px 40px -10px rgb(223 151 31 / 0.55);
  --petek: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);

  /* Hareket */
  --hizli: 160ms; --orta: 260ms;
  --egri: cubic-bezier(0.22, 1, 0.36, 1);
  --egri-yay: cubic-bezier(0.34, 1.56, 0.64, 1);

  --kap: 1240px;
  --ust-h: 76px;

  --desen-petek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.3L28 64.7 0 48.5V16.2zM28 97V64.7' fill='none' stroke='%23efb24a' stroke-width='1'/%3E%3C/svg%3E");
  --desen-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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Sayfalar arası geçiş (View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--egri); }
::view-transition-group(urun-gorsel) { animation-duration: 450ms; animation-timing-function: var(--egri); }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--ust-h) + 20px); }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font-family: var(--f-metin); font-size: var(--fs-metin); line-height: 1.65;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--f-baslik); font-weight: 560; line-height: 1.06; letter-spacing: -0.022em; margin: 0 0 var(--b-4); text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: var(--fs-h1); }
h1:not(.hero__baslik), .blog-vitrin h2 { font-family: "Fraunces", "Fraunces Yedek K", Georgia, serif; }
@media (min-width: 700px) { h1:not(.hero__baslik) { font-family: "Fraunces", "Fraunces Yedek B", Georgia, serif; } .yazi__bas-metin h1, .blog-vitrin h2 { font-family: "Fraunces", "Fraunces Yedek Y", Georgia, serif; } }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: italic; font-weight: 420; color: var(--bal-600); }
p { margin: 0 0 var(--b-4); }
a { color: var(--vurgu); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--hizli) ease; }
a:hover { color: var(--metin); }
:focus-visible { outline: 2px solid var(--bal-500); outline-offset: 3px; border-radius: 6px; }
address { font-style: normal; }
ul, ol { padding: 0; margin: 0; list-style: none; }
::selection { background: var(--bal-300); color: var(--gece-900); }

.gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atla { position: absolute; left: var(--b-4); top: -100px; z-index: 200; background: var(--bal-400); color: var(--gece-900); padding: var(--b-3) var(--b-4); border-radius: var(--r-s); font-weight: 700; }
.atla:focus { top: var(--b-4); color: var(--gece-900); }

.kap { width: 100%; max-width: var(--kap); margin-inline: auto; padding-inline: var(--b-4); }
.kap--dar { max-width: 860px; }
@media (min-width: 768px) { .kap { padding-inline: var(--b-6); } }

.ikon { width: 1.25em; height: 1.25em; flex: none; }
.ikon--kucuk { width: 0.95em; height: 0.95em; display: inline-block; vertical-align: -0.1em; }
.orta { text-align: center; margin-top: var(--b-6); }

/* Kaydırma ilerleme çubuğu (CSS scroll-driven) */
.ilerleme { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; transform-origin: 0 50%; transform: scaleX(0); background: var(--altin); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .ilerleme { animation: ilerle linear both; animation-timeline: scroll(root); }
  @keyframes ilerle { to { transform: scaleX(1); } }
}

/* ---------- Düğmeler ---------- */
.btn {
  --btn-h: 50px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: var(--btn-h); padding: 0 1.5em;
  border: 1.5px solid transparent; border-radius: var(--r-tam);
  font: 600 1rem/1.2 var(--f-metin); letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--orta) ease, color var(--orta) ease, border-color var(--orta) ease, transform var(--hizli) ease, box-shadow var(--orta) ease;
}
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.32) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--egri); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn .ikon { width: 1.2em; height: 1.2em; }
.btn--buyuk { --btn-h: 58px; padding: 0 1.8em; font-size: 1.0625rem; }
.btn--tam { width: 100%; }
.btn--bal { background: var(--bal-400); color: var(--gece-900); }
.btn--bal:hover { background: var(--bal-300); color: var(--gece-900); box-shadow: var(--golge-altin); }
.btn--wa { background: var(--wa-600); color: #fff; }
.btn--wa:hover { background: var(--wa-700); color: #fff; box-shadow: 0 10px 34px -10px rgb(28 122 67 / 0.6); }
.btn--koyu { background: var(--gece-900); color: var(--acik); }
.btn--koyu:hover { background: var(--gece-700); color: #fff; }
.btn--cizgi { border-color: var(--gece-900); color: var(--gece-900); background: transparent; }
.btn--cizgi:hover { background: var(--gece-900); color: var(--acik); }
.btn--cizgi-acik { border-color: rgb(246 238 221 / 0.35); color: var(--acik); background: rgb(246 238 221 / 0.04); }
.btn--cizgi-acik:hover { border-color: var(--bal-300); color: var(--bal-300); background: rgb(246 238 221 / 0.08); }
.btn--parilti { animation: nabiz 2.8s var(--egri) infinite 1.5s; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.45); } 70%, 100% { box-shadow: 0 0 0 18px rgb(37 211 102 / 0); } }
.dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-3); }

.metin-link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 600; color: var(--metin); text-decoration: none; }
.metin-link:hover { color: var(--vurgu); }
.metin-link .ikon { transition: transform var(--orta) var(--egri); }
.metin-link:hover .ikon { transform: translateX(5px); }
.metin-link--acik { color: var(--acik); }
.metin-link--acik:hover { color: var(--bal-300); }

.rozet { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.4em 0.95em; border-radius: var(--r-tam); font-size: var(--fs-kucuk); font-weight: 600; background: var(--bal-200); color: var(--bal-700); }
.rozet--koyu { background: rgb(246 238 221 / 0.06); color: var(--acik); border: 1px solid var(--acik-cizgi); }
.rozet__nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--bal-400); animation: nokta 2.2s ease-out infinite; }
@keyframes nokta { 0% { box-shadow: 0 0 0 0 rgb(239 178 74 / 0.7); } 80%, 100% { box-shadow: 0 0 0 10px rgb(239 178 74 / 0); } }

.ust-baslik { display: inline-flex; align-items: center; gap: 0.75em; margin-bottom: var(--b-4); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vurgu); }
.ust-baslik__no { font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: 0.95rem; letter-spacing: 0; text-transform: none; padding-right: 0.75em; border-right: 1px solid currentColor; line-height: 1; }
.ust-baslik--acik { color: var(--bal-300); }
.kucuk-baslik { font-size: 1.375rem; margin-bottom: var(--b-4); }

.cipler { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.cip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-tam); color: var(--metin); text-decoration: none; font-weight: 500; transition: border-color var(--hizli), background-color var(--hizli), transform var(--hizli); }
.cip:hover { border-color: var(--bal-500); background: var(--bal-200); color: var(--metin); transform: translateY(-1px); }
.cip--bal { min-height: 34px; padding: 0 0.9em; background: var(--bal-200); border-color: transparent; color: var(--bal-700); font-size: var(--fs-kucuk); font-weight: 600; }

/* ---------- Üst bilgi (koyu cam) ---------- */
/* Buzlu cam ::before katmanında: backdrop-filter .ust'ün kendisinde olursa içindeki fixed mobil menü
   ekrana değil şeride göre konumlanır ve 64 px'lik bir şeride hapsolur. */
.ust { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--acik-cizgi); transition: box-shadow var(--orta); }
.ust::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(12 9 6 / 0.97); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: background-color var(--orta); pointer-events: none; }
.ust.kaydi { box-shadow: 0 10px 40px -20px rgb(0 0 0 / 0.6); }
.ust.kaydi::before { background: rgb(12 9 6 / 0.9); }
.ust__ic { display: flex; align-items: center; gap: var(--b-5); min-height: var(--ust-h); }
.ust__logo { margin-right: auto; flex: none; transition: transform var(--orta) var(--egri); }
.ust__logo:hover { transform: rotate(-2deg) scale(1.03); }
.ust__logo { --logo-h: 37px; }
/* Logo: "KEVSER" görsel, alt yazı gerçek metin (lib_ek.php → logo_html) */
.logo { display: inline-grid; gap: 1px; width: calc(var(--logo-h, 37px) * 395 / 105); vertical-align: middle; }
.logo img { display: block; width: 100%; height: auto; }
.logo__alt { display: block; width: 100%; height: auto; overflow: visible; }
.logo__alt text { font-family: var(--f-metin); font-size: 30px; font-weight: 800; fill: #fff; stroke: #e6a02c; stroke-width: 5px; stroke-linejoin: round; paint-order: stroke fill; }
.ust__nav ul { display: flex; gap: var(--b-1); }
.ust__nav a:not(.btn) { position: relative; display: flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0 0.85em; color: var(--acik-2); text-decoration: none; font-weight: 500; }
.ust__nav a:not(.btn)::after { content: ""; position: absolute; left: 0.85em; right: 0.85em; bottom: 6px; height: 1.5px; background: var(--altin); transform: scaleX(0); transform-origin: right; transition: transform var(--orta) var(--egri); }
.ust__nav a:not(.btn):hover { color: var(--acik); }
.ust__nav a:not(.btn):hover::after, .ust__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.ust__nav a[aria-current="page"] { color: var(--bal-300); }
.ust__no { display: none; font-family: var(--f-metin); font-size: 0.75rem; color: var(--bal-400); letter-spacing: 0.08em; }
.ust__mobil-alt { display: none; }
.ust__aksiyon { display: flex; align-items: center; gap: var(--b-2); }
.ust__wa { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--acik); border: 1px solid var(--acik-cizgi); transition: background-color var(--orta), color var(--orta), border-color var(--orta); }
.ust__wa:hover { background: var(--wa-600); border-color: var(--wa-600); color: #fff; }
.ust__wa .ikon { width: 22px; height: 22px; }
.ust__tel { --btn-h: 48px; }
.ust__menu-btn { display: none; width: 48px; height: 48px; place-items: center; border: 1px solid var(--acik-cizgi); border-radius: 50%; background: transparent; cursor: pointer; }
.ust__cizgiler { position: relative; width: 20px; height: 12px; }
.ust__cizgiler i { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--acik); border-radius: 2px; transition: transform var(--orta) var(--egri), top var(--orta) var(--egri); }
.ust__cizgiler i:first-child { top: 1px; }
.ust__cizgiler i:last-child { top: 9px; }
.ust__menu-btn[aria-expanded="true"] .ust__cizgiler i:first-child { top: 5px; transform: rotate(45deg); }
.ust__menu-btn[aria-expanded="true"] .ust__cizgiler i:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .ust__tel span { display: none; }
  .ust__tel { width: 48px; padding: 0; }
  .ust__wa { display: none; }
  .js .ust__menu-btn { display: grid; }
  .js .ust__nav {
    position: fixed; inset: var(--ust-h) 0 0 0; z-index: 99; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--b-6);
    padding: var(--b-6) var(--b-5) calc(var(--b-6) + env(safe-area-inset-bottom));
    background: radial-gradient(120% 60% at 100% 0%, rgb(223 151 31 / 0.18), transparent 60%), var(--gece-950);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 500ms var(--egri), visibility 0s linear 500ms;
  }
  .js .ust__nav.acik { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
  .ust__nav ul { flex-direction: column; gap: 0; }
  .js .ust__nav li { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--egri), transform 400ms var(--egri); }
  .js .ust__nav.acik li { opacity: 1; transform: none; }
  .ust__nav.acik li:nth-child(2) { transition-delay: 60ms; }
  .ust__nav.acik li:nth-child(3) { transition-delay: 120ms; }
  .ust__nav.acik li:nth-child(4) { transition-delay: 180ms; }
  .ust__nav a:not(.btn) { min-height: 72px; padding: 0; gap: var(--b-4); font-family: var(--f-baslik); font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 480; color: var(--acik); border-bottom: 1px solid var(--acik-cizgi); letter-spacing: -0.02em; }
  .ust__nav a:not(.btn)::after { display: none; }
  .ust__no { display: inline; }
  .js .ust__mobil-alt { display: grid; gap: var(--b-3); }
  .ust__mobil-alt p { color: var(--acik-2); font-size: var(--fs-kucuk); margin: var(--b-2) 0 0; text-align: center; }
  html:not(.js) .ust__ic { flex-wrap: wrap; }
  html:not(.js) .ust__nav { order: 3; width: 100%; }
  html:not(.js) .ust__nav ul { flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .ust__nav a:not(.btn) { min-height: 44px; font-size: 1rem; font-family: var(--f-metin); border: 0; padding: 0 0.6em; }
  html:not(.js) .ust__no { display: none; }
}
@media (max-width: 400px) { .ust__logo { --logo-h: 31px; } }
body.menu-acik { overflow: hidden; }

/* ---------- Kırıntı ---------- */
.kirinti { padding-block: var(--b-5) 0; font-size: var(--fs-kucuk); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: var(--b-1) var(--b-2); color: var(--metin-2); }
.kirinti li { display: flex; align-items: center; gap: var(--b-2); }
.kirinti li + li::before { content: "/"; color: var(--krem-300); }
.kirinti a { color: var(--metin-2); text-decoration: none; }
.kirinti a:hover { color: var(--vurgu); text-decoration: underline; }
.kirinti [aria-current] { color: var(--metin); font-weight: 600; }

/* ---------- Bölümler ---------- */
.bolum { position: relative; padding-block: var(--b-8); }
.bolum--ust-bosluksuz { padding-top: 0; }
.bolum--ust-az { padding-top: var(--b-5); }
.bolum--krem { background: var(--yuzey-2); }
.bolum--gece { background: var(--gece-900); color: var(--acik); overflow: hidden; }
.bolum--gece h2 { color: var(--acik); }
.bolum--gece h2 em { color: var(--bal-300); }
@media (min-width: 960px) { .bolum { padding-block: var(--b-10); } .bolum--ust-bosluksuz { padding-top: 0; } .bolum--ust-az { padding-top: var(--b-6); } }

.bolum__bas { max-width: 760px; margin-bottom: var(--b-7); }
.bolum__bas h2 { margin: 0; }
.bolum__bas--yan { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--b-5); }
.bolum__bas--yan > div:first-child { max-width: 720px; }
.bolum__bas--orta { margin-inline: auto; text-align: center; }
.bolum__not { max-width: 26em; color: var(--metin-2); margin: 0; }

.izgara { display: grid; gap: var(--b-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .izgara--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-5); } }
@media (min-width: 1100px) { .izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Kartlar ---------- */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-m); transition: border-color var(--orta), box-shadow var(--orta) ease, transform var(--orta) var(--egri); }
a.kart, .urun-kart__link { color: inherit; text-decoration: none; }
a.kart:hover { border-color: var(--bal-400); box-shadow: var(--golge-2); transform: translateY(-3px); }

.urun-kart { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; position: relative; overflow: hidden; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 500ms var(--egri), box-shadow var(--orta), border-color var(--orta); }
.urun-kart::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--gx) var(--gy), rgb(247 207 124 / 0.22), transparent 45%); transition: opacity var(--orta); }
.urun-kart:hover { border-color: var(--bal-400); box-shadow: var(--golge-2); }
.urun-kart:hover::before { opacity: 1; }
.urun-kart.egik { transition: transform 80ms linear, box-shadow var(--orta), border-color var(--orta); }
.urun-kart__link { display: flex; flex-direction: column; height: 100%; }
.urun-kart__gorsel { position: relative; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--krem-200); overflow: hidden; }
.urun-kart__gorsel picture, .kat-kart__gorsel picture, .galeri__kare picture, .bento__gorsel picture { position: absolute; inset: 0; }
.urun-kart__gorsel img, .kat-kart__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: var(--b-4); transition: transform 700ms var(--egri); }
.urun-kart:hover .urun-kart__gorsel img { transform: scale(1.06); }
.urun-kart__govde { position: relative; flex: 1; padding: var(--b-4) var(--b-4) var(--b-5); }
.urun-kart__kat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bal-700); margin: 0 0 var(--b-1); }
.urun-kart__ad { font-family: var(--f-metin); font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0; letter-spacing: -0.005em; }
.urun-kart__model { display: inline-block; margin: var(--b-2) 0 0; padding: 2px 8px; border-radius: 6px; background: var(--krem-200); font-size: 0.75rem; font-weight: 700; color: var(--metin-2); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .urun-kart__ad { font-size: 1.0625rem; } }

.kat-kart { display: flex; flex-direction: column; overflow: hidden; }
.kat-kart__gorsel { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-bottom: 1px solid var(--krem-200); }
.kat-kart:hover .kat-kart__gorsel img { transform: scale(1.06); }
.kat-kart__govde { padding: var(--b-4); }
.kat-kart__ad { font-size: 1.125rem; margin: 0 0 var(--b-1); }
.kat-kart__sayi { display: flex; align-items: center; gap: var(--b-2); margin: 0; font-size: var(--fs-kucuk); color: var(--metin-2); }
.kat-kart__sayi .ikon { width: 1em; height: 1em; color: var(--vurgu); transition: transform var(--orta) var(--egri); }
.kat-kart:hover .kat-kart__sayi .ikon { transform: translateX(5px); }
@media (min-width: 768px) { .kat-kart__ad { font-size: 1.3125rem; } }

.gorsel-yok { width: 100%; height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--b-2); padding: var(--b-4); background: var(--desen-petek) center / 40px auto, linear-gradient(160deg, var(--krem-100), var(--krem-200)); color: var(--metin-2); font-size: var(--fs-kucuk); text-align: center; font-weight: 600; }
.gorsel-yok .ikon { width: 44px; height: 44px; color: var(--bal-500); }

/* ---------- HERO ---------- */
.hero { --mx: 70%; --my: 30%; position: relative; isolation: isolate; overflow: hidden; background: var(--gece-950); color: var(--acik); padding-block: var(--b-7) var(--b-9); }
.hero__desen { position: absolute; inset: -90px -5%; /* sabit: yükseklik değişince kaymasın (CLS) */ z-index: -2; opacity: 0.16; background: var(--desen-petek) 0 0 / 56px auto; -webkit-mask-image: radial-gradient(60% 70% at 72% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 72% 40%, #000 20%, transparent 75%); animation: desen-kay 60s linear infinite; }
@keyframes desen-kay { to { background-position: 56px 97px; } }
.hero__isik { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px circle at var(--mx) var(--my), rgb(239 178 74 / 0.20), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgb(223 151 31 / 0.16), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgb(185 117 18 / 0.14), transparent 60%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.08; background: var(--desen-gren); mix-blend-mode: overlay; pointer-events: none; }
.hero__ic { display: grid; gap: var(--b-8); align-items: center; }
.hero__baslik { font-family: "Fraunces", "Fraunces Yedek H", Georgia, serif; margin: var(--b-5) 0; font-size: var(--fs-h1); font-weight: 520; letter-spacing: -0.035em; line-height: 0.98; color: var(--acik); }
.satir { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.satir > span { display: inline-block; white-space: nowrap; animation: satir-gir 1100ms var(--egri) both; }
.satir:nth-child(2) > span { animation-delay: 110ms; }
.satir:nth-child(3) > span { animation-delay: 220ms; }
@keyframes satir-gir { from { transform: translateY(105%) rotate(2deg); } to { transform: none; } }
.satir--altin { position: relative; overflow: visible; }
.el-cizgi { position: absolute; left: 0; bottom: -0.1em; width: 88%; height: 0.3em; overflow: visible; }
.el-cizgi path { fill: none; stroke: var(--bal-400); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: ciz-el 1200ms var(--egri) forwards 1000ms; vector-effect: non-scaling-stroke; }
@keyframes ciz-el { to { stroke-dashoffset: 0; } }
.altin { font-style: italic; font-weight: 400; background: var(--altin); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
.satir > span.altin { animation: satir-gir 1100ms var(--egri) both 220ms, altin-ak 6s linear infinite 1.4s; }
@keyframes altin-ak { to { background-position: 200% center; } }
/* Giriş paragrafı sayfanın en büyük öğesi (LCP): görünmez başlamaz, yalnızca kayar; aksi halde LCP animasyon kadar gecikir */
.hero__giris { font-size: var(--fs-giris); color: var(--acik-2); max-width: 34em; margin-bottom: var(--b-6); animation: kay 900ms var(--egri) both 380ms; }
.hero .dugmeler { animation: yukari 900ms var(--egri) both 480ms; }
@keyframes yukari { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kay { from { transform: translateY(18px); } to { transform: none; } }
.hero__sayilar { display: flex; flex-wrap: wrap; gap: var(--b-5) var(--b-7); margin: var(--b-7) 0 0; padding-top: var(--b-5); border-top: 1px solid var(--acik-cizgi); animation: yukari 900ms var(--egri) both 580ms; }
.hero__sayilar div { display: flex; flex-direction: column-reverse; }
.hero__sayilar dt { font-size: var(--fs-kucuk); color: var(--acik-2); }
.hero__sayilar dd { margin: 0; font-family: var(--f-baslik); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 480; line-height: 1; letter-spacing: -0.03em; color: var(--acik); font-variant-numeric: tabular-nums; }
.hero__sayilar sup { font-size: 0.45em; color: var(--bal-400); margin-left: 0.15em; vertical-align: super; font-family: var(--f-metin); font-weight: 600; letter-spacing: 0; }

.hero__sahne { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 560 / 600; animation: yukari 1200ms var(--egri) both 200ms; }
.kemer { position: absolute; left: 6%; top: 0; width: 68%; margin: 0; }
.kemer__cerceve { position: relative; aspect-ratio: 0.8; overflow: hidden; border-radius: 999px 999px 22px 22px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8); }
.kemer__cerceve::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(246 238 221 / 0.35); border-radius: 999px 999px 14px 14px; pointer-events: none; }
.kemer picture, .kemer img { width: 100%; height: 100%; object-fit: cover; }
.kemer img { transform: scale(1.04); animation: nefes 14s ease-in-out infinite alternate; }
@keyframes nefes { to { transform: scale(1.12) translateY(-2%); } }
.kemer figcaption, .hikaye__gorsel figcaption { display: flex; gap: 0.8em; margin-top: var(--b-3); font-size: 0.8125rem; color: var(--acik-2); letter-spacing: 0.01em; }
.kemer figcaption span, .hikaye__gorsel figcaption span { flex: none; font-family: var(--f-baslik); font-style: italic; color: var(--bal-300); }
.hero__petek { position: absolute; right: 0; bottom: 18%; width: 40%; aspect-ratio: 1.12; clip-path: var(--petek); animation: suz 11s ease-in-out infinite; }
.hero__petek picture, .hero__petek img { width: 100%; height: 100%; object-fit: cover; }
@keyframes suz { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* Uçan arılar (SVG SMIL hareket + CSS kanat çırpışı) */
.ucus { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.ucus__iz { fill: none; stroke: var(--bal-300); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.5 9; opacity: 0.55; }
.ari__govde { fill: #f2b233; }
.ari__serit { fill: none; stroke: #1a130b; stroke-width: 2.6; stroke-linecap: round; }
.ari__bas, .ari__igne { fill: #1a130b; }
.ari__goz { fill: #f6eedd; }
.ari__anten { fill: none; stroke: #1a130b; stroke-width: 1.1; stroke-linecap: round; }
.ari__kanat { fill: rgb(255 255 255 / 0.72); stroke: rgb(255 255 255 / 0.95); stroke-width: 0.7; transform-box: fill-box; transform-origin: 50% 100%; animation: cirp 70ms ease-in-out infinite alternate; }
.ari__kanat--on { animation-delay: 35ms; }
@keyframes cirp { to { transform: scaleY(0.3); } }
.ari-sallanti { animation: sallan 900ms ease-in-out infinite alternate; }
@keyframes sallan { to { transform: translateY(3px) rotate(4deg); } }
.ucus--kucuk { inset: auto -10% -30% auto; width: 300px; height: 140px; }
.ucus--kucuk .ucus__iz { stroke: var(--bal-500); opacity: 0.7; }
.ucus--kucuk .ari__kanat { fill: rgb(255 255 255 / 0.9); stroke: rgb(21 16 10 / 0.25); }
@media (max-width: 767px) { .ucus--kucuk { width: 220px; height: 103px; inset: auto -4% -18% auto; } }

.vitrin-kart { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--b-3); max-width: 290px; padding: 10px 14px 10px 10px; border-radius: var(--r-m); background: rgb(250 245 234 / 0.94); color: var(--gece-900); text-decoration: none; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.7); transition: transform var(--orta) var(--egri); animation: suz 10s ease-in-out infinite 2s; }
.vitrin-kart:hover { color: var(--gece-900); }
.vitrin-kart__gorsel { position: relative; width: 56px; height: 56px; flex: none; border-radius: 12px; background: #fff; overflow: hidden; }
.vitrin-kart__gorsel picture { position: absolute; inset: 0; }
.vitrin-kart__gorsel img { width: 100%; height: 100%; object-fit: contain; }
.vitrin-kart strong { display: block; font-size: 0.9375rem; line-height: 1.25; }
.vitrin-kart__etiket { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bal-700); }
.vitrin-kart > .ikon { color: var(--bal-700); }

.hero__asagi { position: absolute; left: 50%; bottom: var(--b-5); translate: -50% 0; display: none; width: 28px; height: 46px; border: 1.5px solid var(--acik-cizgi); border-radius: 20px; }
.hero__asagi span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--bal-400); animation: kaydir 2s var(--egri) infinite; }
@keyframes kaydir { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

@media (min-width: 1024px) {
  .hero { padding-block: var(--b-8) var(--b-10); min-height: min(900px, calc(100svh - var(--ust-h))); display: flex; align-items: center; }
  .hero > .kap { width: 100%; }
  .hero__ic { grid-template-columns: 1.08fr 1fr; gap: var(--b-8); }
  .hero__asagi { display: block; }
}
@media (max-width: 560px) { .vitrin-kart { max-width: 250px; } .kemer figcaption { display: none; } }

/* ---------- Bento kategoriler ---------- */
.bento { display: grid; gap: var(--b-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento__kutu { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: var(--b-4); overflow: hidden; border-radius: var(--r-l); background: #fff; border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; transition: transform var(--orta) var(--egri), box-shadow var(--orta), border-color var(--orta); }
.bento__kutu:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: var(--bal-400); color: var(--metin); }
.bento__gorsel { position: absolute; inset: 0 0 84px; z-index: -1; }
.bento__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: var(--b-4) var(--b-4) 0; transition: transform 800ms var(--egri); }
.bento__kutu:hover .bento__gorsel img { transform: scale(1.07) rotate(-1deg); }
.bento__govde { display: flex; flex-direction: column; gap: 2px; padding-right: 44px; }
.bento__sayi { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bal-700); }
.bento__ad { font-family: var(--f-baslik); font-size: 1.1875rem; font-weight: 540; line-height: 1.15; letter-spacing: -0.015em; }
.bento__aciklama { margin-top: var(--b-2); color: var(--acik-2); max-width: 22em; }
.bento__ok { position: absolute; right: var(--b-4); bottom: var(--b-4); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--krem-200); color: var(--gece-900); transition: background-color var(--orta), transform var(--orta) var(--egri); }
.bento__ok .ikon { width: 18px; height: 18px; }
.bento__kutu:hover .bento__ok { background: var(--bal-400); transform: rotate(-45deg); }

.bento__kutu--1 { grid-column: 1 / -1; min-height: 440px; padding: var(--b-5); background: radial-gradient(90% 80% at 80% 20%, rgb(239 178 74 / 0.28), transparent 60%), var(--gece-900); border-color: var(--gece-700); color: var(--acik); }
.bento__kutu--1:hover { color: var(--acik); border-color: var(--bal-500); }
.bento__kutu--1 .bento__gorsel { inset: 4% 4% 44% 4%; }
.bento__kutu--1 .bento__gorsel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 1; translate: -50% 0; background: #fff; border-radius: 50%; box-shadow: 0 0 0 14px rgb(255 255 255 / 0.05), 0 0 0 30px rgb(255 255 255 / 0.03); }
.bento__kutu--1 .bento__gorsel picture { inset: 12% 22%; }
.bento__kutu--1 .bento__gorsel img { padding: var(--b-3); }
.bento__kutu--1 .bento__ad { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); max-width: 8em; }
.bento__kutu--1 .bento__sayi { color: var(--bal-300); }
.bento__kutu--1 .bento__ok { width: 52px; height: 52px; background: var(--bal-400); right: var(--b-5); bottom: var(--b-5); }
.bento__kutu--1 .bento__ok .ikon { width: 22px; height: 22px; }
.bento__kutu--2 { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .bento__kutu:not(.bento__kutu--1) .bento__ok { top: var(--b-3); right: var(--b-3); bottom: auto; width: 34px; height: 34px; background: rgb(242 233 214 / 0.9); }
  .bento__kutu:not(.bento__kutu--1) .bento__govde { padding-right: 0; }
  .bento__kutu:not(.bento__kutu--1, .bento__kutu--2) .bento__ad { font-size: 1.0625rem; overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b-4); }
  .bento__kutu { min-height: 270px; }
  .bento__kutu--1 { grid-column: span 2; grid-row: span 2; padding: var(--b-6); }
  .bento__kutu--1 .bento__gorsel { inset: 5% 6% 40% 6%; }
  .bento__kutu--1 .bento__ok { right: var(--b-6); bottom: var(--b-6); }
  .bento__kutu--2 { grid-column: span 2; }
  .bento__kutu--2 .bento__gorsel { inset: 0 0 0 42%; }
  .bento__kutu--2 .bento__ad { font-size: 1.75rem; max-width: 7em; }
}

/* ---------- Kovandan sofraya (arı ürünleri) ---------- */
.sofra { background: linear-gradient(180deg, var(--zemin), #f6ecd6 60%, var(--zemin)); }
.sofra__izgara { display: grid; gap: var(--b-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sofra__bas { position: relative; grid-column: 1 / -1; padding-bottom: var(--b-5); }
.sofra__bas h2 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); letter-spacing: -0.035em; margin-bottom: var(--b-5); }
.sofra__bas p { color: var(--metin-2); font-size: var(--fs-giris); max-width: 28em; }
.sofra__kart { position: relative; isolation: isolate; display: block; min-height: 240px; overflow: hidden; border-radius: var(--r-l); background: var(--gece-800); color: #fff; text-decoration: none; }
.sofra__kart picture { position: absolute; inset: 0; z-index: -2; }
.sofra__kart img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--egri), filter var(--orta); }
.sofra__kart::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 9 6 / 0) 35%, rgb(12 9 6 / 0.78)); transition: opacity var(--orta); }
.sofra__kart:hover img { transform: scale(1.07); }
.sofra__kart:hover { color: #fff; }
.sofra__no { position: absolute; left: var(--b-4); top: var(--b-4); padding: 4px 10px; border-radius: var(--r-tam); background: rgb(12 9 6 / 0.45); backdrop-filter: blur(8px); font-family: var(--f-baslik); font-style: italic; font-size: 0.875rem; color: var(--acik); }
.sofra__no i { opacity: 0.6; }
.sofra__alt { position: absolute; left: var(--b-4); right: var(--b-4); bottom: var(--b-4); display: flex; flex-direction: column; gap: var(--b-2); }
.sofra__ad { font-family: var(--f-baslik); font-size: 1.375rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; }
.sofra__aciklama { color: rgb(255 255 255 / 0.82); max-width: 26em; }
.sofra__git { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--bal-300); }
.sofra__git .ikon { transition: transform var(--orta) var(--egri); }
.sofra__kart:hover .sofra__git .ikon { transform: translateX(6px); }
.sofra__kart--vitrin { grid-column: 1 / -1; min-height: 440px; }
.sofra__kart--6 { grid-column: 1 / -1; min-height: 200px; }
.sofra__kart--vitrin .sofra__alt { left: var(--b-5); right: var(--b-5); bottom: var(--b-5); }
.sofra__kart--vitrin .sofra__ad { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -0.03em; }
@media (min-width: 768px) {
  .sofra__izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--b-5); }
  .sofra__bas { grid-column: 1 / 7; grid-row: 1; align-self: end; padding: 0 var(--b-6) var(--b-4) 0; }
  .sofra__kart--vitrin { grid-column: 7 / 13; grid-row: 1 / 3; min-height: 640px; }
  .sofra__kart--2 { grid-column: 1 / 4; grid-row: 2; min-height: 300px; }
  .sofra__kart--3 { grid-column: 4 / 7; grid-row: 2; }
  .sofra__kart--4 { grid-column: 1 / 5; min-height: 300px; }
  .sofra__kart--5 { grid-column: 5 / 9; }
  .sofra__kart--6 { grid-column: 9 / 13; }
  .sofra__kart--vitrin .sofra__alt { left: var(--b-6); right: var(--b-6); bottom: var(--b-6); }
}

.ekipman { margin-top: var(--b-9); }
.ekipman__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--b-4); padding-bottom: var(--b-4); border-bottom: 1px solid var(--gece-900); }
.ekipman__bas h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ekipman__liste { --px: 0px; --py: 0px; position: relative; }
.ekipman__liste li { border-bottom: 1px solid var(--cizgi); }
.ekipman__liste a { position: relative; display: grid; grid-template-columns: 2.5rem 56px 1fr auto; align-items: center; gap: var(--b-4); padding: var(--b-4) 0; color: var(--metin); text-decoration: none; transition: padding var(--orta) var(--egri), background-color var(--orta); }
.ekipman__no { font-family: var(--f-baslik); font-style: italic; color: var(--bal-700); }
.ekipman__gorsel { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--cizgi); }
.ekipman__gorsel picture { position: absolute; inset: 0; }
.ekipman__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ekipman__ad { font-family: var(--f-baslik); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.625rem); font-weight: 480; letter-spacing: -0.015em; line-height: 1.2; }
.ekipman__kat, .ekipman__model { display: none; font-size: var(--fs-kucuk); color: var(--metin-2); }
.ekipman__model { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ekipman__ok { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--krem-300); transition: background-color var(--orta), color var(--orta), transform var(--orta) var(--egri), border-color var(--orta); }
.ekipman__ok .ikon { width: 18px; height: 18px; }
.ekipman__liste a:hover .ekipman__ok { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); transform: rotate(-45deg); }
@media (min-width: 900px) {
  .ekipman__liste a { grid-template-columns: 3rem 1fr 14rem 6rem 44px; padding: var(--b-5) var(--b-3); }
  .ekipman__kat, .ekipman__model { display: block; }
  .ekipman__liste a:hover { padding-left: var(--b-5); background: var(--yuzey); }
  /* İmleci izleyen önizleme */
  .ekipman__gorsel { position: absolute; left: var(--px); top: var(--py); z-index: 5; width: 200px; height: 200px; border-radius: var(--r-m); box-shadow: var(--golge-2); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.85) rotate(-4deg); transition: opacity var(--orta), transform 400ms var(--egri); }
  .ekipman__liste a:hover .ekipman__gorsel { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  .ekipman__liste li:has(a:focus-visible) .ekipman__gorsel { opacity: 0; }
}

/* ---------- Hasat yolculuğu ---------- */
.yolculuk__desen { position: absolute; inset: 0; opacity: 0.07; background: var(--desen-petek) 0 0 / 70px auto; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
.yolculuk .kap { position: relative; }
.yolculuk__adimlar { position: relative; display: grid; gap: var(--b-6); }
.yolculuk__adimlar::before { content: ""; position: absolute; left: 28px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--bal-400), var(--bal-600)); transform-origin: top; }
.yolculuk__adim { position: relative; padding-left: 88px; }
.yolculuk__no { position: absolute; left: 0; top: -6px; isolation: isolate; display: grid; place-items: center; width: 56px; height: 62px; font-family: var(--f-baslik); font-size: 1.125rem; font-weight: 600; color: var(--bal-300); }
.yolculuk__no::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--altin); clip-path: var(--petek); }
.yolculuk__no::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--gece-800); clip-path: var(--petek); }
.yolculuk__adim h3 { color: var(--acik); font-size: 1.5rem; margin-bottom: var(--b-2); }
.yolculuk__adim p { color: var(--acik-2); max-width: 30em; margin-bottom: var(--b-2); }
@media (min-width: 1024px) {
  .yolculuk__adimlar { grid-template-columns: repeat(5, 1fr); gap: var(--b-5); }
  .yolculuk__adimlar::before { left: 0; right: 0; top: 31px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--bal-400) 10%, var(--bal-600) 90%, transparent); transform-origin: left; }
  .yolculuk__adim { padding: 96px 0 0; }
  .yolculuk__no { top: 0; }
  .yolculuk__adim h3 { font-size: 1.375rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .yolculuk__adimlar::before { animation: ciz-y linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes ciz-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @media (min-width: 1024px) { .yolculuk__adimlar::before { animation-name: ciz-x; } @keyframes ciz-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } }
  }
}

/* ---------- Bal süzme makinesi seçici (konfigüratör) ---------- */
.secici__bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--b-4) var(--b-7); margin-bottom: var(--b-7); }
.secici__bas h2 { margin: 0; max-width: 12em; }
.secici__giris { max-width: 30em; margin: 0; color: var(--metin-2); font-size: var(--fs-giris); }

.konfig { display: grid; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--cizgi); background: var(--yuzey); box-shadow: 0 2px 6px rgb(21 16 10 / 0.05), 0 50px 100px -40px rgb(21 16 10 / 0.35); }
@media (min-width: 1024px) { .konfig { grid-template-columns: 1.08fr 0.92fr; } }

.konfig__panel { position: relative; display: grid; gap: var(--b-7); align-content: start; padding: var(--b-6) var(--b-5); }
.konfig__panel::before { content: ""; position: absolute; right: -40px; top: -40px; width: 260px; aspect-ratio: 1.12; background: var(--desen-petek) center / 40px auto; opacity: 0.35; clip-path: var(--petek); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }
@media (min-width: 768px) { .konfig__panel { padding: var(--b-7); } }
.konfig__adim { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.konfig__adim legend { display: flex; align-items: center; gap: 0.75em; margin-bottom: var(--b-4); padding: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin); }
.konfig__no { padding-right: 0.75em; border-right: 1px solid var(--krem-300); font-family: var(--f-baslik); font-style: italic; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--bal-700); }

/* Sayaç */
.sayac { display: flex; align-items: center; gap: var(--b-3); }
.sayac__btn { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--krem-300); border-radius: 50%; background: var(--yuzey); color: var(--metin); cursor: pointer; touch-action: manipulation; user-select: none; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms ease; }
.sayac__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sayac__btn:hover { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); }
.sayac__btn:active { transform: scale(0.94); }
.sayac__deger { min-width: 2.6ch; text-align: center; font-family: var(--f-baslik); font-size: clamp(4rem, 2.6rem + 5vw, 6.25rem); font-weight: 450; line-height: 0.9; letter-spacing: -0.05em; color: var(--gece-900); font-variant-numeric: tabular-nums; }
.sayac__birim { align-self: flex-end; margin: 0 0 0.6rem 0.25rem; font-family: var(--f-baslik); font-style: italic; font-size: 1.25rem; color: var(--metin-2); }

/* Petekler: kovan sayısıyla dolar */
.petekler { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; margin: var(--b-5) 0 var(--b-2); }
.petekler span { aspect-ratio: 1.12; clip-path: var(--petek); background: var(--krem-300); transform: scale(0.82); transition: background-color 280ms ease, transform 420ms var(--egri-yay); }
.petekler span.dolu { background: linear-gradient(160deg, #f7cf7c, var(--bal-500)); transform: scale(1); }
.petekler__not { margin: 0 0 var(--b-5); font-size: 0.8125rem; color: var(--metin-2); }
@media (max-width: 480px) { .petekler { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } }

/* Kaydırıcı + bölgeler */
.bolge { display: grid; gap: var(--b-3); }
.bolge__etiket { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bolge__etiket li { display: grid; gap: 1px; padding-top: 10px; border-top: 2px solid var(--krem-300); transition: border-color 250ms ease; }
.bolge__etiket strong { font-size: 0.8125rem; font-weight: 600; color: var(--metin-2); transition: color 250ms ease; }
.bolge__etiket span { font-size: 0.75rem; color: var(--metin-2); opacity: 0.75; font-variant-numeric: tabular-nums; }
.bolge__etiket li.aktif { border-color: var(--bal-500); }
.bolge__etiket li.aktif strong { color: var(--metin); }

.hazir { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-5); }
.hazir__btn { min-width: 56px; min-height: 40px; padding: 0 14px; border: 1px solid var(--krem-300); border-radius: var(--r-tam); background: transparent; color: var(--metin); font: 600 0.875rem var(--f-metin); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.hazir__btn:hover { border-color: var(--bal-500); }
.hazir__btn[aria-pressed="true"] { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); }
@media (max-width: 480px) { .hazir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .hazir__btn { min-width: 0; padding: 0; } }

/* Manuel / Motorlu */
.segment { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 20px; background: var(--krem-200); }
.segment label { position: relative; z-index: 1; cursor: pointer; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: grid; gap: 2px; padding: 12px 16px; border-radius: 15px; transition: color 250ms ease; }
.segment strong { font-size: 1rem; }
.segment small { font-size: 0.8125rem; color: var(--metin-2); }
.segment input:focus-visible + span { outline: 2px solid var(--bal-500); outline-offset: 2px; }
.segment__isaret { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(50% - 5px); border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgb(21 16 10 / 0.08), 0 8px 20px -8px rgb(21 16 10 / 0.25); transition: transform 380ms var(--egri); }
.segment:has(input[value="motorlu"]:checked) .segment__isaret { transform: translateX(100%); }

/* Sonuç paneli */
.konfig__sonuc { position: relative; isolation: isolate; display: grid; gap: var(--b-4); align-content: start; padding: var(--b-6) var(--b-5); background: var(--gece-900); color: var(--acik); }
.konfig__sonuc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 45% at 50% 20%, rgb(239 178 74 / 0.22), transparent 70%); pointer-events: none; }
@media (min-width: 768px) { .konfig__sonuc { padding: var(--b-7) var(--b-6); } }
.konfig__on { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-300); }
.konfig__nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--bal-400); animation: nokta 2.2s ease-out infinite; }
.konfig__sahne { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: radial-gradient(80% 80% at 50% 35%, #fff, var(--krem-200)); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.konfig__sahne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--b-5); mix-blend-mode: multiply; }
.konfig__sahne .gorsel-yok { position: absolute; inset: 0; }
.konfig__sahne.degisti > * { animation: belir-olc 520ms var(--egri); }
.konfig__ad { margin: var(--b-2) 0 0; font-family: var(--f-baslik); font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }
.konfig__ozellik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.konfig__ozellik div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgb(246 238 221 / 0.05); box-shadow: inset 0 0 0 1px var(--acik-cizgi); }
.konfig__ozellik dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acik-2); }
.konfig__ozellik dd { margin: 0; font-family: var(--f-baslik); font-size: 1.0625rem; line-height: 1.25; color: var(--acik); }
@media (max-width: 480px) { .konfig__ozellik { grid-template-columns: 1fr 1fr; } .konfig__ozellik div:last-child { grid-column: 1 / -1; } }
.konfig__neden { margin: 0; color: var(--acik-2); line-height: 1.6; min-height: 3.2em; }
.konfig__sonuc .dugmeler .btn { flex: 1 1 200px; }
.konfig__alt { display: flex; align-items: center; gap: var(--b-3); padding-top: var(--b-4); border-top: 1px solid var(--acik-cizgi); color: var(--acik-2); text-decoration: none; font-size: 0.875rem; }
.konfig__alt[hidden] { display: none; }
.konfig__alt span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bal-300); }
.konfig__alt strong { flex: 1; font-weight: 600; color: var(--acik); }
.konfig__alt .ikon { color: var(--bal-300); transition: transform 250ms var(--egri); }
.konfig__alt:hover strong { color: var(--bal-300); }
.konfig__alt:hover .ikon { transform: translateX(5px); }
.konfig__uyari { margin: 0; font-size: 0.75rem; color: rgb(246 238 221 / 0.45); }

/* Kaydırıcı (ortak) */
.secici__aralik { --dolu: 10%; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.secici__aralik::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--bal-500) var(--dolu), var(--krem-300) var(--dolu)); }
.secici__aralik::-moz-range-track { height: 8px; border-radius: 8px; background: var(--krem-300); }
.secici__aralik::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--bal-500); }
.secici__aralik::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px; border: 0; background: var(--gece-900); clip-path: var(--petek); transition: transform var(--hizli); }
.secici__aralik::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 0; background: var(--gece-900); clip-path: var(--petek); }
.secici__aralik:active::-webkit-slider-thumb { transform: scale(1.18); }
.secici__aralik:focus-visible { outline: 2px solid var(--bal-500); outline-offset: 4px; }

/* ---------- Yatay ray (öne çıkanlar) ---------- */
.ray { --kenar: max(var(--b-4), calc((100vw - var(--kap)) / 2 + var(--b-6))); display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 290px); gap: var(--b-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--kenar); padding: var(--b-2) var(--kenar) var(--b-5); scrollbar-width: none; }
.ray::-webkit-scrollbar { display: none; }
.ray > * { scroll-snap-align: start; }
.ray:focus-visible { outline-offset: -4px; }
.ray-kontrol { display: flex; align-items: center; gap: var(--b-2); }
.ray-kontrol__btn { display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--krem-300); background: var(--yuzey); color: var(--metin); cursor: pointer; transition: background-color var(--orta), color var(--orta), border-color var(--orta); }
.ray-kontrol__btn:hover:not(:disabled) { background: var(--gece-900); color: var(--acik); border-color: var(--gece-900); }
.ray-kontrol__btn:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 768px) { .js .ray-kontrol__btn { display: grid; } }

/* ---------- Hikâye ---------- */
.hikaye__ic { display: grid; gap: var(--b-8); align-items: center; }
.hikaye__gorsel { position: relative; margin: 0; }
.hikaye__gorsel figcaption { color: var(--metin-2); }
.hikaye__gorsel figcaption span { color: var(--bal-700); }
.hikaye__gorsel > picture, .cerceve { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--golge-2); }
.hikaye__gorsel img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.cerceve::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgb(255 255 255 / 0.55); border-radius: calc(var(--r-xl) - 14px); pointer-events: none; }
.hikaye__metin > p { color: var(--metin-2); font-size: 1.0625rem; }
@media (min-width: 960px) { .hikaye__ic { grid-template-columns: 1fr 1.05fr; gap: var(--b-9); } }

.alinti { position: relative; margin: var(--b-6) 0; padding: var(--b-2) 0 var(--b-2) var(--b-6); border-left: 2px solid var(--bal-500); font-family: var(--f-baslik); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--gece-900); }
.alinti p { margin: 0; }

.zaman { display: grid; margin: 0 0 var(--b-6); border-top: 1px solid var(--cizgi); }
.zaman li { display: grid; grid-template-columns: 6rem 1fr; gap: var(--b-3); align-items: baseline; padding-block: var(--b-3); border-bottom: 1px solid var(--cizgi); }
.zaman strong { font-family: var(--f-baslik); font-size: 1.5rem; font-weight: 500; color: var(--bal-700); letter-spacing: -0.02em; }
.zaman span { color: var(--metin-2); }
.zaman--dikey li { padding-block: var(--b-5); }

/* ---------- Özellikler ---------- */
.ozellikler { display: grid; gap: var(--b-4); grid-template-columns: 1fr; }
.ozellikler li { position: relative; overflow: hidden; padding: var(--b-6) var(--b-5); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); transition: transform var(--orta) var(--egri), box-shadow var(--orta); }
.ozellikler li:hover { transform: translateY(-4px); box-shadow: var(--golge-2); }
.ozellikler h3 { font-size: 1.3125rem; margin: var(--b-5) 0 var(--b-2); }
.ozellikler p { position: relative; z-index: 1; color: var(--metin-2); margin: 0; }
.ozellikler { counter-reset: oz; }
.ozellikler li { counter-increment: oz; }
.ozellikler li::before { content: "0" counter(oz); position: absolute; right: var(--b-5); top: var(--b-5); font-family: var(--f-baslik); font-style: italic; color: var(--krem-300); font-size: 2.5rem; line-height: 1; transition: color var(--orta); }
.ozellikler li:hover::before { color: var(--bal-400); }
.ozellikler__ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--krem-300); color: var(--bal-700); }
.ozellikler__ikon .ikon { width: 22px; height: 22px; }
@media (min-width: 640px) { .ozellikler { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ozellikler { grid-template-columns: repeat(4, 1fr); gap: var(--b-5); } }

/* ---------- NAP / Ziyaret / Harita ---------- */
.nap p, .nap__satir { display: flex; gap: var(--b-3); align-items: flex-start; margin: 0 0 var(--b-3); }
.nap .ikon { margin-top: 0.25em; color: var(--vurgu); }
.nap a { color: inherit; }
.nap--buyuk { font-size: 1.0625rem; margin-bottom: var(--b-5); }
.nap__satir p { margin: 0; }
.saatler { display: grid; gap: 4px; margin: 0; max-width: 22rem; }
.saatler div { display: flex; align-items: baseline; gap: var(--b-3); }
.saatler div::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.3; transform: translateY(-4px); }
.saatler dt { order: 0; }
.saatler dd { order: 2; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.saatler__kapali dd { opacity: 0.6; font-weight: 500; }
.durum { width: fit-content; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 8px; padding: 4px 12px 4px 10px; border-radius: var(--r-tam); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.durum__nokta { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.durum__alt { font-weight: 500; }
.durum--acik { background: rgb(52 199 89 / 0.14); color: #4ade80; }
.durum--acik .durum__nokta { background: #34c759; box-shadow: 0 0 0 0 rgb(52 199 89 / 0.6); animation: canli 2s ease-out infinite; }
.durum--kapali { background: rgb(246 238 221 / 0.08); color: var(--acik-2); }
.durum--kapali .durum__nokta { background: #e0a14a; }
@keyframes canli { 0% { box-shadow: 0 0 0 0 rgb(52 199 89 / 0.6); } 80%, 100% { box-shadow: 0 0 0 7px rgb(52 199 89 / 0); } }
.durum--acik-zemin.durum--acik { background: #dcf3e4; color: #157a3c; }
.durum--acik-zemin.durum--kapali { background: var(--krem-200); color: var(--metin-2); }
.durum--kucuk { font-size: 0.75rem; }

.ziyaret { position: relative; isolation: isolate; overflow: hidden; background: var(--gece-900); color: var(--acik); padding-block: var(--b-8); }
.ziyaret::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 90% 20%, rgb(223 151 31 / 0.14), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgb(185 117 18 / 0.10), transparent 70%); }
.ziyaret__desen { position: absolute; inset: 0; z-index: -1; opacity: 0.05; background: var(--desen-petek) 0 0 / 60px auto; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
.ziyaret__ic { display: grid; gap: var(--b-7); align-items: center; }
.ziyaret__metin h2 { color: var(--acik); font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem); letter-spacing: -0.035em; margin-bottom: var(--b-4); }
.ziyaret__metin h2 em { color: var(--bal-300); }
.ziyaret__giris { color: var(--acik-2); font-size: var(--fs-giris); max-width: 32em; margin-bottom: var(--b-6); }
.ziyaret__bilgi { display: grid; margin-bottom: var(--b-6); border-top: 1px solid var(--acik-cizgi); }
.ziyaret__satir { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: var(--b-4); align-items: center; padding-block: var(--b-4); border-bottom: 1px solid var(--acik-cizgi); color: var(--acik); line-height: 1.5; }
.ziyaret__satir p { margin: 0; }
.ziyaret__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(239 178 74 / 0.12); color: var(--bal-300); box-shadow: inset 0 0 0 1px rgb(239 178 74 / 0.25); }
.ziyaret__ikon .ikon { width: 20px; height: 20px; }
.ziyaret__etiket { display: block; margin-bottom: 2px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-300); }
.ziyaret__tel { font-family: var(--f-baslik); font-size: 1.625rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ziyaret__satir--link { color: var(--acik); text-decoration: none; transition: padding var(--orta) var(--egri); }
.ziyaret__satir--link:hover { color: var(--acik); padding-left: 6px; }
.ziyaret__ok { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--acik-cizgi); color: var(--bal-300); transition: background-color var(--orta), color var(--orta), transform var(--orta) var(--egri); }
.ziyaret__satir--link:hover .ziyaret__ok { background: var(--bal-400); color: var(--gece-900); transform: rotate(-45deg); }
.ziyaret__koordinat { display: flex; gap: var(--b-4); margin: var(--b-6) 0 0; font-size: 0.75rem; letter-spacing: 0.14em; color: rgb(246 238 221 / 0.4); font-variant-numeric: tabular-nums; }
.ziyaret__koordinat span::before { content: "◇ "; color: var(--bal-500); }
@media (min-width: 960px) { .ziyaret { padding-block: var(--b-10); } .ziyaret__ic { grid-template-columns: 0.95fr 1.05fr; gap: var(--b-9); } }

/* Harita kartı: temsilî çizim + onaylı Google Haritası */
.harita-kart { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4; min-height: 340px; border-radius: var(--r-xl); background: #1a140d; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(246 238 221 / 0.1); }
.harita-kart__cizim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-zemin { fill: #1a140d; }
.hk-blok rect { fill: #221a11; stroke: rgb(246 238 221 / 0.05); }
.hk-park { fill: #1f3326; }
.hk-agac circle { fill: #2c4a37; }
.hk-yol path { fill: none; stroke: #3b2e1e; stroke-width: 22; stroke-linecap: round; }
.hk-cizgi path { fill: none; stroke: rgb(247 207 124 / 0.35); stroke-width: 1.5; stroke-dasharray: 10 12; }
.hk-ince path { fill: none; stroke: rgb(246 238 221 / 0.07); stroke-width: 6; }
.hk-pin { fill: var(--bal-400); filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.5)); }
.hk-pin-ic { fill: #1a140d; }
.hk-dalga { fill: none; stroke: var(--bal-400); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: dalga 2.8s var(--egri) infinite; }
.hk-dalga--2 { animation-delay: 1.4s; }
.hk-hedef { animation: suz 5s ease-in-out infinite; }
.hk-pusula circle { fill: rgb(12 9 6 / 0.6); stroke: rgb(246 238 221 / 0.2); }
.hk-pusula-k { fill: var(--bal-400); }
.hk-pusula text { font: 700 10px/1 var(--f-metin); fill: rgb(246 238 221 / 0.6); letter-spacing: 0.1em; }
.hk-etiket { animation: suz 5s ease-in-out infinite; }
.hk-etiket path { fill: var(--krem-50); filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.45)); }
.hk-etiket-ad { font: 600 17px/1 var(--f-baslik); fill: var(--gece-900); }
.hk-etiket-alt { font: 500 11px/1 var(--f-metin); fill: var(--metin-2); letter-spacing: 0.02em; }
.harita-kart__temsili { position: absolute; left: var(--b-4); top: var(--b-4); z-index: 2; padding: 4px 10px; border-radius: var(--r-tam); background: rgb(12 9 6 / 0.6); color: rgb(246 238 221 / 0.6); font-size: 0.6875rem; letter-spacing: 0.08em; }
.harita-kart__onay { position: absolute; left: var(--b-3); right: var(--b-3); bottom: var(--b-3); z-index: 3; display: grid; gap: var(--b-3); padding: var(--b-4); border-radius: var(--r-l); background: rgb(12 9 6 / 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(246 238 221 / 0.08); }
.harita-kart__onay p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--acik-2); }
.harita-kart__onay a:not(.btn) { color: var(--bal-300); }
.harita-kart__dugmeler { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.harita-kart__dugmeler .btn { --btn-h: 44px; flex: 1 1 auto; padding: 0 1.1em; font-size: 0.9375rem; }
.harita-kart.yuklendi { background: var(--gece-800); }
.harita-kart.yuklendi iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.25) sepia(0.2) contrast(1.02); }
.harita-kart--uzun { aspect-ratio: auto; min-height: 460px; height: 100%; }
@media (min-width: 560px) { .harita-kart__onay { left: var(--b-4); right: var(--b-4); bottom: var(--b-4); padding: var(--b-4) var(--b-5); } .harita-kart__dugmeler .btn { flex: none; } }
@media (min-width: 960px) { .harita-kart { aspect-ratio: 1 / 1; } .harita-kart--uzun { aspect-ratio: auto; min-height: 600px; } }
@media (max-width: 559px) { .harita-kart { aspect-ratio: 3 / 4; } .harita-kart__onay { padding: var(--b-3) var(--b-4); } }

/* ---------- SSS ---------- */
.sss-yan { display: grid; gap: var(--b-6); }
.sss-yan__bas p { color: var(--metin-2); }
@media (min-width: 960px) { .sss-yan { grid-template-columns: 0.8fr 1.2fr; gap: var(--b-9); align-items: start; } .sss-yan__bas { position: sticky; top: calc(var(--ust-h) + 32px); } }
.sss { display: grid; border-top: 1px solid var(--cizgi); }
.sss__oge { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: var(--b-4); min-height: 76px; padding-block: var(--b-4); cursor: pointer; list-style: none; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--krem-300); font: 400 1.5rem/1 var(--f-metin); color: var(--metin); transition: transform var(--orta) var(--egri), background-color var(--orta), color var(--orta), border-color var(--orta); }
.sss summary:hover::after { border-color: var(--bal-500); }
.sss__oge[open] summary::after { transform: rotate(45deg); background: var(--gece-900); color: var(--acik); border-color: var(--gece-900); }
.sss__soru { font-family: var(--f-baslik); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
.sss__cevap { padding: 0 56px var(--b-5) 0; color: var(--metin-2); }
.sss__cevap p { margin: 0; }
.sss__oge[open] .sss__cevap { animation: yukari 400ms var(--egri); }
@media (max-width: 559px) { .sss__cevap { padding-right: 0; } }

/* ---------- Sayfa başı (iç sayfalar) ---------- */
.sayfa-bas { position: relative; overflow: hidden; padding-block: var(--b-6) var(--b-8); }
.sayfa-bas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--krem-300) 15%, var(--krem-300) 85%, transparent); }
.sayfa-bas__ic > * { max-width: 880px; }
.sayfa-bas h1 { margin-bottom: var(--b-5); letter-spacing: -0.03em; }
.sayfa-bas__giris { font-size: var(--fs-giris); color: var(--metin-2); max-width: 44em; }
.sayfa-bas .dugmeler { margin-top: var(--b-6); }
.sayfa-bas--404 { padding-block: var(--b-9); }
@media (min-width: 960px) { .sayfa-bas { padding-block: var(--b-7) var(--b-9); } }

/* ---------- Metin sayfaları ---------- */
.metin h2 { margin-top: var(--b-8); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.metin h2:first-child { margin-top: 0; }
.metin > p { color: var(--metin-2); }
.not { padding: var(--b-5); background: var(--bal-200); border-radius: var(--r-m); color: var(--gece-700) !important; }
.kaynaklar { display: grid; gap: var(--b-3); }
.kaynaklar li { padding: var(--b-5); }
.kaynaklar a { font-weight: 600; font-size: 1.125rem; }
.kaynaklar p { margin: var(--b-1) 0 0; color: var(--metin-2); }
.tikli { display: grid; gap: var(--b-3); margin-bottom: var(--b-6); }
.tikli li { display: flex; gap: var(--b-3); align-items: flex-start; }
.tikli .ikon { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 0.15em; border-radius: 50%; background: var(--gece-900); color: var(--bal-300); }

/* ---------- Ürün detay ---------- */
.urun__ic { display: grid; gap: var(--b-7); align-items: start; }
@media (min-width: 960px) { .urun__ic { grid-template-columns: 1.1fr 1fr; gap: var(--b-9); } .galeri { position: sticky; top: calc(var(--ust-h) + 24px); } }
.galeri__ana { --zx: 50%; --zy: 50%; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--cizgi); box-shadow: var(--golge-1); }
.galeri__ana::after { content: ""; position: absolute; inset: 14px; border-radius: calc(var(--r-xl) - 14px); border: 1px solid var(--krem-200); pointer-events: none; }
.galeri__kare { position: absolute; inset: 0; }
.galeri__kare[hidden] { display: none; }
.galeri__ana img { width: 100%; height: 100%; object-fit: contain; padding: var(--b-6); transform-origin: var(--zx) var(--zy); transition: transform 400ms var(--egri); }
.galeri__ana.yakin img { transform: scale(1.9); }
@media (pointer: fine) { .galeri__ana[data-yakinlastir] { cursor: zoom-in; } .galeri__ana.yakin { cursor: zoom-out; } }
.galeri__kucukler { display: flex; flex-wrap: wrap; gap: var(--b-2); margin-top: var(--b-3); }
.galeri__kucukler a { position: relative; display: block; width: 76px; height: 76px; border: 1.5px solid var(--cizgi); border-radius: var(--r-s); overflow: hidden; background: #fff; transition: border-color var(--hizli), transform var(--hizli); }
.galeri__kucukler a:hover { border-color: var(--bal-400); transform: translateY(-2px); }
.galeri__kucukler a[aria-current="true"] { border-color: var(--gece-900); box-shadow: 0 0 0 3px var(--bal-200); }
.galeri__kucukler img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .galeri__kucukler a { width: 92px; height: 92px; } }

.urun__bas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-4); margin: var(--b-4) 0 var(--b-3); }
.urun__bilgi h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); margin: 0; letter-spacing: -0.03em; }
.paylas { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--krem-300); background: var(--yuzey); color: var(--metin); cursor: pointer; transition: background-color var(--orta), color var(--orta), transform var(--orta) var(--egri); }
.paylas:hover { background: var(--gece-900); color: var(--acik); transform: rotate(-12deg); }
.urun__model { color: var(--metin-2); margin-bottom: var(--b-5); }
.urun__model strong { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--gece-900); color: var(--bal-300); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.urun__aciklama { font-size: var(--fs-giris); color: var(--metin-2); margin-bottom: var(--b-6); }

.siparis { position: relative; overflow: hidden; padding: var(--b-6) var(--b-5); border-radius: var(--r-l); background: var(--gece-900); color: var(--acik); }
.siparis__baslik { font-family: var(--f-baslik); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: var(--b-2); }
.siparis > p { color: var(--acik-2); }
.siparis .dugmeler { position: relative; z-index: 1; margin: var(--b-5) 0 var(--b-4); }
.siparis .dugmeler .btn { flex: 1 1 200px; }
.siparis__alt { display: flex; align-items: center; gap: var(--b-2); margin: 0; font-size: var(--fs-kucuk); }
.siparis__alt a { display: inline-block; padding-block: 4px; color: var(--bal-300); }
.siparis__alt a:hover { color: var(--acik); }
.siparis__alt .ikon { color: var(--bal-400); }
@media (min-width: 560px) { .siparis { padding: var(--b-6); } }

/* ---------- Ürün dizini / arama ---------- */
.arama { position: relative; width: 100%; max-width: 420px; }
.arama .ikon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--metin-2); pointer-events: none; }
.arama input { width: 100%; min-height: 54px; padding: 0 var(--b-5) 0 50px; font: inherit; color: var(--metin); background: var(--yuzey); border: 1px solid var(--krem-300); border-radius: var(--r-tam); box-shadow: var(--golge-1); transition: border-color var(--hizli), box-shadow var(--orta); }
.arama input:focus-visible { outline: none; border-color: var(--bal-500); box-shadow: 0 0 0 4px var(--bal-200); }
.arama__sonuc { color: var(--metin-2); min-height: 1.6em; }
.dizin { columns: 1; column-gap: var(--b-7); }
@media (min-width: 640px) { .dizin { columns: 2; } }
@media (min-width: 1024px) { .dizin { columns: 3; } }
.dizin__grup { break-inside: avoid; margin-bottom: var(--b-7); }
.dizin__grup[hidden], .dizin li[hidden] { display: none; }
.dizin h3 { font-size: 1.375rem; margin-bottom: var(--b-3); }
.dizin h3 a { color: var(--metin); text-decoration: none; }
.dizin h3 a:hover { color: var(--vurgu); }
.dizin li a { display: block; padding: 8px 0; color: var(--metin-2); text-decoration: none; border-bottom: 1px solid var(--cizgi); transition: color var(--hizli), padding var(--orta) var(--egri); }
.dizin li a:hover { color: var(--vurgu); padding-left: 6px; }

/* ---------- İletişim ---------- */
.iletisim { display: grid; gap: var(--b-6); }
.iletisim__kartlar { display: grid; gap: var(--b-3); grid-template-columns: 1fr; align-content: start; }
@media (min-width: 560px) { .iletisim__kartlar { grid-template-columns: 1fr 1fr; } .iletisim-kart--genis { grid-column: 1 / -1; } }
@media (min-width: 960px) { .iletisim { grid-template-columns: 1fr 1.1fr; } }
.iletisim-kart { display: flex; align-items: center; gap: var(--b-4); padding: var(--b-4) var(--b-5); min-height: 96px; }
.iletisim-kart strong { display: block; font-size: 1.125rem; overflow-wrap: anywhere; }
.iletisim-kart__etiket { display: block; font-size: var(--fs-kucuk); color: var(--metin-2); }
.iletisim-kart__ikon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--gece-900); color: var(--bal-300); }
.iletisim-kart--wa .iletisim-kart__ikon { background: var(--wa-600); color: #fff; }
.adres-kart { grid-column: 1 / -1; padding: var(--b-6); }

/* ---------- Alt bilgi ---------- */
@property --dolum { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.alt { position: relative; isolation: isolate; overflow: hidden; background: var(--gece-950); color: var(--acik-2); font-size: 0.9375rem; }
.alt::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; background: radial-gradient(60% 100% at 85% 0%, rgb(223 151 31 / 0.16), transparent 70%), radial-gradient(40% 80% at 0% 0%, rgb(185 117 18 / 0.10), transparent 70%); pointer-events: none; }
.alt__desen { position: absolute; inset: 0; z-index: -1; opacity: 0.05; background: var(--desen-petek) 0 0 / 64px auto; -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); pointer-events: none; }
.alt a { color: var(--acik); text-decoration: none; }
.alt a:hover { color: var(--bal-300); }

.alt__ust { display: grid; gap: var(--b-7); align-items: end; padding-block: var(--b-9) var(--b-8); border-bottom: 1px solid var(--acik-cizgi); }
.alt__cagri { position: relative; }
.alt__slogan { position: relative; z-index: 1; margin: 0; font-family: var(--f-baslik); font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem); font-weight: 460; line-height: 0.98; letter-spacing: -0.04em; color: var(--acik); max-width: 11em; text-wrap: balance; }
.alt__slogan em { font-weight: 380; background: var(--altin); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.ucus--alt { inset: auto -2% -48% auto; width: 300px; height: 140px; }
.ucus--alt .ari__kanat { fill: rgb(255 255 255 / 0.72); stroke: rgb(255 255 255 / 0.95); }
@media (max-width: 767px) { .ucus--alt { width: 220px; height: 103px; inset: auto -6% -40% auto; } }
.alt__aksiyon { display: grid; gap: var(--b-5); justify-items: start; }
.alt__buyuk-link { display: grid; gap: 2px; }
.alt__buyuk-etiket { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-300); }
.alt__buyuk-no { font-family: var(--f-baslik); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 420; letter-spacing: -0.02em; color: var(--acik); font-variant-numeric: tabular-nums; background: linear-gradient(var(--bal-400), var(--bal-400)) 0 100% / 0 2px no-repeat; transition: background-size 500ms var(--egri); padding-bottom: 4px; }
.alt__buyuk-link:hover .alt__buyuk-no { background-size: 100% 2px; color: var(--acik); }
@media (min-width: 960px) { .alt__ust { grid-template-columns: 1.4fr 1fr; } .alt__aksiyon { justify-items: end; text-align: right; } }

.alt__izgara { display: grid; gap: var(--b-7) var(--b-6); grid-template-columns: 1fr 1fr; padding-block: var(--b-8); }
.alt__marka { grid-column: 1 / -1; }
@media (min-width: 1100px) { .alt__izgara { grid-template-columns: 1.5fr 1fr 0.9fr 1fr; } .alt__marka { grid-column: auto; } }
.alt__marka > .logo { --logo-h: 40px; margin-bottom: var(--b-4); }
.alt__marka > p { max-width: 28em; }
.alt__baslik { color: var(--acik); font-weight: 700; margin: 0 0 var(--b-3); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }
.alt__baslik--ara { margin-top: var(--b-6); }
.alt__menu li a { position: relative; display: inline-flex; align-items: center; min-height: 34px; color: var(--acik-2); transition: color var(--hizli), transform var(--orta) var(--egri); }
.alt__menu li a::before { content: ""; width: 0; height: 1px; margin-right: 0; background: var(--bal-400); transition: width var(--orta) var(--egri), margin var(--orta) var(--egri); }
.alt__menu li a:hover { color: var(--bal-300); }
.alt__menu li a:hover::before { width: 14px; margin-right: 8px; }
.alt .nap { margin-top: var(--b-4); }
.alt .nap .ikon { color: var(--bal-400); }

.mini-harita { position: relative; display: block; max-width: 360px; margin-top: var(--b-5); border-radius: var(--r-m); overflow: hidden; box-shadow: 0 0 0 1px var(--acik-cizgi); transition: box-shadow var(--orta), transform var(--orta) var(--egri); }
.mini-harita:hover { box-shadow: 0 0 0 1px var(--bal-500), 0 20px 40px -20px rgb(0 0 0 / 0.8); transform: translateY(-2px); }
.mini-harita > svg { width: 100%; height: auto; }
.mini-harita__metin .ikon { width: 16px; height: 16px; }
.mini-harita__zemin { fill: #1a140d; }
.mini-harita__sokak path { fill: none; stroke: rgb(246 238 221 / 0.14); stroke-width: 7; stroke-linecap: round; }
.mini-harita__ince path { fill: none; stroke: rgb(246 238 221 / 0.06); stroke-width: 2; }
.mini-harita__pin { fill: var(--bal-400); }
.mini-harita__pin-ic { fill: var(--gece-950); }
.mini-harita__dalga { fill: none; stroke: var(--bal-400); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: dalga 2.6s var(--egri) infinite; opacity: 0; }
.mini-harita__dalga--2 { animation-delay: 1.3s; }
@keyframes dalga { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
.mini-harita__metin { position: absolute; left: 14px; bottom: 12px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: var(--b-3); font-size: 0.8125rem; color: var(--acik-2); }
.mini-harita__metin strong { color: var(--acik); font-weight: 600; }
.mini-harita__metin > span { display: inline-flex; align-items: center; gap: 6px; color: var(--bal-300); font-weight: 600; }

/* Köklülük şeridi: yıllar sayfa sonuna yaklaştıkça baldan dolar */
.miras { border-top: 1px solid var(--acik-cizgi); }
.miras__ic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-6) var(--b-5); padding-block: var(--b-8); counter-reset: miras; }
.miras li { position: relative; display: grid; gap: var(--b-2); padding-top: var(--b-5); }
.miras li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--bal-500), transparent); }
.miras li::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; background: var(--bal-400); clip-path: var(--petek); }
.miras__yil { font-family: var(--f-baslik); font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: lining-nums; color: transparent; background: linear-gradient(0deg, #b86a09 0%, var(--bal-400) calc(var(--dolum) - 10%), #fbe0a0 var(--dolum), rgb(239 178 74 / 0.14) var(--dolum)); -webkit-background-clip: text; background-clip: text; padding-bottom: 0.06em; }
.miras__yil--bugun { font-style: italic; font-weight: 400; }
.miras__metin { max-width: 16em; font-size: 0.9375rem; color: var(--acik-2); line-height: 1.45; }
@media (min-width: 960px) { .miras__ic { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .miras__yil { animation: dolum linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .miras li:nth-child(2) .miras__yil { animation-range: entry 10% cover 50%; }
    .miras li:nth-child(3) .miras__yil { animation-range: entry 20% cover 55%; }
    .miras li:nth-child(4) .miras__yil { animation-range: entry 30% cover 60%; }
    @keyframes dolum { from { --dolum: 0%; } to { --dolum: 100%; } }
  }
}

.alt__taban { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-3) var(--b-5); padding-block: var(--b-5) calc(var(--b-5) + 76px + env(safe-area-inset-bottom)); border-top: 1px solid var(--acik-cizgi); font-size: var(--fs-kucuk); }
.alt__taban p { margin: 0; }
.alt__imza { color: rgb(246 238 221 / 0.45); }
@media (min-width: 1024px) { .alt__taban { padding-bottom: var(--b-5); } }

/* Kodem Yazılım imzası: kutusuz, en altta ortalı tek satır; yalnızca "Kodem Yazılım" Kodem yeşili (#3cd4a0) */
.alt__kodem { flex: 0 0 100%; display: flex; justify-content: center; margin-top: var(--b-2); padding-top: var(--b-5); border-top: 1px solid var(--acik-cizgi); }
.kodem { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.8125rem; letter-spacing: 0.01em; color: rgb(246 238 221 / 0.55) !important; text-decoration: none; transition: color 300ms ease; }
.kodem i { font-family: var(--f-baslik); font-style: italic; color: var(--bal-300); }
.kodem__isaret { display: grid; flex: none; width: 26px; height: 24px; padding: 1px; background: linear-gradient(160deg, var(--bal-300), var(--bal-600)); clip-path: var(--petek); transition: transform 500ms var(--egri); }
.kodem__hucre { display: grid; place-items: center; background: var(--gece-950); clip-path: var(--petek); }
.kodem__hucre img { width: 12px; height: auto; }
.kodem__ayrac { width: 4px; height: 4px; border-radius: 50%; background: var(--bal-400); opacity: 0.6; }
.kodem strong { color: var(--kodem-vurgu); font-weight: 700; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 400ms var(--egri); }
.kodem:hover { color: var(--acik) !important; }
.kodem:hover strong { background-size: 100% 1px; }
.kodem:hover .kodem__isaret { transform: rotate(30deg); }
.kodem:focus-visible { outline: 2px solid var(--bal-400); outline-offset: 4px; border-radius: 6px; }
/* Dar ekran: sağdaki sabit düğmelere değmesin diye ortalı dar sütun */
@media (max-width: 599px) { .kodem { flex-direction: column; gap: 6px; text-align: center; } .kodem__ayrac { display: none; } }
@media (prefers-reduced-motion: reduce) { .kodem__isaret, .kodem strong { transition: none; } }

.kayip-ari { position: relative; width: min(400px, 90%); aspect-ratio: 400 / 220; margin-bottom: var(--b-4); }
.kayip-ari .ucus__iz { stroke: var(--bal-500); }
.kayip-ari .ari__kanat { fill: rgb(255 255 255 / 0.9); stroke: rgb(21 16 10 / 0.25); }

/* ---------- Sağ alt: hızlı iletişim + yukarı çık ---------- */
.hizli { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hizli__btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 12px 30px -8px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.06) inset; transition: transform var(--orta) var(--egri-yay), box-shadow var(--orta), opacity var(--orta), visibility var(--orta); }
.hizli__btn .ikon { width: 24px; height: 24px; }
.hizli__btn:hover { transform: translateY(-3px) scale(1.04); }
.hizli__btn--tel { background: var(--bal-400); color: var(--gece-900); }
.hizli__btn--wa { background: #1faa59; color: #fff; }
.hizli__btn--wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgb(31 170 89 / 0.55); animation: wa-nabiz 2.6s var(--egri) infinite; pointer-events: none; }
@keyframes wa-nabiz { 0% { box-shadow: 0 0 0 0 rgb(31 170 89 / 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgb(31 170 89 / 0); } }
.hizli__btn--yukari { width: 48px; height: 48px; background: var(--gece-900); color: var(--acik); opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.8); }
.hizli__btn--yukari.gorunur { opacity: 1; visibility: visible; transform: none; }
.hizli__btn--yukari.gorunur:hover { transform: translateY(-3px); }
.hizli__btn--yukari .ikon { width: 20px; height: 20px; }
.hizli__halka { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); max-width: none; transform: rotate(-90deg); }
.hizli__halka circle { fill: none; stroke: rgb(246 238 221 / 0.14); stroke-width: 2.5; }
.hizli__halka .hizli__dolu { stroke: var(--bal-400); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--ilerleme, 100); }
@supports (animation-timeline: scroll()) { .hizli__dolu { animation: halka linear both; animation-timeline: scroll(root); } @keyframes halka { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } }
.hizli__ipucu { position: absolute; right: calc(100% + 12px); top: 50%; translate: 8px -50%; padding: 8px 14px; border-radius: var(--r-tam); background: var(--gece-900); color: var(--acik); font-size: 0.875rem; font-weight: 600; white-space: nowrap; box-shadow: var(--golge-2); opacity: 0; pointer-events: none; transition: opacity var(--orta), translate var(--orta) var(--egri); }
@media (hover: hover) { .hizli__btn:hover .hizli__ipucu, .hizli__btn:focus-visible .hizli__ipucu { opacity: 1; translate: 0 -50%; } }
@media (max-width: 767px) { .hizli { gap: 10px; } .hizli__btn { width: 52px; height: 52px; } .hizli__btn--yukari { width: 44px; height: 44px; } }

/* ---------- Kategori hero ---------- */
.kirinti--koyu { background: var(--gece-950); padding-bottom: 0; }
.kirinti--koyu ol, .kirinti--koyu a { color: var(--acik-2); }
.kirinti--koyu [aria-current] { color: var(--acik); }
.kirinti--koyu li + li::before { color: rgb(246 238 221 / 0.25); }
.kat-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--gece-950); color: var(--acik); padding-block: var(--b-6) var(--b-8); }
.kat-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 85% 30%, rgb(223 151 31 / 0.18), transparent 70%); }
.kat-hero__desen { position: absolute; inset: 0; z-index: -1; opacity: 0.1; background: var(--desen-petek) 0 0 / 56px auto; -webkit-mask-image: radial-gradient(50% 70% at 80% 40%, #000, transparent 75%); mask-image: radial-gradient(50% 70% at 80% 40%, #000, transparent 75%); }
.kat-hero__ic { display: grid; gap: var(--b-7); align-items: center; }
.kat-hero h1 { color: var(--acik); font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); letter-spacing: -0.04em; line-height: 0.98; margin-bottom: var(--b-5); }
.kat-hero__giris { color: var(--acik-2); font-size: var(--fs-giris); max-width: 38em; margin-bottom: var(--b-6); }
.kat-hero__bilgi { display: flex; flex-wrap: wrap; gap: var(--b-6); margin: var(--b-7) 0 0; padding-top: var(--b-5); border-top: 1px solid var(--acik-cizgi); }
.kat-hero__bilgi div { display: flex; flex-direction: column-reverse; }
.kat-hero__bilgi dt { font-size: var(--fs-kucuk); color: var(--acik-2); }
.kat-hero__bilgi dd { margin: 0; font-family: var(--f-baslik); font-size: 2rem; line-height: 1.1; color: var(--acik); }
.kat-hero__gorsel { position: relative; width: min(100%, 420px); margin-inline: auto; }
.kat-hero__kemer { position: relative; aspect-ratio: 0.85; border-radius: 999px 999px 24px 24px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 10px rgb(246 238 221 / 0.04); }
.kat-hero__kemer picture, .kat-hero__kemer > .ilus { position: absolute; inset: 0; width: 100%; height: 100%; }
.kat-hero__kemer img { width: 100%; height: 100%; object-fit: contain; padding: 14% 10% 8%; }
.kat-hero__kemer .kat-hero__zemin img { object-fit: cover; padding: 0; filter: blur(22px) saturate(1.15) brightness(1.05); transform: scale(1.25); opacity: 0.85; }
.kat-hero__kemer picture:not(.kat-hero__zemin) img { filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.28)); }
.kat-hero__gorsel .ucus { inset: -10%; width: 120%; height: 120%; }
@media (min-width: 960px) { .kat-hero { padding-block: var(--b-7) var(--b-9); } .kat-hero__ic { grid-template-columns: 1.25fr 0.75fr; gap: var(--b-9); } }

/* ---------- Kategori içerik + rehber kartı ---------- */
.kat-icerik { display: grid; gap: var(--b-7); }
.kat-icerik__bas h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 960px) { .kat-icerik { grid-template-columns: 0.8fr 1.2fr; gap: var(--b-9); align-items: start; } .kat-icerik__bas { position: sticky; top: calc(var(--ust-h) + 32px); } }
.kat-icerik__blok { position: relative; padding: 0 0 var(--b-6) 3.5rem; margin-bottom: var(--b-6); border-bottom: 1px solid var(--cizgi); }
.kat-icerik__no { position: absolute; left: 0; top: 0.2em; font-family: var(--f-baslik); font-style: italic; font-size: 1.25rem; color: var(--bal-700); }
.kat-icerik__blok h3 { font-size: 1.5rem; margin-bottom: var(--b-3); }
.kat-icerik__blok p { color: var(--metin-2); margin: 0; font-size: 1.0625rem; line-height: 1.75; }
.kat-icerik__sss { font-size: 1.5rem; margin: var(--b-7) 0 var(--b-3); }
.rehber-kart { position: relative; display: grid; gap: 4px; margin-top: var(--b-6); padding: var(--b-5) 72px var(--b-5) var(--b-5); border-radius: var(--r-l); background: var(--gece-900); color: var(--acik-2); text-decoration: none; overflow: hidden; transition: transform var(--orta) var(--egri), box-shadow var(--orta); }
.rehber-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); color: var(--acik-2); }
.rehber-kart strong { font-family: var(--f-baslik); font-size: 1.375rem; font-weight: 500; color: var(--acik); line-height: 1.2; }
.rehber-kart__etiket { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-300); }
.rehber-kart__ok { position: absolute; right: var(--b-5); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bal-400); color: var(--gece-900); transition: transform var(--orta) var(--egri); }
.rehber-kart:hover .rehber-kart__ok { transform: rotate(-45deg); }
.rehber-link { display: flex; align-items: center; gap: var(--b-3); margin-top: var(--b-4); padding: var(--b-4); border: 1px dashed var(--krem-300); border-radius: var(--r-m); color: var(--metin); text-decoration: none; transition: border-color var(--orta), background-color var(--orta); }
.rehber-link:hover { border-color: var(--bal-500); background: var(--yuzey); color: var(--metin); }
.rehber-link span:nth-child(2) { flex: 1; font-weight: 600; }
.rehber-link__etiket { flex: none; padding: 3px 9px; border-radius: 6px; background: var(--bal-200); color: var(--bal-700); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rehber-link .ikon { color: var(--bal-700); }
.urun__uzun { margin: calc(var(--b-6) * -0.5) 0 var(--b-6); }
.urun__uzun p { color: var(--metin-2); line-height: 1.75; }
.cip__sayi { display: inline-grid; place-items: center; min-width: 24px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--krem-200); font-size: 0.75rem; font-weight: 700; color: var(--metin-2); }

/* ---------- Rehber (makale) ---------- */
.rehber__bas { padding-block: var(--b-7) var(--b-6); text-align: center; }
.rehber__bas .ust-baslik { justify-content: center; }
.rehber__bas h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); letter-spacing: -0.04em; line-height: 1; }
.rehber__ozet { font-size: var(--fs-giris); color: var(--metin-2); max-width: 36em; margin: var(--b-5) auto; }
.rehber__meta { display: flex; justify-content: center; gap: var(--b-2); font-size: var(--fs-kucuk); color: var(--metin-2); letter-spacing: 0.04em; }
.rehber__ic { display: grid; gap: var(--b-6); padding-bottom: var(--b-9); }
.rehber__ic > * { min-width: 0; }
@media (min-width: 1024px) { .rehber__ic { grid-template-columns: 240px minmax(0, 720px); justify-content: center; gap: var(--b-9); } }
.rehber__icindekiler { align-self: start; padding: var(--b-5); border: 1px solid var(--cizgi); border-radius: var(--r-m); background: var(--yuzey); }
.rehber__icindekiler > p { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-700); margin-bottom: var(--b-3); }
.rehber__icindekiler a { display: flex; gap: var(--b-3); padding: 7px 0; color: var(--metin-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; transition: color var(--hizli); }
.rehber__icindekiler a span { font-family: var(--f-baslik); font-style: italic; color: #8e7136; /* WCAG AA: 4.5:1 */ transition: color var(--hizli); }
.rehber__icindekiler a:hover, .rehber__icindekiler a.aktif { color: var(--metin); }
.rehber__icindekiler a.aktif span { color: var(--bal-600); }
@media (min-width: 1024px) { .rehber__icindekiler { position: sticky; top: calc(var(--ust-h) + 32px); } }
.rehber__metin { font-size: 1.125rem; line-height: 1.8; }
.rehber__metin > p, .rehber__metin li { color: #3f352a; }
.rehber__metin h2 { margin-top: var(--b-8); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); scroll-margin-top: calc(var(--ust-h) + 24px); }
.rehber__metin h3 { margin-top: var(--b-6); font-size: 1.375rem; }
.rehber__metin a:not(.btn) { color: var(--bal-700); text-decoration: underline; text-decoration-color: var(--bal-300); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.rehber__metin a:not(.btn):hover { text-decoration-color: var(--bal-600); }
.rehber__giris { font-size: 1.25rem; }
.rehber__giris::first-letter { float: left; margin: 0.08em 0.12em 0 0; font-family: var(--f-baslik); font-size: 4.4em; line-height: 0.78; font-weight: 500; color: var(--bal-600); }
.rehber__alinti { margin: var(--b-8) 0; padding: var(--b-6) 0; border-block: 1px solid var(--krem-300); text-align: center; font-family: var(--f-baslik); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--gece-900); }
.rehber__alinti p { margin: 0; }
.rehber__liste { display: grid; gap: var(--b-3); margin: var(--b-4) 0; }
.rehber__liste li { position: relative; padding-left: 1.75em; }
.rehber__liste li::before { content: ""; position: absolute; left: 0.2em; top: 0.7em; width: 10px; height: 10px; background: var(--bal-400); clip-path: var(--petek); }
.rehber__cta { display: grid; gap: var(--b-4); margin: var(--b-8) 0; padding: var(--b-6); border-radius: var(--r-l); background: var(--gece-900); color: var(--acik-2); }
.rehber__cta p { margin: 0; color: var(--acik-2); }
.rehber__cta-baslik { font-family: var(--f-baslik); font-size: 1.5rem; color: var(--acik) !important; margin-bottom: var(--b-2) !important; }
@media (min-width: 768px) { .rehber__cta { grid-template-columns: 1fr auto; align-items: center; } }

/* Kontrol listesi */
.kontrol__grup { margin-top: var(--b-7); }
.kontrol__grup h2, .rehber__metin h2 .kontrol__no { display: flex; align-items: baseline; gap: var(--b-3); }
.kontrol__no { font-family: var(--f-baslik); font-style: italic; font-weight: 400; font-size: 0.7em; color: var(--vurgu); }
.kontrol ul { display: grid; gap: var(--b-2); margin-top: var(--b-4); }
.kontrol li { position: relative; display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) var(--b-4); border: 1px solid var(--cizgi); border-radius: var(--r-m); background: var(--yuzey); transition: border-color var(--orta), background-color var(--orta); }
.kontrol li:has(input:checked) { border-color: var(--bal-400); background: #fdf3dc; }
.kontrol input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kontrol label { flex: 1; display: flex; align-items: center; gap: var(--b-4); cursor: pointer; min-height: 44px; }
.kontrol label strong { display: block; font-size: 1.0625rem; color: var(--metin); }
.kontrol label small { display: block; font-size: 0.9375rem; color: var(--metin-2); line-height: 1.45; }
.kontrol__kutu { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--krem-300); background: #fff; color: transparent; transition: background-color var(--orta), border-color var(--orta), color var(--orta), transform var(--orta) var(--egri-yay); }
.kontrol__kutu .ikon { width: 16px; height: 16px; }
.kontrol input:checked + label .kontrol__kutu { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); transform: scale(1.08); }
.kontrol input:checked + label strong { text-decoration: line-through; text-decoration-color: var(--bal-500); text-decoration-thickness: 2px; }
.kontrol input:focus-visible + label .kontrol__kutu { outline: 2px solid var(--bal-500); outline-offset: 3px; }
.kontrol__link { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--metin-2); transition: background-color var(--orta), color var(--orta); }
.kontrol__link:hover { background: var(--gece-900); color: var(--bal-300); }
.kontrol__durum { margin-top: var(--b-4); font-weight: 600; color: var(--bal-700); min-height: 1.6em; }

/* ---------- Kavanoz illüstrasyonu ---------- */
.ilus { display: block; width: 100%; height: 100%; }
.ilus__etiket { font: 600 24px/1 var(--f-baslik); fill: #3a2b17; letter-spacing: -0.01em; }
.ilus__alt { font: 700 8.5px/1 var(--f-metin); fill: #8a5300; letter-spacing: 0.22em; }
.ilus__damla { transform-box: fill-box; transform-origin: 50% 0; animation: damla 3.4s ease-in infinite; }
@keyframes damla { 0%, 20% { transform: scaleY(0.4); opacity: 1; } 70% { transform: scaleY(1.1) translateY(10px); opacity: 1; } 90%, 100% { transform: scaleY(1) translateY(40px); opacity: 0; } }
.urun-kart__gorsel > .ilus, .galeri__ana > .ilus, .secici__gorsel > .ilus { position: absolute; inset: 0; }
.sofra__kart > .ilus { position: absolute; inset: 0; z-index: -2; transition: transform 1200ms var(--egri); }
.sofra__kart:hover > .ilus { transform: scale(1.05); }

/* ---------- Bildirim ---------- */
.bildirim { position: fixed; left: 50%; bottom: 96px; z-index: 150; translate: -50% 20px; padding: 12px 20px; border-radius: var(--r-tam); background: var(--gece-900); color: var(--acik); font-weight: 600; box-shadow: var(--golge-2); opacity: 0; pointer-events: none; transition: opacity var(--orta), translate var(--orta) var(--egri); }
.bildirim.goster { opacity: 1; translate: -50% 0; }

/* ==========================================================================
   Ürün kataloğu ve filtreleme
   ========================================================================== */
.sayfa-bas--urunler { padding-bottom: var(--b-6); }
.katalog__ic { display: grid; gap: var(--b-6); align-items: start; }
@media (min-width: 1024px) { .katalog__ic { grid-template-columns: 280px minmax(0, 1fr); gap: var(--b-7); } }
.izgara--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-5); } }
.katalog__izgara > li[hidden] { display: none; }
.katalog-giris { animation: katalog-gir 420ms var(--egri) both; }
@keyframes katalog-gir { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Filtre paneli (masaüstü: yan sütun) */
.filtre { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); }
.filtre__bas { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-4) var(--b-5); border-bottom: 1px solid var(--cizgi); }
.filtre__baslik { margin: 0 auto 0 0; font-family: var(--f-baslik); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.filtre__temizle { border: 0; background: none; color: var(--bal-700); font: 600 0.875rem var(--f-metin); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.filtre__kapat { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: 50%; background: var(--yuzey); color: var(--metin); cursor: pointer; }
.filtre__govde { padding: var(--b-2) var(--b-5) var(--b-4); }
.filtre__grup { border-bottom: 1px solid var(--krem-200); }
.filtre__grup:last-child { border-bottom: 0; }
.filtre__grup summary { display: flex; align-items: center; gap: var(--b-2); min-height: 52px; cursor: pointer; list-style: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin); }
.filtre__grup summary::-webkit-details-marker { display: none; }
.filtre__grup summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--orta) var(--egri); }
.filtre__grup[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.filtre__secili { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gece-900); color: var(--bal-300); font-size: 0.6875rem; letter-spacing: 0; }
.filtre__secili:empty { display: none; }
.filtre__liste { display: grid; gap: 2px; padding-bottom: var(--b-4); }
.filtre__liste--cip { display: flex; flex-wrap: wrap; gap: var(--b-2); }

/* Özel onay kutusu */
.secim { position: relative; display: flex; align-items: center; gap: var(--b-3); min-height: 40px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--r-s); cursor: pointer; transition: background-color var(--hizli); }
.secim:hover { background: var(--krem-100); }
.secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secim__kutu { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--krem-300); background: #fff; color: transparent; transition: background-color var(--orta), border-color var(--orta), color var(--orta), transform var(--orta) var(--egri-yay); }
.secim__kutu .ikon { width: 13px; height: 13px; }
.secim__ad { flex: 1; font-size: 0.9375rem; line-height: 1.3; }
.secim__sayi { font-size: 0.8125rem; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.secim input:checked ~ .secim__kutu { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); transform: scale(1.06); }
.secim input:checked ~ .secim__ad { font-weight: 600; }
.secim input:focus-visible ~ .secim__kutu { outline: 2px solid var(--bal-500); outline-offset: 2px; }
.secim.bos { opacity: 0.4; }
/* Kullanım alanı: cip görünümü */
.filtre__liste--cip .secim { margin: 0; padding: 6px 12px 6px 8px; min-height: 38px; border: 1px solid var(--cizgi); border-radius: var(--r-tam); gap: 6px; }
.filtre__liste--cip .secim__kutu { width: 16px; height: 16px; border-radius: 50%; }
.filtre__liste--cip .secim__kutu .ikon { width: 10px; height: 10px; }
.filtre__liste--cip .secim__ad { font-size: 0.875rem; }
.filtre__liste--cip .secim__sayi { font-size: 0.75rem; }
.filtre__liste--cip .secim:has(input:checked) { background: var(--gece-900); border-color: var(--gece-900); color: var(--acik); }
.filtre__liste--cip .secim:has(input:checked) .secim__sayi { color: var(--bal-300); }
.filtre__liste--cip .secim:has(input:checked) .secim__kutu { background: var(--bal-400); border-color: var(--bal-400); color: var(--gece-900); }
.filtre__alt { display: none; }
@media (min-width: 1024px) { .filtre { position: sticky; top: calc(var(--ust-h) + 20px); max-height: calc(100vh - var(--ust-h) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }

/* Araç çubuğu */
.arac { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3); margin-bottom: var(--b-3); }
.arac__arama { flex: 1 1 280px; max-width: none; }
.arac__filtre-btn { display: none; align-items: center; gap: 8px; min-height: 54px; padding: 0 20px; border: 1px solid var(--krem-300); border-radius: var(--r-tam); background: var(--gece-900); color: var(--acik); font: 600 1rem var(--f-metin); cursor: pointer; }
.arac__rozet { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bal-400); color: var(--gece-900); font-size: 0.75rem; }
.siralama { position: relative; display: inline-flex; align-items: center; }
.siralama select { appearance: none; -webkit-appearance: none; min-height: 54px; padding: 0 46px 0 20px; border: 1px solid var(--krem-300); border-radius: var(--r-tam); background: var(--yuzey); color: var(--metin); font: 500 0.9375rem var(--f-metin); cursor: pointer; box-shadow: var(--golge-1); }
.siralama select:focus-visible { outline: none; border-color: var(--bal-500); box-shadow: 0 0 0 4px var(--bal-200); }
.siralama .ikon { position: absolute; right: 16px; width: 18px; height: 18px; pointer-events: none; color: var(--metin-2); }
.aktif-filtre { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.aktif-filtre:empty { display: none; }
.aktif-filtre__cip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 14px; border: 0; border-radius: var(--r-tam); background: var(--bal-200); color: var(--bal-700); font: 600 0.8125rem var(--f-metin); cursor: pointer; transition: background-color var(--hizli); animation: yukari 300ms var(--egri); }
.aktif-filtre__cip:hover { background: var(--bal-300); color: var(--gece-900); }
.aktif-filtre__cip .ikon { width: 14px; height: 14px; }
.katalog__durum { margin: var(--b-3) 0 var(--b-5); color: var(--metin-2); font-size: 0.9375rem; }
.katalog__durum strong { font-family: var(--f-baslik); font-size: 1.25rem; font-weight: 500; color: var(--metin); }
.katalog__bos { display: grid; justify-items: center; gap: var(--b-2); padding: var(--b-8) var(--b-4); text-align: center; border: 1px dashed var(--krem-300); border-radius: var(--r-l); }
.katalog__bos[hidden] { display: none; }
.katalog__bos-baslik { font-family: var(--f-baslik); font-size: 1.75rem; margin: 0; }
.katalog__bos p { max-width: 32em; color: var(--metin-2); }
.kayip-ari--kucuk { width: 240px; margin-bottom: 0; }

/* Mobil: alttan açılan panel */
@media (max-width: 1023px) {
  .js .arac__filtre-btn { display: inline-flex; }
  .js .arac { position: sticky; top: var(--ust-h); z-index: 20; margin-inline: calc(var(--b-4) * -1); padding: var(--b-3) var(--b-4); background: rgb(250 245 234 / 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); }
  .js .arac__arama { order: 1; flex-basis: 100%; }
  .js .arac__filtre-btn { order: 2; flex: 1; justify-content: center; min-height: 48px; }
  .js .siralama { order: 3; flex: 1; }
  .js .siralama select { width: 100%; min-height: 48px; }
  .js .filtre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; flex-direction: column; max-height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; border: 0; box-shadow: 0 -30px 80px -20px rgb(0 0 0 / 0.5); transform: translateY(105%); visibility: hidden; transition: transform 450ms var(--egri), visibility 0s linear 450ms; }
  .js .filtre.acik { transform: none; visibility: visible; transition-delay: 0s; }
  .js .filtre::before { content: ""; align-self: center; width: 44px; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--krem-300); flex: none; }
  .js .filtre__kapat { display: grid; }
  .js .filtre__govde { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  .js .filtre__alt { display: block; padding: var(--b-3) var(--b-5) calc(var(--b-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: var(--yuzey); }
  .filtre-ortu { position: fixed; inset: 0; z-index: 110; background: rgb(12 9 6 / 0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 350ms var(--egri); }
  .filtre-ortu.acik { opacity: 1; }
  body.filtre-acik { overflow: hidden; }
  body.filtre-acik .hizli { opacity: 0; pointer-events: none; }
}

/* ==========================================================================
   Blog — Arıcılık Günlüğü
   ========================================================================== */
.gunluk-bas { position: relative; overflow: hidden; padding-block: var(--b-6) var(--b-8); text-align: center; }
.gunluk-bas__ic { position: relative; }
.gunluk-bas__ust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--b-2); padding-block: var(--b-3); border-block: 1px solid var(--gece-900); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin-2); }
.gunluk-bas__baslik { margin: var(--b-6) 0 var(--b-4); font-size: clamp(3.25rem, 1rem + 10vw, 9.5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; }
.gunluk-bas__baslik em { font-weight: 380; }
/* Dar ekranda sabit 2 satır (font değişiminde kaymasın) */
@media (max-width: 599px) { .gunluk-bas__baslik em { display: block; } }
.gunluk-bas__giris { max-width: 38em; margin: 0 auto; font-size: var(--fs-giris); color: var(--metin-2); }
.ucus--gunluk { inset: 40px -4% auto auto; width: min(520px, 70%); height: auto; aspect-ratio: 600 / 160; z-index: 0; }
.gunluk-bas__baslik, .gunluk-bas__giris { position: relative; z-index: 1; }
.ucus--gunluk .ucus__iz { stroke: var(--bal-500); opacity: 0.6; }
.ucus--gunluk .ari__kanat { fill: rgb(255 255 255 / 0.9); stroke: rgb(21 16 10 / 0.25); }

.blog-etiket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-2); margin: 0 0 var(--b-3); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bal-700); }
.blog-etiket span { padding: 3px 9px; border-radius: 6px; background: var(--gece-900); color: var(--bal-300); letter-spacing: 0.1em; }
.blog-etiket a { color: inherit; text-decoration: none; }
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--b-3); margin: 0; font-size: 0.8125rem; color: var(--metin-2); }
.blog-meta span + span::before { content: "·"; margin-right: var(--b-3); }

/* Tasarlanmış kapaklar */
.kapak { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-l); color: var(--gece-900); background: var(--bal-400); }
.kapak__desen { position: absolute; inset: 0; z-index: -1; opacity: 0.35; background: var(--desen-petek) 0 0 / 38px auto; -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent 75%); }
.kapak__no { position: absolute; left: var(--b-4); top: var(--b-4); font-family: var(--f-baslik); font-style: italic; font-size: 0.9375rem; }
.kapak__konu { position: absolute; right: var(--b-4); bottom: var(--b-4); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.kapak .cizim { width: 48%; height: auto; transition: transform 800ms var(--egri); }
.kapak--bal { background: radial-gradient(80% 80% at 70% 20%, #fbe0a0, var(--bal-400) 60%, #d98e14); color: var(--gece-900); }
.kapak--gece { background: radial-gradient(80% 80% at 70% 20%, #3a2b17, var(--gece-900) 65%); color: var(--bal-300); }
.kapak--gece .kapak__desen { opacity: 0.25; }
.kapak--krem { background: radial-gradient(80% 80% at 70% 20%, #fff, var(--krem-200) 70%); color: var(--bal-700); box-shadow: inset 0 0 0 1px var(--krem-300); }
.kapak--orman { background: radial-gradient(80% 80% at 70% 20%, #3b6b55, #1f3d31 70%); color: #f6e7c4; }
.kapak--orman .kapak__desen { opacity: 0.2; }
.kapak--vitrin { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.kapak--vitrin .cizim { width: 42%; }
.kapak--vitrin .kapak__no { font-size: 1.25rem; left: var(--b-6); top: var(--b-5); }
.kapak--yazi { aspect-ratio: 1; border-radius: var(--r-xl); }
.kapak--yazi .cizim { width: 50%; animation: suz 9s ease-in-out infinite; }
@media (max-width: 959px) { .kapak--yazi { aspect-ratio: 16 / 9; } .kapak--yazi .cizim { width: 30%; } }
@media (max-width: 640px) { .kirinti li:last-child { min-width: 0; flex: 1 1 0; } .kirinti li:last-child span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kirinti ol { flex-wrap: nowrap; } .kirinti li { flex: none; } }

.blog-vitrin { display: grid; gap: var(--b-6); align-items: center; color: var(--metin); text-decoration: none; }
.blog-vitrin h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); letter-spacing: -0.035em; margin-bottom: var(--b-4); transition: color var(--orta); }
.blog-vitrin p:not(.blog-etiket):not(.blog-meta) { color: var(--metin-2); font-size: var(--fs-giris); }
.blog-vitrin__oku { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--b-5); font-weight: 700; color: var(--bal-700); }
.blog-vitrin__oku .ikon { transition: transform var(--orta) var(--egri); }
.blog-vitrin:hover { color: var(--metin); }
.blog-vitrin:hover .cizim { transform: scale(1.06) rotate(-3deg); }
.blog-vitrin:hover .blog-vitrin__oku .ikon { transform: translateX(6px); }
@media (min-width: 960px) { .blog-vitrin { grid-template-columns: 1.15fr 1fr; gap: var(--b-9); } }

.blog-rehberler { display: grid; gap: var(--b-3); margin-top: var(--b-7); }
@media (min-width: 768px) { .blog-rehberler { grid-template-columns: 1fr 1fr; } }
.blog-rehber { position: relative; display: grid; gap: 6px; padding: var(--b-5) 80px var(--b-5) var(--b-5); border-radius: var(--r-l); background: var(--gece-900); color: var(--acik); text-decoration: none; transition: transform var(--orta) var(--egri), box-shadow var(--orta); }
.blog-rehber:hover { transform: translateY(-3px); box-shadow: var(--golge-2); color: var(--acik); }
.blog-rehber strong { font-family: var(--f-baslik); font-size: 1.3125rem; font-weight: 500; line-height: 1.25; }
.blog-rehber__etiket { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-300); }
.blog-rehber__ok { position: absolute; right: var(--b-5); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bal-400); color: var(--gece-900); transition: transform var(--orta) var(--egri); }
.blog-rehber:hover .blog-rehber__ok { transform: rotate(-45deg); }
.blog-rehber--acik { background: var(--bal-200); color: var(--gece-900); }
.blog-rehber--acik:hover { color: var(--gece-900); }
.blog-rehber--acik .blog-rehber__etiket { color: var(--bal-700); }
.blog-rehber--acik .blog-rehber__ok { background: var(--gece-900); color: var(--bal-300); }

.blog-arac { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-4); padding-block: var(--b-6) var(--b-5); margin-bottom: var(--b-5); border-bottom: 1px solid var(--gece-900); }
.blog-arac__baslik { margin: 0 auto 0 0; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.blog-konular { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.blog-konular[hidden], .blog-arac__arama[hidden] { display: none; }
.blog-konu { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--krem-300); border-radius: var(--r-tam); background: var(--yuzey); color: var(--metin); font: 600 0.875rem var(--f-metin); cursor: pointer; transition: background-color var(--orta), color var(--orta), border-color var(--orta); }
.blog-konu span { font-size: 0.75rem; color: var(--metin-2); font-variant-numeric: tabular-nums; }
.blog-konu:hover { border-color: var(--bal-500); }
.blog-konu[aria-pressed="true"] { background: var(--gece-900); color: var(--acik); border-color: var(--gece-900); }
.blog-konu[aria-pressed="true"] span { color: var(--bal-300); }
.blog-arac__arama { flex: 1 1 260px; max-width: 360px; }
@media (max-width: 767px) { .blog-konular { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--b-4) * -1); padding-inline: var(--b-4); scrollbar-width: none; width: calc(100% + var(--b-4) * 2); } .blog-konular::-webkit-scrollbar { display: none; } .blog-konu { flex: none; } .blog-arac__arama { max-width: none; } }

.blog-izgara { display: grid; gap: var(--b-7) var(--b-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-izgara > li[hidden] { display: none; }
.blog-kart { display: grid; gap: var(--b-4); color: var(--metin); text-decoration: none; }
.blog-kart .kapak { transition: transform var(--orta) var(--egri), box-shadow var(--orta); }
.blog-kart:hover .kapak { transform: translateY(-4px); box-shadow: var(--golge-2); }
.blog-kart:hover .cizim { transform: scale(1.08) rotate(-4deg); }
.blog-kart h3 { font-size: 1.375rem; line-height: 1.2; margin-bottom: var(--b-2); background: linear-gradient(var(--bal-400), var(--bal-400)) 0 100% / 0 2px no-repeat; transition: background-size 500ms var(--egri); display: inline; }
.blog-kart:hover h3 { background-size: 100% 2px; }
.blog-kart__metin > p:not(.blog-etiket):not(.blog-meta) { margin: var(--b-3) 0; color: var(--metin-2); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-kart__metin .blog-meta { margin-top: var(--b-3); }
.blog-bos { padding: var(--b-7); text-align: center; color: var(--metin-2); }
.blog-bos[hidden] { display: none; }

/* Yazı sayfası */
.yazi__bas { padding-block: var(--b-6) var(--b-7); }
.yazi__bas-ic { display: grid; gap: var(--b-6); align-items: center; }
.yazi__bas h1 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem); letter-spacing: -0.04em; line-height: 1.02; margin-bottom: var(--b-5); }
.yazi__ozet { font-size: var(--fs-giris); color: var(--metin-2); max-width: 36em; }
.yazi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-3) var(--b-6); margin-top: var(--b-5); padding-top: var(--b-5); border-top: 1px solid var(--cizgi); font-size: 0.875rem; color: var(--metin-2); }
.yazi__yazar { display: inline-flex; align-items: center; gap: var(--b-3); }
.yazi__yazar strong { display: block; color: var(--metin); font-size: 0.9375rem; }
.yazi__avatar, .yazar-kutu__logo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--bal-400); color: var(--gece-900); font: 600 1.25rem/1 var(--f-baslik); }
.yazi__bas .kapak { max-width: 440px; width: 100%; justify-self: center; }
@media (min-width: 960px) { .yazi__bas-ic { grid-template-columns: 1.3fr 0.7fr; gap: var(--b-9); } }
.yazi__yan { display: grid; gap: var(--b-4); align-self: start; }
@media (min-width: 1024px) { .yazi__yan { position: sticky; top: calc(var(--ust-h) + 32px); } .yazi__yan .rehber__icindekiler { position: static; } }
.paylas-grup { display: flex; align-items: center; gap: var(--b-2); }
.paylas-grup p { margin: 0 auto 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--metin-2); }
.paylas-grup a, .paylas-grup button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--krem-300); border-radius: 50%; background: var(--yuzey); color: var(--metin); cursor: pointer; transition: background-color var(--orta), color var(--orta); }
.paylas-grup a:hover, .paylas-grup button:hover { background: var(--gece-900); color: var(--bal-300); }
.paylas-grup .ikon { width: 18px; height: 18px; }
@media (max-width: 1023px) { .yazi__yan .rehber__icindekiler { display: none; } }

.kisaca { position: relative; margin-bottom: var(--b-7); padding: var(--b-5) var(--b-5) var(--b-5) var(--b-6); border-radius: var(--r-m); background: var(--yuzey); border: 1px solid var(--cizgi); }
.kisaca::before { content: ""; position: absolute; left: 0; top: var(--b-5); bottom: var(--b-5); width: 4px; border-radius: 0 4px 4px 0; background: var(--altin); }
.kisaca__baslik { margin: 0 0 var(--b-3) !important; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bal-700) !important; }
.kisaca ul { display: grid; gap: var(--b-2); }
.kisaca li { position: relative; padding-left: 1.6em; font-size: 1.0625rem; line-height: 1.55; color: var(--metin); }
.kisaca li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--bal-400); clip-path: var(--petek); }
.yazi__govde > p:first-child::first-letter { float: left; margin: 0.08em 0.12em 0 0; font-family: var(--f-baslik); font-size: 4.4em; line-height: 0.78; font-weight: 500; color: var(--bal-600); }
.rehber__metin blockquote { margin: var(--b-8) 0; padding: var(--b-6) 0; border-block: 1px solid var(--krem-300); text-align: center; font-family: var(--f-baslik); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--gece-900); }
.rehber__metin blockquote p { margin: 0; color: inherit !important; }
.rehber__metin ul:not(.rehber__liste):not([class]), .rehber__metin ol:not([class]) { display: grid; gap: var(--b-3); margin: var(--b-4) 0 var(--b-5); }
.yazi__govde ul li { position: relative; padding-left: 1.75em; }
.yazi__govde ul li::before { content: ""; position: absolute; left: 0.2em; top: 0.7em; width: 10px; height: 10px; background: var(--bal-400); clip-path: var(--petek); }
.yazi__govde ol { counter-reset: adim; }
.yazi__govde ol li { position: relative; padding-left: 2.6em; counter-increment: adim; }
.yazi__govde ol li::before { content: counter(adim); position: absolute; left: 0; top: 0.1em; display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--gece-900); color: var(--bal-300); font: 600 0.8em/1 var(--f-baslik); }
.rehber__metin table { width: 100%; margin: var(--b-5) 0 var(--b-6); border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.rehber__metin th { padding: 10px 12px; text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bal-700); border-bottom: 2px solid var(--gece-900); }
.rehber__metin td { padding: 12px; border-bottom: 1px solid var(--cizgi); vertical-align: top; color: #3f352a; }
.rehber__metin td:first-child { font-weight: 600; color: var(--metin); }
@media (max-width: 640px) { .rehber__metin table { display: block; overflow-x: auto; white-space: nowrap; } }
.not-kutu { display: flex; gap: var(--b-3); margin: var(--b-6) 0; padding: var(--b-4) var(--b-5); border-radius: var(--r-m); background: var(--bal-200); }
.not-kutu::before { content: "i"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gece-900); color: var(--bal-300); font: italic 600 1rem/1 var(--f-baslik); }
.not-kutu p { margin: 0; font-size: 1rem; color: var(--gece-700) !important; }
.yazi__sss { margin-top: var(--b-8); }
.yazi__sss h2 { margin-top: 0; }
.yazar-kutu { display: flex; gap: var(--b-4); margin-top: var(--b-8); padding: var(--b-6); border-radius: var(--r-l); background: var(--yuzey); border: 1px solid var(--cizgi); }
.yazar-kutu p { font-size: 1rem; }
.yazar-kutu__ad { margin-bottom: var(--b-2) !important; font-family: var(--f-baslik); font-size: 1.25rem !important; color: var(--metin) !important; }
.yazar-kutu .dugmeler { margin-top: var(--b-4); }
.yazi-gezinti { display: grid; gap: var(--b-4); margin-top: var(--b-8); padding-top: var(--b-6); border-top: 1px solid var(--cizgi); }
@media (min-width: 768px) { .yazi-gezinti { grid-template-columns: 1fr 1fr; } }
.yazi-gezinti a { display: grid; gap: 4px; padding: var(--b-5); border-radius: var(--r-m); border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; transition: border-color var(--orta), background-color var(--orta); }
.yazi-gezinti a:hover { border-color: var(--bal-500); background: var(--yuzey); }
.yazi-gezinti span { font-size: 0.8125rem; color: var(--bal-700); font-weight: 600; }
.yazi-gezinti strong { font-family: var(--f-baslik); font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.yazi-gezinti__s { text-align: right; }

/* ==========================================================================
   Onaylı harita + yasal sayfa
   ========================================================================== */

.yasal h2 { font-size: 1.625rem !important; margin-top: var(--b-7) !important; }
.kunye { display: grid; margin: var(--b-4) 0; border-top: 1px solid var(--cizgi); }
.kunye div { display: grid; grid-template-columns: 11rem 1fr; gap: var(--b-3); padding: var(--b-3) 0; border-bottom: 1px solid var(--cizgi); font-size: 1rem; }
.kunye dt { color: var(--metin-2); }
.kunye dd { margin: 0; color: var(--metin); }
@media (max-width: 560px) { .kunye div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Görünüme girişte belirme ---------- */
.js .belir { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--egri), transform 700ms var(--egri); }
.js .belir.gorundu { opacity: 1; transform: none; }
.js .urun-kart.belir.gorundu { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .belir { opacity: 1; transform: none; }
  .el-cizgi path { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}

@media print {
  .ust, .hizli, .alt__ust, .harita-kart, .ucus, .ilerleme { display: none !important; }
  body { background: #fff; }
  .hero, .bolum--gece { background: #fff; color: #000; }
}

/* Ürün künyesi (yapılandırılmış ürün bilgisi) */
.urun__kunye { display: grid; gap: 0; margin: 0 0 var(--b-6); border-top: 1px solid var(--krem-300); }
.urun__kunye > div { display: grid; grid-template-columns: minmax(96px, 32%) 1fr; gap: var(--b-3); padding: var(--b-3) 0; border-bottom: 1px solid var(--krem-300); }
.urun__kunye dt { color: var(--metin-2); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.urun__kunye dd { margin: 0; color: var(--metin); font-size: 0.9375rem; }
.urun__kunye a { color: inherit; text-decoration-color: var(--bal-500); text-underline-offset: 3px; }
@media (max-width: 520px) {
  .rehber-link { flex-wrap: wrap; row-gap: var(--b-2); }
  .rehber-link span:nth-child(2) { flex: 1 1 calc(100% - 40px); }
}

/* Performans: ekran dışındaki bölümlerin stil/yerleşim/boyama işi görünene kadar ertelenir
   (LCP render gecikmesini azaltır; görünüm değişmez). contain-intrinsic-size "auto" son
   ölçülen yüksekliği hatırlar, kaydırma çubuğu zıplamaz. */
main > section ~ section,
main > article ~ section,
main > header ~ section,
footer.alt {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Uzun ürün listesinde ekran dışındaki kartların çizimi ertelenir (101 kart; görünüm değişmez) */
.katalog .urun-kart { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* ---------- Çözüm ortakları ---------- */
.ortaklar__giris { max-width: 32em; color: var(--metin-2); margin: 0; }
.ortaklar__liste { display: grid; gap: var(--b-4); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .ortaklar__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-5); } }
.ortak { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 260px; padding: var(--b-7) var(--b-6) var(--b-6); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); transition: transform var(--orta), box-shadow var(--orta), border-color var(--orta); }
.ortak:hover { transform: translateY(-4px); box-shadow: var(--golge-2); border-color: var(--bal-300); }
.ortak__desen { position: absolute; inset: 0 0 0 45%; z-index: -1; opacity: 0.09; background: var(--desen-petek) 0 0 / 48px auto; -webkit-mask-image: linear-gradient(to left, #000, transparent 85%); mask-image: linear-gradient(to left, #000, transparent 85%); transition: opacity var(--orta); }
.ortak:hover .ortak__desen { opacity: 0.18; }
.ortak__no { position: absolute; right: var(--b-6); top: var(--b-5); font-family: var(--f-baslik); font-style: italic; font-size: 2.5rem; line-height: 1; color: var(--krem-300); transition: color var(--orta); }
.ortak:hover .ortak__no { color: var(--bal-400); }
.ortak__alan { margin: 0 0 var(--b-3); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vurgu); }
.ortak__ad { margin: 0; font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--metin); }
.ortak__aciklama { margin: var(--b-4) 0 var(--b-6); max-width: 26em; color: var(--metin-2); }
.ortak__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-3); margin: auto 0 0; padding-top: var(--b-4); border-top: 1px dashed var(--krem-300); }
.ortak__sehir { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: var(--r-tam); background: var(--bal-200); color: var(--bal-700); font-size: 0.8125rem; font-weight: 600; }
.ortak__sehir .ikon { width: 16px; height: 16px; }
.ortak__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: auto; font-weight: 600; color: var(--metin); text-decoration: none; }
.ortak__link .ikon { width: 18px; height: 18px; color: var(--bal-700); transition: translate var(--hizli); }
.ortak__link:hover .ikon { translate: 4px 0; }
.ortak__link::after { content: ""; position: absolute; inset: 0; }

/* ---------- Blog: Bu ay arılıkta ---------- */
.mevsim { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--b-7); padding: var(--b-8) var(--b-6); border-radius: var(--r-xl); background: var(--gece-950); color: var(--acik); }
@media (min-width: 960px) { .mevsim { grid-template-columns: 0.9fr 1.1fr; align-items: center; padding: var(--b-9) var(--b-9); } }
.mevsim__desen { position: absolute; inset: 0; z-index: -1; opacity: 0.1; background: var(--desen-petek) 0 0 / 56px auto; -webkit-mask-image: radial-gradient(60% 80% at 15% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 15% 30%, #000, transparent 75%); }
.mevsim::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgb(223 151 31 / 0.22), transparent); pointer-events: none; }
.mevsim__etiket { margin: 0 0 var(--b-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bal-300); }
.mevsim__ay { margin: 0; font-family: var(--f-baslik); font-style: italic; font-weight: 400; font-size: clamp(3.5rem, 2.4rem + 5vw, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--bal-300); }
.mevsim__baslik { margin: var(--b-3) 0 var(--b-4); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); color: var(--acik); }
.mevsim__metin { margin: 0 0 var(--b-5); max-width: 34em; color: var(--acik-2); }
.mevsim__takvim { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--acik); text-decoration: underline; text-decoration-color: var(--bal-400); text-underline-offset: 5px; }
.mevsim__takvim .ikon { width: 18px; height: 18px; color: var(--bal-300); }
.mevsim__liste { display: grid; gap: var(--b-3); margin: 0; padding: 0; list-style: none; }
.mevsim__liste a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--b-4); padding: var(--b-4) var(--b-5); border: 1px solid var(--acik-cizgi); border-radius: var(--r-l); background: rgb(246 238 221 / 0.04); color: var(--acik); text-decoration: none; transition: background-color var(--orta), border-color var(--orta), transform var(--orta); }
.mevsim__liste a:hover { background: rgb(246 238 221 / 0.09); border-color: var(--bal-400); transform: translateX(4px); }
.mevsim__no { font-family: var(--f-baslik); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--bal-300); }
.mevsim__yazi { display: grid; gap: 4px; }
.mevsim__konu { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acik-2); }
.mevsim__yazi strong { font-family: var(--f-baslik); font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.mevsim__ok .ikon { width: 20px; height: 20px; color: var(--bal-300); transition: translate var(--hizli); }
.mevsim__liste a:hover .mevsim__ok .ikon { translate: 4px 0; }

/* ---------- Blog: Okuma yolları ---------- */
.yollar__giris { max-width: 30em; margin: 0; color: var(--metin-2); }
.yollar { display: grid; gap: var(--b-5); }
@media (min-width: 900px) { .yollar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yol { position: relative; display: flex; flex-direction: column; padding: var(--b-7) var(--b-6) var(--b-6); border: 1px solid var(--cizgi); border-radius: var(--r-xl); background: var(--yuzey); }
.yol--hasat { background: linear-gradient(160deg, var(--bal-200), var(--krem-50) 70%); border-color: var(--bal-300); }
.yol__etiket { margin: 0 0 var(--b-3); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
.yol__ad { margin: 0; font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em; }
.yol__aciklama { margin: var(--b-3) 0 var(--b-5); color: var(--metin-2); }
.yol__adimlar { position: relative; display: grid; gap: 2px; margin: 0 0 var(--b-6); padding: 0; list-style: none; counter-reset: none; }
.yol__adimlar::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(to bottom, var(--krem-300) 0 5px, transparent 5px 10px); }
.yol__adimlar a { position: relative; display: flex; align-items: center; gap: var(--b-4); min-height: 44px; padding: 6px 8px 6px 0; border-radius: var(--r-m); color: var(--metin); text-decoration: none; font-weight: 500; line-height: 1.35; transition: color var(--hizli); }
.yol__adimlar a:hover { color: var(--vurgu); }
.yol__no { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--yuzey); border: 1.5px solid var(--krem-300); font-family: var(--f-baslik); font-style: italic; font-size: 0.9375rem; color: var(--vurgu); transition: background-color var(--hizli), border-color var(--hizli), color var(--hizli); }
.yol__adimlar a:hover .yol__no { background: var(--gece-900); border-color: var(--gece-900); color: var(--bal-300); }
.yol__basla { align-self: flex-start; margin-top: auto; }

/* ---------- Yazı: okuma yolu gezgini ---------- */
.yol-kutu { margin: 0 0 var(--b-7); padding: var(--b-5); border: 1px solid var(--cizgi); border-radius: var(--r-l); background: var(--yuzey); }
.yol-kutu__ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--b-3); margin: 0 0 var(--b-4); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-2); }
.yol-kutu__ust strong { font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; text-transform: none; color: var(--metin); }
.yol-kutu__sayac { margin-left: auto; padding: 2px 10px; border-radius: var(--r-tam); background: var(--gece-900); color: var(--bal-300); font-weight: 700; letter-spacing: 0.06em; }
.yol-kutu__adimlar { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: yk; }
.yol-kutu__adimlar li { counter-increment: yk; display: flex; gap: var(--b-3); align-items: baseline; font-size: 0.9375rem; line-height: 1.4; }
.yol-kutu__adimlar li::before { content: counter(yk); flex: none; width: 22px; font-family: var(--f-baslik); font-style: italic; color: var(--metin-2); text-align: right; }
.yol-kutu__adimlar a { display: inline-block; padding: 5px 0; color: var(--metin-2); text-decoration: none; }
.yol-kutu__adimlar a:hover { color: var(--vurgu); text-decoration: underline; text-underline-offset: 3px; }
.yol-kutu__gecti a { color: var(--metin-2); }
.yol-kutu__bu span { padding: 5px 0; font-weight: 700; color: var(--metin); }
.yol-kutu__bu::before { color: var(--vurgu); font-weight: 700; }
.yol-sonraki { position: relative; display: grid; gap: 6px; margin: var(--b-7) 0 var(--b-6); padding: var(--b-6) calc(var(--b-6) + 48px) var(--b-6) var(--b-6); border-radius: var(--r-l); background: var(--gece-950); color: var(--acik); text-decoration: none; transition: transform var(--orta), box-shadow var(--orta); }
.yol-sonraki:hover { transform: translateY(-3px); box-shadow: var(--golge-2); color: var(--acik); }
.yol-sonraki__etiket { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bal-300); }
.yol-sonraki strong { font-family: var(--f-baslik); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.25; }
.yol-sonraki__ok { position: absolute; right: var(--b-6); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bal-400); color: var(--gece-950); transition: translate var(--hizli); }
.yol-sonraki:hover .yol-sonraki__ok { translate: 4px -50%; }
.yol-sonraki__ok .ikon { width: 20px; height: 20px; }

/* Makale bağlantı stili (.rehber__metin a) okuma yolu kutularına sızmasın */
.rehber__metin .yol-kutu__adimlar a { color: var(--metin-2); text-decoration: none; }
.rehber__metin .yol-kutu__adimlar a:hover { color: var(--vurgu); text-decoration: underline; text-decoration-color: var(--bal-300); }

.rehber__metin a.yol-sonraki, .rehber__metin a.yol-sonraki:hover { color: var(--acik); text-decoration: none; }

/* ---------- Makine seçici: çerçeve adımı ---------- */
.cerceve-sec { display: grid; gap: var(--b-4); }
.cerceve-sec__sayac { display: flex; align-items: center; gap: var(--b-4); }
.sayac__btn--kucuk { width: 44px; height: 44px; }
.cerceve-sec__deger { min-width: 2ch; font-family: var(--f-baslik); font-size: 2.75rem; line-height: 1; letter-spacing: -0.03em; text-align: center; font-variant-numeric: tabular-nums; }
.cerceve-sec__cizim { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.cerceve-sec__cizim i { height: 28px; border-radius: 3px; background: var(--krem-300); opacity: 0.55; transition: background-color var(--orta), opacity var(--orta), transform var(--orta); }
.cerceve-sec__cizim i.dolu { background: linear-gradient(180deg, var(--bal-300), var(--bal-500)); opacity: 1; transform: scaleY(1.08); }
.cerceve-sec__not { margin: 0; font-size: 0.875rem; color: var(--metin-2); }

/* ---------- Makine seçici: hasat günü planı ---------- */
.plan { grid-column: 1 / -1; display: grid; gap: var(--b-7); padding: var(--b-7) var(--b-6); background: linear-gradient(135deg, var(--bal-200), var(--krem-50) 60%); border-top: 1px solid var(--bal-300); }
@media (min-width: 960px) { .plan { grid-template-columns: 0.8fr 1.2fr; align-items: center; padding: var(--b-8) var(--b-8); } }
.plan__etiket { margin: 0 0 var(--b-3); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vurgu); }
.plan__formul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; font-size: 1.0625rem; color: var(--metin-2); }
.plan__formul b { font-family: var(--f-baslik); font-weight: 500; font-size: 1.5rem; color: var(--metin); font-variant-numeric: tabular-nums; }
.plan__isaret { font-family: var(--f-baslik); font-style: italic; font-size: 1.5rem; color: var(--bal-600); }
.plan__toplam { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: var(--b-2) 0 var(--b-4); }
.plan__toplam strong { font-family: var(--f-baslik); font-weight: 500; font-size: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--metin); font-variant-numeric: tabular-nums; }
.plan__toplam span { font-family: var(--f-baslik); font-style: italic; font-size: 1.375rem; color: var(--vurgu); }
.plan__tur { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; padding: 10px 16px; border-radius: var(--r-m); background: var(--gece-950); color: var(--acik-2); font-size: 0.9375rem; }
.plan__tur strong { font-family: var(--f-baslik); font-size: 1.375rem; color: var(--bal-300); font-variant-numeric: tabular-nums; }
.plan__grafik-baslik { margin: 0 0 var(--b-4); font-weight: 600; color: var(--metin); }
.plan__grafik-baslik span { font-weight: 400; color: var(--metin-2); }
.plan__liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan__liste a { display: grid; grid-template-columns: minmax(0, 13.5em) 1fr auto; align-items: center; gap: var(--b-4); min-height: 44px; padding: 6px 12px; border-radius: var(--r-m); color: var(--metin); text-decoration: none; transition: background-color var(--hizli); }
.plan__liste a:hover { background: rgb(255 253 248 / 0.7); }
.plan__ad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.9375rem; font-weight: 500; line-height: 1.25; }
.plan__motor { padding: 1px 8px; border-radius: var(--r-tam); background: var(--gece-900); color: var(--bal-300); font-size: 0.6875rem; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.plan__cubuk { position: relative; height: 12px; border-radius: var(--r-tam); background: rgb(21 16 10 / 0.07); overflow: hidden; }
.plan__cubuk i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bal-300), var(--bal-500)); transform: scaleX(var(--oran, 0.5)); transform-origin: left center; transition: transform 600ms var(--egri); }
.plan__deger { min-width: 5.5em; text-align: right; font-size: 0.875rem; color: var(--metin-2); white-space: nowrap; }
.plan__deger b { font-family: var(--f-baslik); font-size: 1.25rem; font-weight: 500; color: var(--metin); font-variant-numeric: tabular-nums; }
.plan__oneri a { background: var(--gece-950); color: var(--acik); box-shadow: var(--golge-2); }
.plan__oneri a:hover { background: var(--gece-900); }
.plan__oneri .plan__cubuk { background: rgb(246 238 221 / 0.12); }
.plan__oneri .plan__cubuk i { background: linear-gradient(90deg, var(--bal-300), var(--bal-400)); }
.plan__oneri .plan__deger, .plan__oneri .plan__deger b { color: var(--bal-300); }
.plan__oneri .plan__motor { background: var(--bal-400); color: var(--gece-950); }
.plan__oneri .plan__ad::after { content: "Önerimiz"; order: 3; padding: 1px 8px; border-radius: var(--r-tam); border: 1px solid var(--bal-400); color: var(--bal-300); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.plan__not { margin: var(--b-4) 0 0; font-size: 0.8125rem; color: var(--metin-2); }
@media (max-width: 640px) {
  .plan__liste a { grid-template-columns: 1fr auto; grid-template-areas: "ad deger" "cubuk cubuk"; row-gap: 6px; padding: 10px 12px; }
  .plan__ad { grid-area: ad; } .plan__deger { grid-area: deger; } .plan__cubuk { grid-area: cubuk; }
  .cerceve-sec__cizim { grid-template-columns: repeat(10, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .plan__cubuk i, .cerceve-sec__cizim i { transition: none; } }

/* ---------- Ana sayfa: yeni başlayanlar ---------- */
.baslangic__giris { max-width: 32em; margin: 0; color: var(--metin-2); }
.baslangic__asamalar { display: grid; gap: var(--b-5); }
@media (min-width: 1024px) { .baslangic__asamalar { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; } }
.asama { margin: 0; padding: var(--b-5); border: 1px solid var(--cizgi); border-radius: var(--r-xl); background: var(--yuzey); min-width: 0; }
.asama--ilk-gun { background: var(--gece-950); border-color: var(--gece-950); color: var(--acik); }
.asama__bas { float: left; width: 100%; display: flex; align-items: center; gap: var(--b-3); padding: 0 0 var(--b-4); color: inherit; } /* legend'i kenar çizgisinden kartın içine alır */
.asama__liste { clear: both; }
.asama__bas strong { display: block; font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: 1.625rem; line-height: 1.1; }
.asama__bas small { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--metin-2); }
.asama--ilk-gun .asama__bas small { color: var(--acik-2); }
.asama__no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bal-400); color: var(--gece-950); font-family: var(--f-baslik); font-style: italic; font-size: 1.25rem; }
.asama__liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.malzeme { position: relative; display: flex; align-items: center; gap: 4px; }
.malzeme__kutu { position: absolute; opacity: 0; width: 1px; height: 1px; }
.malzeme__etiket { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--b-3); min-height: 56px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: var(--r-m); cursor: pointer; transition: background-color var(--hizli), border-color var(--hizli); }
.malzeme__etiket:hover { background: rgb(21 16 10 / 0.04); }
.asama--ilk-gun .malzeme__etiket:hover { background: rgb(246 238 221 / 0.06); }
.malzeme__kutu:focus-visible + .malzeme__etiket { outline: 3px solid var(--bal-400); outline-offset: 2px; }
.malzeme__kutu:checked + .malzeme__etiket { border-color: var(--bal-300); background: rgb(251 231 189 / 0.35); }
.asama--ilk-gun .malzeme__kutu:checked + .malzeme__etiket { border-color: rgb(239 178 74 / 0.5); background: rgb(239 178 74 / 0.1); }
.malzeme__gorsel { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 12px; background: #fff; }
.malzeme__gorsel img { width: 100%; height: 100%; object-fit: contain; }
.malzeme__gorsel > .ikon { width: 22px; height: 22px; color: var(--bal-600); }
.malzeme__metin { flex: 1; min-width: 0; display: grid; gap: 2px; }
.malzeme__metin strong { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.malzeme__metin small { font-size: 0.8125rem; line-height: 1.35; color: var(--metin-2); }
.asama--ilk-gun .malzeme__metin small { color: var(--acik-2); }
.malzeme__tik { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--krem-300); color: transparent; transition: background-color var(--hizli), border-color var(--hizli), color var(--hizli); }
.asama--ilk-gun .malzeme__tik { border-color: rgb(246 238 221 / 0.35); }
.malzeme__tik .ikon { width: 14px; height: 14px; }
.malzeme__kutu:checked + .malzeme__etiket .malzeme__tik { background: var(--bal-400); border-color: var(--bal-400); color: var(--gece-950); }
.malzeme__link { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--metin-2); transition: background-color var(--hizli), color var(--hizli); }
.malzeme__link:hover { background: rgb(21 16 10 / 0.06); color: var(--vurgu); }
.asama--ilk-gun .malzeme__link { color: var(--acik-2); }
.asama--ilk-gun .malzeme__link:hover { background: rgb(246 238 221 / 0.08); color: var(--bal-300); }
.malzeme__link .ikon { width: 18px; height: 18px; }
.baslangic__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-4) var(--b-6); margin-top: var(--b-6); padding: var(--b-5) var(--b-6); border-radius: var(--r-xl); background: var(--yuzey); border: 1px solid var(--cizgi); }
.baslangic__sayac { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.baslangic__sayac strong { font-family: var(--f-baslik); font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--metin); }
.baslangic__sayac span { color: var(--metin-2); }
.baslangic__alt .dugmeler { margin: 0; }
.baslangic__not { flex-basis: 100%; margin: 0; font-size: 0.875rem; color: var(--metin-2); }
.baslangic__not a { color: var(--vurgu); text-underline-offset: 3px; }

/* ---------- Teklif listesi ---------- */
.urun-kart__ekle { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 253 248 / 0.92); color: var(--gece-900); box-shadow: 0 6px 18px -6px rgb(21 16 10 / 0.35); cursor: pointer; transition: background-color var(--hizli), color var(--hizli), transform var(--hizli); }
.urun-kart__ekle:hover { background: var(--gece-900); color: var(--bal-300); transform: scale(1.06); }
.urun-kart__ekle:focus-visible { outline: 3px solid var(--bal-400); outline-offset: 2px; }
.urun-kart__ekle .ikon { width: 20px; height: 20px; }
.siparis__liste { margin-top: var(--b-3); }
.hizli__btn--liste { background: var(--krem-50); color: var(--gece-900); }
.hizli__btn[hidden] { display: none; }
.hizli__rozet { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-tam); background: var(--gece-900); color: var(--bal-300); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--krem-50); }
.hizli__btn--nabiz { animation: liste-nabiz 600ms var(--egri); }
@keyframes liste-nabiz { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.liste-panel { width: min(480px, calc(100vw - 24px)); max-height: min(88vh, 760px); margin: auto 12px 12px auto; padding: 0; border: 0; border-radius: var(--r-xl); background: var(--yuzey); color: var(--metin); box-shadow: 0 40px 80px -20px rgb(21 16 10 / 0.5); }
.liste-panel::backdrop { background: rgb(12 9 6 / 0.45); backdrop-filter: blur(2px); }
@media (max-width: 560px) { .liste-panel { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; } }
.liste-panel__ic { display: grid; gap: var(--b-4); padding: var(--b-6); }
.liste-panel__bas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b-4); }
.liste-panel__ust { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vurgu); }
.liste-panel__ust .ikon { width: 16px; height: 16px; }
.liste-panel h2 { margin: 0; font-family: var(--f-baslik); font-style: italic; font-weight: 500; font-size: 2rem; line-height: 1.05; }
.liste-panel__kapat { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: 50%; background: transparent; color: var(--metin); cursor: pointer; }
.liste-panel__kapat:hover { background: var(--gece-900); color: var(--acik); }
.liste-panel__kapat .ikon { width: 20px; height: 20px; }
.liste-panel__giris { margin: 0; font-size: 0.9375rem; color: var(--metin-2); }
.liste-panel__ogeler { display: grid; gap: 6px; max-height: 42vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
.liste-oge { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--b-3); padding: 8px 8px 8px 14px; border: 1px solid var(--cizgi); border-radius: var(--r-m); background: var(--krem-50); }
.liste-oge__ad { min-width: 0; font-weight: 600; line-height: 1.3; color: var(--metin); text-decoration: none; }
.liste-oge__ad:hover { color: var(--vurgu); text-decoration: underline; text-underline-offset: 3px; }
.liste-oge__adet { display: flex; align-items: center; gap: 2px; }
.liste-oge__adet output { min-width: 2ch; text-align: center; font-family: var(--f-baslik); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.liste-oge__btn, .liste-oge__sil { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--metin); cursor: pointer; }
.liste-oge__btn:hover { background: rgb(21 16 10 / 0.06); }
.liste-oge__sil { color: var(--metin-2); }
.liste-oge__sil:hover { background: rgb(21 16 10 / 0.06); color: #9b2c1f; }
.liste-oge .ikon { width: 18px; height: 18px; }
.liste-panel__bos { margin: 0; padding: var(--b-5); border: 1px dashed var(--krem-300); border-radius: var(--r-m); color: var(--metin-2); text-align: center; }
.liste-panel__alt { display: grid; gap: var(--b-3); }
.liste-panel__il { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; }
.liste-panel__il small { font-weight: 400; color: var(--metin-2); }
.liste-panel__il input { min-height: 48px; padding: 0 14px; border: 1px solid var(--krem-300); border-radius: var(--r-m); background: #fff; font: inherit; font-weight: 400; color: var(--metin); }
.liste-panel__il input:focus-visible { outline: 3px solid var(--bal-400); outline-offset: 1px; }
.liste-panel__temizle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; background: transparent; color: var(--metin-2); font: inherit; font-size: 0.875rem; cursor: pointer; }
.liste-panel__temizle:hover { color: #9b2c1f; }
.liste-panel__temizle .ikon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .hizli__btn--nabiz { animation: none; } }

/* ---------- Karşılaştırma tablosu (kategori sayfaları) ---------- */
.kiyas { margin-top: var(--b-8); }
.kiyas__bas { display: grid; gap: var(--b-2); margin-bottom: var(--b-5); }
.kiyas__bas h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.kiyas__bas p { margin: 0; max-width: 42em; color: var(--metin-2); }
.kiyas__kaydir { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r-l); background: var(--yuzey); -webkit-overflow-scrolling: touch; }
.kiyas__kaydir:focus-visible { outline: 2px solid var(--bal-500); outline-offset: 2px; }
.kiyas table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.kiyas caption { padding: 0; }
.kiyas th, .kiyas td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi); }
.kiyas thead th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bal-700); background: var(--krem-200); white-space: nowrap; }
.kiyas tbody th { font-weight: 600; min-width: 11rem; }
.kiyas tbody th a { color: var(--metin); text-decoration-color: var(--bal-400); text-underline-offset: 3px; }
.kiyas tbody th a:hover { color: var(--vurgu); }
.kiyas tbody tr:last-child > * { border-bottom: 0; }
.kiyas tbody tr:hover > * { background: #fff; }
.kiyas td { color: #3f352a; }
.kiyas__uygun { display: inline-block; padding: 3px 10px; border-radius: var(--r-tam); background: var(--bal-200); color: var(--gece-800); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.kiyas--genis table { min-width: 640px; }
.kiyas__ipucu { display: none; margin: 0 0 var(--b-2); font-size: var(--fs-kucuk); color: var(--metin-2); }
@media (max-width: 699px) { .kiyas--genis .kiyas__ipucu { display: block; } .kiyas tbody th { min-width: 9rem; } }
.kiyas__not { margin: var(--b-3) 0 0; font-size: var(--fs-kucuk); color: var(--metin-2); }
@media (max-width: 699px) { .kiyas tbody th { position: sticky; left: 0; z-index: 1; background: var(--yuzey); box-shadow: 1px 0 0 var(--cizgi); } }