@charset "UTF-8";

/* ===================================================================
   SERVISFER TASARIM SİSTEMİ (Eylül 2026)
   Konumlandırma: teknik servis + modern teknoloji + güven.
   Karakter gradient'e değil tipografiye, boşluğa, teknik çizime ve
   kontrasta dayanır.

   Renk mimarisi:
     kömür (#111827)     -> metin, sembol hattı, koyu zeminler, birincil düğme
     turkuaz (#14B8A6)   -> YALNIZCA vurgu: sembol düğümü, arıza noktaları,
                            odak halkası, harita seçimi. Metin rengi olarak
                            kullanılmaz (beyaz üstünde kontrastı yetmez).
     zemin (#F7F8FA)     -> sayfa zemini; kartlar beyaz.
   Değişken adları (navy-*, action-*, krem-*) eski şemadan miras kalır:
   öne çıkan marka temaları (marka_icerik.tema_stili) bu adları ezer.
   =================================================================== */

/* --- Fontlar: CSP default-src 'self' olduğu için tamamı yerelden ---- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.6d36d5bdedfa.woff2") format("woff2");
  font-weight: 400 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: "Manrope";
  src: url("../fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");
  font-weight: 400 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;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  font-weight: 400 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: "Inter";
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  font-weight: 400 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 {
  /* Kömür skalası — "navy" adı miras, değer kömür/gri */
  --navy-50: #f3f4f6;
  --navy-100: #e5e7eb;
  --navy-200: #d1d5db;
  --navy-400: #6b7280;
  --navy-600: #374151;
  --navy-800: #111827;
  --navy-900: #0b1220;

  /* Açık yüzeyler — eski krem adları, soğuk gri değerler */
  --krem-50: #fbfbfc;
  --krem-100: #f3f4f6;
  --krem-200: #e5e7eb;

  /* Turkuaz — yalnızca vurgu; 700 tonu küçük metin için */
  --action-50: #e6f7f4;
  --action-500: #14b8a6;
  --action-600: #0d9488;
  --action-700: #0f766e;

  /* Nötrler */
  --ink: #111827;
  --ink-soft: #374151;
  --ink-mute: #6b7280;
  --line: #e5e7eb;
  --surface: #f7f8fa;
  --card: #ffffff;
  --white: #ffffff;

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

  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --t-hero: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
  --t-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --t-h3: 1.25rem;
  --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: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-full: 999px;

  --koyu-rgb: 17, 24, 39;

  --sh-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --sh-md: 0 4px 12px rgba(17, 24, 39, 0.07), 0 1px 3px rgba(17, 24, 39, 0.05);
  --sh-lg: 0 16px 40px rgba(17, 24, 39, 0.12), 0 4px 10px rgba(17, 24, 39, 0.06);
  --focus: 0 0 0 3px rgba(20, 184, 166, 0.4);
}

/* ------------------------------- 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(17, 24, 39, 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 h3 {
  margin-bottom: var(--s3);
  font-size: 1.1rem;
}

.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 h3 {
  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(--navy-400);
}

.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);
}

.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 h3 {
  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(--navy-400);
}

.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(--navy-400);
}

/* ----------------------------- ç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;
}

/* ------------------------------ 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 h3 {
  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(17, 24, 39, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 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(17, 24, 39, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 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(17, 24, 39, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 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(17, 24, 39, 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(17, 24, 39, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 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;
}

.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);
  }
}