/* ============================================================
   STOKVIT — tek stil dosyası (vitrin + sahip paneli)
   ------------------------------------------------------------
   Marka dili: krem zemin, turkuaz asıl renk, altın vurgu, terracotta
   uyarı (sahibin kolajında ölçülen palet). Koyu mürekkep #23302F.
   Panel ve vitrin AYNI kartları kullanır — FinKasa'daki gibi iki ayrı
   tasarım bakılmasın; panelde yalnız sekmeler ve yoğun tablolar var.
   Bu dosya anahtar gerektirmez, yerelde 8120'de servis edilir.
   ============================================================ */

:root {
  --krem: #fbf7f0;
  --krem-2: #f4ece0;
  --kart: #ffffff;
  --cizgi: #e6dccc;
  --murekkep: #23302f;
  --murekkep-2: #5d6a68;
  --murekkep-3: #8a7b63;
  --turkuaz: #1f7a7a;
  --turkuaz-a: #e6f1f0;
  --turkuaz-k: #155b5b;
  --altin: #c9a227;
  --altin-a: #f7edd3;
  --terracotta: #c96f4a;
  --terracotta-a: #fbe8e0;
  --yesil: #2f7a4a;
  --yesil-a: #e4f1e8;
  --gonce: 14px;
  --golge: 0 1px 2px rgba(35, 48, 47, .05), 0 8px 24px -12px rgba(35, 48, 47, .18);
  --yigin: clamp(16px, 4vw, 34px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--krem);
  color: var(--murekkep);
  font: 400 16px/1.55 "Avenir Next", "Segoe UI", system-ui, -apple-system, "DejaVu Sans", sans-serif;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(24px, 4.4vw, 34px); }
h2 { font-size: clamp(19px, 3vw, 23px); }
h3 { font-size: 17px; }
p { margin: 0 0 .8rem; }
a { color: var(--turkuaz-k); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--murekkep-2); }
code, pre { font-family: "SFMono-Regular", Consolas, "DejaVu Sans Mono", monospace; font-size: 13px; }

/* --- kabuk ---------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 247, 240, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
  max-width: 1180px; margin: 0 auto; padding: 10px var(--yigin);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--murekkep); font-weight: 700; letter-spacing: .06em; }
.logo img { width: 34px; height: 34px; display: block; }
.logo-sozluk { letter-spacing: .12em; font-size: 17px; }
.ust-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.orta { max-width: 1180px; margin: 0 auto; padding: 22px var(--yigin) 64px; }
.orta-genis { max-width: 1440px; }
/* AYRI BELGE MÜŞTERİ YÜZLERİ (sipariş takibi · ödeme sonucu · ödeme köprüsü):
   bu üç sayfada üst menü YOK; dönüş için tarayıcının geri tuşuna mahkûm
   kalmak sahibin 25 Eki şikâyetiydi. Şerit kartın DIŞINDA durur: ekran JS
   ile çizilemese bile dönüş yolu görünür kalır. */
.ust-donus { max-width: 1180px; margin: 0 auto; padding: 14px var(--yigin) 0; }

/* ALT BİLGİ (#326) — sahibin "çok az ve düşük kalmış" sözü üzerine dört
   bölüm: güven şeridi · marka+iletişim · bağlantı sütunları · dip satırı.
   Sütun sayısı FLEX ile akar: Yasal/Kurumsal sütunu sunucu satırına göre
   düşebilir, sabit ızgara boş hücre bırakırdı. Değerler (`alt-iletisim`)
   firma bilgisinden gelir; boş alan satırı HİÇ çizilmez (arayuz.js). */
.alt {
  border-top: 1px solid var(--cizgi); background: var(--krem-2);
  padding: 34px var(--yigin) 18px; color: var(--murekkep-2); font-size: 14px;
}
.alt-ic { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

/* İLETİŞİM BANDI (24 Eki) — sahibin "SNR Soft'taki gibi üç kutu" isteği.
   Üç kart da GERÇEK alanlardan kurulur; alan boşsa kart yok. WhatsApp
   yuvarlağı marka yeşili, telefon altın: üç kutu yan yana dizilince
   "hangisi WhatsApp?" sorusunu renk tek başına yanıtlar.
   NABIZ HALKASI yalnız süs değil: `::after` halkası, bağlantının
   tıklanabilir olduğunu hareketle söyler (dokunmatikte hover yok). */
.alt-iletisim-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--cizgi);
}
.alt-iletisim-kart {
  display: flex; align-items: center; gap: 12px;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 13px 15px; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(35, 48, 47, .04);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
a.alt-iletisim-kart:hover, a.alt-iletisim-kart:focus-visible {
  transform: translateY(-2px); border-color: var(--turkuaz); text-decoration: none;
  box-shadow: 0 12px 26px -16px rgba(31, 122, 122, .55);
}
.alt-iletisim-yuvarlak {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--turkuaz-a); color: var(--turkuaz-k); position: relative;
}
.alt-iletisim-yuvarlak svg { width: 21px; height: 21px; }
.alt-iletisim-yuvarlak::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0;
  animation: iletisimNabiz 2.8s ease-out infinite;
}
.alt-iletisim-kart:nth-child(2) .alt-iletisim-yuvarlak::after { animation-delay: .55s; }
.alt-iletisim-kart:nth-child(3) .alt-iletisim-yuvarlak::after { animation-delay: 1.1s; }
@keyframes iletisimNabiz {
  0% { transform: scale(.9); opacity: .45; }
  70% { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.alt-iletisim-whatsapp .alt-iletisim-yuvarlak { background: #e7f7ee; color: #1f8a4c; }
.alt-iletisim-telefon .alt-iletisim-yuvarlak { background: var(--altin-a); color: #8a6a08; }
/* E-posta yuvarlağı taban rengiyle AYNI tonu taşır — kural yineleniyor çünkü
   BANDIN ÜÇ RENKİ tek okumada adlandırilsın: `.alt-iletisim-eposta` silinirse
   eposta kartı renksiz kalmasın, bilinçli bir "turkuaz" olsun. `genel` ise
   SUNUCU OKUNAMADIĞINDA çizilen tek yedek kart: İLETİŞİM KANALI gibi parlamasın
   diye mürekkep tonunda kalır (bkz. arayuz.js → altIletisimBandHTML). */
.alt-iletisim-eposta .alt-iletisim-yuvarlak { background: var(--turkuaz-a); color: var(--turkuaz-k); }
.alt-iletisim-genel .alt-iletisim-yuvarlak { background: var(--krem-2); color: var(--murekkep-2); }
.alt-iletisim-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alt-iletisim-metin small { font-size: 12px; line-height: 1.3; color: var(--murekkep-2); }
.alt-iletisim-metin b { font-size: 14.5px; font-weight: 700; color: var(--murekkep); overflow-wrap: anywhere; }

/* --- SOSYAL AKIŞ (#330, 24 Eki) — sağ altta üst üste yüzen düğmeler -----
   Sahibin isteği: panelden açınca sağ altta ÜST ÜSTE dursun, platformun kendi
   amblemi görünsün, imleç gelince hareket etsin.
   RENK: sahibin gönderdiği örnek beyaz kutu DEĞİL, bizim palet. Alt bilgi
   bandındaki üç kartla aynı dil — ton kartın zemini, çizgi kenar, mürekkep
   simge: Instagram sıcak (altın), Facebook soğuk (turkuaz). İkisi de marka
   rengini (Instagram mor-turuncu, Facebook #1877F2) aynen almıyor: vitrinde
   yan yana üç renk (krem/turkuaz/altın) dışında bir ton, "başkasının düğmesi
   yapıştırılmış" gibi okunuyor.
   HAREKET YALNIZ İMLEÇTE: sonsuz nabiz döngüsü YOK. Sürekli titreyen bir
   yüzen düğme, müşterinin okuduğu metnin yanında dikkat hırsızıdır; bant
   zaten aynı efekti taşıyor. `prefers-reduced-motion` bloğu geçişi kapatır.
   ETİKET solda açılır (`row-reverse`): sağ kenara yapışık kutunun sağına
   metin binseydi ekranın dışına taşardı. */
.sosyal-ak {
  position: fixed; right: 18px; bottom: 18px; z-index: 22;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sosyal-dugme {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 10px;
  width: 46px; height: 46px; padding: 0 12px; border-radius: 999px;
  background: var(--kart); border: 1px solid var(--cizgi); color: var(--turkuaz-k);
  box-shadow: 0 1px 2px rgba(35, 48, 47, .06), 0 10px 22px -14px rgba(35, 48, 47, .34);
  text-decoration: none; overflow: hidden;
  transition: width .26s ease, box-shadow .26s ease, border-color .26s ease, transform .26s ease;
}
/* Genişlik + `overflow:hidden` birlikte: kapalıyken 12+22+12 = 46px → simge
   tam ortada (yuvarlak). Açılırken içerik sola doğru büyür; `width: auto`'nun
   geçişi olmayacağı için kutu sabit 150px'e gidiyor, metin `max-width` ile
   arkasından geliyor. Yuvarlak 999px: 46px'te daire, 150px'te hap. */
.sosyal-dugme:hover, .sosyal-dugme:focus-visible {
  width: 150px; border-color: var(--turkuaz); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(35, 48, 47, .06), 0 16px 30px -16px rgba(31, 122, 122, .55);
}
.sosyal-dugme:focus-visible { outline: 3px solid var(--altin); outline-offset: 2px; }
.sosyal-simge { width: 22px; height: 22px; flex: 0 0 auto; transition: transform .26s ease; }
.sosyal-dugme:hover .sosyal-simge, .sosyal-dugme:focus-visible .sosyal-simge { transform: scale(1.14) rotate(-6deg); }
.sosyal-etiket {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--murekkep);
  transition: max-width .26s ease, opacity .2s ease;
}
.sosyal-dugme:hover .sosyal-etiket, .sosyal-dugme:focus-visible .sosyal-etiket {
  max-width: 94px; opacity: 1;
}
.sosyal-dugme-instagram { background: var(--altin-a); color: #8a6a08; }
.sosyal-dugme-instagram:hover, .sosyal-dugme-instagram:focus-visible { border-color: var(--altin); }
.sosyal-dugme-facebook { background: var(--turkuaz-a); color: var(--turkuaz-k); }
@media (max-width: 720px) {
  /* Telefonda etiket açılmaz (hover yok) → kutu yuvarlak kalır; kenar
     boşluğu 18px'ten 12px'e iner ki başparmak altına girmesin. */
  .sosyal-ak { right: 12px; bottom: 12px; gap: 8px; }
  .sosyal-dugme { width: 42px; height: 42px; }
  .sosyal-simge { width: 20px; height: 20px; }
}

.alt-guven {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--cizgi);
}
.alt-guven-kutu {
  display: flex; align-items: center; gap: 10px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 12px; padding: 10px 12px;
}
.alt-guven-ik { color: var(--turkuaz); flex: 0 0 auto; display: inline-flex; }
.alt-guven-ik svg { width: 22px; height: 22px; }
.alt-guven-kutu b { display: block; font-size: 13.5px; color: var(--murekkep); }
.alt-guven-kutu small { display: block; font-size: 12.5px; color: var(--murekkep-2); }

.alt-sutunlar { display: flex; flex-wrap: wrap; gap: 26px 34px; }
.alt-marka { flex: 1 1 268px; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.alt-logo { display: flex; align-items: center; gap: 9px; color: var(--murekkep); font-weight: 700; letter-spacing: .14em; }
.alt-logo img { width: 30px; height: 30px; display: block; }
.alt-tanitim { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--murekkep-2); }
.alt-iletisim-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.alt-iletisim-liste li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.alt-iletisim-liste svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--turkuaz); }
.alt-iletisim-liste a { color: var(--murekkep-2); text-decoration: none; overflow-wrap: anywhere; }
.alt-iletisim-liste a:hover { color: var(--turkuaz-k); text-decoration: underline; }
.alt-iletisim-yok { margin: 0; font-size: 13.5px; }

.alt-sutun { flex: 1 1 132px; min-width: 122px; display: flex; flex-direction: column; gap: 8px; }
.alt-sutun h2 { margin: 0 0 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-3); }
.alt-sutun a { color: var(--murekkep-2); text-decoration: none; }
.alt-sutun a:hover { color: var(--turkuaz-k); text-decoration: underline; }

.alt-dip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--murekkep-3);
}
.alt-nokta { color: var(--cizgi); }

/* --- Örnek veri bandı (HER YERDE görünür, unutulmasın) -------- */
.ornek-band {
  background: repeating-linear-gradient(135deg, var(--altin-a) 0 10px, #fdf6e6 10px 20px);
  border: 1px solid var(--altin); color: #6b5410;
  border-radius: 10px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 18px;
}
.ornek-band b { font-weight: 700; }
/* --- SUNUCUDAN bandı (Faz 5c: js/panel.js → panelBand) ----------------
   `.ornek-band` ALTIN çizgili: "bu örnek veri, sunucu yok". Sahip panele
   girip sunucuya bağlandığında gördüğü tablo AYNI yerleşimde; ayrımı
   RENK söylüyor. Bu sınıf eksik kalırsa bant stillsiz düşer ve sahip
   hangi verinin gerçek olduğunu renkten anlayamaz — o yüzden sınıfı
   basan satır ile stilin varlığı birlikte denetleniyor (iskelet-check 4c). */
.canli-band {
  background: var(--turkuaz-a); border: 1px solid var(--turkuaz); color: var(--turkuaz-k);
  border-radius: 10px; padding: 9px 13px; font-size: 13.5px; margin-bottom: 18px;
}
.canli-band b { font-weight: 700; letter-spacing: .02em; }
.canli-band code { font-size: 12.5px; }
/* Açık siparişin satırı: tıklanan satır ile üstteki detay kartının aynı
   siparişe ait olduğunu satırın kendisi söylemeli (12 satırlık listede
   kartın başlığı yetmez). */
.tablo .satir-aktif td { background: #edf5f4; box-shadow: inset 3px 0 0 var(--turkuaz); }
.tablo .satir-aktif:hover td { background: #e6f1ef; }
.rozet-ornek {
  display: inline-block; background: var(--altin); color: #3c2f05;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}

/* --- kart / ızgara -------------------------------------------- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--gonce);
  box-shadow: var(--golge); padding: 18px;
}
.kart + .kart { margin-top: 16px; }
.kart-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kart-bas h2, .kart-bas h3 { margin: 0; }
.kart-bas .it { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kart-not { font-size: 13.5px; color: var(--murekkep-2); background: var(--turkuaz-a); border-left: 3px solid var(--turkuaz); padding: 9px 12px; border-radius: 0 8px 8px 0; }
.kart-not.uyari { background: var(--terracotta-a); border-left-color: var(--terracotta); }

.izgara { display: grid; gap: 16px; }
.izgara-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.izgara-urun { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
/* Izgarada `kart + kart` üst boşluğu KALMAZ: akış düzeninde iki kart
   arasına giren 16px, ızgarada ilk satırdaki tek kartı aşağı kaydırıyordu
   (satır yüksekliği kartın kendi boyuna eşit değil). Yalnız ızgara içi —
   normal akıştaki kart aralığı (`.kart + .kart`) duruyor. */
.izgara > .kart + .kart { margin-top: 0; }

/* --- ANA SAYFA KAHRAMANI (24 Eki) ------------------------------
   Sahibin "SNR Soft gibi hareketli, değişen" isteği. HAREKETİN TAMAMI CSS:
   · sağdaki üç ürün kartı 15 sn'lik döngüde sırayla belirir (sahneDonus)
   · kategori çipleri kendi ritminde süzülür (cipSal)
   · alttaki şerit gerçek kategori adlarını dikişsiz kaydırır (seritKay)
   JS YOK: ürün bilgisi HTML'de duruyor, animasyon dursa da içerik okunur.
   `prefers-reduced-motion` açıksa hepsi durur ve ilk kart sabit kalır —
   hareket, bilgiye erişmenin önkoşulu değil. */
.kahraman {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(18px, 3vw, 34px); align-items: center; overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 22px;
  padding: clamp(22px, 3.6vw, 42px);
  background:
    radial-gradient(120% 120% at 88% 8%, #eaf5f3 0%, rgba(234, 245, 243, 0) 58%),
    radial-gradient(90% 90% at 6% 100%, #fbf1d9 0%, rgba(251, 241, 217, 0) 55%),
    linear-gradient(135deg, #ffffff 0%, #f6f1e8 100%);
  box-shadow: var(--golge);
}
/* Uzun kelime (ürün adı / açıklama) ızgara kolonunu TAŞIRMASIN: ızgara
   çocuklarının varsayılanı `min-width:auto`, yani metin kolonu içeriğin
   genişliğine kilitlenip sahneyi sıkıştırırdı. */
.kahraman-metin { min-width: 0; }
.kahraman-rozet {
  display: inline-flex; align-items: center; align-self: flex-start;
  background: var(--turkuaz-a); color: var(--turkuaz-k);
  border-radius: 999px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kahraman h1 {
  margin: 14px 0 12px; font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.04; letter-spacing: -.025em;
}
.kahraman-aciklama { max-width: 46ch; margin: 0 0 18px; font-size: 15.5px; color: var(--murekkep-2); }
.kahraman-dugme { display: flex; gap: 10px; flex-wrap: wrap; }
.kahraman-dugme .dugme { padding: 12px 20px; border-radius: 12px; }
.kahraman-guven {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin: 18px 0 0; padding: 0; font-size: 12.5px; color: var(--murekkep-2);
}
.kahraman-guven li { display: inline-flex; align-items: center; gap: 6px; }
.kahraman-guven svg { width: 15px; height: 15px; color: var(--turkuaz); }

.kahraman-sahne { position: relative; min-height: 322px; }
.sahne-yigin { position: absolute; inset: 0; }
.sahne-kart {
  position: absolute; inset: 6% 7% 12% 7%; margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 18px; background: var(--kart); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 30px 60px -24px rgba(21, 91, 91, .55);
  opacity: 0; transform: scale(.94);
  animation: sahneDonus 15s ease-in-out infinite;
}
/* Gecikme MERDİVENİ üç satırda okunsun: 1. kart döngüyü 0s'de devralır,
   diğerleri 15 sn'lik `sahneDonus`'u 5/10 sn ofsetle sürer. `0s` davranışı
   değiştirmiyor ama sınıfın NE OLDUĞU yazılı kalır — silinirse yerini
   hangi kartın alacağı tahmine dönerdi. */
.sahne-kart-1 { animation-delay: 0s; }
.sahne-kart-2 { animation-delay: 5s; }
.sahne-kart-3 { animation-delay: 10s; }
.sahne-kart .urun-gorsel {
  flex: 1 1 auto; width: 100%; height: 100%; min-height: 0;
  aspect-ratio: auto; object-fit: cover;
}
.sahne-kart figcaption {
  flex: 0 0 auto; padding: 10px 12px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--murekkep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes sahneDonus {
  0% { opacity: 0; transform: scale(.92) rotate(-2.4deg); }
  5% { opacity: 1; transform: scale(1) rotate(-1deg); }
  30% { opacity: 1; transform: scale(1.02) rotate(0deg); }
  36% { opacity: 0; transform: scale(1.05) rotate(1.6deg); }
  100% { opacity: 0; transform: scale(1.05) rotate(1.6deg); }
}
.sahne-bos { display: grid; place-items: center; border-radius: 18px; background: var(--turkuaz-a); }
.sahne-harf { font-size: clamp(90px, 16vw, 160px); font-weight: 800; color: rgba(31, 122, 122, .18); line-height: 1; }
.sahne-cip {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--cizgi);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--murekkep); white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(35, 48, 47, .45);
  animation: cipSal 7s ease-in-out infinite;
}
.sahne-cip-1 { left: 0; top: 2%; }
.sahne-cip-2 { right: 0; bottom: 5%; animation-delay: 2.2s; }
@keyframes cipSal {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.sahne-pul {
  position: absolute; z-index: 3; left: 2%; bottom: 1%;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--turkuaz); color: #fff; border-radius: 999px; padding: 8px 13px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px rgba(21, 91, 91, .7);
}
.sahne-pul svg { width: 15px; height: 15px; }
.sahne-leke { position: absolute; border-radius: 50%; pointer-events: none; }
.leke-a {
  width: 210px; height: 210px; right: -8%; top: -10%;
  background: radial-gradient(circle, #cfe9e5 0%, rgba(207, 233, 229, 0) 70%);
  animation: lekeSur 12s ease-in-out infinite;
}
.leke-b {
  width: 180px; height: 180px; left: -6%; bottom: -8%;
  background: radial-gradient(circle, #f6e4b8 0%, rgba(246, 228, 184, 0) 70%);
  animation: lekeSur 15s ease-in-out infinite reverse;
}
@keyframes lekeSur {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-12px, 10px, 0) scale(1.08); }
}
.kahraman-serit {
  overflow: hidden; margin: 14px 0 0; padding: 9px 0;
  border: 1px solid var(--cizgi); border-radius: 999px; background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.kahraman-serit-ic {
  display: flex; align-items: center; gap: 18px; width: max-content; padding-left: 18px;
  animation: seritKay 38s linear infinite;
}
.kahraman-serit:hover .kahraman-serit-ic { animation-play-state: paused; }
.kahraman-serit-ic span { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--murekkep-2); white-space: nowrap; }
.kahraman-serit-ic i { font-style: normal; color: var(--altin); }
@keyframes seritKay {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- KATEGORİ KARTI (24 Eki) -----------------------------------
   "Ok gelince kutucuk açılsın, içi dolsun" isteği. Dolgu `::before`
   katmanının aşağıdan yukarı süzülmesi; metin/rozet/ok renkleri aynı
   anda beyaza döner. TAMAMI CSS — `:focus-visible` klavyede de aynı
   dolguyu açar. Dokunmatikte hover yok; kart orada bugünkü sakin
   hâliyle okunur (bilgi gizlenmiyor, yalnız vurgu yok). */
.kategori-kart {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 15px 16px 17px; overflow: hidden; isolation: isolate;
  color: var(--murekkep); text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s, border-color .3s;
}
.kategori-kart::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--turkuaz) 0%, var(--turkuaz-k) 78%);
  transform: translateY(102%);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.kategori-kart:hover, .kategori-kart:focus-visible {
  transform: translateY(-5px); border-color: var(--turkuaz); text-decoration: none;
  box-shadow: 0 18px 38px -18px rgba(21, 91, 91, .55);
}
.kategori-kart:hover::before, .kategori-kart:focus-visible::before { transform: translateY(0); }
.kategori-kart:focus-visible { outline: 3px solid var(--altin); outline-offset: 2px; }
.kategori-harf {
  position: absolute; right: 6px; bottom: -22px; z-index: 0;
  font-size: 96px; font-weight: 800; line-height: 1;
  color: var(--turkuaz-a); pointer-events: none;
  transition: color .3s, transform .42s;
}
.kategori-kart:hover .kategori-harf, .kategori-kart:focus-visible .kategori-harf {
  color: rgba(255, 255, 255, .16); transform: translateY(-4px) scale(1.04);
}
.kategori-ust { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.kategori-sayi {
  display: inline-block; background: var(--turkuaz-a); color: var(--turkuaz-k);
  border-radius: 999px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .25s, color .25s;
}
.kategori-ok {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cizgi); color: var(--turkuaz-k);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.kategori-ok svg { width: 16px; height: 16px; }
.kategori-kart h3 { position: relative; z-index: 1; margin: 0; font-size: 17px; transition: color .25s; }
.kategori-kart .tuket {
  position: relative; z-index: 1; margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .25s;
}
.kategori-kart:hover h3, .kategori-kart:focus-visible h3 { color: #fff; }
.kategori-kart:hover .tuket, .kategori-kart:focus-visible .tuket { color: rgba(255, 255, 255, .82); }
.kategori-kart:hover .kategori-sayi, .kategori-kart:focus-visible .kategori-sayi { background: rgba(255, 255, 255, .2); color: #fff; }
.kategori-kart:hover .kategori-ok, .kategori-kart:focus-visible .kategori-ok {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .5);
  transform: translateX(2px);
}
.kategori-cizgi {
  position: relative; z-index: 1; margin-top: auto; height: 2px; border-radius: 2px;
  background: var(--altin); transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.kategori-kart:hover .kategori-cizgi, .kategori-kart:focus-visible .kategori-cizgi { transform: scaleX(1); }

/* --- ürün kartı ----------------------------------------------- */
.urun { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.urun-gorsel { aspect-ratio: 4 / 3; width: 100%; display: block; background: var(--krem-2); }
/* CANLI FOTOĞRAF (tedarikçi hotlink'i): 4/3 kutuya sığdırmak için
   `object-fit: cover` ŞART — uzun ürün fotoğrafları kartı uzatmasın,
   ızgara bozulmasın. Kırık adresi `onerror` `.foto-yok`a çevirir: kutu
   boş kalmaz, zemini ve `alt` metni kalır (PLAN §5 çekince 6). */
img.urun-gorsel { object-fit: cover; }
.urun-gorsel.foto-yok { border: 1px dashed var(--cizgi); color: var(--murekkep-3); font-size: 12px; }
/* ÜRÜN FOTOĞRAFI YAKINLAŞTIRMA (25 Eki, sahibin isteği): detay sayfasında
   fotoğrafın üzerine gelince büyür. `transform-origin`i JS imlece taşıyor →
   büyüyen kare fareyle geziyor (js/yakinlastir.js). Büyüme CSS'te olduğu
   için JS koşmasa da çalışır; gezinme JS ile gelir.
   YALNIZ gerçek fare/izleme cihazı: dokunmatikte sayfa kaydırma ve iki
   parmakla yakınlaştırma bizim efektimize kurban edilmez. */
/* YAKINLAŞTIRMA ÇERÇEVESİ (25 Eki): büyüyen fotoğraf KENDİ kutusunda
   kırpılır — küçük fotoğraf şeridinin ve alt notun üzerine taşmaz.
   Odak yüzdesi bu DÖNÜŞÜMSÜZ kaptan ölçülür (js/yakinlastir.js):
   büyümüş `<img>`nin kutusu ölçekli döndüğü için odak oradan kayardı. */
.foto-kare { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  img.urun-gorsel[data-yakinlastir] { cursor: zoom-in; transform-origin: 50% 50%; transition: transform .22s ease-out; }
  img.urun-gorsel[data-yakinlastir]:hover { transform: scale(2); }
}
/* Ürün detayındaki galeri şeridi: küçük kareler ana karenin yerini
   değiştirir (JS yalnız `src` yazıyor, yeniden çizim yok). */
.mini-ku { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px; background: var(--krem-2); }
.mini { width: 58px; height: 44px; padding: 0; border: 1px solid var(--cizgi); border-radius: 8px;
  overflow: hidden; background: var(--kart); cursor: pointer; }
.mini:hover { border-color: var(--turkuaz); }
.mini-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.urun-ic { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.urun-ad { font-weight: 600; font-size: 15px; }
.urun-kod { font-size: 12px; color: var(--murekkep-3); letter-spacing: .04em; }
.urun-fiyat { font-size: 19px; font-weight: 700; color: var(--turkuaz-k); margin-top: auto; }
.urun-alt { display: flex; align-items: center; gap: 8px; }
.tuket { font-size: 12.5px; color: var(--murekkep-2); }

/* ÜRÜN AÇIKLAMASI (26 Eki, sahibin isteği): okunur blok — h1'in hemen
   altında, fiyat kartından önce. Olculer gövde metninden büyük (14.5px),
   satır aralığı 1.55; paragraflar `arayuz.js → aciklamaKaresi` tarafından
   üretilir. "Devamını oku" NATİF <details>: JS yok, statik sayfada da açılır. */
.urun-aciklama { color: var(--murekkep); font-size: 14.5px; line-height: 1.55; margin: 8px 0 14px; }
.urun-aciklama p { margin: 0 0 10px; }
.urun-aciklama p:last-child { margin-bottom: 0; }
.aciklama-devam { margin-top: 2px; }
.aciklama-devam > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--turkuaz-k);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; border-radius: 6px;
}
.aciklama-devam > summary::-webkit-details-marker { display: none; }
.aciklama-devam > summary::after { content: '▾'; font-size: 11px; line-height: 1; }
.aciklama-devam[open] > summary::after { content: '▴'; }
.aciklama-devam > summary:hover { text-decoration: underline; }
.aciklama-devam > summary:focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 2px; }
.aciklama-devam > p:first-of-type { margin-top: 8px; }

.stok-yok { color: var(--terracotta); font-weight: 700; font-size: 13px; }
.stok-az { color: var(--altin); font-weight: 700; font-size: 13px; }

/* --- düğmeler -------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--turkuaz); color: #fff; border: 1px solid var(--turkuaz);
  border-radius: 10px; padding: 9px 15px; transition: .15s background, .15s transform;
}
.dugme:hover { background: var(--turkuaz-k); text-decoration: none; }
.dugme:active { transform: translateY(1px); }
.dugme-ik { width: 17px; height: 17px; }
.dugme-ikinci { background: #fff; color: var(--turkuaz-k); }
.dugme-ikinci:hover { background: var(--turkuaz-a); }
.dugme-pasif { background: var(--krem-2); color: var(--murekkep-3); border-color: var(--cizgi); cursor: not-allowed; }
.dugme-pasif:hover { background: var(--krem-2); }
.dugme-tehlike { background: #fff; color: #a83d1c; border-color: var(--terracotta); }
.dugme-tehlike:hover { background: var(--terracotta-a); }
.dugme-kukla { width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.dugme.blok { display: flex; width: 100%; }
.dugme-sol { margin-right: auto; }

/* --- form ------------------------------------------------------ */
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--murekkep-2); margin: 0 0 4px; }
.girdi, textarea.girdi, select.girdi {
  width: 100%; font: inherit; color: var(--murekkep);
  background: #fff; border: 1px solid var(--cizgi); border-radius: 9px; padding: 9px 11px;
}
.girdi:focus { outline: 2px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
textarea.girdi { min-height: 120px; resize: vertical; font-family: inherit; }
.satir { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 12px; }
.satir-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kutu { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; font-weight: 400; color: var(--murekkep); }
.kutu input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--turkuaz); }
.ipucu { font-size: 12.5px; color: var(--murekkep-3); margin-top: 4px; }
.izdir { background: var(--krem-2); border: 1px dashed var(--cizgi); border-radius: 9px; padding: 14px; text-align: center; }

/* --- çizelge --------------------------------------------------- */
.tablo-sar { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tablo th, .tablo td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo th { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--murekkep-3); background: var(--krem); }
.tablo tr:hover td { background: #fdfbf7; }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- rozetler -------------------------------------------------- */
.rozet { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
/* Durum rozetleri — adlar js/durum.js'ten gelir (ASCII kod). 18 Eki'de
   `.durum-odeme-bekleniyor` duruyordu ama makinenin kodu `odeme-bekliyor`:
   eşleşmeyen sınıf rozeti RENKSİZ bırakır, hata sessiz kalır. Deneti
   (iskelet-check §4) artık her kod için sınıfı DOĞRUDAN arar. */
.durum-yeni { background: var(--krem-2); color: var(--murekkep-2); }
.durum-odeme-bekliyor { background: var(--altin-a); color: #6b5410; }
.durum-odeme-dogrulaniyor { background: var(--altin-a); color: #6b5410; border: 1px dashed #c9a227; }
.durum-odeme-basarisiz { background: var(--terracotta-a); color: #a83d1c; }
.durum-odendi { background: var(--turkuaz-a); color: var(--turkuaz-k); }
.durum-tedarikciye-iletildi { background: #eee7f5; color: #553d76; }
.durum-kargoda { background: #e2eef7; color: #1b537e; }
.durum-teslim { background: var(--yesil-a); color: var(--yesil); }
.durum-iptal, .durum-iade { background: var(--terracotta-a); color: #a83d1c; }
.durum-kismi-iade { background: var(--terracotta-a); color: #a83d1c; border: 1px dashed #a83d1c; }

/* --- sekmeler (panel) ------------------------------------------ */
.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--cizgi); margin-bottom: 18px; }
.sekme {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--murekkep-2);
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px;
}
.sekme:hover { color: var(--turkuaz-k); }
.sekme-aktif { color: var(--turkuaz-k); border-bottom-color: var(--turkuaz); }
.sekme .dugme-ik { width: 16px; height: 16px; }

/* --- sepet / ödeme --------------------------------------------- */
.sepet-satir { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-satir:last-child { border-bottom: 0; }
.sepet-ad { flex: 1; min-width: 140px; }
.adet-ku { display: inline-flex; align-items: center; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; }
.adet-ku button { font: inherit; font-weight: 700; background: var(--krem); border: 0; padding: 4px 10px; cursor: pointer; }
.adet-ku button:hover { background: var(--turkuaz-a); }
.adet-ku span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.toplam-satir { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.toplam-satir.son { font-size: 19px; font-weight: 700; border-top: 2px solid var(--murekkep); margin-top: 6px; padding-top: 10px; }

/* --- sayfalama ------------------------------------------------- */
.sayfa-ku { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 20px; }
.sayfa-ku .no { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- alt kategori şeridi (çip) · #273 ---------------------------
   Kök kartının sayfası BİR ÜST DALIN adlarını ve sayılarını taşır.
   Ölçülen en kalabalık şerit 201 çip (`Ülke eSIM Paketleri`), tipik 1-21
   → sarmalayan satır, tek satıra zorlamak taşma demekti.
   `round` (999px) bilinçli: panelin `.sekme` çizgisinden ayrışsın, çünkü bu
   bir NAVİGASYON bağlantısı, bir durum etiketi değil. */
.cip-serit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.cip-serit .cip-bas { font-size: 12.5px; color: var(--murekkep-2); font-weight: 600; margin-right: 2px; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 999px; padding: 5px 10px;
  background: #fff; color: var(--murekkep); font-size: 13px; line-height: 1.25;
}
.cip:hover { border-color: var(--turkuaz); color: var(--turkuaz-k); background: var(--turkuaz-a); }
.cip-aktif { border-color: var(--turkuaz); background: var(--turkuaz-a); color: var(--turkuaz-k); font-weight: 700; }
.cip .cip-adet { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--murekkep-2); }
.cip-aktif .cip-adet { color: var(--turkuaz-k); }
.cip-serit .cip-kalan { font-size: 12px; color: var(--murekkep-2); }
.cip-serit .cip-not { font-size: 12px; color: var(--murekkep-2); font-style: italic; }

/* --- ödeme şeritleri --------------------------------------------
   `.odeme-serit` + `.odeme-kutu`: eski rozet sırasının sınıfları; bugün
   `.odeme-serit` yalnız ödeme SONUC sayfasının düğme sırasında duruyor
   (web/js/odeme-sonuc.js). `.odeme-kutu` markup'ta kalmadı — VISA/
   MASTERCARD/3D SECURE yazılı kutular, resmî dosya olmadıkları için
   kaldırıldı (#337); sınıf, geri dönüşüm kopyalarında yaşıyor.
   `.odeme-gorsel-*`: sunucunun `gorselSeridiMi` izniyle çizilen şerit.
   24 Eki'de el yazımı kart SİLÜETLERiydi; 25 Eki'de sahibin verdiği dosyadan
   işlenen GERÇEK MARKA işaretleri (Mastercard / Visa / Troy) + zarf SVG'si.
   Markup tek kaynaktan: web/js/kart-gorselleri.js (vitrinin ödeme adımı +
   sahibin paneli aynı fonksiyonu çağırır). Şerit izin bayrağı false
   geldiğinde HİÇ çizilmez, bu yüzden burada "boş kutu" riski yok.
   PNG'ler ŞEFFAF (zemini dev/kart-logolari.mjs seçti) — krem şeritte beyaz
   halka yazısı olan Mastercard okunur kalsın diye zemine kutu çizilmiyor. */
.odeme-serit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--murekkep-2); }
.odeme-kutu { border: 1px solid var(--cizgi); background: #fff; border-radius: 7px; padding: 4px 9px; font-weight: 700; letter-spacing: .04em; font-size: 11.5px; color: var(--murekkep-2); }
.odeme-gorsel-serit {
  display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--krem-2);
  padding: 10px 12px; color: var(--turkuaz-k);
}
.odeme-gorsel { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--turkuaz-k); }
.odeme-gorsel svg { display: block; flex: none; }
/* Marka PNG'leri: yükseklik sabit, genişlik `kart-gorselleri.js`nin yazdığı
   `width` oranından geliyor (`height:22px` + `width:auto` yeniden oranlar).
   `img`ye yükseklik vermezsek resim indikten sonra satır sıçrıyor. */
.odeme-gorsel img { display: block; flex: none; height: 22px; width: auto; }
/* Kart yolu AÇIKken havale zarfı, KAPALIYKEN marka logoları ikincil plana
   düşer: müşterinin gözü hangi yöntemin gerçekten seçilebildiğini renk
   ağırlığından da okusun. Kuralın iki yüzü var ve tek yerden türüyor
   (`kart-gorselleri.js → ikincilMi`) — kapalıyken markayı tam renk çizmek,
   alt yazı "kartlı ödeme kapalı" dese bile, görsel vaat olurdu. */
.odeme-gorsel-ikincil { color: var(--murekkep-3); opacity: .8; }
/* İkincil durumdaki MARKA resmi soluk renge çevriliyor (`grayscale`), kaybol-
   durulmak yerine: sahip 25 Eki "görseller gözükebilir" dedi ama kapalı bir
   kart yolunun renkli logosu renkli bir vaat. Grayscale ikisini de koruyor —
   resim yerinde, vaat yok. Yalnız PNG'ye uygulanıyor; zarf `currentColor`
   çizdiği için üstteki renk zaten soluk. */
.odeme-gorsel-ikincil img { filter: grayscale(1); }
.odeme-gorsel-serit small { flex: 1 1 100%; font-size: 12px; line-height: 1.45; color: var(--murekkep-2); }

/* --- boş / yükleniyor ------------------------------------------ */
.bos { text-align: center; padding: 34px 18px; color: var(--murekkep-2); }
.bos .dugme-ik { width: 28px; height: 28px; opacity: .5; }
.yukleniyor { font-size: 14px; color: var(--murekkep-2); }

/* --- içe aktarma önizlemesi ------------------------------------ */
.olcu-raporu { background: #23302f; color: #e8f2f0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; white-space: pre; font-size: 12.5px; line-height: 1.5; }
.fiyat-onizi td { font-variant-numeric: tabular-nums; }
.eski { color: var(--murekkep-3); text-decoration: line-through; }
.yeni { color: var(--turkuaz-k); font-weight: 700; }

/* --- anahtar alan (ödeme yöntemleri) --------------------------- */
.yontem { display: flex; gap: 14px; align-items: flex-start; }
.yontem-top { width: 96px; font-weight: 700; letter-spacing: .04em; }
.yontem-body { flex: 1; }
.gizli-alan { display: flex; gap: 8px; align-items: center; }
.gizli-alan input { font-family: Consolas, monospace; letter-spacing: .1em; }
.durum-nokta { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.nokta-yok { background: var(--cizgi); }
.nokta-dolu { background: var(--yesil); }

/* --- yardımcılar ------------------------------------------------ */
.it-sag { margin-left: auto; }
.metin-ik { color: var(--murekkep-2); }
.metin-ko { color: var(--turkuaz-k); }
.metin-kalin { font-weight: 700; }
.sayi-hizali { font-variant-numeric: tabular-nums; }
.bosluk-s { height: 8px; }
.bosluk { height: 18px; }
.gizle { display: none !important; }
.ortala { text-align: center; }
.ayir { border: 0; border-top: 1px solid var(--cizgi); margin: 14px 0; }

@media (max-width: 720px) {
  .ust-ic { gap: 10px; }
  .ust-nav { width: 100%; margin-left: 0; }
  .kart { padding: 14px; }
  .izgara-urun { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .sepet-satir { flex-wrap: wrap; }
  /* Alt bilgi dar ekranda: marka tam satır, bağlantı sütunları ikişer. */
  .alt { padding-top: 26px; }
  .alt-marka { max-width: none; }
  .alt-sutun { flex-basis: 40%; }
  .alt-guven { grid-template-columns: 1fr 1fr; }
  .alt-iletisim-band { grid-template-columns: 1fr; }
  /* Kahraman tek kolon: metin üstte, sahne altta. Sahne min-height'ı
     düşüyor ki ilk ekranda "Öne çıkanlar" başlığı görünür kalsın. */
  .kahraman { grid-template-columns: 1fr; padding: 22px 18px; }
  .kahraman h1 { font-size: clamp(28px, 8.6vw, 40px); }
  .kahraman-sahne { min-height: 252px; }
  .sahne-cip-1 { left: 2%; }
  .sahne-cip-2 { right: 2%; }
}

/* HAREKETİ AZALT: animasyon bilgiye erişmenin önkoşulu değil. Üç ürün
   kartından ilki sabit kalır (diğerleri CSS'te opacity:0), şerit kaymaz
   ama elle kaydırılabilir, kategori dolgusu anında olur. */
@media (prefers-reduced-motion: reduce) {
  .sahne-kart, .sahne-cip, .sahne-leke, .kahraman-serit-ic,
  .alt-iletisim-yuvarlak::after { animation: none !important; }
  .sahne-kart { opacity: 0; transform: none; }
  .sahne-kart:first-child { opacity: 1; }
  .kahraman-serit { overflow-x: auto; }
  .kategori-kart, .kategori-kart::before, .kategori-harf, .kategori-ok,
  .kategori-sayi, .kategori-cizgi { transition: none !important; }
  /* Sosyal akış (#330): geçiş anında olur, simge dönmez/solmaz. Kutu yine
     açılır ve ad yine okunur — hareketi azaltmak BİLGİYİ gizlemek değil. */
  .sosyal-dugme, .sosyal-simge, .sosyal-etiket { transition: none !important; }
  .sosyal-dugme:hover, .sosyal-dugme:focus-visible { transform: none; }
  .sosyal-dugme:hover .sosyal-simge, .sosyal-dugme:focus-visible .sosyal-simge { transform: none; }
  /* Fotoğraf yakınlaştırma YİNE OLUR (bilgiye erişim), ama geçiş anında. */
  img.urun-gorsel[data-yakinlastir] { transition: none !important; }
}

/* --- ödeme köprüsü + sonuç sayfası -----------------------------
   Renk anlamı SABİT: yeşil = yalnız sunucu kaydı doğruladı,
   kehribar = bekliyor/doğrulanıyor, kiremit = başarısız.
   Sonuç sayfası "başarılı" rengini URL'den alamaz (js/odeme-sonuc.js). */
.sonuc-kart { max-width: 720px; margin: 0 auto; }
.sonuc-kart h1 { margin: 0; font-size: 24px; }
.sonuc-bas { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sonuc-bas .dugme-ik { width: 26px; height: 26px; }
.sonuc-aciklama { color: var(--murekkep-2); font-size: 15px; }
.sonuc-basarili { border-top: 4px solid var(--yesil); }
.sonuc-basarisiz { border-top: 4px solid var(--terracotta); }
.sonuc-dogrulaniyor, .sonuc-bekleyen { border-top: 4px solid var(--altin); }
.sonuc-sahteDonus, .sonuc-parcali { border-top: 4px solid var(--cizgi); }
.sonuc-kopru { border-top: 4px solid var(--turkuaz); }
.sonuc-kart .kart-not { margin-top: 8px; }
.iframe-ku { border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: var(--krem); min-height: 420px; }
.iframe-ku iframe { width: 100%; height: 560px; border: 0; display: block; }

/* --- sipariş takibi (siparis-durum.html) -----------------------
   ZAMAN ÇİZGİSİ: adlar ve hâller SUNUCUDAN gelir (sunucu/siparis.mjs →
   zamanCizgisi → durum.js cizgiDurumu). CSS yalnız BEŞ HÂLİ boyar:
   gecmis · simdi · bekliyor · koptu · once. Yeni bir makine hâli eklenir
   de buraya sınıf unutulursa çizgi RENKSİZ kalır — iskelet-check §4c her
   hâl için stil arar ki bu sessizlik gürültüye dönüşsün. */
.cizgi { display: flex; list-style: none; margin: 16px 0 6px; padding: 0; }
.cizgi-adim { position: relative; flex: 1; min-width: 0; padding-top: 30px; text-align: center; font-size: 12.5px; color: var(--murekkep-3); }
.cizgi-adim::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--cizgi); }
.cizgi-adim:first-child::before { left: 50%; }
.cizgi-adim:last-child::before { right: 50%; }
.cizgi-nokta { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px;
  border-radius: 50%; background: #fff; border: 2px solid var(--cizgi); display: flex; align-items: center; justify-content: center; }
.cizgi-ik { width: 9px; height: 9px; }
.cizgi-ad { display: block; font-weight: 700; line-height: 1.3; }
.cizgi-hal, .cizgi-ek { display: block; font-size: 11.5px; font-weight: 400; }

.cizgi-gecmis .cizgi-nokta { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.cizgi-gecmis { color: var(--murekkep-2); }
.cizgi-gecmis::before { background: var(--yesil); }
.cizgi-simdi .cizgi-nokta { background: var(--turkuaz); border-color: var(--turkuaz-k); color: #fff; box-shadow: 0 0 0 3px var(--turkuaz-a); }
.cizgi-simdi { color: var(--turkuaz-k); }
.cizgi-simdi::before { background: var(--yesil); }
.cizgi-bekliyor .cizgi-nokta { background: #fff; border-color: var(--cizgi); }
.cizgi-koptu .cizgi-nokta { background: var(--terracotta-a); border-color: var(--terracotta); color: #a83d1c; }
.cizgi-koptu { color: #a83d1c; }
.cizgi-koptu::before, .cizgi-once::before { background: repeating-linear-gradient(90deg, var(--cizgi) 0 4px, transparent 4px 8px); }
.cizgi-once { color: var(--murekkep-3); }

/* Sorgu kutusu: gerçek GET formu — JS kapalıyken de çalışır (action ve
   name="no" olmadan sayfa hiçbir şey yapamaz). */
.takip-sorgu { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 4px 0 6px; }
.takip-sorgu label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--murekkep-3); flex: 0 0 100%; }
.takip-sorgu input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; font: 600 15px/1.2 inherit;
  letter-spacing: .04em; color: var(--murekkep); background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; }
.takip-sorgu input:focus-visible { outline: 2px solid var(--turkuaz); outline-offset: 1px; border-color: var(--turkuaz); }
.takip-sorgu code { font-variant-numeric: tabular-nums; }

/* --- bilgi kutusu: FinKasa kesimi ------------------------------------
   Sahibin 19 Eki isteği: "bilgiler kutu gibi düzgün çıksın, düz yazı
   olmasın". Her alan KENDİ kutusunda (ikon + etiket + değer + eylem);
   boş alanın kutusu ÇİZİLMEZ — "bilgi yok" demek için gri satır uydurmak
   yerine kutu sayısı eksilir. IBAN `bilgi-parasal` ile hizalı basılır:
   rakam grupları kaymasın (kopyalayan kişi gözle de denetleyebilsin). */
.bilgi-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bilgi-kutu {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--gonce);
  padding: 12px 14px; box-shadow: var(--golge);
}
.bilgi-kutu.tam { grid-column: 1 / -1; }
.bilgi-ikon {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--turkuaz-a); color: var(--turkuaz);
}
.bilgi-ikon .dugme-ik { width: 18px; height: 18px; }
.bilgi-ic { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bilgi-etiket { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--murekkep-3); }
.bilgi-deger { font-size: 15px; font-weight: 600; color: var(--murekkep); overflow-wrap: anywhere; }
.bilgi-deger a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
.bilgi-parasal { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bilgi-not { font-size: 12.5px; color: var(--murekkep-3); font-weight: 400; }
.bilgi-kutu .it { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none; }
@media (max-width: 560px) {
  .bilgi-izgara { grid-template-columns: 1fr; }
  .bilgi-kutu .it { margin-left: 0; }
}

/* Dar ekranda yatay çizgi 6 adımla okunamaz oluyor: dikey raya döner. */
@media (max-width: 620px) {
  .cizgi { flex-direction: column; }
  .cizgi-adim { flex: none; text-align: left; padding: 6px 0 6px 28px; min-height: 26px; }
  .cizgi-adim::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .cizgi-adim:first-child::before { top: 12px; left: 7px; }
  .cizgi-adim:last-child::before { bottom: 12px; left: 7px; }
  .cizgi-nokta { left: 8px; top: 12px; transform: translateX(-50%); }
  .cizgi-hal, .cizgi-ek { display: inline; margin-left: 6px; }
}