/* ==========================================================================
   MOBIL DUZELTMELER
   ==========================================================================
   En son yuklenen stil dosyasi. Amaci telefonu tasarimin "kucultulmus"
   hali olmaktan cikarip calisir hale getirmek.

   Kirilim noktalari ORIJINAL siteden alindi (Elementor varsayilanlari):
     tablet  <= 1024px
     telefon <=  767px

   Orijinalin telefon olculeri (`elementor-kit-14` mobil blogu):
     bolum basligi  32px -> 24px
     govde metni    16px
     kucuk metin    13px
     ikon kutu      14px
     kapsayici      tam genislik
     bilesenler     width:100% (tek sutun)

   Buradaki kurallar ya o olculere hizalaniyor ya da hicbir yerde karsiligi
   olmayan bir eksigi kapatiyor (yatay tasma, dokunma hedefi, tablo
   kaydirma gibi).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) YATAY TASMA
   Sitede hicbir yatay tasma korumasi yoktu. Tek bir genis oge (uzun bir
   kod bloku, genis tablo, bolunmeyen uzun bir kelime) butun sayfayi yana
   kaydiriyor; kullanicinin gordugu sey "her sey kaymis" oluyor. Bu, mobil
   tasarimin bozuk hissettirmesinin en sik sebebi.

   `overflow-x: clip` tercih edildi: `hidden` ust ogede yeni bir kaydirma
   baglami acar ve `position: sticky` olan her seyi (ust bar) bozar.
   Desteklemeyen tarayicilar icin `hidden` yedegi altta.
   -------------------------------------------------------------------------- */

html {
  overflow-x: hidden;
}
body {
  overflow-x: clip;
  /* Telefonu yatay cevirince metnin kendiliginden buyumesini engelle */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Tasmaya yol acan tipik ogeler */
img,
video,
svg,
iframe,
canvas,
table {
  max-width: 100%;
}
img,
video {
  height: auto;
}

/* Bolunmeyen uzun metinler: e-posta adresleri, kupon kodlari, URL'ler */
p,
li,
dd,
td,
th,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}
/* Kod ve kupon kodu gibi yerlerde kelime ortasindan bolme daha uygun */
code,
pre,
.kupon-kod {
  overflow-wrap: break-word;
}
pre {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   2) TABLOLAR
   Sepet, siparis detayi, yonetim listeleri... Genis tablolar telefonda
   ya tasar ya da okunmaz hale gelir. Sarmalayicisi olanlar kaydirilabilir
   (bkz. `.tablo-kaydir`); olmayanlar icin burada yedek kural var.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .kutu > table,
  .kutu > .tablo,
  section > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Telefonda 640px'lik alt sinir, kaydirmayi anlamsiz derecede
     uzatiyordu; ekrandan biraz genis olmasi yeterli. */
  .tablo-kaydir .tablo { min-width: 560px; }
}

/* --------------------------------------------------------------------------
   3) COK SUTUNLU IZGARALAR
   Denetimde mobil karsiligi OLMAYAN izgaralar. Hepsi 390px ekranda
   sikisiyordu.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Ana sayfadaki sayac kutulari: iki sutun 390px'te cok dar kaliyor */
  .sayaclar { grid-template-columns: 1fr; gap: 12px; }
  .sayac { padding: 20px 16px; }

  /* Sertifika ozeti: 130px etiket sutunu metni ezerdi */
  .sertifika-sonuc dl { grid-template-columns: 1fr; gap: 4px; }
  .sertifika-sonuc dt { font-weight: 600; }
  .sertifika-sonuc dd { margin: 0 0 10px; }

  /* Hakkimizda sekmeleri: 200px'lik dikey sekme sutunu yatay seride donuyor */
  .sekmeler--dikey { grid-template-columns: 1fr; }
  .sekmeler--dikey .sekmeler__basliklar {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  .sekmeler--dikey .sekmeler__basliklar button { white-space: nowrap; }
}

/* Puan dagilimi: 52px etiket + 32px sayi, cubuga yer birakmiyordu */
@media (max-width: 480px) {
  .puan-satir { grid-template-columns: 44px 1fr 26px; gap: 6px; }
  .puan-satir__ad { font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   4) TIPOGRAFI — orijinalin telefon olculeri
   Bizde bu olceklendirme 1024px'te (tablet) devreye giriyordu; orijinalde
   767px (telefon). Tablette gereksiz kucuk, telefonda ise bazi basliklar
   hala buyuk kaliyordu.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bolum__baslik { font-size: 24px; }          /* orijinal: 32 -> 24 */
  .bolum__ustbaslik { font-size: 16px; }
  .kahraman__baslik { font-size: 24px; }
  .kahraman__ozet { font-size: 16px; }

  /* Orijinalde ikon kutu basliklari 14px, kucuk metinler 13px */
  .kanal__baslik,
  .tanitim__kutu strong { font-size: 14px; }
  .kucuk,
  .alt__liste a,
  .alt__satir,
  .alt__hakkinda { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   5) DOKUNMA HEDEFLERI
   Telefonda 30px'lik bir buton isabet ettirilemiyor. 44px, parmakla
   guvenle basilabilen en kucuk olcu (WCAG 2.5.5 bu degeri veriyor).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .buton,
  .ust__menu a,
  .alt__liste a,
  .sekmeler__basliklar button,
  .qa-sekmeler button,
  .sayfalama a,
  .sayfalama span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Blok butonlar tam genislik — yan yana sigmiyorlar */
  .kurs-eylemler .buton,
  .urun-al .buton,
  .sepet-ozet .buton {
    width: 100%;
  }
  /* Form alanlari: 16px altinda iOS sayfayi otomatik yakinlastiriyor */
  input,
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
}

/* --------------------------------------------------------------------------
   6) YONETIM PANELI
   Panelin hic mobil kurali yoktu. Sahibin siparise bakmak icin bilgisayar
   basina gecmesi gerekiyordu; kargo kodu girmek gibi isler telefondan
   yapiliyor.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .yonetim-ana { padding: 16px 12px; }

  /* Ozet kartlari: sabit dort sutun yerine sigdigi kadar */
  .ozet-kartlar {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }
  .ozet-kart { padding: 14px 12px; }
  .ozet-kart strong { font-size: 1.25rem; }

  /* Baslik + aralik secimi alt alta */
  .yonetim-baslik {
    flex-wrap: wrap;
    gap: 10px;
  }
  .aralik-secim { flex-wrap: wrap; }

  /* Butun yonetim tablolari kaydirilabilir olsun */
  .yonetim-ana .tablo {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .yonetim-ana .tablo-kaydir .tablo { white-space: normal; }
}

/* --------------------------------------------------------------------------
   7) KISIYE OZEL KAMPANYA KUTUSU
   Telefonda alt kenara yapisik durmasi, sepet/satin alma butonlarinin
   ustune binmesine yol aciyordu. Guvenli alan payi (centikli ekranlar)
   ve biraz yukari kaydirma ile cozuldu.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .kisisel-teklif {
    right: 12px;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 16px 16px 14px;
  }
  .kisisel-teklif__baslik { font-size: 15px; }
  .kisisel-teklif__metin { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   8) DERS OYNATICI
   Video + mufredat yan yana; telefonda mufredat panelinin altta ve
   acilabilir olmasi gerekiyor.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .oynatici__ust {
    flex-wrap: wrap;
    gap: 8px;
  }
  .oynatici__qa { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   9) SAYFA BASLIGI BANDI — orijinalin telefon olculerine gore
   Playwright ile 390px genislikte olculdu (kurslar sayfasi):

     ORIJINAL   bant yuksekligi 201px (dolgu 60px 0), kirinti BASLIGIN ALTINDA
     BIZDE      bant yuksekligi 111px (dolgu 40px 0), kirinti ayni satirda sagda

   Baslik olcusu ikisinde de 21px/600 — orada fark yoktu. Fark bandin
   yuksekliginde ve kirintinin yerinde.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .sayfa-basligi__ic {
    /* Orijinal: 60px dikey dolgu */
    padding-top: 60px;
    padding-bottom: 60px;
    /* Kirinti basligin ALTINA insin */
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .sayfa-basligi__baslik { font-size: 21px; }
  .sayfa-basligi__yol { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   10) DUYURU BANDI VE GERI SAYIM
   Olcum: icerik orijinalde 247px'te, bizde 334px'te basliyor. Aradaki 87px
   neredeyse tamamen geri sayimdan geliyor — orijinalde telefonda geri sayim
   YOK, bizde dort kutu alt alta iniyor.

   Sayac site sahibinin istegi, kaldirilmiyor; telefonda tek satira sigacak
   sekilde kuculuyor.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ust__duyuru-ic {
    flex-wrap: wrap;
    gap: 8px;
    padding-block: 10px;
  }
  .geri-sayim {
    gap: 6px;
    padding: 0;
    /* Bant icinde kendi satirini almasin, yanina sigsin */
    flex: 0 1 auto;
  }
  .geri-sayim > span:not(.geri-sayim__oncesi) {
    min-width: 34px;
    padding: 2px 4px;
  }
  .geri-sayim b { font-size: 15px; }
  .geri-sayim > span { font-size: 8px; }
  .geri-sayim__oncesi { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   11) UST BAR — arama telefonda ikona doner
   Masaustunde arama kutusu "Kayit Ol" butonunun yaninda (site sahibinin
   istegi). Telefonda yan yana sigmadigi icin kendi satirina duserek 100px
   yer kapliyordu. Orijinalde arama bir IKON; ayni cozum.

   Kutu gizlenmiyor, DARALTILIYOR: ikona basinca acilir. Gizleseydik
   JavaScript kapaliyken arama hic kullanilamazdi.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ust__ana-ic { row-gap: 8px; }

  /* Arama satiri: buton kadar dar, ikon gorunur */
  .ust__arama {
    order: 3;
    flex: 0 0 auto;
    width: auto;
  }
  .ust__arama input {
    width: 0;
    min-width: 0;
    padding-inline: 0;
    border-width: 0;
    transition: width .2s ease, padding .2s ease;
  }
  /* Odaklaninca ya da icinde metin varken acilir */
  .ust__arama:focus-within {
    flex: 1 1 100%;
    width: 100%;
  }
  .ust__arama:focus-within input {
    width: 100%;
    min-width: 0;
    padding-inline: 14px;
    border-width: 1px;
  }

  .ust__eylemler {
    order: 4;
    width: auto;
    flex: 1 1 auto;
    gap: 8px;
  }
  .ust__eylemler .buton {
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   12) URUN SAYFASI SEKMELERI — telefonda akordiyon
   Bes sekme (Aciklama, Urun Bilgileri, Degerlendirmeler, Kargo ve Teslimat,
   Iptal ve Iade, Garanti) 390px'e sigmiyordu; 651px'e kadar tasiyordu.
   Yatay tasma korumasi sayfanin kaymasini engelledigi icin son sekmeler
   KESILIYOR ve ziyaretci "Garanti"ye hic ulasamiyordu.

   Orijinal (Elementor ic ice sekmeler) telefonda sekmeleri tam genislikte
   alt alta diziyor ve her sekmenin icerigini KENDI basliginin altinda
   aciyor. Ayni yapi: baslik kabi `display: contents` ile eriyor, basliklar
   ve icerikler tek bir sutunda `--sira` ile ic ice diziliyor (sablonda).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .sekmeler--urun {
    display: flex;
    flex-direction: column;
  }
  .sekmeler--urun > .sekmeler__basliklar {
    display: contents;
  }
  .sekmeler--urun .sekmeler__basliklar button {
    order: var(--sira);
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    margin-top: 8px;
    border: 1px solid var(--renk-kenar);
    border-radius: 10px;
    background: var(--renk-kart-zemin);
  }
  .sekmeler--urun .sekmeler__basliklar button[aria-selected="true"] {
    border-color: var(--renk-mor);
    color: var(--renk-mor);
  }
  .sekmeler--urun > .sekmeler__govde {
    order: var(--sira);
    padding: 16px 4px 8px;
  }
}

/* --------------------------------------------------------------------------
   13) UST BAR — Giris / Kayit dugmeleri ve mobil menu (2026-09-25)
   Masaustunde iki dugme dar alanda iki satira kiriliyordu ("Kayıt / Ol",
   "Giriş / Yap"); yukseklikleri arama kutusuyla tutmuyordu. Mobilde bu
   dugmeler + sepet + arama logonun altinda ayri bir satirdaydi; site sahibi
   hepsinin hamburger menude olmasini istedi.
   -------------------------------------------------------------------------- */

.ust__hesap { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.buton--uye,
.buton--giris {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.buton--uye {
  border: 1.5px solid var(--renk-kenar);
  background: var(--renk-beyaz);
  color: var(--renk-metin-3);
}
.buton--uye svg { color: var(--renk-mor); }
.buton--uye:hover {
  border-color: var(--renk-mor);
  background: #F7F2FF;
  color: var(--renk-mor);
}
.buton--giris {
  border: 1.5px solid var(--renk-turuncu);
  background: var(--renk-turuncu);
  color: var(--renk-beyaz);
  box-shadow: 0 8px 16px -10px rgba(255, 143, 39, .95);
}
.buton--giris:hover { background: #F57C0A; border-color: #F57C0A; color: var(--renk-beyaz); }

.ust__arama input { height: 42px; }
.ust__arama-dugme { width: 42px; height: 42px; }

/* Mobil menu parcalari masaustunde yok */
.ust__mobil-arama,
.ust__mobil-alt { display: none; }

@media (max-width: 1199px) {
  /* Ust satirda yalniz logo + hamburger; digerleri menude */
  .ust__eylemler { display: none; }

  .ust__menu--acik {
    display: block;
    margin-top: 4px;
    padding: 14px 0 18px;
    border-top: 1px solid var(--renk-kenar);
  }

  .ust__mobil-arama { display: flex; gap: 8px; margin-bottom: 8px; }
  .ust__mobil-arama input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--renk-kenar);
    border-radius: 8px;
    background: var(--renk-beyaz);
    color: var(--renk-metin-3);
    font-size: 15px;
  }
  .ust__mobil-arama input:focus { outline: 2px solid var(--renk-mor); outline-offset: 1px; }
  .ust__mobil-arama button {
    flex: 0 0 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--renk-mor);
    color: var(--renk-beyaz);
    cursor: pointer;
  }

  .ust__mobil-alt {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--renk-kenar);
  }
  .ust__mobil-sepet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--renk-metin-3);
    font-weight: 500;
    text-decoration: none;
  }
  .ust__mobil-sepet svg { color: var(--renk-mor); }
  .ust__mobil-sepet .ust__sepet-sayi { position: static; margin-left: auto; }

  .ust__mobil-hesap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
  }
  .ust__mobil-hesap .buton { width: 100%; height: 46px; }

  /* Hamburger acikken carpiya doner */
  .ust__menu-cizgi::before,
  .ust__menu-cizgi::after { transition: transform .2s ease, top .2s ease; }
  .ust__menu-dugme[aria-expanded="true"] .ust__menu-cizgi { background: transparent; }
  .ust__menu-dugme[aria-expanded="true"] .ust__menu-cizgi::before { top: 0; transform: rotate(45deg); }
  .ust__menu-dugme[aria-expanded="true"] .ust__menu-cizgi::after { top: 0; transform: rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   14) KURS TANITIM SAYFASI — yeni duzen (site sahibinin istegi, 2026-09-25)
   Sol: baslik, video, gereklilikler/kitle/hazirlayan, kazanimlar, aciklama,
   mufredat (ilk 5 bolum), yorumlar. Sag: ozet karti, satin alma, ikonlu
   istek listesi + paylasim. Telefonda satin alma videonun hemen altina
   gelir (onceden butun yorumlarin altina dusuyordu).
   -------------------------------------------------------------------------- */

.kurs-detay {
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "ust yan" "ana yan";
  column-gap: 32px;
  row-gap: 0;
}
.kurs-detay__ust { grid-area: ust; min-width: 0; }
.kurs-detay__ana { grid-area: ana; min-width: 0; }
.kurs-detay__yan { grid-area: yan; align-self: stretch; }
.kurs-detay__ust h1 { margin-bottom: 18px; }

.kurs-yan { display: grid; gap: 16px; }
@media (min-width: 1025px) and (min-height: 760px) {
  .kurs-yan { position: sticky; top: 92px; }
}
.kurs-yan .satin-al { position: static; }

/* Ozet karti */
.kurs-ozet { padding: 20px 22px; }
.kurs-ozet__puan {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--renk-kenar);
  color: var(--renk-metin-3); text-decoration: none;
}
.kurs-ozet__puan strong { font-size: 26px; line-height: 1; }
.kurs-ozet__puan .yildiz { color: #F5A623; letter-spacing: 1px; }
.kurs-ozet__yorum { font-size: 13px; color: var(--renk-metin-2); text-decoration: underline; }
.kurs-ozet__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
}
.kurs-ozet__liste li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.kurs-ozet__liste svg {
  flex: 0 0 36px; width: 36px; height: 36px; padding: 8px;
  border-radius: 10px; background: #F3EDFF; color: var(--renk-mor);
}
.kurs-ozet__liste span { display: grid; font-size: 12px; color: var(--renk-metin-2); line-height: 1.35; }
.kurs-ozet__liste strong { font-size: 14px; color: var(--renk-metin-3); }

/* Istek listesi + paylasim */
.kurs-paylas {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px;
}
.kurs-paylas__istek,
.kurs-paylas__bag {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--renk-kenar);
  background: var(--renk-beyaz);
  color: var(--renk-metin-3);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kurs-paylas__istek:hover { color: #E0245E; border-color: #E0245E; }
.kurs-paylas__istek[aria-pressed="true"] { color: #E0245E; border-color: #E0245E; background: #FFF0F4; }
.kurs-paylas__istek[aria-pressed="true"] svg { fill: currentColor; }
.kurs-paylas__ayrac { width: 1px; height: 24px; background: var(--renk-kenar); margin: 0 4px; }
.kurs-paylas__etiket { font-size: 13px; color: var(--renk-metin-2); margin-right: auto; }
.kurs-paylas__bag--facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.kurs-paylas__bag--x:hover { background: #000; border-color: #000; color: #fff; }
.kurs-paylas__bag--linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.kurs-paylas__bag--whatsapp:hover { background: #25D366; border-color: #25D366; color: #fff; }

/* Gereklilikler + Kitle yan yana */
.kurs-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
.kurs-bilgi__kutu ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* Mufredat: ilk 5 bolum */
.mufredat__daha { width: 100%; margin-top: 14px; }

@media (max-width: 1024px) {
  .kurs-detay {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ust" "yan" "ana";
  }
  .kurs-yan { margin-top: 20px; }
}
@media (max-width: 420px) {
  .kurs-ozet__liste { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
  .kurs-paylas { justify-content: space-between; }
}

/* Yonetim menusu: okunmamis sayisi rozeti (Mesajlar) */
.yonetim-menu__rozet {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: #E53935; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* Sepet ikonu dar ekranda ezilmesin; mobil menude sola hizali */
.ust__sepet { flex: 0 0 auto; }
.ust__sepet svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 1199px) {
  /* `.ust__menu a` (dokunma hedefi kurali) ortaliyordu; ozgulluk icin ust secici */
  .ust__menu .ust__mobil-sepet { display: flex; justify-content: flex-start; padding: 0; }
}

/* --------------------------------------------------------------------------
   15) UST BAR 1200–1365px — tek satira sigdirma (2026-09-26)
   Olcum (18 genislik x 7 sayfa x ziyaretci/yonetici): 1101–1280px'te logo
   menuye biniyor (11–68px), sepet ve hesap dugmesi pencereden tasiyordu.
   1366px ve ustu, 1199px ve alti temiz. Bu aralikta arama kutusu buyutec
   dugmesine iner (tiklayinca acilir), logo ve bosluklar biraz kuculur.
   Hamburger artik 1199px ve altinda (onceden 1100px).
   -------------------------------------------------------------------------- */

.ust__logo { flex: 0 0 auto; }

@media (min-width: 1200px) and (max-width: 1365px) {
  .ust__logo img { width: 220px; }
  .ust__menu ul { gap: 16px; }
  .ust__eylemler { gap: 10px; }
  .buton--uye, .buton--giris { padding: 0 14px; }
  .ust__yonetim { padding: 10px 12px; }

  /* Arama: yalniz buyutec; kutu altta acilir */
  .ust__arama { position: relative; }
  .ust__arama input {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 60;
    width: 300px;
    height: 44px;
    box-shadow: 0 12px 28px -12px rgba(28, 25, 60, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .ust__arama--acik input { opacity: 1; visibility: visible; transform: none; }
}

/* --------------------------------------------------------------------------
   16) URUN SAYFASI — orijinal Elementor sablonu #4739 (2026-09-26)
   Olculer yerel aynadan (`_analiz/orijinal_ayna.py` + `urun_olc.py`):
   yol bandi beyaz, alt koseler 20px · icerik 1140px · gorsel 12px kose,
   sag ustte 36px buyutec · baslik 25/600 #242A3A, stok kodu 13px sagda ·
   fiyat eski 15px, yeni 19/700 #434B5F · adet 48x47 tam yuvarlak ·
   "Sepete Ekle" #FF8F27 17/600, 47px, hap · guven kutusu hap, 1px #E3E2EA ·
   sekmeler hap (15px 35px, 10px kose, 16px), etkin #7F27FF · panel beyaz
   kart 20px ic bosluk, 12px kose, baslik 19/600.
   -------------------------------------------------------------------------- */

.urun-yol-bandi {
  background: #FFFFFF;
  border-radius: 0 0 20px 20px;
  padding: 10px 20px;
}
.urun-yol { font-size: 13.8px; line-height: 20.7px; color: #434B5F; }
.urun-yol a { color: #7F27FF; text-decoration: none; }
.urun-yol a:hover { text-decoration: underline; }

.urun-sayfa__ic { max-width: 1180px; margin: 0 auto; padding: 40px 20px 20px; }
/* Orijinalde son kartin alti ile mor alt bilgi arasi 40px; alt bilginin
   genel 64px ust boslugu bu sayfada yok (gecis sekli kutunun 20px icinde). */
body:has(.urun-sayfa) .alt { margin-top: 0; }

.urun-ana {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: center;
}

/* Galeri */
.urun-galeri__ana { position: relative; }
.urun-galeri__ana img {
  display: block; width: 100%; height: auto; border-radius: 12px; cursor: zoom-in;
  transition: opacity .6s ease;
}
.urun-galeri__ana img.gecis { opacity: 0; }
.urun-galeri__buyut {
  position: absolute; top: 15px; right: 15px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #FFFFFF; color: #242A3A;
  cursor: zoom-in;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
/* Tek sira (site sahibi, 2026-09-26): 4'lu izgara 2 satira iniyor, sekmeler
   asagida kaliyordu. Sigmazsa yatay kayar. */
.urun-galeri__kucukler {
  display: flex; gap: 8px; margin-top: 10px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth;
}
.urun-galeri__kucukler button {
  flex: 1 0 56px; max-width: 76px;
  padding: 0; border: 2px solid transparent; border-radius: 10px;
  background: none; cursor: pointer; overflow: hidden; opacity: .7;
}
.urun-galeri__kucukler button.aktif,
.urun-galeri__kucukler button:hover { opacity: 1; border-color: #7F27FF; }
.urun-galeri__kucukler img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Bilgi sutunu */
.urun-bilgi__ust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; padding: 10px 0;
}
.urun-bilgi__baslik { margin: 0; font-size: 25px; font-weight: 600; line-height: 1; color: #242A3A; }
.urun-bilgi__sku { font-size: 13px; line-height: 19.5px; color: #434B5F; }
.urun-bilgi__sku b { font-weight: 600; }
.urun-bilgi__kisa { margin-top: 5px; font-size: 15px; line-height: 22.5px; color: #7F858C; }
.urun-bilgi__kisa p { margin: 0; }
.urun-bilgi__fiyat {
  display: flex; align-items: baseline; gap: 4px;
  margin: 15px 0 0; font-size: 15px; line-height: 22.5px; color: #242A3A;
}
.urun-bilgi__fiyat del { font-size: 15px; color: #242A3A; opacity: .6; }
.urun-bilgi__fiyat ins { font-size: 19px; font-weight: 700; line-height: 28.5px; color: #434B5F; text-decoration: none; }
.urun-bilgi__stok { margin: 14px 0 0; font-size: 13.8px; line-height: 20.7px; color: #958E09; }
.urun-bilgi__stok--yok { color: #E2401C; }

.urun-bilgi__eylem { display: flex; align-items: stretch; gap: 10px; }
.urun-bilgi__adet {
  flex: 0 0 48px; width: 48px; height: 47px; min-height: 47px;
  padding: 0 0 0 10px;
  border: 1px solid #E3E2EA; border-radius: 50px;
  background: #FFFFFF; color: #000; font-size: 13.33px;
  text-align: center; padding: 0;
  appearance: textfield; -moz-appearance: textfield;
}
.urun-bilgi__adet::-webkit-outer-spin-button,
.urun-bilgi__adet::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.urun-bilgi__sepet {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 47px; padding: 15px 0;
  border: 0; border-radius: 50px;
  background: #FF8F27; color: #FFFFFF;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 17px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.urun-bilgi__sepet:hover { background: #7F27FF; color: #FFFFFF; }
.urun-bilgi__sepet:disabled { opacity: .7; cursor: default; }
a.urun-bilgi__sepet { width: 100%; margin-top: 10px; }

.urun-bilgi__guven {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: 15px 0 0; padding: 10px 20px;
  list-style: none;
  border: 1px solid #E3E2EA; border-radius: 50px; background: #FFFFFF;
}
.urun-bilgi__guven li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 18px; color: #434B5F;
}
.urun-bilgi__guven svg { flex: none; color: #333333; }
.urun-bilgi__kurs { margin: 12px 0 0; font-size: 14px; }

/* Sekmeler: hap basliklar + beyaz kart panel */
.sekmeler.sekmeler--urun { margin-top: 10px; }
.sekmeler--urun > .sekmeler__basliklar {
  display: flex; flex-wrap: wrap; gap: 15px;
  border: 0; margin-bottom: 20px;
}
.sekmeler--urun .sekmeler__basliklar button {
  padding: 15px 35px;
  border: 0; border-radius: 10px;
  background: #FFFFFF; color: #242A3A;
  font: inherit; font-size: 16px; line-height: 18px; font-weight: 400;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.sekmeler--urun .sekmeler__basliklar button:hover { background: #7F27FF; color: #FFFFFF; }
.sekmeler--urun .sekmeler__basliklar button[aria-selected="true"] {
  background: #7F27FF; color: #FFFFFF; border: 0;
}
.sekmeler--urun > .urun-panel { padding: 20px; border-radius: 12px; background: #FFFFFF; }
.urun-panel__baslik {
  margin: 0 0 15px; font-size: 19px; font-weight: 600; line-height: 19px; color: #242A3A;
}
.urun-panel__metin { font-size: 15px; line-height: 22.5px; color: #7F858C; }
.urun-panel__metin p { margin: 0 0 10px; }
.urun-panel__metin p:last-child { margin-bottom: 0; }
.urun-panel__buyuk-baslik {
  margin: 0; font-size: 32px; font-weight: 500; line-height: 32px; color: #434B5F;
}
/* Sabit sekmeler orijinalde bir baslik widget'inin icinde (h6, 16px/500);
   satir ici stiller (Arial, #333, 1.6) aynen. Kutunun `margin:auto`su
   orijinalde ortalamiyordu (kap icerige gore daraliyor). */
.urun-panel__sabit { font-size: 16px; font-weight: 500; }
.urun-panel__sabit > div { margin-left: 0 !important; margin-right: 0 !important; }
.urun-panel__sabit p { margin: 0; }
.urun-panel__sabit a { color: #0000EE; }

/* Urun bilgileri tablosu — WooCommerce `shop_attributes` */
.urun-nitelik {
  width: 100%; margin: 0; border: 0; border-collapse: collapse;
  border-top: 1px dotted rgba(0, 0, 0, .1);
  color: #434B5F; font-size: 15px; line-height: 22.5px;
}
.urun-nitelik th {
  width: 150px; padding: 8px; text-align: left; vertical-align: middle;
  font-weight: 600; border-bottom: 1px dotted rgba(0, 0, 0, .1); background: none;
}
.urun-nitelik td {
  padding: 0; font-style: italic; vertical-align: middle;
  border-bottom: 1px dotted rgba(0, 0, 0, .1);
}
.urun-nitelik td p { margin: 0; padding: 8px 0; }
.urun-nitelik tr:nth-child(even) th,
.urun-nitelik tr:nth-child(even) td { background: rgba(0, 0, 0, .025); }

/* Degerlendirmeler — WooCommerce yorum dizilimi */
.urun-yorumlar h2 { margin: 0 0 15px; font-size: 19px; font-weight: 600; color: #242A3A; }
.urun-yorum { position: relative; margin: 0 0 20px; padding-left: 50px; }
.urun-yorum__avatar {
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px;
  background: #EBE9EB; border: 1px solid #E4E1E3;
}
.urun-yorum__kutu { border: 1px solid #E4E1E3; border-radius: 4px; padding: 1em 1em 0; }
.urun-yorum__ust { display: flex; justify-content: space-between; gap: 10px; }
.urun-yorum__meta { margin: 0 0 1em; font-size: .875em; color: #767676; }
.urun-yorum__meta strong { color: #767676; font-weight: 700; }
.urun-yorum__yildiz { color: #7F858C; letter-spacing: 1px; white-space: nowrap; }
.urun-yorum__metin { font-size: 15px; line-height: 22.5px; color: #7F858C; }
.urun-yorum__metin p { margin: 0 0 1em; }

/* Gorsel buyutme */
.urun-isik {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .88);
}
.urun-isik[hidden] { display: none; }
.urun-isik img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.urun-isik__kapat {
  position: absolute; top: 14px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #FFFFFF;
  font-size: 30px; line-height: 1; cursor: pointer;
}

@media (max-width: 767px) {
  .urun-ana { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .urun-bilgi__ust { flex-direction: column; align-items: flex-start; gap: 15px; }
  .urun-bilgi__guven { border-radius: 30px; justify-content: flex-start; }

  /* Akordiyon: baslik kabi erir, panel KENDI basliginin altina gelir
     (masaustu kurali `display:flex` bunu eziyordu) */
  .sekmeler--urun > .sekmeler__basliklar { display: contents; }

  /* Akordiyon basliklari: orijinaldeki gibi tam genislik, ortali */
  .sekmeler--urun .sekmeler__basliklar button {
    margin-top: 15px; padding: 15px 35px;
    border: 0; border-radius: 10px; text-align: center; justify-content: center;
    background: #FFFFFF; color: #242A3A; min-height: 48px;
  }
  .sekmeler--urun .sekmeler__basliklar button[data-sekme="aciklama"] { margin-top: 0; }
  .sekmeler--urun .sekmeler__basliklar button[aria-selected="true"] {
    background: #7F27FF; color: #FFFFFF; border: 0;
  }
  .sekmeler--urun > .urun-panel { margin-top: 20px; padding: 20px; }
  .urun-panel__buyuk-baslik { font-size: 26px; line-height: 1.2; }
  .urun-nitelik th, .urun-nitelik td { display: table-cell; }
  .urun-nitelik th { width: 40%; }
}

/* Degerlendirme formu — WooCommerce varsayilan gorunumu (orijinal) */
.urun-yorum-formu { margin: 25px 0 0; padding: 0; border: 0; color: #7F858C; font-size: 15px; }
.urun-yorum-formu__baslik { margin: 0; font-size: 15px; color: #7F858C; }
.urun-yorum-formu__not { margin: 0 0 20px; font-size: 15px; color: #7F858C; }
.urun-yorum-formu__giris { margin: -8px 0 16px; font-size: 14px; }
.urun-yorum-formu .zorunlu { color: inherit; }
.urun-yildiz { margin: 0 0 22px; padding: 0; border: 0; }
.urun-yildiz legend { padding: 0; margin-bottom: 4px; font-size: 15px; color: #7F858C; }
.urun-yildiz__satir { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.urun-yildiz input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.urun-yildiz label { cursor: pointer; line-height: 1; }
.urun-yildiz label::before { content: "☆"; font-size: 26px; color: #7F27FF; }
.urun-yildiz input:checked ~ label::before,
.urun-yildiz label:hover::before,
.urun-yildiz label:hover ~ label::before { content: "★"; }
.urun-yildiz input:focus-visible + label { outline: 2px solid #7F27FF; outline-offset: 2px; }
.urun-yildiz:disabled label { cursor: default; opacity: .6; }
.urun-yorum-formu__alan { margin: 0 0 16px; }
.urun-yorum-formu__alan label { display: block; margin-bottom: 4px; font-size: 15px; color: #7F858C; }
.urun-yorum-formu__alan textarea {
  display: block; width: 100%; min-height: 75px;
  padding: 6px 8px; border: 1px solid #767676; border-radius: 2px;
  background: #FFFFFF; font: inherit; color: #434B5F; resize: vertical;
}
.urun-yorum-formu__cerez { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 15px; color: #7F858C; }
.urun-yorum-formu__cerez input { margin-top: 4px; width: auto; }
.urun-yorum-formu__gonder {
  padding: .618em 1em; border: 0; border-radius: 3px;
  background: #E9E6ED; color: #515151;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.urun-yorum-formu__gonder:hover { background: #DCD7E2; color: #515151; }
.urun-yorum-formu__gonder:disabled { opacity: .6; cursor: default; }
.urun-yorum-formu label, .urun-yorum-formu legend { font-weight: 400; }

/* --------------------------------------------------------------------------
   17) ODEME — PayTR cercevesi acikken ust bar yapiskan degil (2026-09-26)
   PayTR'nin betigi taksit/onay adimlarinda sayfayi cercevenin tepesine
   kaydiriyor (window.scrollTo); yapiskan ust bar o anda kart alanlarinin
   ustune biniyordu. Yalniz odeme cercevesi ekrandayken gecerli.
   -------------------------------------------------------------------------- */
body:has(#paytriframe) .ust { position: relative; }

/* --------------------------------------------------------------------------
   18) ODEME SONUCU ve HAVALE BILGISI (2026-09-26)
   Kartla odemede siparis PayTR onayindan sonra olusur; musteri odeme
   adimindan geri donebilir. Havale/EFT tesekkur sayfasinda WooCommerce'in
   "Banka bilgilerimiz" bolumu.
   -------------------------------------------------------------------------- */
.odeme-adim__ust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 8px;
}
.odeme-adim__ust h2 { margin: 0; }
.odeme-adim__not { margin: 0 0 14px; color: var(--renk-metin-2); }

.odeme-sonuc h1 { margin: 12px 0 10px; }
.odeme-sonuc p { margin: 0 0 10px; }
.odeme-sonuc__eylem {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px !important;
}
.odeme-sonuc__uyari {
  display: inline-block; padding: 10px 14px; border-radius: var(--yuvarlak);
  background: rgba(255, 143, 39, 0.10); color: var(--renk-baslik-koyu);
}

.banka-bilgi {
  margin: 22px auto 0; padding: 18px 20px; max-width: 560px;
  text-align: left; border: 1px solid var(--renk-kenar); border-radius: var(--yuvarlak);
}
.banka-bilgi h2 { margin: 0 0 10px; font-size: 19px; }
.banka-bilgi h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.banka-bilgi__liste { margin: 0; padding: 0; list-style: none; }
.banka-bilgi__liste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 0; border-top: 1px dashed var(--renk-kenar);
  overflow-wrap: anywhere;
}
.banka-bilgi__liste li:first-child { border-top: 0; }

/* Siparis detay tablosu: tutar/adet bolunmesin ("500,0 / 0 ₺", "1 ade / t") */
[data-siparis-sonuc] .sepet-tablo td + td { white-space: nowrap; }
@media (max-width: 767px) {
  [data-siparis-sonuc] .sepet-tablo td { padding: 12px 8px; }
  [data-siparis-sonuc] .sepet-tablo td:first-child { padding-left: 4px; }
}

/* --------------------------------------------------------------------------
   19) CEREZ IZNI (KVKK — Meta pixel spec §8, 2026-09-25)
   Karar verilene kadar altta bant; iki dugme esit agirlikta (reddetmek de
   kabul etmek kadar kolay). Tercih alt bilgideki dugmeyle degistirilir.
   -------------------------------------------------------------------------- */
.cerez-bandi {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  max-width: 1100px; margin: 0 auto; padding: 16px 20px;
  background: var(--renk-beyaz); color: var(--renk-baslik-koyu);
  border: 1px solid var(--renk-kenar); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(33, 25, 81, 0.18);
}
.cerez-bandi__metin { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.55; }
.cerez-bandi__metin a { color: var(--renk-mor); }
.cerez-bandi__dugmeler { display: flex; gap: 10px; flex: 0 0 auto; }
.cerez-bandi__dugmeler .buton { min-width: 110px; justify-content: center; }
.alt__cerez {
  margin-left: 12px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-decoration: underline; cursor: pointer; opacity: .85;
}
.alt__cerez:hover { opacity: 1; }
@media (max-width: 575px) {
  .cerez-bandi { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
  .cerez-bandi__metin { font-size: 13px; }
  .cerez-bandi__dugmeler { width: 100%; }
  .cerez-bandi__dugmeler .buton { flex: 1 1 0; }
  .alt__cerez { display: block; margin: 6px auto 0; }
}