/* LUVİ HİJYEN — tek CSS dosyası, elle yazıldı.
   Değişkenler :root'ta ve Türkçe adlı; sınıf adları da Türkçe, şablonlarla
   aynı dil. Dış kütüphane, CDN ve dış font yok: bir bağımlılık daha az,
   kırılacak bir adım daha az.
   Renk kararı şablona ham hex olarak yazılmaz; tek istisna paketin kendi
   vurgu rengidir (--vurgu), o da veritabanından gelir ve karta inline
   değişken olarak geçirilir. */

:root {
  --su: #0aa2c4;
  --su-koyu: #0a7d99;
  --derin: #07394a;
  --nane: #22c79a;
  --limon: #ffcb47;
  --zemin: #f3fafc;
  --kart: #ffffff;
  --cizgi: #dbeef4;
  --metin: #0c2a34;
  /* Eski değer #5c8593 beyazda 4,01:1 idi ve bu renk dekoratif bir dipnot
     değil, sitenin İKİNCİ GÖVDE rengi: paket özetleri, adım açıklamaları,
     S.S.S. cevapları ve "+ KDV" ibaresi hep bununla yazılıyor. 15-16 px
     normal metin için eşik 4,5:1; yeni değer beyazda 5,3 zeminde 5,0. */
  --metin-soluk: #4a7180;
  --golge: 0 2px 10px rgba(7, 57, 74, .06);
  --golge-yuksek: 0 18px 44px rgba(7, 57, 74, .14);
  --yuvarlak: 18px;
  --olcu: 1200px;
  /* Ham hex'i kuralların içine dağıtmamak için: paleti değiştiren kişi
     altbilgiyi, uyarı kutularını ve form zeminini geride bırakmasın. */
  --uyari-zemin: #fff8e4;
  --uyari-cizgi: #f2ddaa;
  --uyari-metin: #6a4e05;
  --pos-zemin: #fff4d2;
  --pos-metin: #5c4300;
  --pos-ikon: #b07d00;
  --tehlike: #b3261e;
  --tehlike-cizgi: #f0c2bd;
  --alan-zemin: #fbfeff;
  --altbilgi-metin: #cfe7ee;
  --altbilgi-soluk: #9dc3cf;
  --nane-uzeri: #06342a;
  /* Kartların her birinde ayrıca tanımlanır; burada yalnızca yedek değer. */
  --vurgu: var(--su);
  /* Vurgu renginin ÜZERİNE beyaz yazı basılan yerler için koyultulmuş
     tonu. Nane (#22c79a) üstünde beyaz 2,16:1, turkuaz (#0aa2c4) üstünde
     3,01:1 idi — ikisi de WCAG AA'nın (4,5:1) altında ve rozetler
     "baskı hatası" gibi soluk görünüyordu. %50 koyu karışım üç paketin
     üçünde de 4,8:1'in üstüne çıkarıyor. */
  --vurgu-koyu: color-mix(in srgb, var(--vurgu) 50%, var(--derin));
  --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* DİKKAT: bir özel değişkenin içindeki var() TANIMLANDIĞI ögede çözülür,
   kullanıldığı ögede değil. Yani :root'taki --vurgu-koyu her zaman
   :root'un --vurgu'suna (turkuaz) göre hesaplanır; nane paketin rozeti
   yine yanlış renkte çıkardı. Bu yüzden --vurgu'yu satır içi taşıyan
   ögelerde YENİDEN tanımlanıyor: orada kendi --vurgu'suna göre çözülür. */
.paket-kart, .detay, .sepet-satir {
  --vurgu-koyu: color-mix(in srgb, var(--vurgu) 50%, var(--derin));
}

* { box-sizing: border-box; }

html {
  /* Üst menü yapışkan (.ust, position: sticky). "/#paketler" gibi bir
     çapaya atlandığında tarayıcı bölümü tam tepeye hizalar ve başlık
     menünün ALTINDA kalır — ziyaretçi bölümün adını hiç görmez.
     scroll-padding menü yüksekliği kadar pay bırakır. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--kart);
  color: var(--metin);
  font: 400 17px/1.6 var(--yazi);
  -webkit-font-smoothing: antialiased;
  /* Uzun Türkçe kelimeler ("dezenfektanı", "konsantre") dar ekranda
     kutudan taşıyordu. */
  overflow-wrap: break-word;
  /* iOS Safari yatay çevirince metni kendiliğinden büyütüyor. */
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: var(--su-koyu); }
svg.ikon { flex: none; vertical-align: -.18em; }

h1, h2, h3 { line-height: 1.22; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2.05rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.kap { width: min(100% - 32px, var(--olcu)); margin-inline: auto; }
.bolum { padding: 66px 0; }
/* Bölümler dönüşümlü olarak beyaz ve çok açık turkuaz: hijyen algısında
   sert ayraç çizgisi yerine zemin farkı kullanıyoruz. */
.bolum.zeminli { background: var(--zemin); }
.bolum-baslik { max-width: 68ch; margin-bottom: 34px; }
.bolum-baslik.ortala { margin-inline: auto; text-align: center; }
.bolum-baslik p { margin-bottom: 0; }
.ortala { text-align: center; }
.sonuk { color: var(--metin-soluk); }
.yazi-sutun { max-width: 72ch; }
.yazi-sutun h3 { margin-top: 1.6em; color: var(--derin); }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--derin); color: #fff; padding: 12px 18px; border-radius: 0 0 10px 0;
}
.atla:focus { left: 0; }
/* Yalnızca ekran okuyucuya: görsel olarak sıfır boyut, ağaçta var. */
.gorunmez {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Klavyeyle gezen için görünür halka; fareyle tıklayanı rahatsız etmesin
   diye :focus değil :focus-visible. */
:focus-visible {
  outline: 3px solid var(--su);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ───────────────────────────── üst menü */

.ust {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 18px; padding: 12px 0; }

.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.marka img { width: 42px; height: 42px; }
.marka-ad {
  display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: .06em;
  color: var(--derin);
}
/* Logonun ikinci parçası ("HİJYEN") turkuaz: marka iki parçalı okunsun. */
.marka-ad b { color: var(--su); font-weight: 800; }
.marka-alt {
  display: block; font-size: .74rem; color: var(--metin-soluk);
  letter-spacing: .02em;
}

.menu { display: flex; align-items: center; gap: 2px; }
.menu a {
  color: var(--metin); text-decoration: none; padding: 10px 13px;
  border-radius: 999px; font-size: .96rem; white-space: nowrap;
}
.menu a:hover { background: var(--zemin); color: var(--su-koyu); }
.menu a.acik { background: rgba(10, 162, 196, .12); color: var(--su-koyu); font-weight: 600; }
.menu-telefon { font-weight: 700; color: var(--derin); }

.menu-dugme {
  display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; cursor: pointer;
  background: var(--zemin); color: var(--derin);
  border: 1px solid var(--cizgi); border-radius: 12px;
  font: 600 .95rem var(--yazi);
}

.sepet-dugme {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--derin); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.sepet-dugme:hover { background: var(--su-koyu); }
/* Geniş ekranda uzun etiket, telefonda kısası görünür (bkz. 760px bloğu). */
.sepet-dugme .dugme-kisa { display: none; }
.sepet-sayac {
  position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px;
  display: grid; place-items: center; padding: 0 6px;
  background: var(--nane); color: var(--nane-uzeri);
  border: 2px solid var(--kart); border-radius: 999px;
  font-size: .76rem; font-weight: 800;
}
/* Boş sepet: sayaç ve kısa etiket gizli. Seçici üç sınıflı ki telefondaki
   ".sepet-dugme .dugme-kisa { display:inline }" kuralını da yensin —
   boş sepette telefonda "Öde" yazmamalı. */
.sepet-dugme[data-adet="0"] .sepet-sayac,
.sepet-dugme[data-adet="0"] .dugme-kisa { display: none; }

/* ── sepete ekleme parıltısı ─────────────────────────────────────────
   "Sepete Ekle"den üst menüdeki düğmeye doğru süzülen yıldız ışığı.
   Ucuş yolu ve süresi site.js'te (Web Animations API); burada yalnızca
   parçacığın görünüşü ve varış anındaki parlama var. */
.parilti {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  will-change: transform, opacity;
}
/* Dört köşeli yıldız: clip-path ile, görsel dosyası yok. */
.parilti-yildiz {
  position: absolute; inset: 0; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--su));
}
/* Hale: yıldızın arkasındaki yumuşak ışık lekesi. */
.parilti-hale {
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%,
                              rgba(10, 162, 196, .55) 38%, rgba(10, 162, 196, 0) 70%);
}
/* İz: yıldızı takip eden küçük, sönük kıvılcımlar. Yalnızca hale taşır. */
.parilti.iz { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.parilti.iz .parilti-hale { inset: -6px; opacity: .7; }

/* Varış: düğme bir an parlar, sayaç zıplar. Yazı da BU ANDA değişir
   (site.js), önce değil — parıltı "haberi taşıyor" hissi bundan geliyor. */
.sepet-dugme.parladi { animation: sepet-parla .65s ease-out; }
@keyframes sepet-parla {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .9), 0 0 0 0 rgba(10, 162, 196, .6); }
  35%  { transform: scale(1.09); box-shadow: 0 0 0 7px rgba(255, 255, 255, .35), 0 0 28px 10px rgba(10, 162, 196, .6); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(10, 162, 196, 0); }
}
.sepet-sayac.zipla { animation: sayac-zipla .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sayac-zipla {
  0%   { transform: scale(.3); }
  100% { transform: scale(1); }
}
/* Uçuş sırasında düğme sönük: ikinci tıklama parıltı varmadan sayıyı
   değiştirmesin (site.js düğmeyi o süre kilitler). */
.dugme.gonderiliyor { opacity: .6; pointer-events: none; }

/* ───────────────────────────── düğmeler */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* 44px: parmakla güvenle basılan en küçük hedef. */
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 999px;
  font: 700 1rem var(--yazi); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dugme.ana {
  /* Gradyanın açık ucu vurgunun KOYU tonundan başlar: beyaz yazı nane ve
     turkuaz düğmede okunmuyordu. Gölge de vurgudan türer; sabit turkuaz
     gölge lacivert düğmenin altında ayrı bir renk lekesi gibi duruyordu. */
  background: linear-gradient(135deg, var(--vurgu-koyu), var(--su-koyu));
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--vurgu) 30%, transparent);
}
.dugme.ana:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--vurgu) 38%, transparent);
}
.dugme.ikinci {
  background: var(--kart); color: var(--derin); border-color: var(--cizgi);
}
.dugme.ikinci:hover { border-color: var(--su); color: var(--su-koyu); }
.dugme.genis { width: 100%; }
/* 44px: sözleşmedeki en küçük dokunma hedefi. 40px'te sepetteki çöp
   kutusu düğmesi telefonda ilk denemede tepki vermiyordu. */
.dugme.kucuk { min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.dugme.sil { min-width: 44px; padding: 8px 12px; color: var(--metin-soluk); }
.dugme.sil:hover { color: var(--tehlike); border-color: var(--tehlike-cizgi); }

.rozet {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--nane); color: var(--nane-uzeri); font-size: .78rem; font-weight: 800;
}
.etiket {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--zemin); color: var(--metin-soluk);
  font-size: .78rem; font-weight: 600;
}

/* ───────────────────────────── manşet */

.manset {
  position: relative;
  background-color: var(--zemin);
  background-size: cover; background-position: center;
  padding: 70px 0 0;
  /* overflow gizlenmez: güven şeridi manşetin alt kenarına biner
     (translateY) ve gizlense alt satırı kırpılıyordu. */
}
/* Arka plan görselinin üstüne beyaza dönen bir yumuşatma: yazı her zaman
   okunur kalsın, görsel değişse bile kontrast bozulmasın. */
.manset::before {
  content: ""; position: absolute; inset: 0;
  /* Sağ uç .18'den .04'e indirildi: perde manşetteki bütün şişe ve köpük
     motiflerini silip süpürüyordu ve ilk ekran "görsel yüklenememiş" gibi
     duruyordu. Sol taraf (başlığın olduğu yer) yine opak kalır. */
  background: linear-gradient(105deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 44%, rgba(243, 250, 252, .04) 100%);
}
.manset-ic { position: relative; }
.manset-yazi { max-width: 60ch; padding-bottom: 42px; }
.manset-yazi h1 { color: var(--derin); }
.manset-yazi p { font-size: 1.12rem; color: var(--metin); max-width: 56ch; }
.manset-rozet {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  padding: 7px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--nane) 18%, var(--kart)); color: var(--nane-uzeri);
  font-size: .85rem; font-weight: 700;
}

.guven {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  overflow: hidden;
  box-shadow: var(--golge-yuksek);
  transform: translateY(26px);
}
.guven { z-index: 2; }
.manset + .bolum, .manset ~ .bolum:first-of-type { padding-top: 78px; }
.guven-oge {
  display: flex; align-items: center; gap: 11px;
  background: var(--kart); padding: 16px 18px;
  font-size: .93rem; color: var(--metin-soluk);
}
.guven-oge svg { color: var(--su); }
.guven-oge b { display: block; color: var(--metin); font-size: .98rem; }
/* Paket detayındaki ince sürüm: kutu değil, tek satırlık güven şeridi. */
.guven.ince {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  background: none; border: 0; box-shadow: none; transform: none;
  margin-top: 18px;
}
.guven.ince .guven-oge { padding: 0; font-size: .9rem; }

/* ───────────────────────────── adımlar */

.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adim {
  position: relative; background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 26px 24px 20px;
}
.adim-no {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--su), var(--su-koyu));
  color: #fff; border-radius: 14px; font-weight: 800; font-size: 1.1rem;
}
.adim p { margin-bottom: 0; font-size: .96rem; }

/* ───────────────────────────── paket kartları */

/* TEK SÜTUN: üç paket ALT ALTA durur (kullanıcının kararı, 2026-09-21).
   Kart yan yana üç sütundayken açılan kalem listesine yer yoktu; ya liste
   kesiliyor ya kartlar birbirini iteliyordu. .ikili yalnızca paket
   detayının altındaki iki küçük kart içindir. */
.paketler { display: grid; grid-template-columns: 1fr; gap: 16px; }
.paketler.ikili { grid-template-columns: repeat(2, 1fr); gap: 24px; }

.paket-kart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  transition: box-shadow .18s ease, border-color .18s ease;
}
/* İmleç YALNIZCA tamamı tıklanabilir kartta el olur; açılır kartta tıklama
   hedefi <summary>'dir ve kendi imlecini taşır. */
.paket-kart[data-yol] { cursor: pointer; }
.paket-kart[data-yol]:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek); border-color: var(--vurgu); }
.paket-kart:hover { box-shadow: var(--golge-yuksek); border-color: var(--vurgu); }
/* Şerit paketin kendi rengini taşır: üç kart birbirinden bir bakışta
   ayrılsın. Dikey kartta üstte, yatay kartta sol kenarda. */
.paket-kart::before { content: ""; display: block; height: 5px; background: var(--vurgu); }

.paket-gorsel { position: relative; aspect-ratio: 4 / 3; background: var(--zemin); }
.paket-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.paket-rozet {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--vurgu-koyu); color: #fff;
  font-size: .78rem; font-weight: 800;
  box-shadow: 0 6px 16px rgba(7, 57, 74, .2);
}

.paket-govde { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.paket-tip {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--vurgu) 12%, #fff);
  color: var(--derin); font-size: .78rem; font-weight: 700;
}
.paket-ad { font-size: 1.32rem; font-weight: 800; margin: 0 0 8px; }
/* Sepette bağlantının KENDİSİ .paket-ad taşıyor (a.paket-ad); yalnızca
   ".paket-ad a" yazılınca kural oraya hiç uygulanmıyor ve başlık ham,
   altı çizili turkuaz bir link gibi görünüyordu. */
.paket-ad a, a.paket-ad { color: var(--derin); text-decoration: none; }
.paket-ozet { color: var(--metin-soluk); font-size: .96rem; }
/* Kalem SAYISI kartta kalır, kalem LİSTESİ kalmaz: sayı paketin
   büyüklüğünü verir, liste ise kararı karta taşıyıp üç kartı yan yana
   okunamaz hale getiriyordu. */
.paket-olcu {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 4px; color: var(--metin-soluk);
  font-size: .9rem; font-weight: 700;
}
.paket-olcu svg { color: var(--vurgu); }

.paket-dip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cizgi);
}
/* Kartın dibinde artık yalnızca düğme var (fiyat kaldırıldı). margin-top:auto
   onu kartın en altına yaslar, böylece özet metni bir satır uzayınca üç
   kartın düğmeleri yine aynı hizada durur. */
.paket-kart .paket-dip .dugme { justify-content: center; }
.paket-fiyat { font-size: 1.5rem; font-weight: 800; color: var(--derin); }
/* Üstü çizgi YALNIZCA tutarın üstünde: "Tek tek alınsa …" açıklaması
   okunur kalsın. Etiketsiz bırakılınca müşteri bunu "eski fiyat" sanıp
   altındaki KDV dahil (daha büyük) tutarla karşılaştırıyordu. */
.paket-eski { display: block; color: var(--metin-soluk); font-size: .92rem; }
.paket-eski s { text-decoration: line-through; }
/* "+ KDV" fiyatın hemen yanında: toptan satışta fiyatın KDV hariç olduğu
   fiyatla aynı anda okunmazsa sepette sürpriz oluyor. */
.paket-kdv { margin-left: 6px; color: var(--metin-soluk); font-size: .88rem; font-weight: 700; }

.paket-kart.kucuk .paket-ad { font-size: 1.12rem; }
.paket-kart.kucuk .paket-gorsel { aspect-ratio: 16 / 9; }

/* ───────────────────────────── yatay (açılır) paket kartı */

/* Kart bir satır: solda renk şeridi, sonra <details>. Şerit ::before
   olduğu için flex sırasında ilk öge; height:auto + width verince dikey
   bir çubuğa dönüşür, ayrı bir element eklemeye gerek kalmaz. */
.paket-kart.yatay { flex-direction: row; align-items: stretch; }
.paket-kart.yatay::before { height: auto; width: 6px; flex: none; }
.paket-ac { flex: 1; min-width: 0; }

/* Varsayılan üçgen işaret gizli: yerine sağdaki "Ürünleri İncele" düğmesi
   ve dönen ok var. list-style ve ::-webkit-details-marker'ın İKİSİ de
   gerekli — Safari ikincisine bakar. */
.paket-satir { list-style: none; cursor: pointer; }
.paket-satir::-webkit-details-marker { display: none; }
.paket-satir {
  display: grid;
  /* Görsel sütunu sabit 230px iken kart 960 piksel genişlikte %24'ünü
     kaplıyordu: paketin ne olduğunu anlatan TEK görsel, yanındaki boş
     beyazlıkta kayboluyordu. Oran tabanlı clamp geniş ekranda büyütür,
     dar ekranda metni ezmeden küçültür. */
  grid-template-columns: clamp(240px, 32%, 400px) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 26px;
  padding-right: 24px;
}
.paket-satir:hover .paket-ac-dugme { background: var(--vurgu-koyu); color: #fff; }
/* Odak halkası satırın TAMAMINDA: <summary> klavyede tek durak, halkanın
   yalnızca düğmenin etrafında çıkması nereye basıldığını gizliyordu. */
.paket-ac:focus-visible, .paket-satir:focus-visible {
  outline: 3px solid var(--vurgu-koyu); outline-offset: -3px; border-radius: var(--yuvarlak);
}

/* aspect-ratio DEĞİL min-height: oran verilince görsel, yanındaki metin
   kısaldığında birlikte küçülüyordu; satırın yüksekliğini görsel belirlesin.
   Değer 210'dan 158'e indi: üç paketin AYNI ANDA ekranda durması gerekiyor
   (kullanıcının isteği) ve 210'da üçüncü kart ekranın altında kalıyordu.
   Görsel kısaldı ama GENİŞLEDİ (sütun %32); alanı eski 230x225'ten büyük. */
.paket-kart.yatay .paket-gorsel {
  /* aspect-ratio:auto ŞART: taban .paket-gorsel kuralı 4/3 taşıyor ve o,
     300 piksel genişlikte satırı 225 piksele kilitliyordu — min-height hiç
     devreye girmiyordu. Yatay kartta yüksekliği metin sütunu belirler. */
  aspect-ratio: auto;
  display: block; height: 100%; min-height: 158px;
}
/* Görsel MUTLAK konumlu: <img width="480" height="360"> öznitelikleri
   tarayıcıya 4:3 oranı veriyor ve akıştaki img, 300 piksel genişlikte
   satırı 225 piksele çıkarıyordu — aspect-ratio:auto ve min-height bunu
   çözmüyor, çünkü yüksekliği getiren görselin KENDİ içsel oranı.
   inset:0 ile görsel satırı doldurur ama satırın yüksekliğine KARIŞMAZ;
   yüksekliği artık metin sütunu belirliyor ve üç kart ekrana sığıyor.
   Sahne 800x600; geniş çerçevede üst-alt kırpılır, bu yüzden odak aşağı
   kaydırıldı: raf ve ürün ayakları kadrajda kalsın. */
.paket-kart.yatay .paket-gorsel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.paket-kart.yatay .paket-govde {
  display: flex; flex-direction: column; justify-content: center;
  padding: 16px 0;
}
/* Çok geniş ekranda özet satırı kart boyunca uzayıp okunaksızlaşıyordu. */
.paket-kart.yatay .paket-ozet { max-width: 62ch; font-size: .94rem; }
.paket-kart.yatay .paket-tip { margin-bottom: 6px; }
.paket-kart.yatay .paket-ad { font-size: 1.24rem; margin-bottom: 4px; }
.paket-kart.yatay .paket-tip { margin-bottom: 8px; }
.paket-kart.yatay .paket-ad {
  display: block; font-size: 1.3rem; font-weight: 800;
  color: var(--derin); margin-bottom: 6px;
}
.paket-kart.yatay .paket-ozet { display: block; margin-bottom: 8px; }
.paket-kart.yatay .paket-olcu { margin: 0; }

.paket-ac-dugme {
  /* align-self ZORUNLU: .paket-satir'da align-items:stretch var (görsel
     satırın tamamını doldursun diye) ve o, düğmeyi de satır boyunca
     geriyordu — 46 piksellik hap, 200 piksellik dev bir elips oluyordu. */
  align-self: center;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 11px 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--vurgu) 14%, #fff);
  color: var(--derin); font-weight: 800; font-size: .96rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
/* Ok "ok-sag" ikonudur, ayrı bir aşağı ok çizmeye gerek yok: kapalıyken
   90° döndürülür (aşağı), açıkken 270° (yukarı). */
.paket-ac-dugme svg { transition: transform .2s ease; transform: rotate(90deg); }
.paket-ac[open] .paket-ac-dugme svg { transform: rotate(-90deg); }
.paket-ac .ac-acik, .paket-ac[open] .ac-kapali { display: none; }
.paket-ac[open] .ac-acik { display: inline; }

/* ── açılan bölüm */
.paket-acik { padding: 2px 24px 18px; border-top: 1px dashed var(--cizgi); margin-top: 2px; }
.acik-baslik { font-size: 1rem; margin: 14px 0 8px; color: var(--derin); }

/* Liste AÇILINCA EKRANA SIĞMALI (kullanıcının isteği): 16 kalem tek sütunda
   16 satır demek, kart ekranın iki katına çıkıyor ve altı görünmüyordu.
   auto-fit + minmax: geniş ekranda 3 sütun, orta ekranda 2, dar ekranda 1.
   Satır yüksekliği de kısaltıldı — aynı sebeple.
   Eşik 340px ÖLÇÜLEREK bulundu: 258px verilince 1000 piksellik ekranda üç
   sütun sığıyor ama "Sanayi Tipi Bulaşık Makinesi Deterjanı 5 L" iki satıra
   düşüyor ve kart 699px yerine 730px oluyordu — sütun kazandırdığından
   fazlasını sarma götürüyor. 340px'te sütunlar ancak sarmayacak kadar
   genişken üçe çıkıyor. */
.kalem-liste {
  display: grid;   /* min(340px, 100%): kapsayıcı 340'tan darsa (telefon) sütun kapsayıcıyı
     aşmasın — çıplak minmax(340px,1fr) orada taşan bir sütun üretiyor. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 2px 24px; margin: 0 0 16px; padding: 0; list-style: none;
}
.kalem-liste li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 6px 0; border-bottom: 1px solid var(--cizgi);
  font-size: .93rem; line-height: 1.35;
}
.kalem-adet {
  flex: none; min-width: 32px; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--vurgu) 16%, #fff);
  color: var(--vurgu-koyu); font-weight: 800; font-size: .82rem; text-align: center;
}
.kalem-ad { flex: 1; min-width: 0; color: var(--metin); font-weight: 600; }
.kalem-birim { flex: none; color: var(--metin-soluk); font-size: .85rem; }

.acik-eylem {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
  padding: 14px 18px; border-radius: var(--yuvarlak);
  background: var(--zemin); border: 1px solid var(--cizgi);
}
.acik-fiyat { margin-right: auto; }
.acik-form { margin: 0; }
.acik-bag { display: inline-flex; align-items: center; gap: 6px; color: var(--su-koyu); font-weight: 700; font-size: .93rem; }
.acik-bag:hover { text-decoration: underline; }

/* ───────────────────────────── paket detayı */

.detay-ust {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px;
  align-items: start; padding-top: 44px; padding-bottom: 12px;
}
.detay-gorsel {
  position: relative; border-radius: var(--yuvarlak); overflow: hidden;
  background: var(--zemin); box-shadow: var(--golge-yuksek);
  aspect-ratio: 4 / 3;
}
.detay-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.detay-yan h1 { color: var(--derin); margin-top: 6px; }
.detay-yan .paket-ozet { font-size: 1.05rem; }

.fiyat-blok {
  margin: 22px 0 18px; padding: 18px 20px;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-left: 5px solid var(--vurgu); border-radius: 14px;
}
.fiyat-blok .paket-fiyat { font-size: 2.1rem; }
.fiyat-blok small { display: block; margin-top: 4px; font-size: .88rem; }
.detay-eylem { margin: 0; }

.detay-yazi { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }
.detay-yazi h2 { color: var(--derin); }
.detay-yazi h3 { margin-top: 1.4em; color: var(--su-koyu); }

/* ───────────────────────────── paket içeriği ızgarası */

.icerik-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.icerik-izgara.dort { grid-template-columns: repeat(4, 1fr); }

.icerik-kart {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 14px; text-decoration: none; color: inherit;
}
.icerik-kart.yazili { padding: 22px; }
.icerik-kart.genis-kart { margin-top: 16px; }
.icerik-gorsel {
  position: relative; display: block; margin-bottom: 10px;
  aspect-ratio: 1 / 1; background: var(--zemin); border-radius: 10px; overflow: hidden;
}
.icerik-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
/* Metin kartlarında görsel yerine ikon durur; kare çerçeveye gerek yok. */
.icerik-gorsel.ikonlu {
  display: grid; place-items: center; width: 52px; height: 52px;
  aspect-ratio: auto; border-radius: 14px;
  background: rgba(10, 162, 196, .1); color: var(--su-koyu);
}
.icerik-adet {
  position: absolute; right: 6px; bottom: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--vurgu-koyu); color: #fff; font-size: .8rem; font-weight: 800;
}
.icerik-ad { font-size: .98rem; font-weight: 700; margin: 0; }
.icerik-birim { color: var(--metin-soluk); font-size: .85rem; }
.icerik-kart p { margin: 6px 0 0; font-size: .93rem; }

/* ───────────────────────────── sepet ve özet */

.sepet { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; }
.sepet-liste {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
}
/* Tablo değil esneyen satır: altı sütunlu bir tablo telefonda yatay
   kaydırmaya mahkûm ve hiçbir sütun okunmuyor. */
.sepet-satir {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 16px; border-bottom: 1px solid var(--cizgi);
}
.sepet-satir:last-child { border-bottom: 0; }
.sepet-gorsel { flex: none; width: 96px; border-radius: 10px; overflow: hidden; background: var(--zemin); }
.sepet-gorsel img { width: 100%; height: 72px; object-fit: cover; }
.sepet-bilgi { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; }
.sepet-bilgi .paket-ad { font-size: 1.05rem; }
.sepet-bilgi .sonuk { font-size: .88rem; }
.sepet-tutar { font-weight: 800; font-size: 1.1rem; min-width: 110px; text-align: right; }

/* ── sepet satırındaki içerik listesi */

/* flex-basis:100% + order:9 — açılır şerit satırın DOĞRUDAN çocuğu ama her
   zaman en alta, kendi tam genişlikteki satırına iner. .sepet-bilgi'nin
   içinde bırakılsaydı liste 200 piksellik bir sütuna sıkışırdı. */
.sepet-icerik { flex: 1 0 100%; order: 9; margin-top: 2px; }
.sepet-icerik summary {
  display: inline-flex; align-items: center; gap: 7px;
  /* 44px dokunma hedefi: parmakla açılan bir şey. */
  min-height: 44px; padding: 4px 0;
  list-style: none; cursor: pointer;
  color: var(--su-koyu); font-size: .86rem; font-weight: 700;
}
.sepet-icerik summary::-webkit-details-marker { display: none; }
/* Ok ayrı bir ikon değil: küçük bir üçgen, açıkken döner. */
.sepet-icerik summary::after {
  content: ""; width: 0; height: 0;
  border: 5px solid transparent; border-top-color: currentColor;
  margin-top: 4px; transition: transform .18s ease;
}
.sepet-icerik[open] summary::after { transform: rotate(180deg); margin-top: -4px; }
.sepet-icerik summary:hover { text-decoration: underline; }

/* Liste bilinçli olarak KÜÇÜK: burada karar verilmiyor, yalnızca "ne
   almıştım" sorusu cevaplanıyor. Ürün adları paket sayfasındakiyle aynı
   ama tipografi bir kademe aşağıda. */
.sepet-kalemler {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 22px; margin: 2px 0 0; padding: 10px 14px;
  background: var(--zemin); border-radius: 10px;
}
.sepet-kalemler li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; font-size: .84rem; line-height: 1.35;
  border-bottom: 1px solid var(--cizgi);
}
.sepet-kalemler li:last-child { border-bottom: 0; }
.sepet-kalemler .kalem-adet { min-width: 28px; padding: 1px 5px; font-size: .74rem; }
.sepet-kalemler .kalem-ad { font-weight: 600; }
.sepet-kalemler .kalem-birim { font-size: .78rem; }
.sepet-kalem-not { margin: 8px 0 0; font-size: .8rem; color: var(--metin-soluk); }

.adet-kutu {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--cizgi); border-radius: 999px; padding: 4px;
}
.adet-kutu button[type="button"] {
  /* 44x44: parmakla güvenle basılan en küçük hedef. Daha küçüğünde
     telefonda "+" yerine satırın kendisine basılıyordu. */
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--zemin); color: var(--derin);
  border: 0; border-radius: 999px; cursor: pointer;
}
.adet-kutu button[type="button"]:hover { background: var(--cizgi); }
.adet-kutu input {
  width: 54px; height: 44px; text-align: center;
  border: 0; background: none; font: 700 1rem var(--yazi); color: var(--metin);
}
.adet-kutu .dugme { margin-left: 2px; }

.ozet-kutu {
  position: sticky; top: 92px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 22px; box-shadow: var(--golge);
}
.ozet-kutu h2 { font-size: 1.2rem; }
.ozet-satir {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; font-size: .96rem;
}
.ozet-satir > span:last-child { white-space: nowrap; font-weight: 600; }
.ozet-satir.ayrac { border-top: 1px solid var(--cizgi); margin-top: 8px; padding-top: 14px; }
.ozet-satir.toplam {
  border-top: 2px solid var(--derin); margin-top: 8px; padding-top: 14px;
  font-size: 1.22rem; font-weight: 800; color: var(--derin);
}
.ozet-kutu .dugme { margin-top: 16px; }

.bos-sepet {
  text-align: center; padding: 60px 20px;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
}
.bos-sepet p { max-width: 46ch; margin-inline: auto; }

/* ───────────────────────────── formlar */

.form {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 24px; box-shadow: var(--golge);
}
.alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.alan label { font-size: .92rem; font-weight: 700; color: var(--derin); }
.alan input, .alan textarea, .pos-alan input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: 12px;
  background: var(--alan-zemin); color: var(--metin);
  font: 400 1rem var(--yazi);
}
.alan textarea { min-height: 88px; resize: vertical; }
.alan input:focus, .alan textarea:focus, .pos-alan input:focus {
  border-color: var(--su); background: var(--kart);
}
.alan small { font-size: .84rem; }
.alan-hata { color: var(--tehlike); font-weight: 600; }
.alan input[aria-invalid], .alan textarea[aria-invalid] { border-color: var(--tehlike); }
/* Ödenecek tutar formun başında da yazar: telefonda özet kutusu formun
   altına düşüyor ve müşteri iki ekran inmeden tutarı görmüyordu. */
.odeme-tutar { font-size: 1.1rem; margin-bottom: 10px; }
.odeme-tutar b { font-size: 1.35rem; color: var(--derin); }
.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ── fatura tipi seçimi (bireysel / kurumsal) */

/* fieldset'in varsayılan çerçevesi ve legend hizası tarayıcıdan tarayıcıya
   değişiyor; sıfırlayıp kendi düzenimizi kuruyoruz. */
.secim { border: 0; padding: 0; margin: 0 0 20px; }
.secim legend {
  padding: 0; margin-bottom: 9px;
  font-size: .95rem; font-weight: 700; color: var(--derin);
}
.secim-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secim-oge {
  display: flex; align-items: flex-start; gap: 11px;
  /* 44px değil daha yüksek: iki satırlık açıklamayla birlikte tüm kutu
     tıklanabilir hedef (label for=…), sadece yuvarlak değil. */
  padding: 14px 16px; cursor: pointer;
  background: var(--alan-zemin);
  border: 1px solid var(--cizgi); border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
.secim-oge:hover { border-color: var(--su); }
.secim-oge input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--su-koyu); flex: none; }
.secim-oge b { display: block; color: var(--derin); }
.secim-oge small { display: block; font-size: .85rem; line-height: 1.4; }
/* Seçili kutu belli olsun: radyo düğmesinin kendisi 18 piksel, uzaktan
   bakınca hangisinin seçili olduğu okunmuyordu. */
.secim-oge:has(input:checked) { border-color: var(--su); background: var(--zemin); }
.secim-oge:has(input:focus-visible) { outline: 3px solid var(--su); outline-offset: 2px; }

/* KURUMSAL ALANLAR: bireysel seçiliyken formdan tamamen çıkarlar.
   :has() ile, JS olmadan. display:none olduğu için içlerindeki değerler
   yine de gönderilir — sunucu bireyselde bu üç alanı boşaltıyor
   (site.py, odeme_ver). */
.form:has(#tip-bireysel:checked) .kurumsal-alanlar { display: none; }
.kurumsal-alanlar {
  padding: 16px 16px 2px; margin-bottom: 18px;
  background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 12px;
}

.uyari {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 26px; padding: 14px 18px;
  background: var(--zemin); border: 1px solid var(--cizgi);
  border-left: 5px solid var(--su); border-radius: 12px;
  font-size: .94rem; color: var(--metin-soluk);
}
.uyari.sari { background: var(--uyari-zemin); border-color: var(--uyari-cizgi); border-left-color: var(--limon); color: var(--uyari-metin); }
/* İyi haber sarı uyarı şeridinde durmasın: "paket sepete eklendi" bir
   sorun bildirimi gibi okunuyordu. Nane, sitede zaten onay rengi. */
.uyari.basari {
  background: color-mix(in srgb, var(--nane) 10%, #fff);
  border-color: color-mix(in srgb, var(--nane) 30%, #fff);
  border-left-color: var(--nane);
  color: var(--nane-uzeri); font-weight: 600;
}
.uyari.basari svg { color: var(--nane); }
.uyari.sari b { color: var(--uyari-metin); }
.bilgi {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; font-size: .88rem; color: var(--metin-soluk);
}

/* ───────────────────────────── demo sanal POS */

.pos { max-width: 980px; }
.pos-ic { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
/* Kapatılamayan uyarı. Sarı zemin + koyu yazı: bilgilendirme değil,
   "burada gerçek tahsilat yok" ikazı. Gizlenebilir yapılmadı. */
.pos-uyari {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 22px; padding: 18px 20px;
  background: var(--pos-zemin); border: 2px solid var(--limon); border-radius: 14px;
  color: var(--pos-metin);
}
.pos-uyari b { display: block; font-size: 1.02rem; letter-spacing: .04em; }
.pos-uyari p { margin: 6px 0 0; font-size: .93rem; }
.pos-uyari svg { color: var(--pos-ikon); }

.pos-kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 24px; box-shadow: var(--golge);
}
.pos-kart h1 { font-size: 1.5rem; }
.pos-alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pos-alan label { font-size: .92rem; font-weight: 700; color: var(--derin); }

/* ───────────────────────────── teşekkür */

.tesekkur { max-width: 760px; margin-inline: auto; text-align: center; }
.tesekkur-ikon {
  display: grid; place-items: center; width: 86px; height: 86px;
  margin: 0 auto 18px; border-radius: 50%;
  background: rgba(34, 199, 154, .14); color: var(--nane);
}
.siparis-kod {
  display: inline-block; margin: 6px 0 26px; padding: 12px 26px;
  background: var(--zemin); border: 2px dashed var(--su);
  border-radius: 14px; font-size: 1.5rem; font-weight: 800;
  letter-spacing: .06em; color: var(--derin);
}
.siparis-ozet {
  text-align: left; margin-bottom: 40px; padding: 22px;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
}
.siparis-ozet .ozet-satir > span:last-child { font-weight: 700; }
.tesekkur-eylem { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ───────────────────────────── S.S.S. */

.sss { display: grid; gap: 12px; max-width: 860px; }
.sss-oge {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 4px 20px;
}
.sss-oge summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--derin);
  /* Varsayılan üçgen küçük ve hizasız; kendi işaretimizi ::after ile
     koyuyoruz. */
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary::after { content: "+"; color: var(--su); font-size: 1.4rem; line-height: 1; }
.sss-oge[open] summary::after { content: "−"; }
.sss-oge p { margin: 0 0 16px; color: var(--metin-soluk); }

/* ───────────────────────────── altbilgi */

.altbilgi { background: var(--derin); color: var(--altbilgi-metin); padding: 52px 0 0; margin-top: 10px; }
.altbilgi-ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.altbilgi h2 { font-size: 1rem; color: var(--kart); margin-bottom: 14px; letter-spacing: .02em; }
.altbilgi .marka-ad { color: var(--kart); font-size: 1.2rem; margin-bottom: 10px; }
.altbilgi .marka-ad b { color: var(--nane); }
.altbilgi .sonuk { color: var(--altbilgi-soluk); font-size: .92rem; }
.altbilgi-sutun ul { display: grid; gap: 9px; font-size: .94rem; }
.altbilgi-sutun li { display: flex; align-items: flex-start; gap: 8px; }
.altbilgi a { color: var(--altbilgi-metin); text-decoration: none; }
.altbilgi a:hover { color: var(--kart); text-decoration: underline; }
.altbilgi-alt {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 40px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .86rem; color: var(--altbilgi-soluk);
}

/* ───────────────────────────── kırılmalar: 960 / 760 / 480 */

@media (max-width: 960px) {
  /* 800-960 px arasında marka altı slogan iki satıra sarıp menüyü
     sıkıştırıyordu; bu genişlikte menü zaten açık duruyor. */
  .marka-alt { display: none; }
  /* .paketler ZATEN tek sütun (üç paket alt alta); burada yalnızca yatay
     kartın iç ızgarası daralır: görsel küçülür, düğme alt satıra iner. */
  .paketler.ikili { grid-template-columns: repeat(2, 1fr); }
  .paket-satir { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding-right: 18px; }
  .paket-ac-dugme { grid-column: 2; justify-self: start; margin-bottom: 18px; }
  .paket-kart.yatay .paket-govde { padding-bottom: 10px; }
  .adimlar { grid-template-columns: 1fr; }
  .guven { grid-template-columns: repeat(2, 1fr); }
  .detay-ust { grid-template-columns: 1fr; gap: 26px; }
  .detay-yazi { grid-template-columns: 1fr; gap: 26px; }
  .icerik-izgara, .icerik-izgara.dort { grid-template-columns: repeat(3, 1fr); }
  /* Tek sütuna düşünce özet kutusu formun ALTINA kayıyor ve "Genel
     toplam" iki ekran aşağıda kalıyordu: müşteri on alanı doldurmadan
     ne ödeyeceğini görmüyordu. order ile yukarı alıyoruz. */
  .sepet, .pos-ic { grid-template-columns: 1fr; display: grid; }
  .sepet > .ozet-kutu, .pos-ic > .ozet-kutu { order: -1; }
  .ozet-kutu { position: static; }
  .altbilgi-ic { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .bolum { padding: 46px 0; }
  .menu-dugme { display: inline-flex; }
  /* Menü yalnızca JS varsa katlanır: JS çalışmazsa bağlantılar sarılmış
     bir satır olarak görünmeye devam eder (ilerleyici geliştirme). */
  html.js .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
    padding: 8px 16px 16px; box-shadow: var(--golge-yuksek);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  html.js .menu.gorunur { display: flex; }
  .menu a { min-height: 48px; display: flex; align-items: center; border-radius: 12px; }
  .ust-ic { flex-wrap: wrap; position: relative; }
  .marka-alt { display: none; }
  /* Etiket gizlenmez, KISALIR: sepette paket varken düğmenin "ödemeye
     geç" dediğini telefonda da okuyabilmek gerekiyor. Boş sepette kısa
     karşılığı yok — ikon zaten sepeti anlatıyor. */
  .sepet-dugme .dugme-uzun { display: none; }
  .sepet-dugme .dugme-kisa { display: inline; }
  .sepet-dugme { padding: 0 14px; }

  /* Paket kartları tek sütuna düşer; içerik ızgarası iki sütunda kalır —
     telefonda tek sütun ürün listesi sonsuz uzuyordu. */
  .paketler.ikili { grid-template-columns: 1fr; }
  /* Telefonda satır katlanır: görsel üstte tam genişlik, yazı altında.
     230 piksellik görsel sütunu 375 pikselde metne 100 piksel bırakıyordu. */
  .paket-satir { grid-template-columns: 1fr; gap: 0; padding: 0 16px 16px; }
  .paket-kart.yatay .paket-gorsel { aspect-ratio: 16 / 9; margin: 0 -16px; }
  .paket-kart.yatay .paket-govde { padding: 16px 0 12px; }
  .paket-ac-dugme { grid-column: 1; margin-bottom: 0; width: 100%; justify-content: center; }
  .paket-acik { padding: 4px 16px 16px; }
  /* Fiyat ve düğme alt alta ve TAM GENİŞLİK: yan yana sıkışınca düğme
     dokunma hedefi olarak daralıyordu. */
  .acik-eylem { flex-direction: column; align-items: stretch; }
  .acik-fiyat { margin-right: 0; }
  .acik-form .dugme { width: 100%; justify-content: center; }
  .acik-bag { justify-content: center; }
  .icerik-izgara, .icerik-izgara.dort { grid-template-columns: repeat(2, 1fr); }
  .guven { grid-template-columns: 1fr; transform: translateY(20px); }
  .alan-cift { grid-template-columns: 1fr; }
  .secim-liste { grid-template-columns: 1fr; }
  .altbilgi-ic { grid-template-columns: 1fr; gap: 26px; }

  .sepet-satir { align-items: flex-start; }
  .sepet-tutar { min-width: 0; margin-left: auto; }

  /* Telefonda sabit eylem çubuğu. Masaüstünde hiç görünmez: orada yan
     sütundaki düğme zaten hep ekranda. */
  .paket-dip.sabit {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    /* Fiyat solda, düğme sağda, TEK SATIR. Sarmayı yasaklıyoruz: iki
       satıra çıkınca çubuk 112 pikseli buluyor ve altbilgiyi örtüyordu. */
    flex-wrap: nowrap; justify-content: space-between; align-items: center;
    margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--cizgi);
    box-shadow: 0 -8px 24px rgba(7, 57, 74, .12);
  }
  /* Gizli input'lar da birer esnek çocuk sayılıyor ve aralarına 2x12 px
     boşluk giriyordu; 375 pikselde satır bu yüzden sarıyordu. */
  .paket-dip.sabit input[type="hidden"] { display: none; }
  .paket-dip.sabit .paket-fiyat { font-size: 1.2rem; }
  .paket-dip.sabit .dugme { flex: none; padding: 12px 18px; }
  .detay { padding-bottom: 86px; }
  /* Sabit çubuk sayfanın EN ALTINI örtüyordu: telefonda sonuna kadar
     kaydırınca altbilginin son satırı (telif ve yasal bağlantılar)
     çubuğun arkasında kalıyor ve hiçbir biçimde okunamıyordu —
     .detay'a verilen pay işe yaramaz, çünkü altbilgi ondan SONRA gelir.
     Payı sayfanın sonuna koyuyoruz; yalnızca çubuğun bulunduğu
     sayfada (:has) eklensin ki diğer sayfaların altında boşluk açılmasın. */
  body:has(.paket-dip.sabit) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (min-width: 761px) {
  /* Sabit çubuk yalnızca telefonda var. */
  .paket-dip.sabit { display: none; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .kap { width: min(100% - 24px, var(--olcu)); }

  /* 375 piksellik telefonda marka + Menü + sepet bir satıra sığmıyor ve
     sepet düğmesi alt satıra kayıp başlığı iki kat yükseltiyordu
     (.ust-ic'in flex-wrap'i taşmayı önlüyor ama görüntüyü bozuyor).
     Amblemi ve marka yazısını küçültüp boşlukları daraltınca üçü de
     tek satırda kalıyor; dokunma hedefleri 44 pikselin altına inmiyor. */
  .ust-ic { gap: 10px; flex-wrap: nowrap; }
  .marka { gap: 8px; min-width: 0; }
  .marka img { width: 34px; height: 34px; }
  .marka-ad { font-size: 1rem; letter-spacing: .03em; white-space: nowrap; }
  .menu-dugme { padding: 0 12px; gap: 6px; }
  .sepet-dugme { padding: 0 12px; }
  .manset { padding-top: 44px; }
  .icerik-izgara, .icerik-izgara.dort { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .icerik-kart.yazili { padding: 16px; }
  .paket-govde { padding: 18px; }
  .form, .pos-kart, .ozet-kutu, .siparis-ozet { padding: 18px; }
  .sepet-gorsel { width: 72px; }
  .sepet-gorsel img { height: 56px; }
  .adet-kutu { width: 100%; justify-content: space-between; }
  .siparis-kod { font-size: 1.25rem; padding: 10px 18px; }
  .tesekkur-eylem .dugme { width: 100%; }
  .paket-dip.sabit { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .paket-dip.sabit .dugme { padding: 12px 14px; font-size: .94rem; }
  .paket-dip.sabit .paket-kdv { display: block; margin-left: 0; }
}

/* Hareket azaltma tercihi: geçişler ve yumuşak kaydırma kapanır. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .paket-kart:hover, .dugme.ana:hover { transform: none; }
}