@charset "UTF-8";

/* ===================================================================
   SERVISASSIST TASARIM SİSTEMİ (Eylül 2026)
   Konumlandırma: usta atölyesi — sağlam, net, dürüst.
   Karakter: dar ve ağır başlık yazısı (Barlow Condensed, büyük harf),
   keskin köşeler, kalın kırmızı çizgiler, atölye uyarı şeridi.

   Renk mimarisi:
     kırmızı (#D0191F)  -> birincil düğme, vurgu, arıza noktaları, bant
     koyu kırmızı (#A3121A) -> kırmızı zemin bölümleri, sayfa başlığı
     mürekkep (#161616) -> metin
     beyaz / kâğıt (#FFFFFF / #F6F4F3) -> zeminler
   Kırmızı küçük metin rengi olarak yalnız 700 tonuyla kullanılır
   (#A3121A beyazda 7,4:1).
   Değişken adları (navy-*, action-*, krem-*) miras; öne çıkan marka
   temaları bu adları ezer.
   =================================================================== */

/* --- Fontlar: CSP default-src 'self' olduğu için tamamı yerelden ---- */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400-latin-ext.5bab67173550.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-400-latin.b9b596c7d618.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-600-latin-ext.4dc82cb682f0.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Barlow";
  src: url("../fonts/barlow-600-latin.862116afc1c2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-latin-ext.1e15ebe30c45.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-600-latin.965395aad327.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800-latin-ext.86331cfa67ff.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-800-latin.f0951e815d3d.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* Mürekkep skalası — "navy" adı miras */
  --navy-50: #f5f3f2;
  --navy-100: #ebe7e5;
  --navy-200: #d6d0cd;
  --navy-400: #6e6764;
  --navy-600: #3a3534;
  --navy-800: #161616;
  --navy-900: #0d0d0d;
  --koyu-mute: #f3c9ca;

  /* Açık yüzeyler: sıcak kâğıt beyazı */
  --krem-50: #fcfbfb;
  --krem-100: #f6f4f3;
  --krem-200: #ebe7e5;

  /* Kırmızı — marka rengi */
  --action-50: #fdecec;
  --action-500: #d0191f;
  --action-600: #b5141a;
  --action-700: #a3121a;
  --kirmizi: #d0191f;
  --kirmizi-koyu: #a3121a;
  --kirmizi-derin: #7d0c12;

  /* Nötrler */
  --ink: #161616;
  --ink-soft: #3a3534;
  --ink-mute: #6e6764;
  --line: #e4dfdd;
  --surface: #f6f4f3;
  --card: #ffffff;
  --white: #ffffff;

  --success: #157f4e;
  --danger: #a3121a;

  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --t-hero: clamp(2.9rem, 1.8rem + 4.6vw, 5.75rem);
  --t-h2: clamp(2rem, 1.45rem + 2.2vw, 3rem);
  --t-h3: 1.4rem;
  --t-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-label: 0.75rem;

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 6vw, 6rem);

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* Köşeler bilerek küçük: yumuşak kart estetiğinden uzak duruluyor. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 2px;
  --r-full: 999px;

  --koyu-rgb: 125, 12, 18;

  --sh-sm: 0 1px 2px rgba(22, 22, 22, 0.05);
  --sh-md: 0 4px 12px rgba(22, 22, 22, 0.07), 0 1px 3px rgba(22, 22, 22, 0.05);
  --sh-lg: 0 16px 40px rgba(22, 22, 22, 0.12), 0 4px 10px rgba(22, 22, 22, 0.06);
  --focus: 0 0 0 3px rgba(208, 25, 31, 0.35);
}

/* ------------------------------- temel ---------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

body.kilitli {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h1 {
  font-size: var(--t-hero);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 800;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
}

p {
  margin: 0 0 var(--s4);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--navy-800);
  color: var(--white);
  border-radius: 0 0 var(--r-sm) 0;
}

.skip:focus {
  left: 0;
}

.gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Bölüm ritmi: koyu -> beyaz -> açık, aynı zemin arka arkaya gelmez. */
.bolum {
  padding-block: var(--section-y);
  background: var(--white);
}

.bolum-beyaz {
  background: var(--white);
}

.bolum-acik {
  background: var(--surface);
}

.bolum-koyu {
  background: var(--navy-800);
  color: var(--white);
}

.bolum-koyu h2,
.bolum-koyu h3 {
  color: var(--white);
}

.bolum-bas {
  max-width: 720px;
  margin-bottom: var(--s7);
}

.bolum-bas p {
  margin-top: var(--s3);
  font-size: var(--t-lead);
  color: var(--ink-soft);
}

.bolum-koyu .bolum-bas p {
  color: var(--navy-100);
}

.etiket {
  display: inline-block;
  margin-bottom: var(--s3);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action-700);
}

.bolum-koyu .etiket,
.hero .etiket,
.sayfa-bas .etiket {
  color: var(--navy-200);
}

.lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 68ch;
}

.bolum-koyu .lead {
  color: var(--navy-100);
}

/* ------------------------------ butonlar -------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.85rem 1.5rem;
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Bir ekranda yalnızca tek birincil buton bulunmalıdır. */
.btn-birincil {
  background: var(--navy-800);
  color: var(--white);
}

.btn-birincil:hover {
  background: var(--navy-600);
}

.btn-birincil:active {
  background: var(--navy-900);
}

.marka-temali .btn-birincil {
  background: var(--action-500);
}

.marka-temali .btn-birincil:hover {
  background: var(--action-600);
}

.marka-temali .btn-birincil:active {
  background: var(--action-700);
}

/* Koyu zeminde birincil düğme ters döner: beyaz zemin, kömür yazı. */
.bolum-koyu .btn-birincil,
.sayfa-bas .btn-birincil,
.hero .btn-birincil {
  background: var(--white);
  color: var(--navy-800);
}

.bolum-koyu .btn-birincil:hover,
.sayfa-bas .btn-birincil:hover,
.hero .btn-birincil:hover {
  background: var(--navy-50);
}

.btn-buyuk {
  padding: 1rem 1.75rem;
  min-height: 54px;
  font-size: 1.0625rem;
}

.btn-header {
  padding: 0.6rem 1.1rem;
  min-height: 40px;
  font-size: var(--t-sm);
  white-space: nowrap;
}

.btn.gonderiliyor {
  opacity: 0.7;
  cursor: progress;
}

.btn-ikincil {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--navy-200);
}

.btn-ikincil:hover {
  border-color: var(--navy-400);
  background: var(--navy-50);
}

.bolum-koyu .btn-ikincil,
.hero .btn-ikincil {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
}

.bolum-koyu .btn-ikincil:hover,
.hero .btn-ikincil:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn-tam {
  width: 100%;
}

.link-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  color: var(--navy-600);
}

.link-ok:hover {
  color: var(--navy-800);
  text-decoration: underline;
  text-decoration-color: var(--action-500);
  text-underline-offset: 4px;
}

/* ------------------------------- başlık --------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}

.kaydirildi .header {
  box-shadow: 0 6px 24px rgba(22, 22, 22, 0.06);
}

.header-ic {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: 76px;
  transition: min-height 0.25s ease;
}

.kaydirildi .header-ic {
  min-height: 64px;
}

/* Logo: sembol + büyük harf kelime markası. Sembol currentColor ile çizilir,
   düğüm her zeminde turkuaz kalır. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-800);
  text-decoration: none;
}

.logo-sembol {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.logo-dugum {
  fill: var(--action-500);
}

.logo-yazi {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.ana-nav {
  display: flex;
  gap: var(--s5);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.ana-nav a {
  display: inline-block;
  padding-block: var(--s2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ana-nav a:hover {
  color: var(--navy-800);
  border-bottom-color: var(--action-500);
}

.header-aksiyon {
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* Menü listesi gizlenince aradaki nav boş kalır; eylemler yine sağa yaslanır. */
  margin-left: auto;
}

.menu-btn {
  display: none;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  min-height: 40px;
  background: transparent;
  border: 1px solid var(--navy-200);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
}

/* çekmece */
.cekmece-arka {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(7, 21, 40, 0.5);
}

.cekmece {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(360px, 88vw);
  padding: var(--s5);
  overflow-y: auto;
  background: var(--white);
  box-shadow: var(--sh-lg);
}

.cekmece-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.cekmece-bas button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}

.cekmece nav {
  display: flex;
  flex-direction: column;
}

.cekmece nav a {
  padding: var(--s3) 0;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.cekmece-baslik {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Çekmecede "Cihazlar" başlığının altındaki bölüm etiketi; üst başlıktan
   (.cekmece-baslik) bir kademe küçük ve girintisiz durur. */
.cekmece-altbaslik {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
}

.cekmece nav .cekmece-altbaslik a {
  padding: 0;
  border-bottom: 0;
  font: inherit;
}

.cekmece-cihaz {
  display: grid;
  gap: var(--s2);
}

.cekmece-cihaz a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
}

.cekmece-cihaz a:hover {
  border-color: var(--navy-400);
  background: var(--navy-50);
}

.cekmece-cihaz svg {
  color: var(--navy-600);
  flex: 0 0 auto;
}

/* -------------------------------- hero ---------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  color: var(--white);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

/* Hero fotoğrafı sağdan girer, sola doğru lacivertte erir. Metin daima
   düz lacivert üstünde kalır; kontrast fotoğrafın parlaklığına bağlı olmaz. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  background-image: url("../img/hero.fa72910aa87b.jpg");
  background-size: cover;
  background-position: center right;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--navy-800) 0%,
    var(--navy-800) 34%,
    rgba(var(--koyu-rgb), 0.92) 46%,
    rgba(var(--koyu-rgb), 0.55) 68%,
    rgba(var(--koyu-rgb), 0.35) 100%
  );
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--s5);
}

.hero-lead {
  font-size: var(--t-lead);
  color: var(--navy-100);
  max-width: 52ch;
  margin-bottom: var(--s6);
}

.hero-madde {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  list-style: none;
}

.hero-madde li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 500;
}

.hero-madde svg {
  color: var(--navy-200);
  flex: 0 0 auto;
}

/* Tek renkli marka temalarında (ör. Arçelik kırmızısı) koyu zemin ile
   birincil düğme aynı aileden gelir ve düğme zeminde kaybolur. Varsayılan
   palette bu sorun yoktu: zemin lacivert, düğme turuncuydu. Koyu bölümlerde
   düğme ters çevrilir — beyaz zemin, temanın koyu tonunda yazı. */

.marka-temali .hero .btn-birincil,
.marka-temali .sayfa-bas .btn-birincil,
.marka-temali .bolum-koyu .btn-birincil {
  background: var(--white);
  color: var(--navy-800);
}

.marka-temali .hero .btn-birincil:hover,
.marka-temali .sayfa-bas .btn-birincil:hover,
.marka-temali .bolum-koyu .btn-birincil:hover {
  background: var(--navy-50);
}

.marka-temali .hero .btn-birincil:active,
.marka-temali .sayfa-bas .btn-birincil:active,
.marka-temali .bolum-koyu .btn-birincil:active {
  background: var(--navy-100);
}


/* Marka merkezinin haritalı hero'su. Ana sayfadaki hero ile aynı ızgara;
   sağ sütunda form kartı yerine o markanın hizmet bölgesi haritası durur.
   Fotoğraf katmanı kapatılır: harita zaten açık renkli bir kart, arkasındaki
   fotoğrafla üst üste geldiğinde iki görsel birbiriyle yarışıyor. */

.hero-haritali::before {
  display: none;
}

/* Beyazdan kırmızıya geçiş. Yön soldan sağa: beyaz uç haritanın altına,
   kırmızı uç metnin altına denk gelir — metin beyaz olduğu için tamamen
   doygun kırmızının üstünde kalmak zorunda. Geçiş %62'de bitirilir; metin
   sütunu (kabın ~%68'inden sonra) düz kırmızıda durur. */

.hero-haritali::after {
  background: linear-gradient(
    100deg,
    var(--white) 0%,
    var(--navy-50) 18%,
    var(--navy-200) 36%,
    var(--navy-600) 62%,
    var(--navy-800) 100%
  );
}

/* Beyaz zeminde beyaz kart sınırını kaybediyor; ince bir kenarlık kalıyor. */
.hero-harita .harita {
  border-color: var(--line);
  box-shadow: var(--sh-md);
}

/* Kart zaten yüksek; hero'nun kendi boşluğu kısılmazsa koyu zemin gereğinden
   geniş bir şerit olarak kalıyor. */
.hero-haritali {
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.hero-haritali .btn-birincil {
  margin-top: var(--s6);
}

/* Ağırlık haritada: kap genişliğinin ~%72'sini harita kartı kaplar, metin
   sağda dar bir sütuna iner. İki gerekçe var — harita bu sayfanın asıl işlevi
   (bölge seçimi), ve beyaz kart geniş yer kaplayınca kırmızı zemin ince bir
   çerçeveye düşer; tek renkli temada geniş koyu alan ağır duruyordu.
   DOM sırası değiştirilmedi: H1 hâlâ ilk gelir, harita `order` ile öne alınır. */

.hero-haritali .wrap {
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  align-items: center;
}

.hero-harita {
  order: -1;
}

.hero-harita .harita {
  margin-bottom: 0;
}

/* Dar metin sütunu: maddeler yan yana sığmaz, alt alta iner. */

.hero-haritali h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.4rem);
}

.hero-haritali .hero-lead {
  font-size: 1rem;
  margin-bottom: var(--s5);
}

.hero-haritali .hero-madde {
  flex-direction: column;
  gap: var(--s2);
}

.hero-haritali .btn {
  width: 100%;
  justify-content: center;
}

/* Hero yüksekliği il seçilince patlamasın. Geniş yerleşimde ilçe listesi
   haritanın yanına sığar, o yüzden kaydırma sınırı cömert tutulabilir. */

.harita-genis .harita-tuval svg {
  max-height: 320px;
}

/* Geniş kartta ilçe paneline iki kolon sığar; tek kolonda 39 ilçelik bir il
   gereksiz yere kaydırılıyordu. */
.harita-genis.harita-il-acik .harita-govde {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
}

.harita-genis .harita-ilce-listesi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 300px;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .hero-haritali .wrap {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .hero-haritali .wrap {
    grid-template-columns: 1fr;
  }

  /* Tek kolonda geçiş dikeye döner: üstte başlık ve metin kırmızıda kalsın,
     beyaz uç aşağıda haritanın arkasına düşsün. Yatay kalsaydı beyaz metin
     beyaz zeminin üstüne gelirdi. */
  .hero-haritali::after {
    background: linear-gradient(
      180deg,
      var(--navy-800) 0%,
      var(--navy-600) 45%,
      var(--navy-200) 72%,
      var(--white) 100%
    );
  }

  /* Telefonda başlık haritadan önce gelmeli; `order` sıfırlanır. */
  .hero-harita {
    order: 0;
  }

  .hero-haritali .hero-madde {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-haritali .btn {
    width: auto;
  }
}


/* ---------------------------- cihaz grid -------------------------- */

.cihaz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.cihaz-kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cihaz-kart:hover {
  transform: translateY(-3px);
  border-color: var(--krem-200);
  box-shadow: var(--sh-lg);
}

.cihaz-kart > :not(.kart-gorsel) {
  margin-inline: var(--s5);
}

.cihaz-kart h3 {
  margin-top: var(--s4);
}

/* --------------------- kart fotoğraf başlığı ----------------------
   Ürün fotoğrafları beyaz fonda çekilmiştir. mix-blend-mode: multiply
   beyaz fonu krem zeminde eritir; cihaz kesilmiş gibi durur, gölgesi
   korunur. Zemin krem olmak zorundadır — beyaz zeminde etki kaybolur. */

.kart-gorsel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--krem-100);
  border-bottom: 1px solid var(--line);
}

/* Cihaz kartları dokuz adet; grup kartlarıyla aynı yükseklikte fotoğraf
   sayfayı gereksiz uzatır, bu yüzden daha basık bir oran kullanılır. */
.cihaz-kart .kart-gorsel {
  aspect-ratio: 16 / 9;
}

.cihaz-kart .yan-kart .kart-gorsel {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.kart-ikon {
  width: 32px;
  height: 32px;
}

.kart-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s4);
  mix-blend-mode: multiply;
  transition: transform 0.35s ease;
}

.cihaz-kart:hover .kart-gorsel img,
.grup-kart:hover .kart-gorsel img {
  transform: scale(1.04);
}

/* Fotoğrafın köşesindeki ikon rozeti cihaz tipini bir bakışta verir. */
.yan-kart .kart-gorsel {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.kart-ikon {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--navy-600);
  box-shadow: var(--sh-sm);
}

.ikon-daire {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  background: var(--navy-800);
  color: var(--white);
  flex: 0 0 auto;
}

.cihaz-kart h3 {
  margin-bottom: var(--s3);
}

.cihaz-belirti {
  list-style: none;
  margin-bottom: var(--s4);
  flex: 1 1 auto;
}

.cihaz-belirti li {
  position: relative;
  padding-left: var(--s4);
  margin-bottom: var(--s1);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.cihaz-belirti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy-200);
}

.cihaz-kart .link-ok {
  font-size: var(--t-sm);
}

/* ------------------------------- süreç ---------------------------- */

.surec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  list-style: none;
}

.surec li {
  position: relative;
  padding: var(--s6) var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Arka plandaki büyük rakam sırayı taşır, dikkati dağıtmaz. */
.surec li::after {
  content: attr(data-adim);
  position: absolute;
  top: -0.35em;
  right: 0.1em;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-50);
  pointer-events: none;
}

.surec h3 {
  position: relative;
  margin-bottom: var(--s3);
}

.surec p {
  position: relative;
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.surec .sure {
  display: inline-block;
  margin-top: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  background: var(--krem-100);
  color: var(--navy-600);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* ----------------------------- taahhütler ------------------------- */

.taahhut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
  list-style: none;
}

.taahhut li {
  padding-left: var(--s6);
  border-left: 2px solid var(--navy-400);
}

.taahhut h3 {
  margin-bottom: var(--s2);
  font-size: 1.35rem;
}

.taahhut p {
  color: var(--navy-100);
  font-size: var(--t-sm);
}

/* --------------------------- şeffaflık ---------------------------- */

.seffaf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
}

.seffaf-kart {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.seffaf-kart h2,
.seffaf-kart h3 {
  margin-bottom: var(--s3);
  font-size: 1.1rem;
  font-weight: 700;
}

.seffaf-kart p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* ------------------------- sık sorulanlar ------------------------- */

/* Soru-cevap listesi. Aynı içerik FAQPage olarak da işaretlenir; bu yüzden
   cevaplar her zaman açık durur, akordeon içinde gizlenmez. */
.sss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s5);
}

.sss-oge {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.sss-oge dt {
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-800);
}

.sss-oge dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* -------------------------- cihaz grupları ------------------------ */

.grup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.grup-kart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.grup-kart:hover {
  transform: translateY(-3px);
  border-color: var(--krem-200);
  box-shadow: var(--sh-lg);
}

.grup-kart .kart-govde {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--s5);
}

.grup-kart h3 {
  margin-bottom: var(--s3);
}

.grup-kart p {
  flex: 1 1 auto;
  margin-bottom: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* ------------------------ servis özellikleri ---------------------- */

.ozellik {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.ozellik .ikon-daire {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s3);
}

.ozellik-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6) var(--s5);
}

.ozellik h3 {
  margin: var(--s4) 0 var(--s2);
  font-size: 1.1rem;
}

.ozellik p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* ---------------------------- yorumlar ---------------------------- */

.yorum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s5);
}

.yorum {
  margin: 0;
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.yorum-puan {
  display: flex;
  gap: 2px;
  margin-bottom: var(--s3);
  color: var(--action-500);
}

/* Puan yıldızları dolu gösterilir. */
.yorum-puan svg {
  fill: currentColor;
  stroke: none;
}

.yorum blockquote {
  margin: 0 0 var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}

.yorum figcaption {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
}

/* --------------------------- kayıt takip -------------------------- */

.takip-kutu {
  margin-bottom: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--krem-200);
  border-radius: var(--r-md);
  background: var(--krem-50);
  text-align: center;
}

.takip-kod {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--navy-800);
}

.takip-cizelge {
  list-style: none;
  counter-reset: none;
}

.takip-cizelge li {
  position: relative;
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding-bottom: var(--s5);
}

/* Adımları birbirine bağlayan dikey çizgi; son adımda çizilmez. */
.takip-cizelge li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
}

.takip-nokta {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 2px solid var(--line);
  background: var(--white);
  color: transparent;
}

.takip-cizelge li.etkin .takip-nokta {
  border-color: var(--action-500);
  background: var(--action-500);
  color: var(--white);
}

.takip-cizelge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.takip-cizelge li.etkin strong {
  color: var(--ink);
}

.takip-cizelge span {
  font-size: var(--t-xs);
  color: var(--navy-600);
}

/* --------------------------- kimlik kartı ------------------------- */

/* Yeni bir marka için en güçlü güven sinyali doğrulanabilir kimliktir. */
.kimlik {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4) var(--s6);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.kimlik div {
  min-width: 0;
}

.kimlik dt {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kimlik dd {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ------------------------------ formlar --------------------------- */

.alan {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s4);
}

.alan label {
  margin-bottom: var(--s2);
  font-size: 0.875rem;
  font-weight: 600;
}

.alan .ops {
  font-weight: 400;
  color: var(--ink-mute);
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

.alan textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--navy-400);
  box-shadow: var(--focus);
}

.alan .errorlist {
  margin-top: var(--s2);
  list-style: none;
  color: var(--danger);
  font-size: var(--t-xs);
  font-weight: 500;
}

.form-satir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
}

.form fieldset {
  margin: 0 0 var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.form legend {
  padding-inline: var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ipucu {
  margin-top: var(--s2);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: 1.55;
}

.ipucu a {
  color: var(--navy-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uyari {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
}

.uyari svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.uyari strong {
  display: block;
  font-family: var(--font-display);
}

.uyari p {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.uyari-olumlu {
  border-left-color: var(--success);
  background: #f1f8f4;
}

.uyari-olumlu svg {
  color: var(--success);
}

.uyari-olumsuz {
  border-left-color: var(--danger);
  background: #fdf3f2;
}

.uyari-olumsuz svg {
  color: var(--danger);
}

/* ---------------------------- iç sayfalar ------------------------- */

.sayfa-bas {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--navy-800);
  color: var(--white);
}

/* Cihaz sayfalarının başlığı, o cihazın fotoğrafını sağ tarafta taşır.
   Fotoğrafı --sayfa-gorsel değişkeniyle şablon geçer; değişken tanımsızsa
   katman hiç çizilmez ve sayfa düz lacivert kalır. */
.sayfa-bas-gorselli::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(48%, 620px);
  background-image: var(--sayfa-gorsel);
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.55;
  /* Fotoğrafın beyaz fonu lacivert üstünde kutu olarak durur; screen fonu
     zemine karıştırır. Maske de bloğun kenarlarını eritir, aksi hâlde
     aydınlanan dikdörtgen sayfada keskin bir sınır olarak görünür. */
  mix-blend-mode: screen;
  filter: grayscale(0.5);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 72%);
  pointer-events: none;
}

.sayfa-bas-gorselli::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--navy-800) 0%,
    var(--navy-800) 42%,
    rgba(var(--koyu-rgb), 0.85) 58%,
    rgba(var(--koyu-rgb), 0.55) 100%
  );
  pointer-events: none;
}

.sayfa-bas .wrap {
  position: relative;
  z-index: 1;
}

.sayfa-bas h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  margin-bottom: var(--s4);
}

.sayfa-bas .lead {
  color: var(--navy-100);
}

.sayfa-bas .btn {
  margin-top: var(--s5);
}

.kirinti {
  margin-bottom: var(--s4);
  font-size: var(--t-xs);
  color: var(--navy-200);
}

.kirinti a:hover {
  color: var(--white);
  text-decoration: underline;
}

.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.yan-kart {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.yan-kart h2,
.yan-kart h3 {
  margin-bottom: var(--s4);
  font-size: 1.15rem;
}

.metin {
  max-width: 68ch;
}

.metin h2 {
  margin: var(--s7) 0 var(--s4);
  font-size: 1.5rem;
}

.metin h2:first-child {
  margin-top: 0;
}

.metin p {
  color: var(--ink-soft);
}

/* madde listeleri */
.tik-liste {
  list-style: none;
}

.tik-liste li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-bottom: var(--s3);
  font-size: var(--t-sm);
}

.tik-liste svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--navy-600);
}

/* belirti ızgarası */
.belirti-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s3);
  list-style: none;
}

.belirti-grid li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

.belirti-grid svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--action-500);
}

/* numaralı adım listesi */
.adim-liste {
  list-style: none;
  counter-reset: adim;
}

.adim-liste li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: var(--s4);
  counter-increment: adim;
}

.adim-liste li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
}

.adim-liste strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
}

.adim-liste span {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  line-height: 1.55;
}

/* --------------------------- yasal ibare -------------------------- */

.yasal-not {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-400);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-soft);
}

.yasal-not svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--navy-400);
}

/* ------------------------------ kapanış --------------------------- */

.kapanis {
  text-align: center;
}

.kapanis .lead {
  margin-inline: auto;
  margin-bottom: var(--s6);
}

/* ------------------------------- footer --------------------------- */

.footer {
  padding-top: var(--section-y);
  background: var(--navy-900);
  color: var(--navy-200);
  font-size: var(--t-sm);
}

.footer a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--action-500);
  text-underline-offset: 4px;
}

.footer .logo {
  color: var(--white);
  margin-bottom: var(--s5);
}

.footer-slogan {
  max-width: 24ch;
  margin-bottom: var(--s5);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
}

.footer-iletisim {
  font-size: var(--t-sm);
}

.footer-tel {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white);
}

.footer h2 {
  margin-bottom: var(--s4);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--koyu-mute);
}

.footer-h3-ara {
  margin-top: var(--s6);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
  padding-bottom: var(--s7);
}

.footer-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-liste li {
  margin-bottom: var(--s2);
}

/* Dokunma hedefi en az 24 px (WCAG 2.5.8 / Lighthouse target-size). */
.footer-liste a {
  display: inline-block;
  padding-block: 0.125rem;
}

/* "Çerez tercihleri": bağlantı gibi görünen düğme (sayfa değil, çubuğu açar). */
.footer-metin-dugme {
  display: inline-block;
  padding: 0.125rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-metin-dugme:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--action-500);
  text-underline-offset: 4px;
}

.footer-kurum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
  padding-block: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-xs);
}

.footer-kurum h2 {
  margin-bottom: var(--s3);
}

.footer-yasal {
  padding-block: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-yasal p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--koyu-mute);
}

.footer-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  padding-block: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-xs);
  color: var(--koyu-mute);
}

/* ----------------------------- çerez barı ------------------------- */

.cerez-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}

.cerez-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s4);
}

.cerez-bar p {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

.cerez-bar a {
  color: var(--navy-600);
  text-decoration: underline;
}

.cerez-dugmeler {
  display: flex;
  gap: var(--s3);
  flex-shrink: 0;
}

/* ------------------------------ duyarlı --------------------------- */


/* ------------------------- coğrafi sayfalar ----------------------
   İl ve ilçe sayfalarındaki yer bağlantı listeleri. 39 ilçelik İstanbul
   ile 3 ilçelik Bayburt aynı bileşeni kullanır; bu yüzden sütun sayısı
   sabit değil, auto-fill ile içeriğe göre belirlenir. */

.yer-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s2) var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.yer-listesi a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.yer-listesi a:hover {
  background: var(--krem-100);
  color: var(--navy-800);
}

.yer-listesi svg {
  flex: 0 0 auto;
  color: var(--navy-400);
}

.yer-listesi-alt {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* ------------------------ servis ağı haritası ---------------------
   Harita bir seçim aracıdır, dekorasyon değil: bölgeler nötr lacivert
   tonlarıyla durur, turuncu yalnız seçili/gezinilen bölgede belirir.
   ---------------------------------------------------------------- */
.harita {
  margin-bottom: var(--s6);
  padding: var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.harita-ust {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.harita-geri {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--navy-600);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.harita-geri:hover {
  background: var(--navy-100);
}

.harita-secici {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.harita-secici label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.harita-secici select {
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.harita-durum {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-mute);
  text-align: right;
}

.harita-govde {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  padding-top: var(--s4);
}

.harita-il-acik .harita-govde {
  grid-template-columns: minmax(0, 1.85fr) minmax(240px, 1fr);
}

/* display tanımlı öğelerde [hidden] ezilir; harita denetimleri buna bağlı. */
.harita-geri[hidden],
.harita-secici[hidden] {
  display: none;
}

.harita-tuval {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Izgara/esnek kutu öğeleri varsayılan olarak içeriğin doğal genişliğinin
     altına inmez; SVG'nin viewBox genişliği burada sayfayı yatay taşırır. */
  min-width: 0;
  min-height: 200px;
}

.harita-tuval svg {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
}

.harita-yukleniyor .harita-tuval {
  opacity: 0.45;
}

/* Bölgeler: dolgu tıklama alanıdır, kenarlık zeminle aynı sıcaklıkta. */
.harita-alan {
  fill: var(--navy-100);
  stroke: var(--white);
  stroke-width: 1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.12s ease;
}

.harita-alan:hover,
.harita-alan.vurgu {
  fill: var(--action-500);
}

.harita-ilce .harita-alan {
  fill: var(--navy-50);
  stroke: var(--navy-200);
  stroke-width: 0.7;
}

.harita-ilce .harita-alan:hover,
.harita-ilce .harita-alan.vurgu {
  fill: var(--action-500);
  stroke: var(--white);
}

.harita-yan {
  min-width: 0;
  padding-left: var(--s5);
  border-left: 1px solid var(--line);
}

.harita-yan-bas {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--navy-800);
}

.harita-ilce-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s1);
  max-height: 52vh;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.harita-ilce-listesi a {
  display: block;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.harita-ilce-listesi a:hover,
.harita-ilce-listesi a:focus-visible {
  background: var(--krem-100);
  color: var(--navy-800);
}

.harita-not {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

@media (max-width: 860px) {
  .harita-il-acik .harita-govde {
    grid-template-columns: 1fr;
  }

  .harita-yan {
    padding-left: 0;
    padding-top: var(--s4);
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .harita-durum {
    text-align: left;
  }

  .harita-tuval svg {
    max-height: 44vh;
  }
}

/* Bölge sayfalarının kapanış çağrısı — dar ve ortalanmış. */
.kapanis {
  max-width: var(--wrap-narrow);
  text-align: center;
}

.kapanis .lead {
  margin-inline: auto;
  margin-bottom: var(--s5);
}


/* Öne çıkan marka merkezindeki bilgi kartları — mevzuat ve çalışma biçimi.
   İki kolon: dört kartta üçlü ızgara ikinci satırda tek kart bırakıyordu. */

.bilgi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

@media (max-width: 720px) {
  .bilgi-grid {
    grid-template-columns: 1fr;
  }
}

.bilgi-kart {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.bilgi-kart h3 {
  margin: 0 0 var(--s3);
  font-size: 1.05rem;
}

.bilgi-kart p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-soft);
}


@media (max-width: 1024px) {
  .cihaz-grid,
  .surec,
  .grup-grid,
  .ozellik-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guven-serit .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  /* Hero tek kolona düşerken metin önce gelir: kullanıcı formu bağlamıyla görür. */
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-madde {
    margin-bottom: var(--s6);
  }

  /* Tek kolonda fotoğraf artık metnin yanında değil altındadır; sağdaki
     dar şerit yerine tüm zemine yayılır ve gradyan dikeye döner, yoksa
     beyaz form kartı fotoğrafın parlak kısmına denk gelip okunmaz olur. */
  .hero::before {
    width: 100%;
    background-position: center;
    opacity: 0.5;
  }

  .hero::after {
    background: linear-gradient(
      175deg,
      var(--navy-800) 0%,
      rgba(var(--koyu-rgb), 0.92) 45%,
      rgba(var(--koyu-rgb), 0.86) 100%
    );
  }

  /* Cihaz sayfası başlığında fotoğraf mobilde başlığın arkasına düşer. */
  .sayfa-bas-gorselli::before {
    width: 100%;
    opacity: 0.3;
  }

  .sayfa-bas-gorselli::after {
    background: linear-gradient(
      175deg,
      var(--navy-800) 0%,
      rgba(var(--koyu-rgb), 0.88) 100%
    );
  }
}

@media (max-width: 860px) {
  .ana-nav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  /* Mobilde servis talebi düğmesi kalır; menü düğmesi yalnız simgeye iner. */
  .menu-btn span {
    display: none;
  }

  .header-ic {
    gap: var(--s3);
  }

  .logo-yazi {
    font-size: 1rem;
  }

  .ikili {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Mobilde cihaz kartlarını tek kolona indiriyoruz; iki kolonda
     belirti metinleri okunmaz hâle geliyor. */
  .cihaz-grid,
  .surec,
  .taahhut,
  .grup-grid,
  .ozellik-grid,
  .guven-serit .wrap,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .taahhut li {
    padding-left: var(--s4);
  }

  .hero-kart {
    padding: var(--s5);
  }

  .surec li::after {
    font-size: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}


/* ------------------------ marka rehber düzeni --------------------- */

/* Marka merkezinin "rehber" düzeni (ör. /beko-servisi): tek sayfalık servis
   rehberi. Haritalı merkezden farkı, sayfanın başında içindekiler şeridi
   ve dört adımlı süreç olması. Bölümlere çapa ile gidildiğinde başlık
   yapışkan üst çubuğun altında kalmasın diye kaydırma payı bırakılır. */

.rehber-bolum {
  scroll-margin-top: 84px;
}

.btn-grup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.sayfa-bas .btn-ikincil {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.sayfa-bas .btn-ikincil:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

.icindekiler {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.icindekiler .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding-block: var(--s3);
}

.icindekiler-bas {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.icindekiler ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.icindekiler a {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--navy-800);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}

.icindekiler a:hover {
  border-color: var(--navy-400);
  background: var(--navy-50);
}

/* Dört adımlı süreç: masaüstünde dört kolon, tablette iki, mobilde tek.
   Genel .surec kuralı üç kolon; bu sınıf onu ezer (aynı özgüllük, sonra gelir). */
.surec-dort {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ozellik-grid-dort {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Üreticinin resmi kanalları: telefon ve site bağlantısı büyük yazılır,
   açıklama altında küçük. */
.kanal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.kanal {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.kanal .ikon-daire {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s3);
}

.kanal h3 {
  margin: 0 0 var(--s1);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.kanal-deger {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-800);
  text-decoration: none;
}

.kanal-deger:hover {
  color: var(--action-600);
}

.kanal p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.bolum-alt-not {
  margin-top: var(--s5);
}

@media (max-width: 1024px) {
  .surec-dort,
  .ozellik-grid-dort {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kanal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .surec-dort,
  .ozellik-grid-dort,
  .kanal-grid {
    grid-template-columns: 1fr;
  }

  .icindekiler .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------ */
/* Kurumsal katman (10 Eyl 2026): açılır menü, telefon, altbilgi       */
/* kurum bloğu, "neden" tablosu, standart listesi, marka dizini, logo. */
/* ------------------------------------------------------------------ */
.ana-nav > li {
  position: relative;
}

.ana-nav a svg {
  vertical-align: -2px;
  opacity: 0.7;
}

.ana-nav .alt-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: calc(-1 * var(--s3));
  min-width: 240px;
  padding: var(--s2);
  margin: 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 14px 40px rgba(var(--koyu-rgb, 11, 31, 58), 0.14);
  display: none;
  z-index: 40;
}

.ana-nav .alt-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.ana-nav .nav-acilir:hover > .alt-menu,
.ana-nav .nav-acilir:focus-within > .alt-menu {
  display: block;
}

.ana-nav .alt-menu a {
  display: block;
  padding: var(--s2) var(--s3);
  border-bottom: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  white-space: nowrap;
}

.ana-nav .alt-menu a:hover {
  background: var(--navy-50);
  color: var(--navy-800);
}

/* Açılır menü bölüm etiketi ("Beyaz eşya", "Diğer cihazlar"). Etiket bir
   bağlantı taşıyorsa da menü satırı gibi değil, başlık gibi görünür:
   cihaz satırlarıyla karışmasın diye küçük, büyük harf ve soluk. */
.ana-nav .alt-menu .alt-baslik {
  padding: var(--s3) var(--s3) var(--s1);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

.ana-nav .alt-menu .alt-baslik + li {
  margin-top: 0;
}

.ana-nav .alt-menu .alt-baslik ~ .alt-baslik {
  margin-top: var(--s2);
  border-top: 1px solid var(--line);
}

.ana-nav .alt-menu .alt-baslik a,
.ana-nav .alt-menu .alt-baslik span {
  display: block;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
}

.ana-nav .alt-menu .alt-baslik a:hover {
  background: none;
  color: var(--ink);
  text-decoration: underline;
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--navy-800);
  white-space: nowrap;
}

.header-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--action-700);
  white-space: nowrap;
}

/* Mobil iletişim çubuğu — masaüstünde yok; aynı bağlantılar üst çubukta durur.
   720px altında ekranın altına sabitlenir (bkz. aşağıdaki @media). */
.mobil-cubuk {
  display: none;
}

.footer-kurum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-top: var(--s6);
  margin-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-kurum h2 {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}










.bolum-koyu .neden-satir span:last-child svg {
  color: #7fd39a;
}

.standart-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s4);
}

.standart-liste li {
  padding: var(--s5) var(--s6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.standart-liste h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s2);
}

.standart-liste p {
  margin: 0;
  color: var(--ink-soft);
}

.alan-onay label {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.alan-onay input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--action-500);
}

.harf-serit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.harf-serit a {
  min-width: 36px;
  padding: var(--s2) var(--s3);
  text-align: center;
  font-weight: 700;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--navy-800);
}

.harf-serit a:hover {
  border-color: var(--action-500);
  color: var(--action-600);
}

.harf-baslik {
  margin: var(--s6) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--line);
  font-size: var(--t-h3);
  scroll-margin-top: 90px;
}

.harf-baslik .ops {
  font-weight: 500;
  color: var(--ink-mute);
  font-size: var(--t-sm);
}

.marka-dizin {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s3);
}

.marka-dizin a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.marka-dizin a:hover {
  border-color: var(--action-500);
}

.marka-dizin strong {
  font-size: var(--t-sm);
  color: var(--navy-800);
}

.marka-dizin span {
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

.yer-listesi .plaka {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  font-size: 0.8125rem;
}

.cihaz-grid-dar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logo-grid,
.renk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.logo-kart,
.renk-kart {
  padding: var(--s5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.logo-kart h3,
.renk-kart h3 {
  margin: var(--s4) 0 var(--s2);
  font-size: 1.1rem;
}

.logo-kart p,
.renk-kart p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0 0 var(--s3);
}

.logo-onizleme {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--s5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.logo-onizleme img {
  max-height: 96px;
  width: auto;
}

.logo-onizleme-acik {
  background: var(--krem-100);
}

.logo-onizleme-koyu {
  background: var(--navy-800);
}

.renk-ornek {
  display: block;
  height: 72px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.renk-kart code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--navy-800);
}

@media (max-width: 1024px) {
  .header-tel span {
    display: none;
  }

  .logo-grid,
  .renk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* Sabit iletişim çubuğu. Rakip ölçümünde (13 Eyl) mobilde sabit "Ara"
     düğmesi olan tek rakip anindaservis.org idi; telefon dolduğu an bu
     çubuk kendiliğinden açılır. */
  .mobil-cubuk {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .mobil-cubuk-oge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: var(--s2);
    background: var(--white);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
  }

  .mobil-cubuk-birincil {
    background: var(--ink);
    color: var(--white);
  }

  /* Sayfanın son bölümü çubuğun altında kalmasın. */
  body:has(.mobil-cubuk) {
    padding-bottom: 56px;
  }

  /* Çerez çubuğu iletişim çubuğunun üstüne oturur. */
  body:has(.mobil-cubuk) .cerez-bar {
    bottom: 56px;
  }

  .footer-kurum,
  .logo-grid,
  .renk-grid,
  .cihaz-grid-dar {
    grid-template-columns: 1fr;
  }

  .neden-bas {
    display: none;
  }

  .neden-satir {
    grid-template-columns: 1fr;
  }
}

/* ================================================================== */
/* ANA SAYFA VE TEKNİK ÇİZİM DİLİ (Eylül 2026 yeniden tasarımı)        */
/* ================================================================== */

/* --- görünüme girince belirme: yalnız JS varken gizli başlar --------- */
.js [data-goster] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-goster].goster-aktif {
  opacity: 1;
  transform: none;
}

/* --- teknik çizim dili --------------------------------------------- */
.cizim {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  color: var(--navy-800);
  overflow: visible;
}

/* Izgara çocukları içeriğin (SVG'nin 300px varsayılanı) altına inebilmeli. */
.hero-metin,
.hero-cizim,
.hero-cizim-kap,
.cihaz-cizim-kart,
.cihaz-cizim-alan,
.ariza-sol,
.ariza-cizim,
.ariza-cizim-kap,
.talep-metin,
.talep-form {
  min-width: 0;
}

.c-govde {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2.5 2.5;
  stroke-linecap: round;
  opacity: 0.55;
}

.c-olcu {
  fill: none;
  stroke: var(--ink-mute);
  stroke-width: 0.8;
  opacity: 0.75;
}

.c-olcu text {
  font: 500 6.5px var(--font-body);
  fill: var(--ink-mute);
  stroke: none;
  text-anchor: middle;
  letter-spacing: 0.04em;
}

.c-noktalar {
  transition: opacity 0.3s ease;
}

.nokta line {
  stroke: var(--action-500);
  stroke-width: 1;
}

.nokta-hedef {
  fill: var(--action-500);
  transform-box: fill-box;
  transform-origin: center;
}

.nokta-halka {
  fill: var(--white);
  stroke: var(--action-500);
  stroke-width: 1.25;
  transition: fill 0.2s ease;
}

.nokta text {
  font: 700 8px var(--font-body);
  fill: var(--navy-800);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.2s ease;
}

.nokta.secili .nokta-halka {
  fill: var(--action-500);
}

.nokta.secili text {
  fill: var(--white);
}

.nokta.secili .nokta-hedef {
  animation: nokta-nabiz 1.6s ease-out infinite;
}

@keyframes nokta-nabiz {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Teknik çizim zemini: ince kareli kâğıt, dekor değil bağlam. */
.cizim-zemin {
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(22, 22, 22, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
}

.mikro {
  width: 56px;
  height: 56px;
  color: var(--navy-800);
}

.mikro-nokta {
  fill: var(--action-500);
}

/* --- hero ------------------------------------------------------------ */
.hero-ana {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.hero-ana-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero-ana h1 {
  margin: var(--s4) 0 var(--s5);
  font-size: var(--t-hero);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--navy-800);
}

.hero-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0 0 var(--s6);
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--ink-soft);
}

.hero-alt li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.hero-alt li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action-500);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.hero-cizim {
  margin: 0;
}

.hero-cizim-kap {
  padding: clamp(1rem, 3vw, 2rem);
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(22, 22, 22, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
}

.hero-cizim .cizim {
  max-width: 480px;
  margin-inline: auto;
}

/* Çizim, sayfa açılınca hat hat çizilir; iç parçalar ve noktalar ardından belirir. */
.hero-cizim .c-govde > * {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: cizgi-ciz 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-cizim .c-ic,
.hero-cizim .c-olcu {
  opacity: 0;
  animation: belir 0.8s ease 1.4s forwards;
}

.hero-cizim .c-ic {
  animation-name: belir-ic;
}

.hero-cizim .c-noktalar {
  opacity: 0;
  animation: belir 0.6s ease 2s forwards;
}

@keyframes cizgi-ciz {
  to { stroke-dashoffset: 0; }
}

@keyframes belir {
  to { opacity: 0.75; }
}

@keyframes belir-ic {
  to { opacity: 0.55; }
}

.hero-cizim .c-noktalar {
  animation-name: belir-tam;
}

@keyframes belir-tam {
  to { opacity: 1; }
}

.cizim-lejant {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  align-items: baseline;
  margin-top: var(--s4);
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

.lejant-bas {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cizim-lejant ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lejant;
}

.cizim-lejant li {
  counter-increment: lejant;
}

.cizim-lejant li::before {
  content: counter(lejant, decimal-leading-zero) " ";
  font-weight: 700;
  color: var(--action-700);
}

/* --- cihaz çizim ızgarası ---------------------------------------------- */
.cihaz-cizim-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cihaz-cizim-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--white);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.2s ease;
}

.cihaz-cizim-kart:hover,
.cihaz-cizim-kart:focus-within {
  background: var(--surface);
}

.cihaz-cizim-bag {
  display: block;
}

.cihaz-cizim-alan {
  display: block;
  max-width: 220px;
  margin: 0 auto var(--s4);
  transition: transform 0.35s ease;
}

.cihaz-cizim-kart:hover .cihaz-cizim-alan {
  transform: translateY(-3px);
}

.cihaz-cizim-kart .c-noktalar {
  opacity: 0;
}

.cihaz-cizim-kart:hover .c-noktalar,
.cihaz-cizim-kart:focus-within .c-noktalar {
  opacity: 1;
}

.cihaz-cizim-ad {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy-800);
}

.cihaz-no {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--action-700);
}

.cihaz-cizim-aksiyon {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cihaz-cizim-kart:hover .cihaz-cizim-aksiyon,
.cihaz-cizim-kart:focus-within .cihaz-cizim-aksiyon {
  opacity: 1;
  transform: none;
}

/* Dokunmatik cihazda hover yoktur; eylemler hep görünür. */
@media (hover: none) {
  .cihaz-cizim-aksiyon,
  .cihaz-cizim-kart .c-noktalar {
    opacity: 1;
    transform: none;
  }
}

.cihaz-talep {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 600;
  color: var(--navy-800);
}

.cihaz-cizim-aksiyon a:hover {
  text-decoration: underline;
  text-decoration-color: var(--action-500);
  text-underline-offset: 4px;
}

/* Üretici çatısı cümlesi — kardeş marka bağlantılarının üstünde. */
.kardes-notu {
  max-width: 62ch;
  margin: var(--s6) 0 0;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.marka-satir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s5) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.marka-satir span {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-label);
  color: var(--ink-mute);
  align-self: center;
}

.marka-satir a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 600;
  color: var(--navy-800);
}

.marka-satir a:hover {
  text-decoration: underline;
  text-decoration-color: var(--action-500);
  text-underline-offset: 4px;
}

/* --- arıza bulma ----------------------------------------------------- */
.ariza-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.ariza-sekmeler button {
  padding: 0.55rem 1rem;
  font: 600 var(--t-sm) var(--font-body);
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ariza-sekmeler button:hover {
  border-color: var(--navy-400);
  color: var(--navy-800);
}

.ariza-sekmeler button.secili {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

.ariza-sekmeler button:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.ariza-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.ariza-soru {
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 700;
}

.ariza-belirtiler {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.ariza-belirtiler button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 0.8rem 1rem;
  font: 500 1rem var(--font-body);
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ariza-belirtiler button:hover {
  border-color: var(--navy-400);
}

.ariza-belirtiler button.secili {
  border-color: var(--navy-800);
  border-left-color: var(--action-500);
  background: var(--action-50);
}

.ariza-belirtiler button:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.belirti-no {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--action-700);
}

.ariza-bolge {
  min-height: 2.6em;
  margin-bottom: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.ariza-cizim {
  position: sticky;
  top: 92px;
}

.ariza-cizim-kap {
  padding: clamp(1rem, 3vw, 2rem);
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(22, 22, 22, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
}

.ariza-cizim-kap[hidden] {
  display: none;
}

.ariza-cizim-kap .cizim {
  max-width: 440px;
  margin-inline: auto;
}

/* --- süreç çizgisi --------------------------------------------------- */
.surec-cizgi {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
  margin: 0;
  padding: var(--s6) 0 0;
  list-style: none;
}

.surec-cizgi::before,
.surec-cizgi::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  height: 2px;
  background: var(--line);
}

.surec-cizgi::before {
  right: 0;
}

.surec-cizgi::after {
  width: 0;
  background: var(--navy-800);
  transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.surec-cizgi.goster-aktif::after {
  width: 100%;
}

.surec-cizgi li {
  position: relative;
}

.surec-cizgi li::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--s6));
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--navy-800);
  border-radius: 50%;
  background: var(--white);
  transition: background 0.3s ease;
}

.surec-cizgi.goster-aktif li::before {
  background: var(--action-500);
  border-color: var(--action-500);
}

.surec-cizgi.goster-aktif li:nth-child(1)::before { transition-delay: 0.1s; }
.surec-cizgi.goster-aktif li:nth-child(2)::before { transition-delay: 0.55s; }
.surec-cizgi.goster-aktif li:nth-child(3)::before { transition-delay: 1s; }
.surec-cizgi.goster-aktif li:nth-child(4)::before { transition-delay: 1.5s; }

.surec-no {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--action-700);
}

.surec-cizgi h3 {
  margin-bottom: var(--s2);
  font-size: 1.375rem;
}

.surec-cizgi p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* --- neden ----------------------------------------------------------- */
.neden-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
}

.neden-oge h3 {
  margin: var(--s4) 0 var(--s2);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.neden-oge p {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.neden-detay {
  margin-top: var(--s7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.neden-detay summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.neden-detay summary::-webkit-details-marker {
  display: none;
}

.neden-detay summary span {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-mute);
  white-space: nowrap;
}

.neden-detay summary span::after {
  content: " +";
}

.neden-detay[open] summary span::after {
  content: " −";
}

.neden-liste {
  margin: 0;
  padding: 0 0 var(--s4);
}

.neden-liste > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s5);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}

.neden-liste dt {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(22, 22, 22, 0.3);
}

.neden-liste dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.bolum-alt-bag {
  margin-top: var(--s6);
}

/* --- servis ağı (koyu) ----------------------------------------------- */
.ag-bas {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: end;
}

.ag-bas .bolum-bas {
  margin-bottom: var(--s6);
}

.ag-sayilar {
  display: flex;
  gap: var(--s6);
  justify-content: flex-end;
  margin: 0 0 var(--s6);
}

.ag-sayilar div {
  padding-left: var(--s4);
  border-left: 2px solid var(--action-500);
}

.ag-sayilar dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

.ag-sayilar dt {
  margin-top: var(--s1);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-200);
}

.ag-dizin {
  margin: var(--s5) 0 0;
}

.ag .link-ok {
  color: var(--navy-100);
}

.ag .link-ok:hover {
  color: var(--white);
}

/* Koyu harita: bölgeler ince beyaz hatlarla çizilir, seçim turkuaz. */
.harita-koyu {
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.harita-koyu .harita-ust {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.harita-koyu .harita-secici label,
.harita-koyu .harita-durum {
  color: var(--navy-200);
}

.harita-koyu .harita-secici select {
  color: var(--white);
  background: var(--navy-900);
  border-color: rgba(255, 255, 255, 0.2);
}

.harita-koyu .harita-geri {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.harita-koyu .harita-geri:hover {
  background: rgba(255, 255, 255, 0.16);
}

.harita-koyu .harita-alan {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.8;
}

.harita-koyu .harita-alan:hover,
.harita-koyu .harita-alan.vurgu {
  fill: var(--action-500);
  stroke: var(--white);
}

.harita-koyu .harita-ilce .harita-alan {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 0.6;
}

.harita-koyu .harita-yan {
  border-left-color: rgba(255, 255, 255, 0.14);
}

.harita-koyu .harita-yan-bas,
.harita-koyu .harita-yan-bas a {
  color: var(--white);
}

.harita-koyu .harita-ilce-listesi a {
  color: var(--navy-200);
}

.harita-koyu .harita-ilce-listesi a:hover,
.harita-koyu .harita-ilce-listesi a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

/* --- servis talebi ----------------------------------------------------- */
.talep-ic {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.talep-metin .lead {
  margin-top: var(--s3);
}

.talep-adimlar {
  margin: var(--s6) 0;
  padding: 0;
  list-style: none;
  counter-reset: talep;
}

.talep-adimlar li {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s7);
  border-top: 1px solid var(--line);
  counter-increment: talep;
}

.talep-adimlar li:last-child {
  border-bottom: 1px solid var(--line);
}

.talep-adimlar li::before {
  content: counter(talep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--action-700);
}

.talep-adimlar strong {
  display: block;
  font-family: var(--font-display);
}

.talep-adimlar span {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.talep-form {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
}

.talep-form .btn {
  margin-top: var(--s4);
}

.alan-hata input,
.alan-hata select,
.alan-hata textarea {
  border-color: var(--danger);
}

/* --- kapanış ----------------------------------------------------------- */
.kapanis-bolum .kapanis h2 {
  margin-bottom: var(--s3);
}

/* --- duyarlı ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .neden-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hero-ana-ic,
  .ariza-govde,
  .talep-ic,
  .ag-bas {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-cizim .cizim {
    max-width: 400px;
  }

  .ariza-cizim {
    position: static;
    order: -1;
  }

  .ag-sayilar {
    justify-content: flex-start;
  }

  .surec-cizgi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s7);
  }

  .surec-cizgi::before,
  .surec-cizgi::after {
    display: none;
  }

  .surec-cizgi li::before {
    display: none;
  }

  .surec-cizgi li {
    padding-top: var(--s3);
    border-top: 2px solid var(--navy-800);
  }

  .cihaz-cizim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-ana h1 {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .hero-cta .btn {
    width: 100%;
  }

  /* Telefonda dikey kart 8 × ~470px = 3.800px ediyordu. Yatay satır:
     çizim solda sabit sütunda, ad ve iki eylem sağda; eylemler hover
     beklemeden hep görünür (dokunmatikte hover yok). */
  .cihaz-cizim-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cihaz-cizim-kart {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: var(--s4);
    padding: var(--s4);
  }

  .cihaz-cizim-bag {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: center;
  }

  .cihaz-cizim-alan {
    max-width: none;
    margin: 0;
  }

  .cihaz-cizim-kart:hover .cihaz-cizim-alan {
    transform: none;
  }

  .cihaz-cizim-kart .c-noktalar {
    opacity: 1;
  }

  .cihaz-cizim-ad {
    font-size: 1.0625rem;
    line-height: 1.25;
  }

  .cihaz-cizim-aksiyon {
    grid-column: 1 / -1;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin-top: var(--s3);
    padding-top: var(--s3);
    opacity: 1;
    transform: none;
  }

  /* 81 il dizini tek sütunda ~5.000px uzuyordu; iki sütun. */
  .yer-listesi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1) var(--s2);
  }

  .yer-listesi a {
    padding: var(--s2);
  }

  .neden-grid,
  .surec-cizgi,
  .footer-kurum {
    grid-template-columns: 1fr;
  }

  /* Altbilgi: dört sütun tek sütuna inince ~1.700px uzuyordu; marka bloğu
     tam genişlik, bağlantı grupları ikişerli. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6) var(--s4);
  }

  .footer-marka {
    grid-column: 1 / -1;
  }

  /* Üçüncü grup (Destek + Yasal) tek başına kalınca sağ yarı boş kalıyordu;
     tam genişliğe yayılır, iki listesi yan yana durur. */
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: var(--s4);
  }

  .footer-grid > div:last-child .footer-h3-ara {
    margin-top: 0;
  }

  .ag-sayilar {
    gap: var(--s5);
  }

  .neden-liste > div {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cizim .c-govde > *,
  .hero-cizim .c-ic,
  .hero-cizim .c-olcu,
  .hero-cizim .c-noktalar {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .hero-cizim .c-ic {
    opacity: 0.55;
  }

  .hero-cizim .c-olcu {
    opacity: 0.75;
  }

  .nokta.secili .nokta-hedef {
    animation: none;
  }

  .surec-cizgi::after,
  .surec-cizgi li::before,
  .js [data-goster],
  .cihaz-cizim-alan,
  .cihaz-cizim-aksiyon {
    transition: none;
  }
}

/* --- marka merkezi ("merkez" düzeni) ------------------------------------ */
.hero-marka .kirinti {
  margin-bottom: var(--s4);
}

.hero-marka h1 {
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.hero-marka .lead {
  margin-bottom: var(--s5);
}

.merkez-ilke {
  background: var(--navy-800);
  color: var(--white);
}

.merkez-ilke p {
  margin: 0;
  padding-block: var(--s5);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--navy-100);
}

.merkez-ilke strong {
  color: var(--white);
}

.ariza-grup {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: var(--s7);
  border-top: 1px solid var(--line);
}

/* Çift sıralarda çizim sağa geçer; kolon oranı da onunla yer değiştirir.
   nth-of-type: sarmalayıcıdaki .bolum-bas div'i sayılmasın (nth-child ile
   "çift" sıra 1. ve 3. makaleye düşüyor, dar ekranda da bu kural özgüllük
   farkıyla tek sütun kuralını eziyordu). */
.ariza-grup:nth-of-type(even) {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}

.ariza-grup:nth-of-type(even) .ariza-grup-cizim {
  order: 2;
}

.ariza-grup-cizim {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(22, 22, 22, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22, 22, 22, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  position: sticky;
  top: 92px;
}

.ariza-grup-cizim .cizim {
  max-width: 320px;
  margin-inline: auto;
}

.ariza-grup-metin {
  min-width: 0;
}

.ariza-grup h3 {
  font-size: 1.5rem;
  margin-bottom: var(--s3);
}

.ariza-grup > .ariza-grup-metin > p {
  color: var(--ink-soft);
  max-width: 60ch;
}

.ariza-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s6);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.ariza-liste li {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  font-weight: 500;
}

.ariza-liste li span {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--action-700);
}

.bilgi-liste {
  margin: 0;
  border-top: 1px solid var(--line);
}

.bilgi-liste > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
}

.bilgi-liste dt {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.bilgi-liste dd {
  margin: 0;
  color: var(--ink-soft);
}

.il-dizini-bas {
  font-size: 1.25rem;
  margin-bottom: var(--s5);
}

@media (max-width: 960px) {
  .ariza-grup,
  .ariza-grup:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ariza-grup:nth-of-type(even) .ariza-grup-cizim {
    order: 0;
  }

  .ariza-grup-cizim {
    position: static;
  }

  .ariza-grup-cizim .cizim {
    max-width: 260px;
  }

  .bilgi-liste > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
}

@media (max-width: 640px) {
  .ariza-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Karşılama: üst boşluk kısalır, çizim kabı daha az kenar payıyla tam genişlik. */
  .hero-marka {
    padding-block: var(--s6) var(--s6);
  }

  .hero-marka .kirinti {
    margin-bottom: var(--s3);
  }

  .hero-marka .hero-cizim-kap {
    padding: var(--s3);
  }

  .hero-marka .cizim-lejant {
    gap: var(--s1) var(--s4);
  }

  .merkez-ilke p {
    padding-block: var(--s4);
    font-size: 1rem;
  }

  /* Arıza grubu: çizim küçülür, başlık kompakt; liste tek sütun (yukarıda). */
  .ariza-grup {
    gap: var(--s4);
    padding-block: var(--s6);
  }

  .ariza-grup-cizim {
    padding: var(--s3);
  }

  .ariza-grup-cizim .cizim {
    max-width: 200px;
  }

  .ariza-grup h3 {
    font-size: 1.25rem;
  }

  .ariza-liste {
    margin-top: var(--s4);
  }

  .ariza-liste li {
    padding: var(--s2) 0;
  }

  /* Bilgiler: başlık ile gövde arası sıkı, satır payı kısa. */
  .bilgi-liste > div {
    padding: var(--s4) 0;
  }

  .bilgi-liste dt {
    font-size: 1.0625rem;
  }

  .il-dizini-bas {
    font-size: 1.125rem;
    margin-bottom: var(--s4);
  }
}

/* ==========================================================================
   Hata kodu sayfası (marka/hata_kodlari.html)

   Kodlar yuvarlak gölgeli kart yerine kıl çizgiyle ayrılmış bir dizi olarak
   durur: 35 kodluk bir tabloda 35 kart görsel gürültüye dönüşür. Kod etiketi
   tek tipografik vurgudur — cihazın ekranında göründüğü gibi, tek aralıklı.
   ========================================================================== */

.kod-dizini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.kod-dizini a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink-soft);
  text-decoration: none;
}

.kod-dizini a:hover,
.kod-dizini a:focus-visible {
  border-color: var(--action-500);
  color: var(--ink);
}

.kod-kaynak-ust {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s5);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  max-width: 68ch;
}

/* Koyu sayfa başlığında gri metin kontrastı yetmez (3,66:1). */
.sayfa-bas .kod-kaynak-ust {
  color: var(--koyu-mute);
}

.kod-kaynak-ust svg {
  flex: none;
  color: var(--action-700);
  margin-top: 2px;
}

/* Kıl çizgili dizi: kartlar arası 1px aralık tek çizgi gibi okunur. */
.kod-liste {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.kod-oge {
  background: var(--card);
  padding: var(--s5);
  scroll-margin-top: var(--s7);
}

.kod-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.kod-etiket {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sm);
  background: var(--navy-800);
  color: var(--white);
  white-space: nowrap;
}

.kod-bas h2 {
  font-size: var(--t-h3);
  line-height: 1.25;
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.kod-durum {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.kod-durum-servis { color: var(--danger); }
.kod-durum-evde { color: var(--success); }
.kod-durum-bazen { color: var(--ink-mute); }

.kod-ozet {
  margin: var(--s3) 0 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 68ch;
}

.kod-alanlar {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s3) var(--s5);
  margin: var(--s5) 0 0;
}

.kod-alanlar dt {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 0.15rem;
}

.kod-alanlar dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 66ch;
}

.nokta-liste {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--s1);
}

/* Sayfadaki adım listesi büyük numaralı rozetler kullanır; kod içinde daha
   sakin bir sıralama gerekir, sayı satır başında küçük kalır. */
.adim-liste-duz {
  list-style: decimal;
  counter-reset: none;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--s2);
}

.adim-liste-duz li {
  position: static;
  padding-left: 0;
  margin-bottom: 0;
  counter-increment: none;
}

.adim-liste-duz li::before { content: none; }

.kod-uyari {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--danger);
  background: #fdf3f2;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  max-width: 70ch;
}

.kod-uyari svg {
  flex: none;
  color: var(--danger);
  margin-top: 1px;
}

/* Üretici kodun anlamını yazmamışsa okura söylenir; uyarı kutusundan
   ayrışsın diye kırmızı değil nötr çerçeveyle verilir. */
.kod-kaynak-sinir {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin: calc(var(--s3) * -1) 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--line-strong, var(--line));
  background: var(--yuzey-2, #f4f5f6);
  color: var(--ink-soft);
  font-size: var(--t-xs);
  max-width: 70ch;
}

.kod-kaynak-sinir svg {
  flex: none;
  color: var(--ink-soft);
  margin-top: 1px;
}

.kod-oge .link-ok {
  margin-top: var(--s4);
}

.kod-kaynak {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

.kod-kaynak h2 {
  font-size: var(--t-h3);
  margin: var(--s2) 0 var(--s3);
}

.kod-kaynak p {
  max-width: 62ch;
  color: var(--ink-soft);
}

.kod-kaynak-satir {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.kod-kaynak-satir span { color: var(--ink-mute); }

@media (max-width: 720px) {
  /* Başlık iki-üç satıra indiğinde ortalanan kod etiketi başlığın ortasında
     asılı kalıyor; ilk satırla hizalanması gerekir. */
  .kod-bas { align-items: flex-start; }
  .kod-alanlar { grid-template-columns: 1fr; gap: var(--s1) 0; }
  .kod-alanlar dt { padding-top: var(--s3); }
  .kod-kaynak { grid-template-columns: 1fr; }
}

/* Cihaz sayfasından hata kodu sayfasına geçiş satırı. */
.kod-baglanti {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--action-500);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-sm);
}

.kod-baglanti svg { flex: none; color: var(--action-700); margin-top: 2px; }

/* Hata kodu dizini (/hata-kodlari) — kıl çizgili marka ızgarası. */
/* Çizgi ZEMİNDEN değil ÖĞEDEN verilir: son satır dolmadığında boş hücreler
   zemin rengini gösterip gri blok gibi görünüyordu. Her öğeye 1px'lik dış
   hat verilip 1px boşluk bırakılınca komşu hatlar aynı çizgide buluşur ve
   boş alan kart rengiyle kalır. */
.kod-dizin-grid {
  list-style: none;
  margin: 1px 0 0 1px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--card);
}

.kod-dizin-grid a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
  padding: var(--s3) var(--s4);
  text-decoration: none;
  color: var(--ink);
  min-height: 100%;
}

.kod-dizin-grid a:hover,
.kod-dizin-grid a:focus-visible {
  background: var(--surface);
  color: var(--action-700);
}

.kod-dizin-marka { font-weight: 600; font-size: var(--t-sm); }

.kod-dizin-sayi {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* Kod süzgeci — yalnız 12+ kodlu sayfalarda, JS ile açılır. */
.kod-suzgec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.kod-suzgec[hidden] { display: none; }

.kod-suzgec label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kod-suzgec input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.7rem;
  width: 11rem;
  max-width: 100%;
}

.kod-suzgec input:focus-visible {
  outline: 2px solid var(--action-500);
  outline-offset: 2px;
}

.kod-suzgec-sonuc {
  font-size: var(--t-xs);
  color: var(--ink-mute);
}

/* Süzgeç gizlerken çip ve kod bloğu tamamen kalkmalı. */
.kod-dizini a[hidden],
.kod-oge[hidden] { display: none !important; }

/* Süzgeç koyu zeminli sayfa başlığının içinde duruyor; gri metin orada
   okunmuyor. Mevcut `.sayfa-bas .etiket` kalıbıyla aynı tonu kullanır. */
.sayfa-bas .kod-suzgec label,
.sayfa-bas .kod-suzgec-sonuc {
  color: var(--navy-200);
}

.sayfa-bas .kod-suzgec input {
  border-color: transparent;
}

/* --- marka açılış ekranı (22 Eyl 2026) ---------------------------------
   Rakip marka sayfasının açılış iskeleti: sade başlık, fotoğraf kartı +
   çağrı bloğu, iki kısa paragraf, altı ikonlu şerit. Zemin açık; birincil
   düğme normal (kömür, marka temasında --action-500). Kart mobilde tam
   genişlik ve metnin ÜSTÜNDE: telefonu açan kişi önce eylem düğmesini
   görsün. Masaüstünde kart solda dar sütun, metin sağda. */
.marka-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s5) var(--s7);
}

.marka-hero .kirinti {
  margin-bottom: var(--s3);
  color: var(--ink-mute);
}

.marka-hero .kirinti a:hover {
  color: var(--ink);
}

.marka-hero h1 {
  margin: 0 0 var(--s5);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
  color: var(--navy-800);
}

.marka-hero-ic {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.marka-hero-kart {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.marka-hero-foto {
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--navy-50);
}

.marka-hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.marka-hero-cagri {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  padding: var(--s5);
}

/* Rakipteki dikey çizgi + başlık dili: sol kenarda vurgu rengi çubuk. */
.marka-hero-cagri-bas {
  padding-left: var(--s3);
  border-left: 3px solid var(--action-500);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy-800);
}

.marka-hero-cagri-alt {
  padding-left: calc(var(--s3) + 3px);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.marka-hero-tel {
  width: 100%;
  margin-top: var(--s4);
  padding-block: 1.05rem;
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.marka-hero-tel svg {
  flex: 0 0 auto;
}

.marka-hero-ikinci {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.marka-hero-ikinci:hover {
  color: var(--ink);
}

.marka-hero-metin .lead {
  margin-bottom: var(--s4);
  max-width: 60ch;
  color: var(--ink);
}

.marka-hero-ilke {
  max-width: 60ch;
  margin-bottom: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--white);
  border-left: 3px solid var(--navy-800);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink-soft);
}

.marka-hero-ilke strong {
  color: var(--navy-800);
}

.marka-temali .marka-hero-ilke {
  border-left-color: var(--action-500);
}

.marka-hero-cihaz-bag {
  font-weight: 600;
}

/* Altı madde: ikon üstte, kısa başlık altta. Kartlar değil, hafif şerit. */
.marka-hero-ozellik {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.marka-hero-ozellik li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-soft);
}

.marka-hero-ozellik-ikon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--navy-50);
  color: var(--navy-800);
}

.marka-temali .marka-hero-ozellik-ikon {
  color: var(--action-600);
}

@media (max-width: 960px) {
  .marka-hero-ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .marka-hero-kart {
    max-width: 560px;
  }

  .marka-hero-ozellik {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marka-hero {
    padding-block: var(--s4) var(--s6);
  }

  .marka-hero h1 {
    margin-bottom: var(--s4);
  }

  .marka-hero-kart {
    max-width: none;
  }

  .marka-hero-cagri {
    padding: var(--s4);
  }

  .marka-hero-tel {
    font-size: 1.125rem;
  }

  .marka-hero-ilke {
    padding: var(--s3) var(--s4);
  }

  .marka-hero-ozellik {
    gap: var(--s2);
    margin-top: var(--s5);
  }

  .marka-hero-ozellik li {
    padding: var(--s3) var(--s1);
    font-size: var(--t-xs);
  }
}

/* Mobil çubuk, "hemen arayın" biçimi: geniş birincil hücre (ikon + iki
   satır yazı), yanında dar ikincil hücre. Ölçüler eskisiyle aynı (56px)
   ki body padding ve çerez çubuğu hesabı bozulmasın. */
@media (max-width: 720px) {
  .mobil-cubuk {
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .mobil-cubuk-telefonlu:has(.mobil-cubuk-oge:nth-child(3)) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .mobil-cubuk-ara {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s3);
    padding-inline: var(--s4);
    text-align: left;
  }

  .mobil-cubuk-ikon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.14);
  }

  .mobil-cubuk-yazi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
  }

  .mobil-cubuk-yazi small {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.8;
  }

  .mobil-cubuk-yazi strong {
    font-size: 0.9375rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .marka-temali .mobil-cubuk-birincil {
    background: var(--action-500);
  }
}

/* Üreticilerin resmi çağrı merkezleri tablosu (küçük ev aleti sayfaları).
   Dar ekranda tablo kendi kabında yatay kayar; sayfa taşmaz. */
.tablo-kap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tablo th,
.tablo td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tablo th {
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--surface);
}
.tablo tr:last-child td {
  border-bottom: 0;
}
.tablo a {
  color: var(--navy-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 26 Eyl 2026 — üst menü hizası, arama düğmeleri, küçük ev aletleri   */
/* altbilgi satırı ve markanın resmi hattı sabit çubuğu.               */
/* ------------------------------------------------------------------ */

/* Üst menü: öğeler tek satır, dikey ortalı, ok ikonu yazıyla aynı hizada.
   1280'de "Servis bölgeleri"/"Servis standartları" iki satıra kırılıyor,
   ok ikonu alt satıra düşüyordu. Üst+alt 2px çerçeve simetrik: hover
   çizgisi yazıyı yukarı itmez. */
.header-ic > .logo,
.header-aksiyon {
  flex: 0 0 auto;
}

.header-ic > nav {
  min-width: 0;
  margin-left: auto;
}

.header-ic {
  gap: var(--s4);
}

.ana-nav {
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
}

.ana-nav > li > a,
.header-tel {
  font-size: 0.875rem;
}

.ana-nav > li {
  display: flex;
  align-items: center;
}

.ana-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
  white-space: nowrap;
  border-top: 2px solid transparent;
}

.ana-nav > li > a svg {
  flex: 0 0 auto;
  vertical-align: 0;
}

/* Dar masaüstünde yer açılır: numara yalnız ikon, menü aralığı daralır. */
@media (max-width: 1199px) {
  .header-tel span {
    display: none;
  }
}

/* Yedi başlık + eylemler bu genişliğin altında tek satıra sığmıyor;
   menü çekmeceye geçer (eski eşik 860). */
@media (max-width: 1100px) {
  .ana-nav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }
}

/* Menü çekmecedeyken başlıkta yer var: numara yazısı geri gelir. */
@media (min-width: 721px) and (max-width: 1100px) {
  .header-tel span {
    display: inline;
  }
}

/* Mobil başlık (26 Eyl düzeltmesi): yukarıdaki genel `gap` ve `flex: 0 0 auto`
   telefonda başlığı ekrandan taşırıyordu (360'ta sayfa 389 px'e genişliyor,
   alttaki sabit arama çubuğu ekran dışına düşüyordu). Menü çekmecedeyken boş
   <nav> ızgaradan çıkar; dar ekranda aralık daralır, telefon simgesi alttaki
   "Hemen arayın" çubuğunda olduğu için başlıktan kalkar. */
@media (max-width: 1100px) {
  .header-ic > nav {
    display: none;
  }
}

@media (max-width: 860px) {
  .header-ic {
    gap: var(--s3);
  }

  .header-aksiyon {
    flex: 0 1 auto;
    min-width: 0;
  }

  .menu-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 400px) {
  .header-tel {
    display: none;
  }
}

@media (max-width: 350px) {
  .header-ic,
  .header-aksiyon {
    gap: var(--s2);
  }

  .btn-header {
    padding-inline: 0.5rem;
  }

  .menu-btn {
    padding-inline: 0.5rem;
  }

  .logo {
    gap: 6px;
  }

  .logo-yazi {
    font-size: 0.9375rem;
  }
}

/* Kapanış bandı: servis talebi + telefon düğmesi yan yana, ortalı. */
.kapanis .btn-grup {
  justify-content: center;
}

/* Başlıkta iki düğme: eski `.sayfa-bas .btn { margin-top }` her düğmeye ayrı
   üst pay veriyordu; telefonda alt satıra kayan ikinci düğme 36 px kopuk
   duruyordu. Pay gruba taşınır; telefonda iki düğme aynı genişlikte alt alta. */
.sayfa-bas .btn-grup {
  margin-top: var(--s5);
}

.sayfa-bas .btn-grup .btn {
  margin-top: 0;
}

/* Numara ortasından kırılmasın ("0850 242 25 / 20"). */
.tel-no {
  white-space: nowrap;
}

/* Dar kartta numara bütün hâlinde alt satıra geçer (yan yana sıkışmaz). */
.btn:has(.tel-no) {
  flex-wrap: wrap;
  row-gap: 0;
}

@media (max-width: 640px) {
  .sayfa-bas .btn-grup .btn,
  .kapanis .btn-grup .btn {
    flex: 1 1 100%;
  }
}

/* Yan kartta ikinci tam genişlik düğme (telefon) nefes alsın. */
.yan-kart .btn-tam + .btn-tam {
  margin-top: var(--s3);
}

/* Küçük ev aletleri — altbilgide sade bağlantı satırı (üst menüde yok). */
.footer-kucuk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  /* Alt boşluk yok: ardından gelen kurum bloğunun kendi üst payı ve çizgisi var. */
  padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-sm);
}

.footer .footer-kucuk h2 {
  margin: 0;
}

.footer-kucuk h2 a {
  color: inherit;
}

.footer-kucuk-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Küçük ev aleti sayfaları: markanın resmi hattı, her genişlikte ekranın
   altında sabit. İçerik örtülmesin diye gövdeye alt boşluk verilir. */
.resmi-hat-cubuk {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--navy-900, #111827);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 24px rgba(22, 22, 22, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.resmi-hat-cubuk-ic {
  display: flex;
  align-items: center;
  gap: var(--s3) var(--s4);
  min-height: 64px;
  color: inherit;
  text-decoration: none;
}

.resmi-hat-cubuk-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--action-500);
}

.resmi-hat-cubuk-yazi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.resmi-hat-cubuk-yazi small {
  font-size: var(--t-xs);
  font-weight: 500;
  opacity: 0.8;
}

.resmi-hat-cubuk-yazi strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resmi-hat-cubuk-not {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-xs);
  opacity: 0.7;
}

.resmi-hat-cubuk-dugme {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--action-500);
  color: var(--navy-900, #111827);
  font-size: var(--t-sm);
  font-weight: 800;
  white-space: nowrap;
}

.resmi-hat-cubuk-ic:hover .resmi-hat-cubuk-dugme {
  filter: brightness(1.08);
}

body:has(.resmi-hat-cubuk) {
  padding-bottom: 64px;
}

body:has(.resmi-hat-cubuk) .cerez-bar {
  bottom: 64px;
}

@media (max-width: 720px) {
  .resmi-hat-cubuk-ic {
    min-height: 58px;
  }

  .resmi-hat-cubuk-not {
    display: none;
  }

  .resmi-hat-cubuk-dugme {
    padding-inline: 1rem;
  }

  body:has(.resmi-hat-cubuk) {
    padding-bottom: 58px;
  }

  body:has(.resmi-hat-cubuk) .cerez-bar {
    bottom: 58px;
  }
}

/* ------------------------------------------------------------------ */
/* Servis standartları ayrıntı bölümleri + yasal metin düzeni          */
/* (26 Eyl 2026): /servis-standartlari, yasal.html                     */
/* ------------------------------------------------------------------ */
.standart-liste h3 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s2);
}

.standart-liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.std-bolumler {
  display: grid;
  border-top: 1px solid var(--line);
}

.std-bolum {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5) var(--s7);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 88px;
}

.std-bolum-bas h2 {
  font-size: 1.5rem;
  margin: var(--s2) 0 var(--s3);
}

.std-bolum-bas p {
  color: var(--ink-soft);
  margin: 0 0 var(--s3);
}

.std-no {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  color: var(--action-700);
  border-bottom: 2px solid var(--action-500);
  padding-bottom: 2px;
}

.std-maddeler {
  margin: 0;
  padding: 0;
}

.std-maddeler li {
  font-size: 1rem;
  color: var(--ink-soft);
}

.std-kapsam-notu {
  margin-top: var(--s7);
  padding: var(--s5) var(--s6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-800);
  border-radius: var(--r-md);
  background: var(--card);
  max-width: 68ch;
}

.std-kapsam-notu h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s2);
}

.std-kapsam-notu p {
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

#taahhutler,
#baglayicilik,
.yasal-metin h2[id] {
  scroll-margin-top: 88px;
}

.yasal-guncelleme {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

.sayfa-bas .yasal-guncelleme {
  color: rgba(255, 255, 255, 0.75);
}

.yasal-metin ul {
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.yasal-metin li {
  margin-bottom: var(--s2);
}

@media (max-width: 860px) {
  .std-bolum {
    grid-template-columns: 1fr;
    padding-block: var(--s6);
  }
}

@media (max-width: 640px) {
  .standart-liste {
    grid-template-columns: 1fr;
  }

  .std-kapsam-notu {
    padding: var(--s4);
  }
}

/* ------------------ /markalar beyaz eşya vitrini ------------------
   ~20 marka kartı: tek kolona inerse sayfa ekranlarca uzar. Kartlar
   görselsiz ve kısa olduğu için masaüstünde 4, tablette 3, telefonda 2
   kolon; çok dar ekranda (≤360px) tek kolon. */
.marka-vitrin {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}

.marka-vitrin .cihaz-kart h3 {
  font-size: 1.0625rem;
}

.marka-vitrin .cihaz-belirti a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.marka-vitrin .cihaz-belirti a:hover {
  color: var(--action-700);
  text-decoration-color: currentColor;
}

.marka-vitrin .cihaz-kart .link-ok {
  margin-bottom: var(--s4);
}

@media (max-width: 1024px) {
  .marka-vitrin {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marka-vitrin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
  }

  .marka-vitrin .cihaz-kart > :not(.kart-gorsel) {
    margin-inline: var(--s3);
  }

  .marka-vitrin .cihaz-belirti li {
    padding-left: 0;
  }

  .marka-vitrin .cihaz-belirti li::before {
    display: none;
  }

  /* Kart başlığı markayı zaten söylüyor; dar kolonda "Bosch Çamaşır
     Makinesi" iki satıra kırılıyordu. Önek yalnız GÖRSEL olarak gizlenir,
     bağlantının erişilebilir adı ve çapa metni markalı kalır. */
  .marka-vitrin .vitrin-onek {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .marka-vitrin {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   SERVISASSIST KATMANI — kırmızı / beyaz atölye kimliği
   Önceki kurallarla aynı özgüllükte, dosyanın sonunda durduğu için kazanır.
   =================================================================== */

body {
  background: var(--white);
  font-size: 1.0625rem;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
  line-height: 1.02;
  text-transform: uppercase;
}

h1 { font-weight: 800; letter-spacing: -0.005em; line-height: 0.95; }
h2 { font-weight: 800; }
h3 { font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; }

::selection { background: var(--kirmizi); color: var(--white); }

/* Atölye uyarı şeridi: kırmızı-beyaz 45° bant. Yalnız kenar süsü, metin taşımaz. */
.th-serit-bant,
.kapanis-bolum::before,
.th-pano::before {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--kirmizi) 0 14px,
    var(--white) 14px 28px
  );
}

/* --- etiket: kırmızı çizgi + büyük harf ------------------------------ */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--kirmizi-koyu);
}

.etiket::before {
  content: "";
  width: 26px;
  height: 3px;
  background: currentColor;
}

.bolum-koyu .etiket,
.hero .etiket,
.sayfa-bas .etiket {
  color: var(--white);
}

/* --- düğmeler ------------------------------------------------------- */
.btn {
  border-width: 2px;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-birincil {
  background: var(--kirmizi);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--navy-800);
}

.btn-birincil:hover {
  background: var(--kirmizi-koyu);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--navy-800);
}

.btn-birincil:active {
  background: var(--kirmizi-derin);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--navy-800);
}

.btn-ikincil {
  color: var(--navy-800);
  border-color: var(--navy-800);
}

.btn-ikincil:hover {
  background: var(--navy-800);
  color: var(--white);
  border-color: var(--navy-800);
}

.bolum-koyu .btn-birincil,
.sayfa-bas .btn-birincil,
.hero .btn-birincil {
  background: var(--white);
  color: var(--kirmizi-koyu);
  box-shadow: 4px 4px 0 var(--kirmizi-derin);
}

.bolum-koyu .btn-birincil:hover,
.sayfa-bas .btn-birincil:hover,
.hero .btn-birincil:hover {
  background: var(--krem-100);
  box-shadow: 5px 5px 0 var(--kirmizi-derin);
}

.bolum-koyu .btn-ikincil,
.sayfa-bas .btn-ikincil,
.hero .btn-ikincil {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
}

.bolum-koyu .btn-ikincil:hover,
.sayfa-bas .btn-ikincil:hover,
.hero .btn-ikincil:hover {
  background: var(--white);
  color: var(--kirmizi-koyu);
}

.btn-header {
  font-size: 1rem;
  box-shadow: 3px 3px 0 var(--navy-800);
}

.link-ok {
  color: var(--kirmizi-koyu);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.link-ok:hover {
  color: var(--kirmizi-derin);
  text-decoration-color: currentColor;
}

/* --- üst şerit ------------------------------------------------------ */
.ust-serit {
  background: var(--kirmizi);
  color: var(--white);
  font-size: 0.875rem;
}

.ust-serit-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 34px;
}

.ust-serit-not,
.ust-serit-baglar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ust-serit-baglar {
  display: flex;
  gap: var(--s5);
}

.ust-serit-baglar a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ust-serit-tel {
  font-weight: 600;
}

@media (max-width: 720px) {
  .ust-serit-baglar a:not(.ust-serit-tel) {
    display: none;
  }
}

/* --- başlık ve logo ------------------------------------------------- */
.header {
  border-bottom: 3px solid var(--navy-800);
}

.logo {
  gap: 10px;
  color: var(--navy-800);
}

.logo-sembol {
  width: 34px;
  height: 34px;
}

.logo-kare {
  fill: var(--kirmizi);
}

.logo-yazi {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.logo-yazi b {
  font-weight: 800;
  color: var(--kirmizi);
}

.footer .logo-yazi b,
.cekmece .logo-yazi b {
  color: inherit;
}

.footer .logo-kare {
  fill: var(--white);
}

.footer .logo-sembol path,
.footer .logo-sembol circle {
  stroke: var(--kirmizi-derin);
}

.ana-nav a {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-800);
  border-bottom-width: 3px;
}

.ana-nav a:hover {
  color: var(--kirmizi);
  border-bottom-color: var(--kirmizi);
}

.ana-nav .alt-menu {
  border-top: 3px solid var(--kirmizi);
}

.ana-nav .alt-menu a {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* --- bölüm zeminleri ------------------------------------------------ */
.bolum-acik {
  background: var(--surface);
}

.bolum-koyu {
  position: relative;
  background-color: var(--kirmizi-koyu);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.035) 0 2px,
    transparent 2px 18px
  );
}

.bolum-koyu .bolum-bas p,
.bolum-koyu .lead,
.sayfa-bas .lead {
  color: #ffe3e3;
}

/* Arıza bulma bölümü milimetrik kâğıt zemininde. */
.th-cizgili {
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, rgba(208, 25, 31, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(208, 25, 31, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* --- sayfa başlığı -------------------------------------------------- */
.sayfa-bas {
  background-color: var(--kirmizi);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.05) 0 2px,
    transparent 2px 18px
  );
  border-bottom: 6px solid var(--navy-800);
}

.sayfa-bas-gorselli::after {
  background: linear-gradient(
    100deg,
    var(--kirmizi) 0%,
    var(--kirmizi) 44%,
    rgba(208, 25, 31, 0.82) 60%,
    rgba(208, 25, 31, 0.4) 100%
  );
}

.sayfa-bas-gorselli::before {
  filter: grayscale(1) contrast(1.1);
  opacity: 0.5;
}

.sayfa-bas h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem);
}

.sayfa-bas .kirinti,
.sayfa-bas .kirinti a {
  color: rgba(255, 255, 255, 0.85);
}

.sayfa-bas .kirinti a:hover {
  color: var(--white);
  text-decoration: underline;
}

.kirinti a {
  color: var(--kirmizi-koyu);
}

/* --- ana sayfa açılışı ---------------------------------------------- */
.th-hero {
  position: relative;
  background: var(--white);
  overflow: hidden;
}

.th-hero-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
}

.th-hero-metin,
.th-pano {
  min-width: 0;
}

.th-hero h1 {
  margin-bottom: var(--s5);
  font-size: var(--t-hero);
  color: var(--navy-800);
}

.th-vurgu {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
  color: var(--white);
  background: var(--kirmizi);
  transform: skewX(-6deg);
}

.th-hero .lead {
  margin-bottom: var(--s6);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.th-hizli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 2px solid var(--line);
}

.th-hizli span {
  margin-right: var(--s2);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.th-hizli a {
  padding: 0.35rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--navy-800);
  border: 1.5px solid var(--navy-800);
  transition: background 0.15s ease, color 0.15s ease;
}

.th-hizli a:hover {
  background: var(--kirmizi);
  border-color: var(--kirmizi);
  color: var(--white);
}

/* Kırmızı atölye panosu: sol üst köşede uyarı bandı, içinde beyaz hatlı çizim. */
.th-pano {
  position: relative;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--kirmizi);
  color: var(--white);
  box-shadow: 12px 12px 0 var(--navy-800);
}

.th-pano::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 24px;
  width: 140px;
  height: 14px;
}

.th-pano-bas {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.th-pano .hero-cizim-kap {
  padding: clamp(0.5rem, 2vw, 1rem);
  background-color: transparent;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 0;
}

.th-pano .cizim {
  color: var(--white);
  max-width: 420px;
}

.th-pano .c-olcu,
.th-pano .c-olcu text {
  stroke: rgba(255, 255, 255, 0.8);
  fill: rgba(255, 255, 255, 0.9);
}

.th-pano .c-olcu line {
  fill: none;
}

.th-pano .c-olcu text {
  stroke: none;
}

.th-pano .nokta line {
  stroke: var(--white);
}

.th-pano .nokta-hedef {
  fill: var(--white);
}

.th-pano .nokta-halka {
  fill: var(--navy-800);
  stroke: var(--white);
}

.th-pano .nokta text {
  fill: var(--white);
}

.th-pano .cizim-lejant,
.th-pano .lejant-bas {
  color: var(--white);
}

.th-pano .cizim-lejant li::before {
  color: var(--white);
  opacity: 0.7;
}

/* Sayı şeridi: mürekkep zemin, kırmızı ayraçlar. */
.th-sayilar {
  background: var(--navy-800);
  color: var(--white);
}

.th-sayilar-ic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.th-sayilar-ic div {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s5) var(--s4);
  border-left: 3px solid var(--kirmizi);
}

.th-sayilar dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

.th-sayilar dt {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-200);
}

/* Bölüm başı: başlık solda, açıklama sağda; altta kalın çizgi. */
.th-bolum-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: end;
  margin-bottom: var(--s7);
  padding-bottom: var(--s5);
  border-bottom: 3px solid var(--navy-800);
}

.th-bolum-bas h2 {
  color: var(--navy-800);
}

.th-bolum-bas p {
  margin: 0;
  font-size: var(--t-lead);
  color: var(--ink-soft);
}

/* --- cihaz kartları ------------------------------------------------- */
.cihaz-cizim-kart {
  border-radius: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cihaz-cizim-kart:hover,
.cihaz-cizim-kart:focus-within {
  box-shadow: inset 0 4px 0 var(--kirmizi);
}

.cihaz-cizim-ad {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cihaz-no {
  color: var(--kirmizi);
}

.cihaz-talep {
  color: var(--kirmizi-koyu);
}

.marka-satir a:hover {
  color: var(--kirmizi);
}

/* --- arıza bulma ---------------------------------------------------- */
.ariza-sekmeler button {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid var(--navy-800);
  color: var(--navy-800);
}

.ariza-sekmeler button:hover {
  background: var(--navy-50);
}

.ariza-sekmeler button.secili {
  background: var(--kirmizi);
  border-color: var(--kirmizi);
}

.ariza-belirtiler button.secili {
  border-color: var(--navy-800);
  border-left: 6px solid var(--kirmizi);
  background: var(--action-50);
}

.ariza-soru {
  text-transform: uppercase;
}

.ariza-cizim-kap,
.ariza-grup-cizim {
  border: 2px solid var(--navy-800);
  box-shadow: 8px 8px 0 var(--kirmizi);
}

/* --- atölye kuralları ----------------------------------------------- */
.th-kurallar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--s7);
  padding: 0;
  list-style: none;
  counter-reset: kural;
  border: 2px solid var(--navy-800);
}

.th-kurallar li {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  counter-increment: kural;
}

.th-kurallar li + li {
  border-left: 2px solid var(--navy-800);
}

.th-kurallar li::before {
  content: counter(kural, decimal-leading-zero);
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  font-family: var(--font-display);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--kirmizi);
}

.th-kurallar .mikro {
  width: 48px;
  height: 48px;
  margin-bottom: var(--s5);
  color: var(--navy-800);
}

.th-kurallar .mikro-nokta {
  fill: var(--kirmizi);
}

.th-kurallar h3 {
  margin-bottom: var(--s3);
}

.th-kurallar p {
  color: var(--ink-soft);
}

.th-karsilastir {
  border: 2px solid var(--navy-800);
}

.th-karsilastir-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.th-karsilastir-bas span {
  padding: var(--s3) var(--s5);
  background: var(--navy-800);
  color: var(--white);
}

.th-karsilastir-bas span + span {
  background: var(--kirmizi);
}

.th-karsilastir .neden-liste {
  margin: 0;
}

.th-karsilastir .neden-liste > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.th-karsilastir .neden-liste dt,
.th-karsilastir .neden-liste dd {
  margin: 0;
  padding: var(--s4) var(--s5);
}

.th-karsilastir .neden-liste dt {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(208, 25, 31, 0.45);
}

.th-karsilastir .neden-liste dd {
  font-weight: 600;
  color: var(--navy-800);
  border-left: 2px solid var(--kirmizi);
}

/* --- süreç ---------------------------------------------------------- */
.surec-cizgi::after {
  height: 4px;
  background: var(--kirmizi);
}

.surec-cizgi li::before {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border-color: var(--navy-800);
}

.surec-cizgi.goster-aktif li::before {
  background: var(--kirmizi);
  border-color: var(--kirmizi);
}

.surec-no {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kirmizi-koyu);
}

/* --- servis ağı (kırmızı bant) -------------------------------------- */
.ag-sayilar div {
  border-left: 3px solid var(--white);
}

.ag-sayilar dt {
  color: #ffd2d2;
}

.ag .link-ok {
  color: var(--white);
}

.harita-koyu {
  background: rgba(0, 0, 0, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.harita-koyu .harita-secici label,
.harita-koyu .harita-durum {
  color: #ffe3e3;
}

.harita-koyu .harita-secici select {
  background: var(--kirmizi-derin);
}

.harita-koyu .harita-alan {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.55);
}

.harita-koyu .harita-alan:hover,
.harita-koyu .harita-alan.vurgu {
  fill: var(--white);
  stroke: var(--kirmizi-derin);
}

.harita-koyu .harita-ilce-listesi a {
  color: #ffe3e3;
}

.harita-alan:hover,
.harita-alan.vurgu,
.harita-ilce .harita-alan:hover,
.harita-ilce .harita-alan.vurgu {
  fill: var(--kirmizi);
}

/* --- kapanış bandı -------------------------------------------------- */
.kapanis-bolum {
  padding-top: calc(var(--section-y) + 14px);
}

.kapanis-bolum::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
}

.kapanis h2 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}

/* --- form ----------------------------------------------------------- */
.talep {
  border-top: 6px solid var(--kirmizi);
}

.talep-form {
  border: 2px solid var(--navy-800);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--kirmizi);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--kirmizi);
  box-shadow: var(--focus);
  outline: none;
}

.talep-adimlar strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- SSS ------------------------------------------------------------ */
.sss-oge {
  border-left: 4px solid var(--kirmizi);
}

.sss dt {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --- kart ve tablolar ----------------------------------------------- */
.grup-kart:hover,
.cihaz-kart:hover,
.yan-kart:hover {
  border-color: var(--kirmizi);
}

.kart-ikon,
.ikon-daire {
  background: var(--kirmizi);
  color: var(--white);
  border-radius: 0;
}

.tablo thead th {
  background: var(--navy-800);
  color: var(--white);
}

.yer-listesi a:hover {
  color: var(--kirmizi);
}

.tik-liste svg,
.belirti-grid svg {
  color: var(--kirmizi);
}

.yorum {
  border-top: 4px solid var(--kirmizi);
}

.yorum-puan {
  color: var(--kirmizi);
}

/* --- altbilgi ------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--navy-800);
  color: #d6d0cd;
  border-top: 8px solid var(--kirmizi);
}

.footer h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: #ff8a8d;
}

.footer-slogan {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.footer .logo-kare {
  fill: var(--kirmizi);
}

.footer .logo-sembol path,
.footer .logo-sembol circle {
  stroke: var(--white);
}

.footer .logo-yazi b {
  color: var(--kirmizi);
}

.footer a:hover {
  text-decoration-color: var(--kirmizi);
}

/* --- mobil çubuk ve çerez ------------------------------------------- */
.mobil-cubuk-birincil {
  background: var(--kirmizi);
  color: var(--white);
}

.cerez-bar {
  border-top: 4px solid var(--kirmizi);
}

/* --- dar ekran ------------------------------------------------------ */
@media (max-width: 960px) {
  .th-hero-ic {
    grid-template-columns: minmax(0, 1fr);
  }

  .th-pano {
    margin-right: 12px;
  }

  .th-bolum-bas {
    grid-template-columns: minmax(0, 1fr);
  }

  .th-kurallar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .th-kurallar li:nth-child(3) {
    border-left: 0;
  }

  .th-kurallar li:nth-child(n + 3) {
    border-top: 2px solid var(--navy-800);
  }
}

@media (max-width: 640px) {
  .th-sayilar-ic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .th-kurallar {
    grid-template-columns: minmax(0, 1fr);
  }

  .th-kurallar li + li {
    border-left: 0;
    border-top: 2px solid var(--navy-800);
  }

  .th-karsilastir-bas,
  .th-karsilastir .neden-liste > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .th-karsilastir-bas span + span {
    display: none;
  }

  .th-karsilastir .neden-liste dd {
    border-left: 0;
    border-top: 1px dashed var(--line);
  }

  .logo-yazi {
    font-size: 1.45rem;
  }

  .btn {
    font-size: 1rem;
  }
}

.ariza-sekmeler button,
.ariza-belirtiler button,
.harita,
.harita-secici select,
.harita-geri {
  border-radius: 0;
}

.marka-hero-tel,
.btn {
  border-radius: 0;
}

.marka-hero h1 {
  text-transform: uppercase;
}

.marka-hero-kart {
  border: 2px solid var(--navy-800);
  box-shadow: 10px 10px 0 var(--kirmizi);
}

.marka-hero-cagri-bas {
  border-left-color: var(--kirmizi);
}

.marka-hero-ilke {
  border-left: 5px solid var(--kirmizi);
}

.marka-hero-ozellik-ikon {
  background: var(--kirmizi);
  color: var(--white);
  border-radius: 0;
}

/* Telefonda tamir talebi düğmesi alttaki sabit çubukta durur; başlıkta yalnız logo + menü. */
@media (max-width: 640px) {
  .btn-header {
    display: none;
  }

  .logo-sembol {
    width: 30px;
    height: 30px;
  }

  .logo-yazi {
    font-size: 1.4rem;
  }

  .th-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }

  .th-pano {
    margin-right: 10px;
    box-shadow: 8px 8px 0 var(--navy-800);
  }

  .th-pano-bas {
    flex-direction: column;
    gap: 2px;
  }
}