/* Kendi sunucumuzda barındırılan fontlar — tools/fetch-fonts.mjs ile üretildi. Elle düzenlemeyin. */
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fira-sans-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Rotermi Enerji — tasarım sistemi
   Konsept: "teknik çizim sayfası". Soğuk beyaz gövde, saç teli cetvel
   çizgileri, mono teknik etiketler; koyu antrasit yalnızca hero ve CTA'da.
   İmza öğesi: alev sıcaklık skalası (termal kamera renk düzeni).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; }
/* width/height öznitelikleri yalnızca en-boy oranını bildirsin, yüksekliği dayatmasın.
   Bu satır olmadan CSS'te width:%100 verilen görseller dikey olarak geriliyordu. */
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Jetonlar ---------- */
:root {
  /* Renk — kırmızı logodan birebir örneklendi (#ED1C24) */
  --flame:      #ED1C24;
  --flame-dark: #C1141B;
  --ember:      #FF7A18;
  /* Koyu zeminde okunur kirmizi: marka kirmizisi orada 4.19:1'de kaliyor. */
  --flame-on-dark: #FF3B30;
  --blueflame:  #1D4E8F;

  --ink:    #10151B;
  --ink-2:  #1A222C;
  --ink-3:  #2A3542;
  --steel:  #5E6E7C;
  --steel-2:#8A99A6;

  --sheet:  #F4F6F5;
  --paper:  #FFFFFF;
  --rule:   #D9DEDC;
  --rule-2: #E9EDEB;

  --focus:  #1D4E8F;

  /* Tipografi */
  --display: 'Fira Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-hero:  clamp(2.5rem, 6.2vw, 5.1rem);
  --fs-h1:    clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2:    clamp(1.75rem, 3.4vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.75rem;

  /* Ölçü */
  --wrap: 1240px;
  --hdr-h: 93px;          /* .hdr__in min-height + alt çizgi */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sect: clamp(4rem, 8vw, 7rem);
  /* Yumuşak köşeler ve hap butonlar mevcut Rotermi sitesinin karakteri;
     keskin 2px'lik teknik görünüm markaya yabancı geliyordu. */
  --r: 10px;
  --r-sm: 6px;
  --r-pill: 100px;

  --shadow: 0 1px 2px rgba(16,21,27,.05), 0 8px 24px -12px rgba(16,21,27,.14);
  --shadow-lg: 0 2px 4px rgba(16,21,27,.06), 0 24px 48px -20px rgba(16,21,27,.24);

  /* İmza: termal kamera renk düzeni — soğuktan sıcağa.
     Üç yön: hero skalası yukarı, proje akışı aşağı (okuma yönünde ısınır),
     ilerleme çizgileri sağa. */
  --thermal: linear-gradient(to top, var(--blueflame) 0%, #7A3A6B 26%, var(--flame) 58%, var(--ember) 86%, #FFC46B 100%);
  --thermal-down: linear-gradient(to bottom, var(--blueflame) 0%, #7A3A6B 26%, var(--flame) 58%, var(--ember) 86%, #FFC46B 100%);
  --thermal-x: linear-gradient(to right, var(--blueflame) 0%, #7A3A6B 26%, var(--flame) 58%, var(--ember) 86%, #FFC46B 100%);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Logodaki altıgen: düz üst/alt kenar, sivri sağ/sol köşe */
  --hex: polygon(26% 0%, 74% 0%, 100% 50%, 74% 100%, 26% 100%, 0% 50%);
  /* Aynı altıgenden türetilmiş petek dokusu — markanın imza yüzeyi.
     Karo 66 × 38.11 px; kenarlara taşan komşular sayesinde ek yeri görünmez. */
  --honey-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2266%22%20height%3D%2238.11%22%20viewBox%3D%220%200%2066%2038.11%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.055)%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%22-22.00%2C0.00%20-11.00%2C-19.05%2011.00%2C-19.05%2022.00%2C0.00%2011.00%2C19.05%20-11.00%2C19.05%22%2F%3E%3Cpolygon%20points%3D%2244.00%2C0.00%2055.00%2C-19.05%2077.00%2C-19.05%2088.00%2C0.00%2077.00%2C19.05%2055.00%2C19.05%22%2F%3E%3Cpolygon%20points%3D%22-22.00%2C38.11%20-11.00%2C19.06%2011.00%2C19.06%2022.00%2C38.11%2011.00%2C57.16%20-11.00%2C57.16%22%2F%3E%3Cpolygon%20points%3D%2244.00%2C38.11%2055.00%2C19.06%2077.00%2C19.06%2088.00%2C38.11%2077.00%2C57.16%2055.00%2C57.16%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C19.05%2022.00%2C0.00%2044.00%2C0.00%2055.00%2C19.05%2044.00%2C38.11%2022.00%2C38.11%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C-19.05%2022.00%2C-38.11%2044.00%2C-38.11%2055.00%2C-19.05%2044.00%2C-0.00%2022.00%2C-0.00%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C57.16%2022.00%2C38.11%2044.00%2C38.11%2055.00%2C57.16%2044.00%2C76.22%2022.00%2C76.22%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --honey-dark:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2266%22%20height%3D%2238.11%22%20viewBox%3D%220%200%2066%2038.11%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(16%2C21%2C27%2C0.055)%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%22-22.00%2C0.00%20-11.00%2C-19.05%2011.00%2C-19.05%2022.00%2C0.00%2011.00%2C19.05%20-11.00%2C19.05%22%2F%3E%3Cpolygon%20points%3D%2244.00%2C0.00%2055.00%2C-19.05%2077.00%2C-19.05%2088.00%2C0.00%2077.00%2C19.05%2055.00%2C19.05%22%2F%3E%3Cpolygon%20points%3D%22-22.00%2C38.11%20-11.00%2C19.06%2011.00%2C19.06%2022.00%2C38.11%2011.00%2C57.16%20-11.00%2C57.16%22%2F%3E%3Cpolygon%20points%3D%2244.00%2C38.11%2055.00%2C19.06%2077.00%2C19.06%2088.00%2C38.11%2077.00%2C57.16%2055.00%2C57.16%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C19.05%2022.00%2C0.00%2044.00%2C0.00%2055.00%2C19.05%2044.00%2C38.11%2022.00%2C38.11%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C-19.05%2022.00%2C-38.11%2044.00%2C-38.11%2055.00%2C-19.05%2044.00%2C-0.00%2022.00%2C-0.00%22%2F%3E%3Cpolygon%20points%3D%2211.00%2C57.16%2022.00%2C38.11%2044.00%2C38.11%2055.00%2C57.16%2044.00%2C76.22%2022.00%2C76.22%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --honey-size: 66px 38.11px;

  /* Kaydırmaya bağlı doluluk oranları. JS yokken şeritler dolu görünür. */
  --scroll-p: 1;
  --flow-p: 1;
}
/* JS varsa sıfırdan başlarlar, kaydırdıkça JS doldurur. */
html.js { --scroll-p: 0; --flow-p: 0; }

/* ---------- Temel ---------- */
body {
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--sheet);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { text-wrap: pretty; }

::selection { background: var(--flame); color: #fff; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; font-size: var(--fs-sm);
}
.skip:focus { left: 0; }

/* Bölüm etiketi — mevcut sitedeki pembe hap rozet, ama içinde mono teknik
   tipografi ve logodan gelen altıgen nokta. */
.label {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--flame);
  display: inline-flex; align-items: center; gap: .55rem;
  background: #FDECEC; border-radius: var(--r-pill); padding: .42rem .95rem .42rem .8rem;
}
/* Rozetin başındaki altıgen, bölüm göründüğünde açılır */
.label::before {
  content: ''; width: 9px; height: 8px; background: currentColor; flex: none;
  clip-path: var(--hex); transition: transform .45s var(--ease) .1s;
}
.js [data-reveal] .label::before { transform: scale(0); }
.js [data-reveal].is-in .label::before { transform: scale(1); }
/* Koyu zeminde rozet camsı olur, pembe zemin orada çalışmaz */
.label--light { color: var(--flame-on-dark); background: rgba(255,59,48,.15); }
.label--muted { color: var(--steel); background: rgba(94,110,124,.12); }
.sect--ink .label:not(.label--light):not(.label--muted),
.hero .label:not(.label--light):not(.label--muted),
.cta .label:not(.label--light):not(.label--muted) {
  color: var(--flame-on-dark); background: rgba(255,59,48,.15);
}

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 600; font-size: var(--fs-sm);
  padding: .85rem 1.6rem; border-radius: var(--r-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--primary { background: var(--flame); color: #fff; }
.btn--primary:hover {
  background: var(--flame-dark); transform: translateY(-2px);
  box-shadow: 0 8px 22px -8px rgba(237,28,36,.7);
}
.btn--ghost { border-color: var(--rule); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--onDark { border-color: rgba(255,255,255,.32); color: #fff; }
.btn--onDark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.btn:active { transform: translateY(1px); }

/* Ok, hover'da ilerler */
.btn .arw, .lnk .arw { transition: transform .2s var(--ease); }
.btn:hover .arw, .lnk:hover .arw { transform: translateX(3px); }

.lnk {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--flame); text-decoration: none;
}
.lnk:hover { color: var(--flame-dark); }
.lnk svg { width: 1em; height: 1em; }

/* ==========================================================================
   Üst bar + başlık
   ========================================================================== */
.topbar {
  background: var(--ink); color: rgba(255,255,255,.72);
  font-size: var(--fs-xs); line-height: 1.4;
}
.topbar__in { display: flex; align-items: center; gap: 1.5rem; min-height: 40px; flex-wrap: wrap; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__item svg { width: 14px; height: 14px; opacity: .7; flex: none; }
.topbar__spacer { margin-inline-start: auto; }
.topbar__addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hdr {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--rule);
}
/* Buzlu cam katmanı bilerek sözde öğede duruyor: backdrop-filter uygulanan bir
   öğe, içindeki position:fixed çocuklar için kapsayıcı blok hâline gelir.
   Filtre .hdr üzerindeyken mobil çekmece ekrana değil başlığın 62 px'lik
   kutusuna sabitleniyor, menü bağlantıları görünür alanın dışında kalıyordu. */
.hdr::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
/* Okuma ilerlemesi: başlığın alt kenarında ısınan bir şerit.
   clip-path ile açılır, böylece her noktadaki renk gerçek ilerlemeyi gösterir. */
.hdr__progress {
  position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--thermal-x); pointer-events: none;
  clip-path: inset(0 calc(100% - var(--scroll-p) * 100%) 0 0);
}
/* Başlık ve üst bar gövdeden daha geniş bir şerit kullanır: logo iyice sola,
   "Teklif alın" sağa yaslanır, menü ikisinin ortasında nefes alır.
   1240 px'lik gövde genişliğinde hepsi ortada sıkışıyordu. */
.hdr > .wrap, .topbar > .wrap, .refstrip > .wrap { max-width: 1560px; }

.hdr__in { display: flex; align-items: center; gap: 1.25rem; min-height: 92px; }
.hdr__logo { flex: none; }
.hdr__logo img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: .3rem; margin-inline: auto; }
.nav__link {
  display: block; padding: .6rem .5rem; font-size: .9375rem; font-weight: 500; white-space: nowrap;
  text-decoration: none; color: var(--ink); border-radius: var(--r); position: relative;
}
.nav__link::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: .3rem; height: 2px;
  background: var(--flame); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--flame); }

.hdr__cta { display: flex; align-items: center; gap: .65rem; flex: none; }
.hdr__tel {
  display: inline-flex; flex-direction: column; line-height: 1.15; text-decoration: none;
  padding-inline-start: .9rem; border-inline-start: 1px solid var(--rule);
}
.hdr__tel span { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.hdr__tel strong { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.hdr__tel:hover strong { color: var(--flame); }

/* ==========================================================================
   Dil seçici — yapışkan başlıkta durur, her sayfada göz hizasındadır.
   Üst barda dururken menüsü yapışkan başlığın altında kalıyordu (z-index 60
   vs 100) ve ilk iki dil tıklanamıyordu. Başlığa taşınınca sorun kalktı.
   ========================================================================== */
.lang { position: relative; flex: none; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
  font-family: var(--body); font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lang__btn:hover { border-color: var(--ink); background: var(--sheet); }
.lang[data-open="true"] .lang__btn { border-color: var(--flame); color: var(--flame); }
.lang__btn > svg:first-child { width: 17px; height: 17px; color: var(--flame); flex: none; }
.lang__btn > svg:last-child { width: 11px; height: 11px; color: var(--steel); transition: transform .2s var(--ease); }
.lang[data-open="true"] .lang__btn > svg:last-child { transform: rotate(180deg); }
.lang__now { white-space: nowrap; }
.lang__code { display: none; font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em; }

.lang__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); min-width: 210px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .35rem; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.lang[data-open="true"] .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__head {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-2); padding: .5rem .7rem .45rem;
}
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .7rem; font-size: var(--fs-sm); text-decoration: none; border-radius: var(--r);
}
.lang__menu a:hover { background: var(--sheet); }
.lang__menu a[aria-current="true"] { color: var(--flame); font-weight: 600; background: #FDECEC; }
.lang__menu code { font-family: var(--mono); font-size: var(--fs-xs); color: var(--steel-2); }
.lang__menu a[aria-current="true"] code { color: var(--flame); }

/* Dar masaüstünde yalnızca kod görünsün, yer açılsın */
@media (max-width: 1319px) {
  .lang__now { display: none; }
  .lang__code { display: inline; }
}

/* Mobil menüdeki dil satırı */
.nav__langs { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.nav__langs-head {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel); margin-bottom: .75rem;
}
.nav__langs-head svg { width: 15px; height: 15px; color: var(--flame); }
.nav__langs-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.nav__langs-row a {
  padding: .6rem .7rem; font-size: var(--fs-sm); text-decoration: none;
  border: 1px solid var(--rule); border-radius: var(--r); text-align: center;
}
.nav__langs-row a[aria-current="true"] { background: var(--flame); color: #fff; border-color: var(--flame); font-weight: 600; }

/* Mobil menü */
.burger { display: none; flex: none; padding: .5rem; margin-inline-start: auto; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .22s var(--ease), opacity .18s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Yatay menü 7 bağlantıyla ~650 px yer kaplıyor; 1240 px altında logo ve
   "Teklif alın" ile birlikte sığmıyordu. O yüzden hamburgere burada geçilir. */
@media (max-width: 1239px) {
  /* 44x44: parmakla güvenle vurulabilen en küçük hedef. Öncesinde 38x32 idi. */
  .burger { display: grid; place-content: center; min-width: 44px; min-height: 44px;
            padding: 0; margin-inline-start: .1rem; order: 3; }
  /* Mobilde sıra: logo — dil — hamburger.
     "Teklif alın" butonu mobil menünün içinde zaten var, başlıkta yer kaplamasın. */
  .hdr__logo { margin-inline-end: auto; }
  .hdr__cta { order: 2; margin-inline-start: 0; }
  .hdr__cta .btn--primary { display: none; }
  .lang__btn { padding: .45rem .55rem; }
  /* Kapatma (X) ve dil düğmesi çekmecenin üstünde kalmalı. İkisi de akış
     içinde olduğu için, konumlanmış çekmece açıldığında altında boyanıyor ve
     tıklanamıyorlardı. */
  .burger, .hdr__cta { position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
    background: var(--paper); border-inline-start: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--hdr-h) + .85rem) 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
    margin: 0; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
    box-shadow: var(--shadow-lg);
  }
  .nav[data-open="true"] { transform: none; visibility: visible; }
  /* Çekmecenin tepesindeki boşluk başlıksız bırakılınca panel yarım kalmış
     gibi duruyordu; kısa bir etiket paneli tanımlıyor. */
  .nav__head {
    display: flex; align-items: center; gap: .6rem; padding-bottom: .9rem;
    font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--steel);
  }
  .nav__head::before { content: ''; width: 18px; height: 2px; background: var(--flame); flex: none; }
  .nav__link {
    padding: .85rem .25rem; font-size: 1.0625rem; font-weight: 500;
    border-bottom: 1px solid var(--rule-2); border-radius: 0;
    display: flex; align-items: center; justify-content: space-between;
  }
  /* Her satırın sonunda ince bir çevron: dokunmatikte satırın tıklanabilir
     olduğunu gösterir, masaüstündeki alt çizgi vurgusunun yerini tutar. */
  .nav__link::before {
    content: ''; width: 7px; height: 7px; flex: none; opacity: .35;
    border-top: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor;
    transform: rotate(45deg); transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav__link[aria-current="page"] { font-weight: 600; }
  .nav__link[aria-current="page"]::before { opacity: 1; }
  .nav__link:active { color: var(--flame); }
  .nav__link::after { display: none; }
  .nav__mobileCta { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.15rem; }
  .hdr__cta .hdr__tel { display: none; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(16,21,27,.5); z-index: 90;
    opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
  }
  .nav-scrim[data-open="true"] { opacity: 1; visibility: visible; }
}
@media (min-width: 1240px) { .nav__mobileCta, .nav__langs, .nav__head { display: none; } }
/* Telefon bloğu 1400 px altında çekilir: menü + dil + buton zaten sığmıyordu
   ve "Teklif alın" sağ kenardan taşıyordu. */
@media (min-width: 1240px) and (max-width: 1399px) {
  .hdr__tel { display: none; }
  .nav__link { padding-inline: .48rem; font-size: .875rem; }
  .nav__link::after { left: .48rem; right: .48rem; }
  .hdr__logo img { height: 40px; }
}
/* Üst bar tek satırda kalmalı: yalnızca uzun adres düşer, e-posta ve LinkedIn
   en dar ekranda bile sığar. Önceden ikisi birden gizlendiği için mobilde
   üst barda tek başına bir LinkedIn ikonu kalıyordu. */
@media (max-width: 900px) { .topbar__addr { display: none; } }
@media (max-width: 640px) {
  :root { --hdr-h: 63px; }
  .hdr__in { min-height: 62px; }
  .hdr__logo img { height: 40px; }
}

/* ==========================================================================
   Hero — imza öğesi: alev sıcaklık skalası
   ========================================================================== */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(16,21,27,.96) 0%, rgba(16,21,27,.88) 42%, rgba(16,21,27,.55) 100%),
    linear-gradient(to top, rgba(16,21,27,.9) 0%, transparent 55%);
}
/* Logodan gelen petek dokusu, soldan sağa sönümlenir */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--honey-light);
  background-size: var(--honey-size);
  mask-image: linear-gradient(to right, #000 0%, transparent 68%);
}
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center; min-height: min(78vh, 720px); padding-block: clamp(3.5rem, 8vw, 6rem); }
.hero__body { max-width: 46rem; }
.hero__title {
  font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.03em; line-height: .98;
  margin-block: 1.1rem 1.25rem; text-wrap: balance;
}
/* Başlığın son satırı kızdırılmış metal gibi: alevden köre doğru geçiş.
   Gradyan desteklenmeyen tarayıcıda düz marka kırmızısına düşer. */
.hero__title em { font-style: normal; color: var(--flame); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title em {
    background: linear-gradient(94deg, var(--flame) 0%, #FF5A20 46%, var(--ember) 74%, #FFC46B 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.hero__text { font-size: clamp(1rem, 1.5vw, 1.1875rem); color: rgba(255,255,255,.8); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* İmza: termal skala — sayfa açılırken gerçek bir gösterge gibi tabandan dolar */
.thermo { display: flex; align-items: stretch; gap: .85rem; height: min(58vh, 420px); flex: none; }
.thermo__bar { width: 6px; border-radius: 3px; background: var(--thermal); flex: none; position: relative; }
.js .thermo__bar { transform: scaleY(0); transform-origin: bottom; animation: thermoRise 1.5s var(--ease) .35s forwards; }
@keyframes thermoRise { to { transform: scaleY(1); } }
/* Skalanın sıcak ucunda nefes alan kor */
.thermo__bar::after {
  content: ''; position: absolute; inset-inline: -10px; top: -10px; height: 27px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,150,.95) 0%, rgba(255,122,24,.5) 42%, transparent 72%);
}
.js .thermo__bar::after { opacity: 0; animation: emberGlow 2.8s var(--ease) 1.6s infinite; }
@keyframes emberGlow {
  0%, 100% { opacity: .6; transform: scale(.88); }
  50%      { opacity: 1;  transform: scale(1.22); }
}
.thermo__ticks { display: flex; flex-direction: column; justify-content: space-between; }
.thermo__tick { display: flex; align-items: center; gap: .6rem; position: relative; }
/* Değerler alttan yukarı, skalanın dolmasıyla aynı ritimde belirir */
.js .thermo__tick { animation: tickIn .5s var(--ease) backwards; }
.js .thermo__tick:nth-child(5) { animation-delay: .55s; }
.js .thermo__tick:nth-child(4) { animation-delay: .78s; }
.js .thermo__tick:nth-child(3) { animation-delay: 1.01s; }
.js .thermo__tick:nth-child(2) { animation-delay: 1.24s; }
.js .thermo__tick:nth-child(1) { animation-delay: 1.47s; }
@keyframes tickIn { from { opacity: 0; transform: translateX(10px); } }
.thermo__tick::before { content: ''; width: .7rem; height: 1px; background: rgba(255,255,255,.4); flex: none; margin-inline-start: -1.55rem; }
.thermo__val { font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: #fff; letter-spacing: .02em; }
.thermo__key { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.52); display: block; }
.thermo__cap {
  writing-mode: vertical-rl; font-family: var(--mono); font-size: .625rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.42); align-self: center;
}
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .thermo { display: none; }
}

/* Hero slayt geçişi — satırlar sırayla girer, fotoğraf ağır ağır yaklaşır */
.hero__slide { display: none; }
.hero__slide[data-active="true"] { display: block; }
.js .hero__slide[data-active="true"] > * { animation: heroIn .62s var(--ease) backwards; }
.js .hero__slide[data-active="true"] > *:nth-child(1) { animation-delay: .06s; }
.js .hero__slide[data-active="true"] > *:nth-child(2) { animation-delay: .16s; }
.js .hero__slide[data-active="true"] > *:nth-child(3) { animation-delay: .26s; }
.js .hero__slide[data-active="true"] > *:nth-child(4) { animation-delay: .36s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } }
/* Yaklasma suresi slayt suresiyle (7 sn) uyumlu: onceden 26 sn'ye yayildigi
   icin gozle secilmiyordu. Simdi her slaytta hareket fark ediliyor. */
.hero__media img { animation: heroImgIn 1s var(--ease), heroPan 9s ease-out forwards; }
@keyframes heroImgIn { from { opacity: .3; } }
@keyframes heroPan { from { transform: scale(1); } to { transform: scale(1.10); } }

/* Kıvılcım alanı — koyu bantlarda arkada yükselen kor. Çizimi app.js yapar;
   burada yalnızca yerleşimi var. Video yerine canvas: sıfır dosya boyutu. */
.sparks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
}
.hero .sparks { z-index: -1; }
.cta .sparks { z-index: 1; }
/* Hareket azaltıldığında JS hiç çizmez; boş tuval görünmesin diye gizlenir. */
@media (prefers-reduced-motion: reduce) { .sparks { display: none; } }

/* Alt kenardan sıcaklık parıltısı — kıvılcımlar bu ateşten çıkıyormuş gibi
   dursun diye hero'nun tabanına yerleşir ve yavaşça nefes alır. */
.hero__flame {
  position: absolute; inset-inline: 0; bottom: 0; height: 40%;
  z-index: -1; pointer-events: none; transform-origin: bottom;
  background:
    radial-gradient(120% 100% at 18% 100%, rgba(255,122,24,.13) 0%, transparent 60%),
    radial-gradient(95% 100% at 58% 100%, rgba(237,28,36,.10) 0%, transparent 56%),
    linear-gradient(to top, rgba(255,90,32,.065), transparent 72%);
}
.js .hero__flame { animation: flameBreath 6s ease-in-out infinite alternate; }
@keyframes flameBreath {
  0%   { opacity: .70; transform: scaleY(.94); }
  45%  { opacity: 1;   transform: scaleY(1.06); }
  100% { opacity: .82; transform: scaleY(.99); }
}

/* Slayt okları — mevcut sitedeki yuvarlak düğmelerin karşılığı.
   Camsı durur, üzerine gelince marka kırmızısına döner. */
.hero__nav {
  position: absolute; top: 50%; z-index: 3; translate: 0 -50%;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgba(16,21,27,.42); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease), opacity .2s var(--ease);
}
.hero__nav svg { width: 22px; height: 22px; }
.hero__nav:hover { background: var(--flame); border-color: var(--flame); transform: scale(1.08); }
.hero__nav:active { transform: scale(.96); }
.hero__nav--prev { inset-inline-start: clamp(.5rem, 2vw, 1.75rem); }
.hero__nav--next { inset-inline-end: clamp(.5rem, 2vw, 1.75rem); }
/* Dar ekranda oklar metnin üstüne binmesin: küçülüp aşağı iner. */
@media (max-width: 900px) {
  .hero__nav { width: 44px; height: 44px; top: auto; bottom: 1.5rem; translate: 0 0; }
  .hero__nav svg { width: 18px; height: 18px; }
}

.hero__dots { display: flex; gap: .5rem; margin-top: 2.25rem; }
.hero__dot {
  width: 26px; height: 3px; background: rgba(255,255,255,.26); border-radius: 2px; padding: 0;
  transition: background .2s var(--ease), width .2s var(--ease); position: relative;
}
/* Çizgi ince kalsın diye dokunma alanı görünmez bir katmanla büyütülür;
   3 px'lik bir hedefe telefonda isabet ettirmek mümkün değildi. */
.hero__dot::after { content: ''; position: absolute; inset: -15px -4px; }
.hero__dot[aria-selected="true"] { background: var(--flame); width: 42px; }

/* ==========================================================================
   Bölüm iskeleti
   ========================================================================== */
.sect { padding-block: var(--sect); position: relative; }
/* Açık zeminli bölümler gerçekten "çizim sayfası" gibi görünsün: saç teli
   ızgara üstten aşağı sönümlenir, içerik her zaman üstünde kalır. */
.sect--sheet { background: var(--sheet); isolation: isolate; }
.sect--sheet::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--honey-dark);
  background-size: var(--honey-size);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.sect--sheet > .wrap { position: relative; z-index: 1; }
.sect--paper { background: var(--paper); }
/* Koyu bölüm: sağ üstte sönümlenen sıcaklık halesi */
.sect--ink { background: var(--ink); color: #fff; isolation: isolate; }
.sect--ink::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(42% 110% at 96% 0%, rgba(237,28,36,.22) 0%, transparent 66%),
    var(--honey-light);
  background-size: auto, var(--honey-size);
}
.sect--ink > .wrap { position: relative; z-index: 1; }
.sect--ink h2, .sect--ink h3 { color: #fff; }
.sect--ink p { color: rgba(255,255,255,.76); }
.sect + .sect--sheet, .sect--sheet + .sect--paper, .sect--paper + .sect--sheet { border-top: 1px solid var(--rule); }

.sect__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 54rem; }
.sect__head h2 { margin-block: .9rem .85rem; }
.sect__head p { color: var(--steel); font-size: clamp(1rem, 1.4vw, 1.0625rem); }
.sect--ink .sect__head p { color: rgba(255,255,255,.72); }
.sect__head--split { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; max-width: none; }
@media (max-width: 700px) { .sect__head--split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Kartlar
   ========================================================================== */
/* Ayrık, yuvarlak kartlar — bitişik hairline tablo yerine. Mevcut sitedeki
   kart dili bu; aralarındaki nefes kartları tek tek okunur kılıyor. */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* Değer kartı — hairline ızgara hücresi.
   İkon kabı logodaki altıgenin formunu taşır (marka imzası). */
.vcard {
  background: var(--paper); padding: clamp(1.5rem, 2.5vw, 2rem); position: relative;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  transition: border-color .2s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.vcard:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow); }
.vcard__icon {
  width: 64px; height: 56px; display: grid; place-items: center; margin-bottom: 1.25rem;
  clip-path: var(--hex); background: #FDECEC; color: var(--flame);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.vcard__icon svg { width: 26px; height: 26px; }
.vcard:hover .vcard__icon { background: var(--flame); color: #fff; transform: translateY(-2px); }
.vcard h3 { margin-bottom: .5rem; }
.vcard p { color: var(--steel); font-size: var(--fs-sm); }
.vcard::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--thermal-x); transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.vcard:hover::after { transform: scaleX(1); }

/* Ürün grubu kartı */
.gcard {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  text-decoration: none; transition: border-color .2s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.gcard:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
/* Kartın alt kenarında hover'da soldan sağa ısınan şerit */
.gcard::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--thermal-x); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.gcard:hover::after, .gcard:focus-visible::after { transform: scaleX(1); }
.gcard__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sheet); position: relative; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gcard:hover .gcard__img img { transform: scale(1.07); }
/* Fotoğrafın üstüne hover'da sıcak bir tül iner */
.gcard__img::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(237,28,36,.28), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.gcard:hover .gcard__img::after { opacity: 1; }
.gcard__n {
  position: absolute; top: 0; inset-inline-start: 0; background: var(--ink); color: #fff; z-index: 2;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; padding: .35rem .6rem;
  transition: background .3s var(--ease);
}
.gcard:hover .gcard__n { background: var(--flame); }
.gcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.gcard__body h3 { color: var(--ink); }
.gcard:hover .gcard__body h3 { color: var(--flame); }
.gcard__body p { color: var(--steel); font-size: var(--fs-sm); flex: 1; }
.gcard__more { display: inline-flex; align-items: center; gap: .4rem; color: var(--flame); font-weight: 600; font-size: var(--fs-sm); margin-top: .35rem; }
.gcard__more svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.gcard:hover .gcard__more svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Kart ızgarası. Sütun sayısı açıkça tanımlı; böylece son satırda tek başına
   kalan kartı yakalayıp satırın tamamına yayabiliyoruz. 7 ürün grubu 3 sütunda
   3+3+1 olduğunda sonuncusu yalnız ve kırık duruyordu.

   Yayılan kart yatay düzene geçer — yoksa tam genişlikte devasa bir görsel
   oluşurdu. Yatay düzen kuralları her kırılma noktasında tekrarlanıyor, çünkü
   CSS "kaç sütun var" bilgisini seçiciye taşıyamıyor.
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--tight { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 1181px) {
  .cards > .gcard:last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
  .cards > .gcard:last-child:nth-child(4n + 3) { grid-column: span 2; }
  .cards > .gcard:last-child:nth-child(4n + 1),
  .cards > .gcard:last-child:nth-child(4n + 3) { flex-direction: row; align-items: stretch; }
  .cards > .gcard:last-child:nth-child(4n + 1) .gcard__img,
  .cards > .gcard:last-child:nth-child(4n + 3) .gcard__img { flex: 0 0 44%; aspect-ratio: auto; min-height: 250px; }
  .cards > .gcard:last-child:nth-child(4n + 1) .gcard__body,
  .cards > .gcard:last-child:nth-child(4n + 3) .gcard__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.25rem); }
  .cards > .gcard:last-child:nth-child(4n + 1) .gcard__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
  .cards > .gcard:last-child:nth-child(4n + 1) .gcard__body p { max-width: 48ch; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .cards, .cards--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards > .gcard:last-child:nth-child(3n + 1) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .cards > .gcard:last-child:nth-child(3n + 1) .gcard__img { flex: 0 0 44%; aspect-ratio: auto; min-height: 250px; }
  .cards > .gcard:last-child:nth-child(3n + 1) .gcard__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.25rem); }
  .cards > .gcard:last-child:nth-child(3n + 1) .gcard__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
  .cards > .gcard:last-child:nth-child(3n + 1) .gcard__body p { max-width: 48ch; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .cards, .cards--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > .gcard:last-child:nth-child(2n + 1) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .cards > .gcard:last-child:nth-child(2n + 1) .gcard__img { flex: 0 0 40%; aspect-ratio: auto; min-height: 210px; }
  .cards > .gcard:last-child:nth-child(2n + 1) .gcard__body { justify-content: center; }
}

@media (max-width: 620px) {
  .cards, .cards--tight { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hizmetler — proje akışı (sıra gerçekten anlam taşıyor)
   ========================================================================== */
/* Proje akışı: şerit kaydırdıkça dolar — proje ilk adımdan devreye almaya
   doğru ısınır. Sönük ray hep durur, sıcak dolgu okuma çizgisini takip eder. */
.flow { position: relative; display: grid; gap: 0; }
.flow::before {
  content: ''; position: absolute; inset-block: .9rem; inset-inline-start: 0; width: 3px;
  background: var(--rule); border-radius: 2px;
}
.flow::after {
  content: ''; position: absolute; inset-block: .9rem; inset-inline-start: 0; width: 3px;
  background: var(--thermal-down); border-radius: 2px;
  clip-path: inset(0 0 calc(100% - var(--flow-p) * 100%) 0);
}
.flow__step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--rule);
  align-items: start; position: relative;
}
.flow__step:last-child { border-bottom: 0; }
.flow__step { transition: background .3s var(--ease); }
.flow__n {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em;
  color: var(--steel); padding-inline-start: 1.35rem; padding-top: .3rem; position: relative;
  transition: color .4s var(--ease);
}
.flow__n::before {
  content: ''; position: absolute; inset-inline-start: -1.5px; top: .65rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--paper);
  border: 2px solid var(--rule); box-shadow: 0 0 0 3px var(--paper);
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
/* Şerit bir adıma ulaşınca o adımın noktası tutuşur */
.flow__step.is-lit .flow__n { color: var(--flame); }
.flow__step.is-lit .flow__n::before {
  border-color: var(--flame); background: var(--flame);
  box-shadow: 0 0 0 3px var(--paper), 0 0 13px 3px rgba(237,28,36,.65);
}
/* Üzerine gelinen adım, tutuşmuş olsun olmasın, en parlak hâline geçer.
   Bu kurallar is-lit'ten sonra gelmeli — aynı ağırlıkta, sonraki kazanır. */
.flow__step:hover { background: linear-gradient(90deg, rgba(237,28,36,.055), transparent 62%); }
.flow__step:hover .flow__n { color: var(--flame); }
.flow__step:hover .flow__n::before {
  border-color: var(--flame); background: var(--flame);
  box-shadow: 0 0 0 3px var(--paper), 0 0 16px 5px rgba(255,122,24,.75);
}
.sect--ink .flow__n::before { background: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
.flow__body h3 { margin-bottom: .4rem; }
.flow__body p { color: var(--steel); font-size: var(--fs-sm); max-width: 58rem; }
@media (max-width: 620px) {
  .flow__step { grid-template-columns: 2.75rem minmax(0,1fr); gap: .85rem; }
  .flow__n { padding-inline-start: 1.1rem; }
}

/* ==========================================================================
   Faaliyet alanları
   ========================================================================== */
.sector {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease);
}
/* Kartın üst kenarında hover'da ısınan şerit */
.sector::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--thermal-x); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.sector:hover::before { transform: scaleX(1); }
.sector__top h3 { font-size: 1.0625rem; }
.sector__more {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .08em;
  color: var(--steel-2); margin-top: auto; padding-top: .35rem;
}

/* Faaliyet alanları sayfası: madde sayıları çok farklı olduğu için kartlar
   sütunlara paketlenir; ızgarada oluşan boşluklar böylece kalkar. */
.sectors-packed { columns: 3; column-gap: clamp(1rem, 2vw, 1.5rem); }
.sectors-packed > .sector { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.5rem); display: block; }
.sectors-packed > .sector .sector__top { margin-bottom: 1rem; }
@media (max-width: 1180px) { .sectors-packed { columns: 2; } }
@media (max-width: 700px) { .sectors-packed { columns: 1; } }

/* Ana sayfadaki özet kartlar eşit yükseklikte durur */
.sectors-even { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.sectors-even > .sector { height: 100%; }
@media (max-width: 980px) { .sectors-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sectors-even { grid-template-columns: 1fr; } }
.sector:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-3px); }
.sector__top { display: flex; align-items: center; gap: .9rem; }
/* İkon, logodaki altıgen plakanın içinde durur — değer kartlarıyla aynı dil */
.sector__icon {
  width: 46px; height: 40px; flex: none; display: grid; place-items: center;
  clip-path: var(--hex); background: #FDECEC; color: var(--flame);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.sector__icon svg { width: 21px; height: 21px; }
.sector:hover .sector__icon { background: var(--flame); color: #fff; transform: translateY(-2px); }
.sector__list { display: grid; gap: .6rem; }
.sector__list li {
  position: relative; padding-inline-start: 1.15rem; font-size: var(--fs-sm); color: var(--steel); line-height: 1.6;
}
.sector__list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .62em;
  width: 5px; height: 5px; background: var(--flame); border-radius: 1px;
}

/* ==========================================================================
   İstatistik / hakkımızda bandı
   ========================================================================== */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about__text p + p { margin-top: 1rem; }
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 900px) { .about__media img { aspect-ratio: 16 / 10; } }
.about__media::before {
  content: ''; position: absolute; inset-inline-start: -14px; top: -14px; width: 96px; height: 96px;
  border-inline-start: 3px solid var(--flame); border-top: 3px solid var(--flame);
}
/* Ayrı ayrı çerçeveli sayı kutuları — mevcut sitedeki istatistik kartları gibi */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2.25rem; }
.stat {
  padding: 1.25rem 1.1rem; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r);
  background: rgba(255,255,255,.04);
}
.sect--sheet .stat, .sect--paper .stat { border-color: var(--rule); background: var(--paper); }
/* Sayaç çalışırken altına ısınan bir çizgi çekilir */
.stat::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--thermal-x); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.stat.is-lit::after { transform: scaleX(1); }
.stat__v { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--flame); }
.stat__l { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: .5rem; }
.sect--ink .stat__l { color: rgba(255,255,255,.55); }

/* ==========================================================================
   Referanslar
   ========================================================================== */
/* Tek şerit hâli — ana sayfada hero'nun hemen altında sosyal kanıt olarak */
.refstrip { border-block: 1px solid var(--rule); background: var(--paper); }
.refstrip__in { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); padding-block: 2.4rem; }
.refstrip__label {
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  flex: none; max-width: 13rem; line-height: 1.5;
}
/* Logolar durmadan akar. İki özdeş kopya yan yana durur; şerit tam bir kopya
   kadar kayıp başa döndüğü için ek yeri görünmez. Kopyanın sağ boşluğu
   iç aralıkla aynı olmalı — bu yüzden aralık padding olarak veriliyor. */
.refstrip__logos {
  --refgap: clamp(1.5rem, 2.6vw, 2.75rem);
  flex: 1; min-width: 0; overflow: hidden; padding-block: .25rem;
  mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.refstrip__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.refstrip__logos:hover .refstrip__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.refstrip__set {
  display: flex; align-items: center; gap: var(--refgap); padding-inline-end: var(--refgap);
}
.refstrip__set img {
  height: 74px; width: auto; flex: none; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .28s var(--ease), opacity .28s var(--ease);
}
.refstrip__set img:hover { filter: none; opacity: 1; }
@media (max-width: 780px) {
  .refstrip__in { flex-direction: column; align-items: stretch; gap: .9rem; padding-block: 1.9rem; }
  .refstrip__label { max-width: none; font-size: .75rem; letter-spacing: .1em; }
  /* Masaüstü ölçüsündeki 74 px'lik logolar 350 px'lik şeride sığmıyor,
     ekranda iki tane kalıp kenarlardan kesiliyordu. Telefonda küçültülür. */
  .refstrip__logos { --refgap: 1.75rem; mask-image: linear-gradient(to right, transparent 0, #000 1.25rem, #000 calc(100% - 1.25rem), transparent 100%); }
  .refstrip__set img { height: 44px; }
}
@media (max-width: 420px) {
  .refstrip__set img { height: 38px; }
  .refstrip__logos { --refgap: 1.35rem; }
}

/* Hücre çizgileri kutuların kendi kenarlıklarıyla çizilir; zemin boşluk
   rengiyle doldurulmaz. Böylece son satırda artan boş hücre gri bir kutu
   olarak görünmez, sayfayla birlikte kaybolur. */
.refs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--paper); border: 1px solid var(--rule); border-width: 1px 0 0 1px;
  border-radius: var(--r); overflow: hidden;
}
@media (max-width: 900px) { .refs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ref {
  background: var(--paper); aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 1.25rem;
  border: 0 solid var(--rule); border-right-width: 1px; border-bottom-width: 1px;
  transition: background .2s var(--ease);
}
.ref:hover { background: var(--sheet); }
.ref img {
  max-height: 72px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .68; transition: filter .28s var(--ease), opacity .28s var(--ease);
}
.ref:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   CTA bandı
   ========================================================================== */
/* Harekete çağrı bandı: sitenin en sıcak noktası. Katmanlar alttan üste —
   hale (0), korlar (1), içerik (2), üstteki termal şerit (3). */
.cta { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.cta::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 3;
  background: var(--thermal-x);
}
/* Şerit bant göründüğünde çizilir. :has yoksa şerit sabit durur, kaybolmaz. */
@supports selector(:has(*)) {
  .js .cta::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
  .js .cta:has([data-reveal].is-in)::before { transform: scaleX(1); }
}
/* Koyu bantta iki odaklı sıcaklık halesi */
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(46% 150% at 88% 8%,  rgba(237,28,36,.30) 0%, transparent 66%),
    radial-gradient(38% 130% at 12% 100%, rgba(255,122,24,.20) 0%, transparent 68%),
    var(--honey-light);
  background-size: auto, auto, var(--honey-size);
}
.cta .sparks { z-index: 1; }
.cta__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta h2 { margin-bottom: .6rem; }
.cta p { color: rgba(255,255,255,.72); max-width: 42rem; }
.cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 820px) { .cta__in { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sayfa başlığı (iç sayfalar)
   ========================================================================== */
.phead { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.phead::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--honey-light);
  background-size: var(--honey-size);
  mask-image: linear-gradient(to right, #000, transparent 74%);
}
/* İç sayfa başlığında da aynı sıcaklık, daha sakin. */
.phead__flame {
  position: absolute; inset-inline: 0; bottom: 0; height: 60%;
  z-index: -1; pointer-events: none; transform-origin: bottom;
  background:
    radial-gradient(110% 100% at 22% 100%, rgba(255,122,24,.10) 0%, transparent 62%),
    radial-gradient(90% 100% at 70% 100%, rgba(237,28,36,.08) 0%, transparent 58%);
}
.js .phead__flame { animation: flameBreath 7.5s ease-in-out infinite alternate; }

/* İç sayfa başlığının alt şeridi açılışta soldan sağa çizilir */
.phead::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--thermal-x);
}
.js .phead::after { transform: scaleX(0); transform-origin: left; animation: rule-draw 1.2s var(--ease) .2s forwards; }
@keyframes rule-draw { to { transform: scaleX(1); } }
.phead__in { padding-block: clamp(2.5rem, 5vw, 4rem); }
.phead h1 { margin-block: .85rem .6rem; }
.phead p { color: rgba(255,255,255,.74); max-width: 46rem; }
.phead--media { background: var(--ink-2); }
.phead__bg { position: absolute; inset: 0; z-index: -2; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }

.crumbs { font-family: var(--mono); font-size: var(--fs-xs); color: rgba(255,255,255,.5); display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--flame-on-dark); }
.crumbs__sep { opacity: .4; }

/* ==========================================================================
   Ürün detay
   ========================================================================== */
.pdetail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .pdetail { grid-template-columns: 1fr; } }
.pdetail__media { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper); position: sticky; top: 100px; }
@media (max-width: 900px) { .pdetail__media { position: static; } }
.pdetail__media img { width: 100%; transition: transform .7s var(--ease); }
.pdetail__media:hover img { transform: scale(1.05); }
.prose { font-size: clamp(1rem, 1.3vw, 1.0625rem); line-height: 1.8; color: var(--ink-3); }
.prose p + p { margin-top: 1.1rem; }
.spec { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.5rem; display: grid; gap: .85rem; }
.spec__row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; font-size: var(--fs-sm); align-items: baseline; }
.spec__k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
@media (max-width: 520px) { .spec__row { grid-template-columns: 1fr; gap: .2rem; } }

/* ==========================================================================
   Küçük ürün kartı — ürün detayında ve arama sonuçlarında
   ========================================================================== */
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.15rem); }
@media (max-width: 1024px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  text-decoration: none; position: relative;
  transition: border-color .2s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
.mini:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow); }
.mini::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--thermal-x); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.mini:hover::after { transform: scaleX(1); }
.mini__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sheet); }
.mini__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mini:hover .mini__img img { transform: scale(1.07); }
.mini__t {
  display: block; padding: .8rem .9rem .35rem; font-family: var(--display); font-weight: 600;
  font-size: 1rem; line-height: 1.25; color: var(--ink);
}
.mini:hover .mini__t { color: var(--flame); }
.mini__g {
  display: block; padding: 0 .9rem .9rem; margin-top: auto;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel-2);
}
.mini__t:last-child { padding-bottom: .9rem; }

/* ==========================================================================
   Ürün arama — grup kartlarının üstünde, sunucuya gitmeden süzer
   ========================================================================== */
.finder { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); max-width: 34rem; }
.finder[hidden] { display: none; }
.finder__label {
  display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin-bottom: .6rem;
}
.finder__box {
  display: flex; align-items: center; gap: .7rem; padding: .2rem .85rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.finder__box:focus-within { border-color: var(--flame); box-shadow: 0 0 0 3px rgba(237,28,36,.12); }
.finder__box > svg:first-child { width: 19px; height: 19px; color: var(--steel-2); flex: none; }
.finder__box:focus-within > svg:first-child { color: var(--flame); }
.finder input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: .85rem 0; font-size: var(--fs-body);
}
.finder input::-webkit-search-cancel-button { display: none; }
.finder__clear { display: grid; place-items: center; padding: .35rem; color: var(--steel); flex: none; }
.finder__clear:hover { color: var(--flame); }
.finder__clear svg { width: 17px; height: 17px; }
.finder__clear[hidden] { display: none; }
.finder__empty {
  padding: clamp(2rem, 5vw, 3.5rem) 0; text-align: center; color: var(--steel);
  font-size: var(--fs-body);
}
.finder__empty[hidden], [data-finder-results][hidden], [data-finder-groups][hidden] { display: none; }
.mini[hidden] { display: none; }

/* Diğer ürünler şeridi */
.siblings { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; padding: .5rem .85rem; font-size: var(--fs-sm);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill); text-decoration: none;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   İletişim
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.cinfo { display: grid; gap: 1.5rem; }
.cinfo__row { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; }
.cinfo__ico { width: 42px; height: 37px; display: grid; place-items: center; background: var(--ink); color: #fff; clip-path: var(--hex); }
.cinfo__ico svg { width: 17px; height: 17px; }
.cinfo__k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.cinfo__v { font-size: var(--fs-body); font-weight: 500; text-decoration: none; line-height: 1.5; }
a.cinfo__v:hover { color: var(--flame); }

.form { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.25rem); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.field label .req { color: var(--flame); }
.field input, .field textarea {
  padding: .85rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--sheet); font-size: var(--fs-sm); transition: border-color .18s, background .18s;
}
.field input:focus, .field textarea:focus { background: var(--paper); border-color: var(--ink); outline-offset: 1px; }
.field textarea { resize: vertical; min-height: 130px; }
.field__err { font-size: var(--fs-xs); color: var(--flame); display: none; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--flame); }
.field[data-invalid="true"] .field__err { display: block; }
.form__note { font-size: var(--fs-xs); color: var(--steel); margin-top: .9rem; line-height: 1.55; }
.form__msg { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r); font-size: var(--fs-sm); display: none; }
.form__msg[data-state="ok"] { display: block; background: #E8F5EC; color: #14683A; border: 1px solid #B9E0C7; }
.form__msg[data-state="err"] { display: block; background: #FDECEC; color: #A31419; border: 1px solid #F6C9CA; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.map { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; margin-top: 2rem; background: var(--sheet); }
.map iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
/* Alt bilgi: hero ile aynı çizim sayfası ızgarası ve köşede sönümlenen kor.
   Bir üstündeki CTA bandından ince bir çizgiyle ayrılır. */
.ftr {
  background: var(--ink); color: rgba(255,255,255,.66); font-size: var(--fs-sm);
  position: relative; overflow: hidden; isolation: isolate;
  border-top: 1px solid rgba(255,255,255,.09);
}
.ftr::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(44% 120% at 92% 4%, rgba(237,28,36,.20) 0%, transparent 68%),
    radial-gradient(34% 100% at 6% 96%, rgba(29,78,143,.20) 0%, transparent 70%),
    var(--honey-light);
  background-size: auto, auto, var(--honey-size);
}
.ftr > .wrap { position: relative; z-index: 1; }
.ftr__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3rem); padding-block: clamp(3rem, 5vw, 4rem); }
@media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__logo img { height: 50px; width: auto; margin-bottom: 1.1rem; }
.ftr h4 { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--flame-on-dark); margin-bottom: 1rem; }
.ftr ul { display: grid; gap: .6rem; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr__contact { display: grid; gap: .85rem; }
.ftr__contact div { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; }
.ftr__contact svg { width: 15px; height: 15px; opacity: .6; margin-top: .28em; }
.ftr__social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.ftr__social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); transition: background .18s, border-color .18s;
}
.ftr__social a:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.ftr__social svg { width: 16px; height: 16px; }
.ftr__btm {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  font-size: var(--fs-xs); color: rgba(255,255,255,.45);
}
.ftr__btm .sep { margin-inline-start: auto; }


/* Yukarı çık — WhatsApp'ın hemen üstünde, sayfa bir ekran kaydırılınca belirir */
.totop {
  position: fixed; inset-block-end: 5.5rem; inset-inline-end: 1.25rem; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s var(--ease);
}
.totop[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--flame); }
.totop svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .totop { inset-block-end: 5rem; width: 40px; height: 40px; } }


/* ==========================================================================
   Mobil ince ayar
   Ölçümle bulunan sorunlar: bağlantıların çoğu 18-26 px yüksekliğindeydi,
   yani parmak hedefi olarak küçüktü. Görünüm aynı kalsın diye yazı boyutu
   değil, yalnızca dokunma payı büyütüldü.
   ========================================================================== */
@media (max-width: 640px) {
  .topbar__in { min-height: 46px; gap: 1rem; }
  .topbar__item { padding-block: .75rem; }
  .topbar__item:not(.topbar__mail) { min-width: 38px; justify-content: center; }
  .lnk { padding-block: .4rem; }
  .ftr ul { gap: .15rem; }
  .ftr ul a { display: inline-block; padding-block: .45rem; }
  .ftr__contact a { display: inline-block; padding-block: .2rem; }
  .ftr__social a { width: 44px; height: 44px; }
  .ftr__btm { padding-block: 1.1rem; }
  .ftr__btm .sep { margin-inline-start: 0; flex-basis: 100%; }
  /* Bölüm başlığı ile içerik arasındaki boşluk telefonda gereğinden genişti */
  .sect__head { margin-bottom: 1.75rem; }
}

@media print { .totop, .hdr, .topbar { display: none; } }

/* ==========================================================================
   Hareket
   ========================================================================== */
/* Yalnızca JS gerçekten çalışıyorsa gizle (html.js — head'de eklenir).
   Böylece JS'siz tarayıcıda ve arama motoru önizlemesinde içerik hep görünür. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal-delay="1"].is-in { transition-delay: .07s; }
[data-reveal-delay="2"].is-in { transition-delay: .14s; }
[data-reveal-delay="3"].is-in { transition-delay: .21s; }
[data-reveal-delay="4"].is-in { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  /* Hareket kapalıyken: şeritler dolu, kor sönük, logo bandı elle kaydırılır.
     Yukarıdaki genel kural animasyonları anında bitirdiği için, kayan bandın
     sona atlayıp ilk kopyayı gizlememesi adına animasyon büsbütün kaldırılır. */
  html.js { --scroll-p: 1; --flow-p: 1; }
  .js .thermo__bar { transform: none; animation: none; }
  .js .thermo__bar::after { opacity: .55; animation: none; }
  .js .thermo__tick, .js .hero__slide[data-active="true"] > * { animation: none; }
  .js .phead::after { transform: none; animation: none; }
  .js .label::before, .js [data-reveal] .label::before { transform: none; }
  .js .hero__flame, .js .phead__flame { animation: none; opacity: .85; transform: none; }
  .refstrip__track { animation: none; }
  .refstrip__logos { overflow-x: auto; scrollbar-width: none; }
  .refstrip__logos::-webkit-scrollbar { display: none; }
  .flow__step .flow__n::before { border-color: var(--flame); }
  .stat::after { transform: scaleX(1); }
  @supports selector(:has(*)) { .js .cta::before { transform: scaleX(1); } }
}