@charset "UTF-8";
/* ==========================================================================
   BASKILI TEDARİK — SİTE TEMASI
   --------------------------------------------------------------------------
   Bu dosya yalnızca bu müşteriye aittir; güncelleme paketiyle değişmez.
   Değerler tasarim/TASARIM-DILI.md dosyasından gelir — renk, ölçü ve boşluk
   burada uydurulmaz, aşağıdaki değişkenlerden okunur.

   Panelin tasarım ekranı --vurgu / --zemin / --metin / --vurgu-2
   değişkenlerini sayfa başında ezebilir (bkz. _header.php). Bu yüzden renkler
   koda gömülmez, hep var(--...) ile kullanılır.

   Bölümler:
     1. Değişkenler
     2. Reset ve temel tipografi
     3. Düzen (kap, bölüm, ızgara, yardımcı sınıflar)
     4. Butonlar ve etiketler
     5. Üst menü / mobil çekmece / yönetici rozetleri
     6. Alt bilgi ve mobil alt çubuk
     7. Popup (duyuru)
     8. Sayfa başlığı şeridi
     9. Kapanış çağrısı şeridi (CTA)
   ========================================================================== */


/* ===== 1. Değişkenler ===================================================== */

:root {
  /* Palet */
  --zemin:        #F7F7F4;   /* sayfa arka planı, kâğıt tonu kırık beyaz */
  --yuzey:        #FFFFFF;   /* kart, panel */
  --metin:        #14161A;   /* ana metin, mürekkep siyahı */
  --metin-soluk:  #6B7078;   /* açıklama, ikincil */
  --vurgu:        #D93A1F;   /* birincil buton, aktif durum, kapanış şeridi */
  --vurgu-koyu:   #C0331B;   /* vurgu hover */
  --vurgu-soft:   #FBEAE6;   /* vurgunun yumuşak zemini */
  --vurgu-2:      #0F2E4A;   /* koyu şerit zemini, grafik öğe */

  /* Palete bağlı türev tonlar (rgb üçlüsü ile saydamlık kurulur) */
  --metin-rgb:    20, 22, 26;
  --cizgi:        rgba(20, 22, 26, .10);
  --cizgi-koyu:   rgba(20, 22, 26, .18);
  --zemin-yumusak: rgba(20, 22, 26, .04);

  /* Yazı tipleri — _header.php tek istekte Bricolage Grotesque + Inter yükler.
     Yüklenmezse aşağıdaki sistem yığını devreye girer, tasarım bozulmaz. */
  --font-baslik: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-govde:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Tipografi ölçeği */
  --yazi-hero:   64px;
  --yazi-bolum:  42px;
  --yazi-kart:   21px;
  --yazi-govde:  17px;
  --yazi-kucuk:  15px;
  --yazi-etiket: 13px;
  --satir-govde: 1.65;
  --satir-baslik: 1.12;

  /* Köşe yuvarlaklığı */
  --r-kart:   16px;
  --r-kap:    24px;
  --r-dugme:  12px;
  --r-rozet:  999px;

  /* Gölge */
  --golge:       0 8px 24px rgba(20, 22, 26, .08);
  --golge-hover: 0 24px 48px rgba(20, 22, 26, .10);

  /* Boşluk ölçeği — ara değer uydurulmaz, bu basamaklar kullanılır */
  --bosluk-1: 8px;
  --bosluk-2: 12px;
  --bosluk-3: 16px;
  --bosluk-4: 24px;
  --bosluk-5: 32px;
  --bosluk-6: 48px;
  --bosluk-7: 64px;
  --bosluk-8: 80px;

  /* Bölüm boşluğu ve içerik genişliği */
  --bolum-bosluk:     112px;  /* ferahlık boşlukla kurulur, 112'nin altına inmez */
  --bolum-bosluk-sik: 64px;   /* birbirini tamamlayan iki bölüm arasında */
  --kap-genislik:     1200px;
  --kap-yan:          32px;

  /* Üst menü yüksekliği — hero'nun menünün altına girmesi buna dayanır */
  --ustmenu-yukseklik: 76px;

  /* Geçiş süresi */
  --gecis: 220ms cubic-bezier(.2, .6, .3, 1);
}

/* ===== 1b. Yazı tipleri (yerel) ==========================================
   KVKK ve hız için Google Fonts CDN'i yerine assets/fonts/ altındaki woff2
   dosyaları servis edilir (Enes'in tarayıcısı Google'a hiç istek atmaz).
   Türkçe karakterler (ş,ğ,ı,ö,ü,ç) latin + latin-ext altkümesine yayıldığı
   için her aile iki dosyadan oluşur; ikisi de değişken (variable) font
   olduğundan tek dosya birden çok kalınlığı (600/700, 400/500/600) karşılar.
   font-display: swap — dosya inmeden sistem yazı tipiyle metin görünür,
   düzen sıçraması olmaz (font ölçüleri sistem yığınına yakın seçildi). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020;
}

@media (max-width: 720px) {
  :root {
    --yazi-hero:  36px;
    --yazi-bolum: 28px;
    --yazi-kart:  19px;

    --bolum-bosluk:     64px;
    --bolum-bosluk-sik: 48px;
    --kap-yan:          20px;

    --ustmenu-yukseklik: 64px;
  }
}


/* ===== 2. Reset ve temel tipografi ======================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Çapa bağlantısında hedef, yapışkan menünün altında kalmasın */
  scroll-padding-top: calc(var(--ustmenu-yukseklik) + var(--bosluk-3));
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-govde);
  font-size: var(--yazi-govde);
  line-height: var(--satir-govde);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Hiçbir genişlikte yatay kaydırma olmaz */
  overflow-x: hidden;
}

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

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

/* Metin içi bağlantı: kontrast notu gereği vurgu rengi değil,
   altı çizili koyu metin kullanılır. */
p a,
li a,
.bolum-metin a,
.bos-uyari a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cizgi-koyu);
  transition: text-decoration-color var(--gecis);
}

p a:hover,
li a:hover,
.bolum-metin a:hover,
.bos-uyari a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--bosluk-3);
  font-family: var(--font-baslik);
  font-weight: 700;
  line-height: var(--satir-baslik);
  letter-spacing: -0.015em;
  color: var(--metin);
  text-wrap: balance;
}

h1 { font-size: var(--yazi-bolum); }
h2 { font-size: var(--yazi-bolum); }
h3 { font-size: var(--yazi-kart); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--yazi-govde); font-weight: 600; letter-spacing: 0; }

/* Başlıklarda vurgu: panelde *yıldız* ile yazılan parça <em> olarak gelir.
   İtalik değil, renkle vurgulanır. */
h1 em, h2 em, h3 em, h4 em {
  font-style: normal;
  color: var(--vurgu);
}

p {
  margin: 0 0 var(--bosluk-3);
  max-width: 68ch;
}

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

strong, b { font-weight: 600; }

small { font-size: var(--yazi-etiket); }

ul, ol {
  margin: 0 0 var(--bosluk-3);
  padding-left: var(--bosluk-4);
}

ul:last-child, ol:last-child { margin-bottom: 0; }

li + li { margin-top: var(--bosluk-1); }

hr {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: var(--bosluk-6) 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Görünür odak halkası — klavyeyle gezenler nerede olduklarını görür */
:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fareyle tıklamada halka çıkmasın */
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--vurgu-soft);
  color: var(--metin);
}

/* Hareketi azalt tercihi: tüm geçiş, animasyon ve yumuşak kaydırma kapanır */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== 3. Düzen ========================================================== */

.kap {
  width: 100%;
  max-width: calc(var(--kap-genislik) + (var(--kap-yan) * 2));
  margin-inline: auto;
  padding-inline: var(--kap-yan);
}

/* Bölüm — düzenleme rozetleri konumlanabilsin diye relative */
.bolum {
  position: relative;
  padding-block: var(--bolum-bosluk);
}

.bolum-sik { padding-block: var(--bolum-bosluk-sik); }

.bolum-ust-bosluksuz { padding-top: 0; }

/* Koyu şerit — sayfada en fazla iki tane bulunur (süreç ve kapanış) */
.bolum-koyu {
  background: var(--vurgu-2);
  color: #fff;
}

.bolum-koyu h1,
.bolum-koyu h2,
.bolum-koyu h3,
.bolum-koyu h4 { color: #fff; }

.bolum-koyu .bolum-metin,
.bolum-koyu p { color: rgba(255, 255, 255, .78); }

.bolum-koyu h1 em,
.bolum-koyu h2 em,
.bolum-koyu h3 em { color: #fff; opacity: .62; }

/* Bölüm başlığı bloğu */
.bolum-bas {
  max-width: 720px;
  margin-bottom: var(--bosluk-6);
}

.bolum-bas > :last-child { margin-bottom: 0; }

.bolum-bas h2 { margin-bottom: var(--bosluk-2); }

/* Başlık solda, yan bağlantı sağda */
.bolum-bas-satir {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
}

.bolum-bas-satir > div {
  max-width: 720px;
  min-width: 0;
}

.bolum-metin {
  color: var(--metin-soluk);
  font-size: var(--yazi-govde);
  margin-bottom: 0;
}

.dar-metin {
  max-width: calc(760px + (var(--kap-yan) * 2));
}

/* Kart ızgarası — mobil önce: tek sütun, genişledikçe açılır */
.kart-izgara {
  display: grid;
  gap: var(--bosluk-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .kart-izgara-2,
  .kart-izgara-3,
  .kart-izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .kart-izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kart-izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* İçerik gerçekten yoksa gösterilen tek satırlık bilgi.
   Boş bölüm hiç basılmaz; bu sınıf yalnızca "süzgeç sonucu boş" hâli içindir. */
.bos-uyari {
  margin: 0;
  max-width: none;
  padding: var(--bosluk-5);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: var(--r-kart);
  color: var(--metin-soluk);
  text-align: center;
}

/* Madde listesi (panelde "- " ile yazılan satırlar) */
.madde-listesi {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--bosluk-3);
  display: grid;
  gap: var(--bosluk-2);
}

.madde-listesi li {
  position: relative;
  padding-left: var(--bosluk-4);
  margin-top: 0;
}

.madde-listesi li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--satir-govde) * 0.5em - 3px);
  width: 6px;
  height: 6px;
  border-radius: var(--r-rozet);
  background: var(--vurgu);
}

.bolum-koyu .madde-listesi li::before { background: #fff; }

/* İçeriğe geç bağlantısı — yalnızca odaklanınca görünür */
.atla {
  position: absolute;
  left: var(--bosluk-3);
  top: var(--bosluk-3);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--vurgu);
  color: #fff;
  padding: var(--bosluk-2) var(--bosluk-3);
  border-radius: var(--r-dugme);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  transition: transform var(--gecis);
}

.atla:focus { transform: translateY(0); }


/* ===== 4. Butonlar ve etiketler ========================================== */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-1);
  min-height: 48px;                 /* dokunma hedefi 44px'in altına inmez */
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1.5px solid transparent;
  border-radius: var(--r-dugme);
  font-family: var(--font-govde);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gecis), border-color var(--gecis),
              color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.dugme:active { transform: translateY(1px); }

/* Birincil eylem: Teklif Al */
.dugme-dolu {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
}

.dugme-dolu:hover {
  background: var(--vurgu-koyu);
  border-color: var(--vurgu-koyu);
}

/* İkincil eylem: Numune İste */
.dugme-cerceve {
  background: transparent;
  border-color: var(--cizgi-koyu);
  color: var(--metin);
}

.dugme-cerceve:hover {
  border-color: var(--metin);
  background: var(--zemin-yumusak);
}

.bolum-koyu .dugme-cerceve,
.serit-cta .dugme-cerceve {
  border-color: rgba(255, 255, 255, .40);
  color: #fff;
}

.bolum-koyu .dugme-cerceve:hover,
.serit-cta .dugme-cerceve:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* Renkli/koyu zemin üstünde birincil eylem */
.dugme-beyaz {
  background: #fff;
  border-color: #fff;
  color: var(--metin);
}

.dugme-beyaz:hover {
  background: var(--zemin);
  border-color: var(--zemin);
}

.dugme-blok {
  display: flex;
  width: 100%;
}

/* Küçük büyük harfli etiket */
.etiket {
  display: inline-block;
  margin-bottom: var(--bosluk-2);
  color: var(--vurgu);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Koyu/renkli zemin üstündeki etiket */
.etiket-acik { color: rgba(255, 255, 255, .82); }

.bolum-koyu .etiket { color: rgba(255, 255, 255, .82); }

/* Renkli zemin üstünde ikincil bağlantı (telefon numarası vb.) */
.baglanti-acik {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color var(--gecis);
}

.baglanti-acik:hover { text-decoration-color: #fff; }

/* Detay sayfalarında "← Ürünler" tipi geri bağlantısı */
.geri-baglanti {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-1);
  min-height: 44px;
  margin-bottom: var(--bosluk-3);
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  font-weight: 500;
  transition: color var(--gecis);
}

.geri-baglanti:hover { color: var(--metin); }


/* ===== 5. Üst menü ======================================================= */

/* Yönetici şeridi — yalnızca panelde giriş yapılmışsa basılır */
.yonetici-serit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-4);
  padding: var(--bosluk-1) var(--kap-yan);
  background: var(--vurgu-2);
  color: rgba(255, 255, 255, .86);
  font-size: var(--yazi-etiket);
  text-align: center;
}

.yonetici-serit b { color: #fff; }

.yonetici-serit a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Yapışkan başlık */
.ustmenu {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background-color var(--gecis), box-shadow var(--gecis),
              backdrop-filter var(--gecis);
}

/* Ana sayfada (body.sayfa-hero) menü, hero'nun üstünde zeminsiz durur:
   negatif alt boşlukla hero menünün altından başlar. */
body.sayfa-hero .ustmenu { margin-bottom: calc(var(--ustmenu-yukseklik) * -1); }

/* Kaydırınca (site.js 'is-kaydi' ekler) zemin ve bulanıklık gelir */
.ustmenu.is-kaydi {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--cizgi);
}

/* Bulanıklık desteklenmiyorsa saydamlık kapanır, yazı okunur kalır */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .ustmenu.is-kaydi { background: var(--yuzey); }
}

.ustmenu-ic {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  min-height: var(--ustmenu-yukseklik);
}

/* Marka */
.marka {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  flex: 0 0 auto;
  min-height: 44px;
}

.marka img {
  width: auto;
  max-height: 40px;
}

.marka-isaret {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-dugme);
  background: var(--vurgu);
  color: #fff;
  font-family: var(--font-baslik);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.marka-ad {
  font-family: var(--font-baslik);
  font-size: var(--yazi-govde);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Gezinme */
.ustmenu-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto;
  flex-wrap: wrap;
}

.ustmenu-nav > a,
.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-1);
  min-height: 44px;
  padding: var(--bosluk-1) var(--bosluk-2);
  border-radius: 10px;
  color: var(--metin);
  font-size: var(--yazi-kucuk);
  font-weight: 500;
  transition: color var(--gecis), background-color var(--gecis);
}

.ustmenu-nav > a:hover,
.nav-item > a:hover { background: var(--zemin-yumusak); }

.ustmenu-nav .is-active { color: var(--vurgu); font-weight: 600; }

.ustmenu-nav .yalniz-ikon { padding-inline: var(--bosluk-1); }

.ustmenu-nav .has-ikon svg { width: 18px; height: 18px; }

.ustmenu-nav .yasla-sag { margin-left: auto; }

/* Alt menüsü olan öğe */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-caret {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
  transition: transform var(--gecis);
}

/* Alt menüyü mobilde açan buton; masaüstünde gerekmez */
.nav-sub-button { display: none; }

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 260px;
  padding: var(--bosluk-1);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  box-shadow: var(--golge);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}

.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub,
.nav-item.is-acik > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-item:hover > a .nav-caret,
.nav-item.is-acik > a .nav-caret { transform: rotate(180deg); }

/* Sağa yaslanmış öğenin alt menüsü ekrandan taşmasın */
.nav-item.yasla-sag {
  margin-left: auto;
}

.nav-item.yasla-sag > .nav-sub {
  left: auto;
  right: 0;
}

/* Geniş (mega) menü */
.nav-item--mega > .nav-sub {
  min-width: min(680px, calc(100vw - (var(--kap-yan) * 2)));
}

.nav-item--mega > .nav-sub > .nav-sub-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.nav-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-sub-list li { margin-top: 0; }

.nav-sub-list a {
  display: block;
  padding: var(--bosluk-2);
  border-radius: 10px;
  color: var(--metin);
  font-size: var(--yazi-kucuk);
  line-height: 1.4;
  transition: background-color var(--gecis), color var(--gecis);
}

.nav-sub-list a:hover { background: var(--zemin-yumusak); }

.nav-sub-list a.is-active { color: var(--vurgu); }

.nav-sub-list b {
  display: block;
  font-weight: 600;
}

.nav-sub-list small {
  display: block;
  margin-top: 2px;
  color: var(--metin-soluk);
  line-height: 1.45;
}

/* Üçüncü seviye */
.nav-sub-list--derin {
  margin: 2px 0 var(--bosluk-1) var(--bosluk-2);
  padding-left: var(--bosluk-2);
  border-left: 1px solid var(--cizgi);
}

.nav-sub-list--derin a {
  padding-block: var(--bosluk-1);
  color: var(--metin-soluk);
}

.nav-sub-list--derin a:hover { color: var(--metin); }

/* Sağdaki eylemler */
.ustmenu-eylem {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  flex: 0 0 auto;
}

.ustmenu-telefon {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-1);
  min-height: 44px;
  color: var(--metin);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--gecis);
}

.ustmenu-telefon:hover { color: var(--vurgu); }

.ustmenu-telefon svg { color: var(--vurgu); }

/* Çekmeceyi açan buton — yalnızca dar ekranda */
.cekmece-dugme {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-dugme);
  color: var(--metin);
}

.cekmece-dugme:hover { background: var(--zemin-yumusak); }

/* Dar ekran: yatay menü ve masaüstü eylemleri gizlenir, çekmece açılır */
@media (max-width: 980px) {
  .ustmenu-nav,
  .ustmenu-eylem { display: none; }

  .cekmece-dugme { display: inline-flex; }
}


/* ===== 5b. Mobil çekmece ================================================= */

.cekmece {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--golge-hover);
  transform: translateX(100%);
  transition: transform var(--gecis);
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .cekmece { background: var(--yuzey); }
}

/* site.js önce [hidden] kaldırır, sonra .is-acik ekler */
.cekmece[hidden] { display: none; }

.cekmece.is-acik { transform: translateX(0); }

.cekmece-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  min-height: 44px;
}

.cekmece-kapat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-dugme);
  color: var(--metin);
}

.cekmece-kapat:hover { background: var(--zemin-yumusak); }

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

.cekmece-nav > a,
.cekmece .nav-item > a {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 48px;
  padding: var(--bosluk-2);
  border-radius: var(--r-dugme);
  font-size: var(--yazi-govde);
  font-weight: 500;
}

.cekmece .nav-item {
  position: relative;
  display: block;
}

.cekmece .nav-item > a { padding-right: 52px; }

.cekmece .nav-caret { display: none; }

/* Alt menü çekmecede yerinde açılır */
.cekmece .nav-sub-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-dugme);
}

.cekmece .nav-sub-button > span {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .55;
  transition: transform var(--gecis);
}

.cekmece .nav-sub-button[aria-expanded="true"] > span { transform: rotate(180deg); }

.cekmece .nav-sub {
  position: static;
  display: none;
  min-width: 0;
  padding: 0 0 var(--bosluk-1) var(--bosluk-2);
  border: 0;
  border-left: 1px solid var(--cizgi);
  border-radius: 0;
  margin-left: var(--bosluk-2);
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cekmece .nav-item.is-acik > .nav-sub { display: block; }

/* Çekmecede fareyle üstüne gelme açma davranışı istenmez */
.cekmece .nav-item:hover > .nav-sub,
.cekmece .nav-item:focus-within > .nav-sub { display: none; }

.cekmece .nav-item.is-acik:hover > .nav-sub,
.cekmece .nav-item.is-acik:focus-within > .nav-sub { display: block; }

.cekmece .nav-sub-list a { min-height: 44px; }

.cekmece-eylem { margin-top: auto; }


/* ===== 5c. Düzenleme rozetleri (yalnızca yönetici) ======================= */

body.duzenleme-modu .bolum,
body.duzenleme-modu .sayfa-bas,
body.duzenleme-modu .serit-cta,
body.duzenleme-modu .altbilgi { position: relative; }

.duzenle-rozet,
.edit-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--bosluk-2);
  border-radius: var(--r-rozet);
  background: var(--vurgu-soft);
  color: var(--vurgu-koyu);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--gecis);
}

.duzenle-rozet:hover,
.edit-pin:hover { background: var(--vurgu); color: #fff; }

/* Bölümün köşesine tutturulan rozet */
.section-pin,
.bolum-rozet {
  position: absolute;
  top: var(--bosluk-2);
  right: var(--bosluk-2);
  z-index: 5;
}

@media (max-width: 720px) {
  .section-pin,
  .bolum-rozet { position: static; margin-bottom: var(--bosluk-2); }
}


/* ===== 6. Alt bilgi ====================================================== */

.altbilgi {
  position: relative;
  background: var(--vurgu-2);
  color: rgba(255, 255, 255, .74);
  font-size: var(--yazi-kucuk);
}

.altbilgi a {
  color: rgba(255, 255, 255, .74);
  transition: color var(--gecis);
}

.altbilgi a:hover { color: #fff; }

.altbilgi-ust {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-6) var(--bosluk-5);
  padding-block: var(--bolum-bosluk-sik) var(--bosluk-6);
}

@media (min-width: 640px) {
  .altbilgi-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .altbilgi-ust { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.altbilgi-marka {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  align-items: flex-start;
}

.altbilgi-marka img {
  width: auto;
  max-height: 40px;
}

.altbilgi-marka .marka-isaret { background: rgba(255, 255, 255, .12); }

.altbilgi-marka .marka-ad { color: #fff; }

.altbilgi-marka p {
  margin: 0;
  max-width: 42ch;
  color: rgba(255, 255, 255, .68);
}

.altbilgi-sutun {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bosluk-1);
  min-width: 0;
}

.altbilgi-baslik {
  margin: 0 0 var(--bosluk-1);
  color: #fff;
  font-family: var(--font-govde);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.altbilgi-sutun a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.altbilgi-sutun p {
  margin: 0;
  max-width: 34ch;
}

/* Alt menüde bir kademe içeriden görünen çocuk bağlantı */
.altbilgi-sutun .footer-sub-link {
  padding-left: var(--bosluk-2);
  color: rgba(255, 255, 255, .58);
  font-size: var(--yazi-etiket);
}

.altbilgi-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2) var(--bosluk-4);
  padding-block: var(--bosluk-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .58);
  font-size: var(--yazi-etiket);
}

.altbilgi-yasal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
}

.altbilgi-yasal a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.altbilgi-not { flex: 1 1 auto; }

.altbilgi-imza { margin-left: auto; }

@media (max-width: 720px) {
  .altbilgi-alt { flex-direction: column; align-items: flex-start; }
  .altbilgi-imza { margin-left: 0; }
}


/* ===== 6b. Mobil alt sabit çubuk ========================================= */

.mobil-cubuk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-2) var(--kap-yan);
  padding-bottom: calc(var(--bosluk-2) + env(safe-area-inset-bottom, 0px));
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -8px 24px rgba(20, 22, 26, .08);
}

.mobil-cubuk-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-dugme);
  color: var(--metin);
}

.mobil-cubuk-ikon:hover { background: var(--zemin-yumusak); }

.mobil-cubuk-eylem { flex: 1 1 auto; }

@media (max-width: 980px) {
  .mobil-cubuk { display: flex; }

  /* Sabit çubuk alt bilgiyi örtmesin.
     Yükseklik çubuğun kendi ölçüsünden türetilir: 48px ikon + iki yan boşluk
     + 1px üst çizgi. Sabit sayı yazılırsa boşluk ölçeği değişince açık kalır. */
  body {
    padding-bottom: calc(48px + var(--bosluk-2) * 2 + 1px + env(safe-area-inset-bottom, 0px));
  }
}


/* ===== 7. Popup (duyuru) ================================================= */

.popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kap-yan);
}

.popup[hidden] { display: none; }

.popup-perde {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, .55);
  cursor: pointer;
}

.popup-kutu {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - (var(--kap-yan) * 2));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--yuzey);
  border-radius: var(--r-kap);
  box-shadow: var(--golge-hover);
  animation: popup-gir 260ms cubic-bezier(.2, .6, .3, 1);
}

@keyframes popup-gir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.popup-gorsel {
  margin: 0;
  background: var(--zemin);
}

.popup-gorsel img {
  width: 100%;
  height: auto;
}

.popup-icerik { padding: var(--bosluk-5); }

.popup-icerik h2 {
  font-size: var(--yazi-kart);
  margin-bottom: var(--bosluk-2);
}

.popup-metin {
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}

.popup-metin p { max-width: none; }

.popup-buton {
  margin-top: var(--bosluk-4);
  width: 100%;
}

.popup-kapat {
  position: absolute;
  top: var(--bosluk-2);
  right: var(--bosluk-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-rozet);
  color: var(--metin);
  font-size: 22px;
  line-height: 1;
}

.popup-kapat:hover { background: var(--zemin); }


/* ===== 8. Sayfa başlığı şeridi =========================================== */

/* body.sayfa-hero: menü hero'nun üstünde durur (bkz. 5. bölüm)
   body.sayfa-ic : menü akış içinde, başlık şeridi hemen altında başlar */
body.sayfa-ic .sayfa-bas { padding-top: var(--bosluk-8); }

.sayfa-bas {
  position: relative;
  padding-block: var(--bosluk-8) var(--bosluk-7);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}

.sayfa-bas h1 {
  margin-bottom: 0;
  max-width: 18ch;
}

.sayfa-bas-metin {
  margin: var(--bosluk-3) 0 0;
  max-width: 62ch;
  color: var(--metin-soluk);
}

@media (max-width: 720px) {
  body.sayfa-ic .sayfa-bas { padding-top: var(--bosluk-6); }

  .sayfa-bas { padding-block: var(--bosluk-6) var(--bosluk-5); }

  .sayfa-bas h1 { max-width: none; }
}


/* ===== 9. Kapanış çağrısı şeridi (CTA) =================================== */

.serit-cta {
  position: relative;
  padding-block: var(--bolum-bosluk-sik);
  background: var(--vurgu);
  color: #fff;
}

.serit-cta-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-5);
  flex-wrap: wrap;
}

.serit-cta-ic > div { min-width: 0; }

.serit-cta-baslik {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-size: var(--yazi-bolum);
}

.serit-cta-baslik em {
  font-style: normal;
  color: #fff;
  opacity: .68;
}

.serit-cta-eylem {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  flex-wrap: wrap;
}

.serit-cta .duzenle-rozet,
.serit-cta .edit-pin {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.serit-cta .duzenle-rozet:hover,
.serit-cta .edit-pin:hover { background: #fff; color: var(--vurgu); }

@media (max-width: 720px) {
  .serit-cta-ic { flex-direction: column; align-items: flex-start; }

  .serit-cta-baslik { max-width: none; }

  .serit-cta-eylem { width: 100%; }

  .serit-cta-eylem .dugme { flex: 1 1 auto; }
}


/* ===== 10. Hero (ana sayfa üst bölümü) =================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* yumuşak lekeler yatay kaydırma açmasın */
  /* Menü hero'nun üstünde durduğu için üst boşluk menü yüksekliğini kapsar */
  padding-top: calc(var(--ustmenu-yukseklik) + var(--bosluk-8));
  padding-bottom: var(--bolum-bosluk);
}

/* Hero arkasındaki tek yumuşak leke — sitedeki tek serbest bulanıklık alanı */
.hero-leke {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: var(--r-rozet);
  filter: blur(110px);
  opacity: .22;
  pointer-events: none;
}

.hero-leke-1 {
  top: -120px;
  left: -80px;
  width: 420px;
  height: 420px;
  background: var(--vurgu);
}

.hero-leke-2 {
  top: 120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: var(--vurgu-2);
  opacity: .16;
}

.hero-ic {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--bosluk-7);
}

.hero-metin {
  position: relative;               /* düzenleme rozeti için */
  min-width: 0;
}

.hero-baslik {
  margin-bottom: var(--bosluk-4);
  font-size: var(--yazi-hero);
  max-width: 15ch;
}

.hero-aciklama {
  margin-bottom: 0;
  max-width: 52ch;
  color: var(--metin-soluk);
}

.hero-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
  margin-top: var(--bosluk-5);
}

/* Önizleme yoksa hero tek sütun kalır; boş yarım ekran bırakılmaz */
.hero-tek .hero-ic { max-width: 820px; }

.hero-tek .hero-baslik { max-width: 18ch; }

@media (min-width: 980px) {
  .hero-ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

  .hero-tek .hero-ic { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero {
    padding-top: calc(var(--ustmenu-yukseklik) + var(--bosluk-6));
    padding-bottom: var(--bolum-bosluk);
  }

  .hero-baslik,
  .hero-tek .hero-baslik { max-width: none; }

  /* Dar ekranda dev leke hem gereksiz hem pahalı */
  .hero-leke-1 { top: -140px; left: -120px; width: 300px; height: 300px; }
  .hero-leke-2 { display: none; }

  .hero-eylem .dugme { flex: 1 1 auto; }
}


/* ===== 11. Canlı önizleme (imza hamlesi) ================================= */

.onizleme {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kap);
  box-shadow: var(--golge);
}

.onizleme-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bosluk-3);
  flex-wrap: wrap;
}

.onizleme-bas .etiket { margin-bottom: 0; }

.onizleme-ad {
  font-family: var(--font-baslik);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  color: var(--metin);
  text-align: right;
}

/* Sahne: kareler üst üste durur, yalnızca aktif olan görünür */
.onizleme-sahne {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--zemin);
  border-radius: var(--r-kart);
  overflow: hidden;
  /* Renk/malzeme seçimi zemini değiştirdiğinde de geçiş yumuşak olsun */
  transition: background-color 300ms cubic-bezier(.2, .6, .3, 1);
}

.onizleme-kare {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.2, .6, .3, 1);
}

.onizleme-kare.is-aktif { opacity: 1; }

.onizleme-kare img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--bosluk-4);
}

/* JavaScript kapalıyken kareler üst üste yığılmasın: ilki görünür kalır */
@media (scripting: none) {
  .onizleme-secim,
  .onizleme-renkler { display: none; }
}

/* Ürün seçimi */
.onizleme-secim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1);
}

.onizleme-dugme {
  min-height: 44px;
  padding: var(--bosluk-1) var(--bosluk-3);
  background: transparent;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-rozet);
  color: var(--metin-soluk);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.onizleme-dugme:hover {
  border-color: var(--metin);
  color: var(--metin);
}

.onizleme-dugme.is-aktif {
  background: var(--vurgu-soft);
  border-color: var(--vurgu);
  color: var(--vurgu-koyu);
}

.onizleme-dugme-yazi { display: block; }

/* Renk / malzeme kareleri */
.onizleme-renkler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-2);
  padding-top: var(--bosluk-3);
  border-top: 1px solid var(--cizgi);
}

.onizleme-renk-etiket {
  flex: 0 0 100%;
  color: var(--metin-soluk);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onizleme-renk {
  width: 44px;
  height: 44px;
  padding: 3px;
  background: transparent;
  /* Seçili karenin çevresinde 2px vurgu çerçevesi belirir */
  border: 2px solid transparent;
  border-radius: var(--r-dugme);
  transition: border-color var(--gecis), transform var(--gecis);
}

.onizleme-renk:hover { transform: translateY(-1px); }

.onizleme-renk.is-aktif { border-color: var(--vurgu); }

.onizleme-renk-kutu {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  /* Beyaz/açık malzeme de beyaz kartın üstünde görünsün */
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

/* Mobil: görsel üstte kalır, kareler altında yatay kaydırılan şerit olur */
@media (max-width: 720px) {
  .onizleme { padding: var(--bosluk-3); }

  .onizleme-secim {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .onizleme-secim::-webkit-scrollbar { display: none; }

  .onizleme-dugme {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .onizleme-renkler {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .onizleme-renkler::-webkit-scrollbar { display: none; }

  .onizleme-renk { flex: 0 0 auto; }

  .onizleme-renk-etiket { flex: 0 0 auto; }
}


/* ===== 12. Rakam şeridi (sayaç) ========================================== */

.guven-serit {
  position: relative;
  padding-block: var(--bolum-bosluk-sik);
  background: var(--yuzey);
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}

.guven-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-5);
}

@media (min-width: 640px) {
  .guven-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.guven-kutu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.guven-deger {
  font-family: var(--font-baslik);
  font-size: var(--yazi-bolum);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vurgu-2);
  /* Sayaç artarken rakam genişliği değişmesin, satır zıplamasın */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.guven-etiket {
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}


/* ===== 13. Hizmet kartı ve hizmet bandı ================================== */

.hizmet-kart {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  height: 100%;
  padding: var(--bosluk-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}

.hizmet-kart:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--golge-hover);
}

.hizmet-no {
  color: var(--vurgu);
  font-family: var(--font-baslik);
  font-size: var(--yazi-etiket);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hizmet-kart h3 { margin: 0; }

.hizmet-kart p {
  margin: 0;
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}

.hizmet-kart .kart-baglanti { margin-top: auto; padding-top: var(--bosluk-2); }

/* Hizmetler sayfasındaki bantlar — zemin sırayla açık/beyaz gider */
.hizmet-bant {
  position: relative;
  padding-block: var(--bolum-bosluk-sik);
  background: var(--zemin);
}

.hizmet-bant-beyaz { background: var(--yuzey); }

/* Bant içeriği tek sütun; ileride görsel eklenirse ızgara buradan büyür */
.hizmet-bant-ic {
  display: grid;
  gap: var(--bosluk-5);
}

.hizmet-bant-metin { max-width: 760px; }

.hizmet-bant-metin h2 { margin-bottom: var(--bosluk-3); }

.hizmet-bant-aciklama {
  margin-bottom: var(--bosluk-5);
  color: var(--metin-soluk);
}

.hizmet-bant-aciklama > :last-child { margin-bottom: 0; }


/* ===== 14. Ürün kartı, vitrin kartı, kart bağlantısı ===================== */

/* Kart içindeki "Detaya bak / İncele" bağlantısı */
.kart-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vurgu);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
}

.kart-baglanti::after {
  content: "→";
  transition: transform var(--gecis);
}

a:hover .kart-baglanti::after,
.kart-baglanti:hover::after { transform: translateX(3px); }

/* Ürünler sayfası kartı — başlıktaki bağlantı kartın tamamını tıklanır yapar */
.urun-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}

.urun-kart:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--golge-hover);
}

.urun-kart-gorsel {
  aspect-ratio: 4 / 3;
  background: var(--zemin);
  overflow: hidden;
}

.urun-kart-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

.urun-kart:hover .urun-kart-gorsel img { transform: scale(1.04); }

.urun-kart-govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  flex: 1 1 auto;
  padding: var(--bosluk-4);
}

.urun-kart-ad {
  margin: 0;
  font-size: var(--yazi-kart);
  font-weight: 600;
}

.urun-kart-ad a { text-decoration: none; }

/* Kartın her yeri tıklanır olur; odak halkası yine bağlantıda kalır */
.urun-kart-ad a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.urun-kart p {
  margin: 0;
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}

.urun-kart .kart-baglanti { margin-top: auto; }

/* Ana sayfa vitrin kartı — sade, görsel ağırlıklı */
.vitrin-kart {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  height: 100%;
}

.vitrin-gorsel {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  transition: box-shadow var(--gecis), border-color var(--gecis);
}

.vitrin-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--bosluk-3);
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

.vitrin-kart:hover .vitrin-gorsel {
  border-color: transparent;
  box-shadow: var(--golge);
}

.vitrin-kart:hover .vitrin-gorsel img { transform: scale(1.04); }

.vitrin-ad {
  font-size: var(--yazi-kucuk);
  font-weight: 600;
}


/* ===== 15. Süreç (koyu şerit) ============================================ */

/* Adım daireleri çizgiyle birlikte nefes alsın diye başlık altı boşluğu artar */
.surec .bolum-bas { margin-bottom: var(--bosluk-7); }

.surec-sarmal { position: relative; }

/* Adım dairelerinin ortasından geçen ince çizgi */
.surec-cizgi,
.surec-cizgi-dolu {
  position: absolute;
  top: 27px;                        /* 56px dairenin ortası */
  left: 0;
  height: 2px;
  border-radius: var(--r-rozet);
}

.surec-cizgi {
  right: 0;
  background: rgba(255, 255, 255, .16);
}

/* Kaydırmayla dolan kısım: site.js genişliği (0-100%) verir */
.surec-cizgi-dolu {
  width: 0;
  max-width: 100%;
  background: var(--vurgu);
  transition: width 600ms cubic-bezier(.2, .6, .3, 1);
}

.surec-izgara {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.surec-adim {
  margin-top: 0;
  min-width: 0;
}

.surec-no {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--bosluk-3);
  border-radius: var(--r-rozet);
  background: var(--vurgu-2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
  color: #fff;
  font-family: var(--font-baslik);
  font-size: var(--yazi-govde);
  font-weight: 700;
  line-height: 1;
}

.surec-adim h3 {
  margin-bottom: var(--bosluk-1);
  color: #fff;
}

.surec-adim p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: var(--yazi-kucuk);
  max-width: 34ch;
}

@media (min-width: 640px) {
  .surec-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .surec-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Çizgi yalnızca adımlar tek sıra olduğunda anlamlı */
@media (max-width: 1023px) {
  .surec-cizgi,
  .surec-cizgi-dolu { display: none; }
}


/* ===== 16. Örnek çalışmalar ============================================== */

.ornek-genis {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kap);
  transition: box-shadow var(--gecis), border-color var(--gecis);
}

.ornek-genis:hover {
  border-color: transparent;
  box-shadow: var(--golge-hover);
}

.ornek-genis-gorsel {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--zemin);
}

.ornek-genis-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .6, .3, 1);
}

.ornek-genis:hover .ornek-genis-gorsel img { transform: scale(1.03); }

.ornek-genis-metin,
.ornek-kart-metin {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  justify-content: center;
  min-width: 0;
}

.ornek-genis-metin { padding: var(--bosluk-6); }

.ornek-kart-metin { padding: var(--bosluk-4); }

.ornek-genis-metin .etiket,
.ornek-kart-metin .etiket { margin-bottom: 0; }

.ornek-baslik {
  display: block;
  font-family: var(--font-baslik);
  font-size: var(--yazi-kart);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--metin);
}

.ornek-aciklama {
  display: block;
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}

.ornek-alt { margin-top: var(--bosluk-4); }

.ornek-kart {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}

.ornek-kart:hover {
  transform: translateY(-2px);
  border-color: transparent;
  box-shadow: var(--golge-hover);
}

.ornek-kart-gorsel {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--zemin);
}

.ornek-kart-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

.ornek-kart:hover .ornek-kart-gorsel img { transform: scale(1.04); }

/* Görselsiz örnek: kutu boş görünmesin diye yazı öne çıkar */
.ornek-kart-duz {
  background: var(--zemin);
  border-style: dashed;
}

.ornek-kart-duz:hover {
  transform: none;
  border-color: var(--cizgi-koyu);
  box-shadow: none;
}

@media (min-width: 900px) {
  .ornek-genis { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .ornek-genis-gorsel { aspect-ratio: auto; height: 100%; }
}

@media (max-width: 720px) {
  .ornek-genis-metin { padding: var(--bosluk-4); }
}


/* ===== 17. Referans logo şeridi ve logo ızgarası ========================= */

.logo-serit {
  overflow: hidden;
  /* Kenarlarda yumuşak geçiş: şerit ekrandan kesilerek çıkmaz */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-serit-ic {
  display: flex;
  align-items: center;
  gap: var(--bosluk-6);
  width: max-content;
  animation: logo-kay 40s linear infinite;
}

/* Liste iki kez basıldığı için yarıya kadar kayıp başa döner: dikiş görünmez */
@keyframes logo-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Üstüne gelince durur (fare ve klavye) */
.logo-serit:hover .logo-serit-ic,
.logo-serit:focus-within .logo-serit-ic { animation-play-state: paused; }

.logo-kutu {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 140px;
  height: 56px;
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  text-align: center;
}

.logo-kutu img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--gecis), opacity var(--gecis);
}

.logo-kutu:hover img {
  filter: none;
  opacity: 1;
}

/* Hareket azaltılsın deniyorsa şerit akmaz, statik ızgaraya döner */
@media (prefers-reduced-motion: reduce) {
  .logo-serit {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-serit-ic {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bosluk-4);
  }

  /* İkinci (ekran okuyucudan gizli) kopya statik dizilişte tekrar etmesin */
  .logo-serit-ic > [aria-hidden="true"] { display: none; }
}

/* Referanslar sayfasındaki ızgara */
.logo-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-izgara .logo-kutu {
  min-width: 0;
  height: 104px;
  margin-top: 0;
  padding: var(--bosluk-3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
}

.logo-izgara .logo-kutu a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}


/* ===== 18. Beliriş animasyonu ============================================ */

/* Kaydırdıkça beliren bloklar. Gizleme YALNIZCA JavaScript çalışan
   tarayıcıda uygulanır; JS kapalıysa içerik olduğu gibi görünür (Kural 6).
   site.js görünür olan öğeye '.belirdi' sınıfını ekler.
   Güvenlik ağı: JS bir nedenle sınıfı eklemezse 3 sn sonra
   'belir-yedek' animasyonu bloğu kendiliğinden görünür yapar. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-belir] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms cubic-bezier(.2, .6, .3, 1),
                transform 500ms cubic-bezier(.2, .6, .3, 1);
    animation: belir-yedek 1ms linear 3s forwards;
  }

  [data-belir].belirdi {
    opacity: 1;
    transform: none;
  }
}

@keyframes belir-yedek {
  to { opacity: 1; transform: none; }
}


/* ===== 19. Form ========================================================== */

.form-kutu {
  position: relative;
  padding: var(--bosluk-6);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kap);
  box-shadow: var(--golge);
  /* Çapadan (#form) gelindiğinde başlık menünün altında kalmasın */
  scroll-margin-top: calc(var(--ustmenu-yukseklik) + var(--bosluk-3));
}

.form-baslik {
  margin-bottom: var(--bosluk-2);
  font-size: var(--yazi-kart);
}

.form-metin {
  margin-bottom: var(--bosluk-5);
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
}

.form {
  display: grid;
  gap: var(--bosluk-4);
}

.form-satir {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-4);
}

@media (min-width: 640px) {
  .form-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .form-satir-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tek alan: etiket üstte, girdi altta */
.alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.alan-ad {
  font-size: var(--yazi-etiket);
  font-weight: 600;
  color: var(--metin);
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  min-height: 48px;                 /* dokunma hedefi */
  padding: var(--bosluk-2) var(--bosluk-3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-dugme);
  color: var(--metin);
  /* 16px'in altı iOS'ta odaklanınca sayfayı yakınlaştırır */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

.alan textarea {
  min-height: 132px;
  padding-block: var(--bosluk-2);
  resize: vertical;
}

.alan select { padding-right: var(--bosluk-2); }

.alan input::placeholder,
.alan textarea::placeholder {
  color: var(--metin-soluk);
  opacity: 1;                       /* Firefox varsayılanı soluklaştırıyor */
}

.alan input:hover,
.alan select:hover,
.alan textarea:hover { border-color: var(--metin-soluk); }

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-soft);
}

/* Sunucu doğrulaması hatalı alanı aria-invalid ile işaretler */
.alan [aria-invalid="true"] {
  border-color: var(--vurgu);
  background: var(--vurgu-soft);
}

.alan input:disabled,
.alan select:disabled,
.alan textarea:disabled {
  background: var(--zemin);
  color: var(--metin-soluk);
  cursor: not-allowed;
}

/* Tarayıcının otomatik doldurma sarısı yerine kendi zeminimiz */
.alan input:-webkit-autofill {
  -webkit-text-fill-color: var(--metin);
  box-shadow: inset 0 0 0 100px var(--yuzey);
}

/* Hata özeti (role="alert") */
.form-hata {
  margin-bottom: var(--bosluk-4);
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--vurgu-soft);
  border-left: 3px solid var(--vurgu);
  border-radius: var(--r-dugme);
  color: var(--metin);
  font-size: var(--yazi-kucuk);
}

.form-hata ul {
  margin: 0;
  padding-left: var(--bosluk-4);
}

/* Gönderim sonrası teşekkür bloğu */
.form-basari { text-align: center; }

.form-basari h2 {
  margin-bottom: var(--bosluk-2);
  font-size: var(--yazi-kart);
}

.form-basari p {
  margin-inline: auto;
  color: var(--metin-soluk);
}

.form-basari .hero-eylem {
  justify-content: center;
  margin-top: var(--bosluk-5);
}

.form-basari-ikon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--bosluk-4);
  border-radius: var(--r-rozet);
  background: var(--vurgu-2);
  color: #fff;
}

/* KVKK açık rıza kutusu — onay kutusu ve metin aynı hizada */
.onay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--bosluk-2);
  padding-block: 6px;               /* satırın dokunma alanı 44px'i bulur */
  cursor: pointer;
  font-size: var(--yazi-kucuk);
  line-height: 1.5;
}

.onay input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--vurgu);
  cursor: pointer;
}

.onay a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kvkk-not {
  margin: 0;
  max-width: none;
  color: var(--metin-soluk);
  font-size: var(--yazi-etiket);
  line-height: 1.5;
}

/* Robot tuzağı (honeypot).
   display:none ve left:-9999px kullanılmadı: ikisi de basit botların tanıyıp
   atladığı kalıplardır. Alan gerçekten sayfada durur ama 1px'e sıkışır,
   saydamdır ve tıklanamaz. Ekran okuyucudan uzak tutulması CSS'in işi
   değildir; şablonda aria-hidden="true" + tabindex="-1" ile zaten
   erişilebilirlik ağacının ve klavye sırasının dışındadır. */
.tuzak {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}


/* ===== 20. Talep türü seçimi (radyo segmentleri) ========================= */

.form-tur {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;                     /* fieldset varsayılanı ızgarayı taşırır */
}

.form-tur legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: var(--yazi-etiket);
  font-weight: 600;
  color: var(--metin);
}

.tur-secim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1);
}

/* Radyo düğmesi gizlenmez: görünür, klavyeyle gezilir, ekran okuyucu okur.
   Kart görünümü etiketin kendisine verilir. */
.tur-secenek {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-1);
  min-height: 48px;
  padding-inline: var(--bosluk-3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-rozet);
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.tur-secenek:hover {
  border-color: var(--metin-soluk);
  color: var(--metin);
}

.tur-secenek input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--vurgu);
  cursor: pointer;
}

/* :has() desteklenmeyen tarayıcıda radyo yine görünür ve çalışır —
   yalnızca kartın renklenmesi olmaz, işlev kaybı yoktur. */
.tur-secenek:has(input:checked) {
  background: var(--vurgu-soft);
  border-color: var(--vurgu);
  color: var(--vurgu-koyu);
}

.tur-secenek:has(input:focus-visible) {
  outline: 3px solid var(--vurgu);
  outline-offset: 2px;
}


/* ===== 21. İletişim düzeni =============================================== */

.iletisim-izgara {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--bosluk-5);
}

@media (min-width: 980px) {
  .iletisim-izgara { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
}

.iletisim-yan {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-4);
  min-width: 0;
}

.bilgi-kutu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
}

.bilgi-satir {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bilgi-etiket {
  color: var(--metin-soluk);
  font-size: var(--yazi-etiket);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bilgi-deger {
  font-size: var(--yazi-govde);
  line-height: 1.5;
  overflow-wrap: anywhere;          /* uzun e-posta kutuyu taşırmasın */
}

.bilgi-deger a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cizgi-koyu);
}

.bilgi-deger a:hover { text-decoration-color: currentColor; }

.bilgi-eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
  margin-top: var(--bosluk-1);
}

.bilgi-eylem .dugme { flex: 1 1 auto; }

/* Adım kutusu (Nasıl ilerliyoruz) */
.adim-kutu {
  padding: var(--bosluk-5);
  background: var(--vurgu-soft);
  border-radius: var(--r-kart);
}

.adim-baslik {
  margin: 0 0 var(--bosluk-3);
  font-size: var(--yazi-etiket);
}

.adim-baslik .etiket { margin-bottom: 0; }

.adim-liste {
  display: grid;
  gap: var(--bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adim-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bosluk-2);
  margin-top: 0;
}

.adim-no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-rozet);
  background: var(--vurgu);
  color: #fff;
  font-family: var(--font-baslik);
  font-size: var(--yazi-etiket);
  font-weight: 700;
  line-height: 1;
}

.adim-metin {
  display: grid;
  gap: 2px;
  font-size: var(--yazi-kucuk);
  color: var(--metin-soluk);
}

.adim-metin b { color: var(--metin); }

/* Harita — oran korunur, iframe yüklenmese bile kutu çökmez */
.harita {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 260px;
  overflow: hidden;
  background: var(--zemin-yumusak);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kap);
}

.harita iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  .form-kutu { padding: var(--bosluk-4); }

  .bilgi-kutu,
  .adim-kutu { padding: var(--bosluk-4); }

  .harita { aspect-ratio: 4 / 3; }
}


/* ===== 22. Ürün detayı =================================================== */

.urun-bas {
  position: relative;
  padding-block: var(--bosluk-7);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}

.urun-bas-ic {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--bosluk-6);
}

.urun-bas-metin { min-width: 0; }

.urun-bas-metin h1 { margin-bottom: var(--bosluk-3); }

.urun-bas-aciklama {
  margin-bottom: var(--bosluk-5);
  color: var(--metin-soluk);
}

.urun-bas-aciklama > :last-child { margin-bottom: 0; }

.urun-bas-gorsel {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--zemin);
  border-radius: var(--r-kap);
}

.urun-bas-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--bosluk-4);
}

@media (min-width: 900px) {
  .urun-bas-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

/* Kategori sekmeleri — gerçek bağlantıdır, JS'siz de çalışır */
.sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1);
  margin-bottom: var(--bosluk-5);
}

.sekme {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--bosluk-3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-rozet);
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis);
}

.sekme:hover {
  border-color: var(--metin-soluk);
  color: var(--metin);
}

.sekme.is-aktif {
  background: var(--vurgu-soft);
  border-color: var(--vurgu);
  color: var(--vurgu-koyu);
}

@media (max-width: 720px) {
  /* Sekmeler alt alta yığılmak yerine kendi şeridinde kayar */
  .sekmeler {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .sekmeler::-webkit-scrollbar { display: none; }

  .sekme {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}


/* ===== 23. Hakkımızda ==================================================== */

.hakkimizda-ic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-5);
  align-items: start;
}

.hakkimizda-baslik h2 { margin-bottom: 0; }

.hakkimizda-metin {
  color: var(--metin-soluk);
  min-width: 0;
}

.hakkimizda-metin > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .hakkimizda-ic {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--bosluk-7);
  }
}


/* ===== 24. Yasal metin ve hata sayfası =================================== */

.yasal-metin {
  max-width: 68ch;
  margin-top: var(--bosluk-5);
}

.yasal-metin p { margin-bottom: var(--bosluk-4); }

/* Panelde uzun metin yazıldığında başlıklar nefes alsın */
.yasal-metin h2,
.yasal-metin h3 {
  margin-top: var(--bosluk-6);
  font-size: var(--yazi-kart);
}

.yasal-metin ul,
.yasal-metin ol { margin-bottom: var(--bosluk-4); }

.yasal-metin > :last-child { margin-bottom: 0; }

.yasal-iletisim {
  margin-top: var(--bosluk-5);
  padding: var(--bosluk-4);
  background: var(--yuzey);
  border-left: 3px solid var(--vurgu);
  border-radius: var(--r-dugme);
  font-size: var(--yazi-kucuk);
}

/* 404 */
.hata-sayfa { text-align: center; }

.hata-sayfa .kap { display: block; }

.hata-sayfa p {
  margin-inline: auto;
  color: var(--metin-soluk);
}

.hata-sayfa .hero-eylem {
  justify-content: center;
  margin-top: var(--bosluk-5);
}


/* ===== 25. Tarama sonrası tamamlananlar ================================== */

/* Menü modülünde bir öğeye "sola yasla" seçilirse: öğe ve varsa alt menüsü
   soldaki kümenin sonunda kalır, sağdaki eylemleri iterek büyümez.
   (Sağ yaslama 5. bölümde tanımlı; bu ikizi tarama sırasında eksik çıktı.) */
.ustmenu-nav .yasla-sol,
.nav-item.yasla-sol { margin-right: auto; }

.cekmece .yasla-sol,
.cekmece .nav-item.yasla-sol { margin-right: 0; }


/* ===== 26. Panelden yönetilen ölçü ve arka planlar ======================= */
/* Bu blok, panelde girilebilen ama temada karşılığı olmayan alanları kapatan
   turda eklendi. Değerler _header.php tarafından CSS değişkeni olarak basılır;
   panelde bir şey girilmediyse var(--...) yedeğine düşer ve görünüm değişmez. */

/* Logo ölçüsü — Ayarlar › Kimlik › Logo genişliği / çevre boşluğu */
/* min() ile ikinci sınır: panelde 400px girilse bile logo dar ekranda
   menüyü taşırmaz, yatay kaydırma açılmaz. */
.marka img,
.altbilgi-marka img {
  width: auto;
  max-width: min(var(--logo-en, 150px), 46vw);
  max-height: 40px;
}

.marka { padding-block: var(--logo-bosluk, 0px); }

/* Hero arka plan fotoğrafı — Ayarlar › Üst bölüm (hero)
   Fotoğraf seçilmediğinde bu sınıflar hiç basılmaz, hero bugünkü hâlinde kalır. */
.hero-foto-kat,
.hero-perde {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.hero-foto-kat {
  background-repeat: no-repeat;
  background-size: cover;
}

/* Karartma perdesi: saydamlığı panelin "Karartma oranı" kaydırağından gelir */
.hero-perde { background: var(--vurgu-2); }

/* Fotoğraf üzerinde yazılar açık renge döner — kontrast korunur.
   Kural yalnızca hero'nun kendi metin sütununu kapsar; sağdaki beyaz
   önizleme kartına dokunmaz (orada beyaz yazı görünmez olurdu). */
.hero-foto .hero-baslik,
.hero-foto .hero-metin .etiket { color: #fff; }

.hero-foto .hero-aciklama { color: rgba(255, 255, 255, .82); }

.hero-foto .hero-metin .etiket { border-color: rgba(255, 255, 255, .35); }

.hero-foto .dugme-cerceve {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.hero-foto .dugme-cerceve:hover,
.hero-foto .dugme-cerceve:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

/* Sayfa gövdesi metni (Panel › Sayfalar › serbest metin) — ürünler sayfasında
   başlık şeridi ile ızgara arasına düşer. Boşsa hiç basılmaz. */
.sayfa-giris { margin-bottom: var(--bosluk-6); }

.sayfa-giris > :last-child { margin-bottom: 0; }


/* ===== 25. Ürün detayı — özellikler, hakkında, kayan galeri =============
   Ürün detayının zenginleştirilmesi (18 Ağu 2026). Yukarıdaki 22. bölümün
   .urun-bas kuralları duruyor; buradakiler yalnızca yeni parçaları ekler ve
   kapak görselinin sola alınmasını sağlar. Yeni renk/gölge/font tanımı yok,
   hepsi mevcut değişkenlerden okunur.
   ====================================================================== */

/* Kapak solda, yazı + özellikler sağda. Mobilde kapak üstte kalır (DOM sırası). */
.urun-bas-ic.urun-bas-ters { align-items: start; }

@media (min-width: 900px) {
  .urun-bas-ic.urun-bas-ters { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

  /* Görsel kısa, sağ sütun uzun olabilir: kapak ekranda kalır. */
  .urun-bas-ic.urun-bas-ters .urun-bas-gorsel {
    position: sticky;
    top: calc(var(--ustmenu-yukseklik) + var(--bosluk-4));
  }

  /* Kapak yoksa tek sütun; yarım genişlikte asılı kalmaz. */
  .urun-bas-ic.urun-bas-ic-tek { grid-template-columns: minmax(0, 1fr); }
}

/* --- Özellik listesi ---------------------------------------------------- */

.urun-ozellik-baslik {
  margin-bottom: var(--bosluk-3);
  font-size: var(--yazi-kart);
}

.urun-ozellik {
  margin: 0 0 var(--bosluk-5);
  border-top: 1px solid var(--cizgi);
}

.urun-ozellik-satir {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-1);
  padding-block: var(--bosluk-3);
  border-bottom: 1px solid var(--cizgi);
}

.urun-ozellik-etiket {
  margin: 0;
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  font-weight: 600;
}

.urun-ozellik-deger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-1);
  margin: 0;
  min-width: 0;
  color: var(--metin);
  font-size: var(--yazi-govde);
  line-height: var(--satir-govde);
  overflow-wrap: anywhere;
}

/* Virgülle ayrılmış kısa çeşitler kutucuk olur; uzun metin düz akar. */
.urun-ozellik-cesit {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--bosluk-2);
  background: var(--zemin-yumusak);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-rozet);
  font-size: var(--yazi-kucuk);
  line-height: 1.4;
}

@media (min-width: 600px) {
  .urun-ozellik-satir {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--bosluk-3);
  }
}

/* Özelliklerin hemen altındaki talep düğmeleri */
.urun-eylem { margin-top: var(--bosluk-4); }

/* --- Hakkında blokları --------------------------------------------------- */

.urun-hakkinda {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bosluk-5);
}

.urun-hakkinda-blok {
  min-width: 0;
  padding: var(--bosluk-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
}

.urun-hakkinda-baslik {
  margin-bottom: var(--bosluk-2);
  font-size: var(--yazi-kart);
}

.urun-hakkinda-metin { color: var(--metin-soluk); }

.urun-hakkinda-metin > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .urun-hakkinda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Kayan galeri -------------------------------------------------------- */

.galeri { position: relative; }

.galeri-kap { position: relative; }

/* Şerit kendi kabında kayar: sayfada yatay kaydırma oluşmaz. */
.galeri-serit {
  display: flex;
  gap: var(--bosluk-4);
  margin: 0;
  padding: 0 0 var(--bosluk-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.galeri-serit:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 4px;
  border-radius: var(--r-kart);
}

.galeri-serit::-webkit-scrollbar { height: 6px; }

.galeri-serit::-webkit-scrollbar-thumb {
  background: var(--cizgi-koyu);
  border-radius: var(--r-rozet);
}

.galeri-oge {
  flex: 0 0 auto;
  width: 78%;
  max-width: 340px;
  min-width: 0;
  scroll-snap-align: start;
}

.galeri-figur {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-2);
  height: 100%;
  margin: 0;
}

.galeri-gorsel {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
}

.galeri-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeri-metin {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.galeri-metin .etiket { margin-bottom: 0; }

.galeri-baslik {
  color: var(--metin);
  font-family: var(--font-baslik);
  font-size: var(--yazi-govde);
  line-height: 1.35;
}

.galeri-aciklama {
  color: var(--metin-soluk);
  font-size: var(--yazi-kucuk);
  line-height: var(--satir-govde);
}

/* Ok düğmeleri yalnızca JS ekler; JS kapalıyken ölü düğme görünmez.
   Dokunmatikte parmakla kaydırılır, bu yüzden geniş ekranda gösterilir. */
.galeri-oklar {
  display: none;
  gap: var(--bosluk-1);
  justify-content: flex-end;
  margin-bottom: var(--bosluk-3);
}

.galeri-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-rozet);
  color: var(--metin);
  font-size: var(--yazi-govde);
  line-height: 1;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), opacity var(--gecis);
}

.galeri-ok:hover { border-color: var(--metin); }

.galeri-ok[disabled] {
  opacity: .35;
  cursor: default;
}

.galeri-ok:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
}

/* Fare ile sürüklenirken metin seçimi kapanır. */
.galeri.is-suruklenir .galeri-serit {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

@media (min-width: 600px) {
  .galeri-oge { width: 46%; }
}

@media (min-width: 1024px) {
  .galeri-oklar { display: flex; }

  .galeri-oge { width: 31%; }

  .galeri-serit { cursor: grab; }
}

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

/* Hakkında ile galeri birbirini tamamlayan iki bölüm: aradaki boşluk sıkışır. */
.urun-hakkinda-bolum { padding-bottom: var(--bolum-bosluk-sik); }

.galeri-bolum .bolum-bas { margin-bottom: var(--bosluk-4); }

/* Yazısı olmayan kare, olanla aynı yükseklikte kalsın: görsel esnemez,
   oranını korur; alt yazılar tüm karelerde aynı hizada başlar. */
.galeri-gorsel { flex: 0 0 auto; }

/* Kareler eşit yükseklikte durur: yazısı olan kare şeridi büyütse bile
   diğerlerinin görseli aynı hizada başlar. */
.galeri-serit { align-items: stretch; }

/* Genel liste kuralının madde arası boşluğu yatay şeritte geçersizdir. */
.galeri-serit .galeri-oge { margin: 0; }