/* ==========================================================================
   HUKBİS satış sitesi — hukbis.com.tr (satis-sitesi-v1, 26.09.2026)
   Marka: B1 "Kemer" — bordo #5A1B2A, fildişi #F2E8D5, altın #B07F30 (açık
   zeminde) / #DDAE5C (koyu zeminde). Eski sitedeki yeni-tasarim.css'in
   "dosya/kâğıt" düzeninden uyarlandı; turkuaz/turuncu eski kimlik kaldırıldı.
   Dış kaynak yok (yazı tipleri sistemden), mobil öncelikli, 16 px kenar payı.
   ========================================================================== */

:root {
  --bordo: #5a1b2a;
  --bordo-koyu: #45131f;
  --bordo-derin: #2c0c15;
  --bordo-acik: #f7eef0;
  --bordo-cizgi: #ead7dc;
  --fildisi: #f2e8d5;
  --kagit: #fbf8f3;
  --beyaz: #ffffff;
  --altin: #b07f30;
  --altin-yazi: #85601f;      /* açık zeminde küçük yazı için (AA) */
  --altin-koyu-zemin: #ddae5c;
  --altin-acik: #f6ecd8;
  --murekkep: #221b18;
  --soluk: #5d534c;
  --cizgi: #e6ddd1;
  --cizgi-koyu: #d3c5b4;
  --yesil: #1c6a46;
  --yesil-acik: #e5f1ea;
  --amber: #8a5a14;
  --amber-acik: #f8eed9;
  --kirmizi: #8c2f24;
  --kirmizi-acik: #f8e9e6;

  --golge: 0 1px 2px rgba(44, 12, 21, 0.05), 0 16px 36px -22px rgba(44, 12, 21, 0.35);
  --r-kucuk: 6px;
  --r: 10px;
  --r-buyuk: 16px;

  --yazi-baslik: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --yazi-govde: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --yazi-veri: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--yazi-govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--bordo); text-underline-offset: 3px; }
a:hover { color: var(--bordo-koyu); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--murekkep);
  text-wrap: balance;
  margin: 0;
}
h3, h4 { font-family: var(--yazi-govde); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
.sayi, .tutar { font-variant-numeric: tabular-nums; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--altin);
  outline-offset: 2px;
  border-radius: 4px;
}

.gorunmez {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.icerige-gec {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--bordo); color: #fff; padding: 10px 16px; border-radius: var(--r-kucuk);
  font-weight: 600; text-decoration: none;
}
.icerige-gec:focus { top: 12px; color: #fff; }

.kap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .kap { padding: 0 24px; } }
.kap-dar { max-width: 820px; }

/* ---------- yalnız JS / yalnız JS'siz ---------- */
.js .js-yok { display: none !important; }
html:not(.js) .js-var { display: none !important; }

/* ==========================================================================
   Üst bar
   ========================================================================== */
.ustbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 243, 0.94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.ustbar-ic { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.marka { display: inline-flex; align-items: center; flex: none; }
.marka img { display: block; height: 34px; width: auto; }
@media (max-width: 380px) { .marka img { height: 28px; } }

.menu { display: none; gap: 2px; margin-left: 20px; }
.menu a {
  padding: 8px 11px; border-radius: 8px; font-size: 14.5px; color: var(--soluk);
  text-decoration: none; transition: color .15s, background .15s;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--murekkep); background: #f1e9df; }
.ustbar-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-link { display: none; font-size: 14px; color: var(--soluk); text-decoration: none; }
.menu-link:hover { color: var(--bordo); }

.mobil-menu { position: relative; }
.mobil-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border: 1px solid var(--cizgi-koyu); border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--murekkep); background: var(--beyaz);
}
.mobil-menu > summary::-webkit-details-marker { display: none; }
.mobil-menu > summary svg { width: 18px; height: 18px; }
.mobil-menu nav {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 32px));
  display: flex; flex-direction: column; padding: 8px;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge);
}
.mobil-menu nav a {
  padding: 11px 12px; border-radius: 8px; font-size: 15px; color: var(--murekkep); text-decoration: none;
}
.mobil-menu nav a:hover { background: var(--bordo-acik); }
.mobil-menu nav .dugme { justify-content: center; margin-top: 6px; color: #fff; }

@media (min-width: 960px) {
  .menu { display: flex; }
  .menu-link { display: inline; }
  .mobil-menu { display: none; }
}
@media (max-width: 520px) { .ustbar-sag .dugme-kucuk { display: none; } }

/* ==========================================================================
   Düğmeler, rozetler, üst etiket
   ========================================================================== */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px; border-radius: 8px; border: 1px solid transparent;
  font: 650 15px/1.2 var(--yazi-govde); text-decoration: none; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .12s;
}
.dugme:active { transform: translateY(1px); }
.dugme-kucuk { min-height: 40px; padding: 8px 15px; font-size: 14px; }
.dugme-buyuk { min-height: 54px; padding: 14px 26px; font-size: 16.5px; }
.dugme-ana { background: var(--bordo); color: #fff; }
.dugme-ana:hover { background: var(--bordo-koyu); color: #fff; }
.dugme-altin { background: var(--altin-koyu-zemin); color: var(--bordo-derin); }
.dugme-altin:hover { background: #e8bf75; color: var(--bordo-derin); }
.dugme-cerceve { border-color: var(--cizgi-koyu); color: var(--murekkep); background: var(--beyaz); }
.dugme-cerceve:hover { border-color: var(--bordo); color: var(--bordo); }
.dugme-acik { border-color: rgba(242, 232, 213, 0.45); color: var(--fildisi); background: transparent; }
.dugme-acik:hover { border-color: var(--altin-koyu-zemin); color: var(--altin-koyu-zemin); }
.dugme-blok { width: 100%; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 520px) { .dugmeler .dugme { flex: 1 1 100%; } }

.ust {
  display: inline-block; font-size: 12px; font-weight: 750; letter-spacing: .14em;
  text-transform: uppercase; color: var(--altin-yazi);
}
.ust-koyu { color: var(--altin-koyu-zemin); }

.rozet {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.rozet-kullanimda { color: var(--yesil); background: var(--yesil-acik); }
.rozet-sinirli { color: var(--amber); background: var(--amber-acik); }
.rozet-yakinda { color: var(--soluk); background: #efe9e1; }
.rozet-risk { color: var(--kirmizi); background: var(--kirmizi-acik); }
.rozet-iyi { color: var(--yesil); background: var(--yesil-acik); }
.rozet-duz::before { display: none; }
.etiket-modul {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 650;
  background: var(--altin-acik); color: var(--altin-yazi);
}
.etiket-temel { background: var(--bordo-acik); color: var(--bordo); }

/* ==========================================================================
   Sayfa başlıkları ve bölümler
   ========================================================================== */
.bolum { padding: 56px 0; }
.bolum + .bolum { border-top: 1px solid var(--cizgi); }
.bolum-beyaz { background: var(--beyaz); }
.bolum-fildisi { background: #f6efe3; }
@media (min-width: 900px) { .bolum { padding: 76px 0; } }

.baslik-2 { font-size: clamp(25px, 3.4vw, 36px); margin-top: 12px; max-width: 28ch; }
.giris { margin: 14px 0 0; color: var(--soluk); font-size: 17px; max-width: 64ch; }
.bolum-bas { margin-bottom: 30px; }
.bolum-bas-orta { text-align: center; }
.bolum-bas-orta .baslik-2, .bolum-bas-orta .giris { margin-left: auto; margin-right: auto; }

.sayfa-bas {
  padding: 48px 0 36px;
  background: linear-gradient(180deg, #f5ede0 0%, var(--kagit) 100%);
  border-bottom: 1px solid var(--cizgi);
}
.sayfa-bas h1 { font-size: clamp(30px, 4.6vw, 48px); margin-top: 12px; max-width: 22ch; }
.sayfa-bas .giris { font-size: 18px; }
.geri-link { display: flex; width: fit-content; gap: 6px; font-size: 14px; color: var(--soluk); text-decoration: none; margin-bottom: 14px; }
.geri-link:hover { color: var(--bordo); }
.kirinti { font-size: 13.5px; color: var(--soluk); margin-bottom: 14px; }
.kirinti a { color: var(--soluk); }
.kirinti span[aria-hidden] { margin: 0 6px; opacity: .6; }

/* ==========================================================================
   Ana sayfa kahraman alanı
   ========================================================================== */
.kahraman {
  position: relative; overflow: hidden;
  padding: 56px 0 44px;
  background:
    radial-gradient(ellipse 60% 70% at 88% 18%, rgba(176, 127, 48, 0.12), transparent 70%),
    linear-gradient(180deg, #f4ebdc 0%, var(--kagit) 88%);
  border-bottom: 1px solid var(--cizgi);
}
.kahraman-izgara { display: grid; gap: 36px; align-items: center; }
@media (min-width: 980px) {
  .kahraman { padding: 84px 0 64px; }
  .kahraman-izgara { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}
.kahraman h1 {
  font-size: clamp(34px, 5.6vw, 60px); line-height: 1.04; margin-top: 16px; max-width: 16ch;
  color: var(--bordo-derin);
}
.kahraman h1 em { font-style: normal; color: var(--bordo); }
.kahraman-alt { margin-top: 20px; font-size: clamp(16.5px, 1.9vw, 19.5px); color: #463b35; max-width: 56ch; }
.kahraman-alt b { color: var(--murekkep); font-weight: 650; }
.kahraman-not { margin-top: 14px; font-size: 14px; color: var(--soluk); }
.kahraman-not a { color: var(--soluk); }

.kahraman-gorsel { position: relative; }
.kahraman-gorsel .ekran-cerceve { transform: rotate(-.6deg); }
.kemer-sus {
  position: absolute; right: -60px; top: -40px; width: 380px; opacity: .06; pointer-events: none;
}
@media (max-width: 979px) { .kemer-sus { display: none; } }

.olcut {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 40px;
  background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden;
}
@media (min-width: 820px) { .olcut { grid-template-columns: repeat(4, 1fr); } }
.olcut > div { background: rgba(255, 255, 255, 0.78); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.olcut-sayi { font-family: var(--yazi-baslik); font-size: 26px; font-weight: 650; color: var(--bordo); line-height: 1.1; font-variant-numeric: tabular-nums; }
.olcut-ad { font-size: 13px; color: var(--soluk); line-height: 1.4; }

/* ==========================================================================
   Ekran görüntüleri
   ========================================================================== */
.ekran-cerceve {
  margin: 0; background: var(--beyaz); border: 1px solid var(--cizgi-koyu); border-radius: 12px;
  box-shadow: var(--golge); overflow: hidden;
}
.ekran-cerceve .ekran-ust { display: flex; gap: 6px; padding: 9px 12px; background: #f3ece2; border-bottom: 1px solid var(--cizgi); }
.ekran-cerceve .ekran-ust i { width: 9px; height: 9px; border-radius: 50%; background: #d8cbbb; }
.ekran-cerceve img { display: block; width: 100%; height: auto; }
.ekran-cerceve figcaption { padding: 10px 14px; font-size: 13px; color: var(--soluk); border-top: 1px solid var(--cizgi); background: var(--kagit); }

/* ==========================================================================
   Kartlar ve ızgaralar
   ========================================================================== */
.izgara { display: grid; gap: 14px; }
@media (min-width: 640px) { .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) {
  .izgara-3 { grid-template-columns: repeat(3, 1fr); }
  .izgara-4 { grid-template-columns: repeat(4, 1fr); }
}
.kart {
  display: block; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 20px; color: inherit; text-decoration: none;
}
a.kart { transition: border-color .16s, box-shadow .16s, transform .12s; }
a.kart:hover { border-color: var(--altin); box-shadow: var(--golge); color: inherit; transform: translateY(-1px); }
.kart h3 { font-size: 17px; margin-top: 10px; }
.kart p { margin: 8px 0 0; font-size: 14.5px; color: var(--soluk); }
.kart .kart-alt { margin-top: 14px; font-size: 13.5px; font-weight: 650; color: var(--bordo); }
.kart-sayi {
  font-family: var(--yazi-veri); font-size: 12.5px; font-weight: 700; color: var(--altin-yazi);
}
.kart-ikon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bordo-acik); color: var(--bordo);
}
.kart-ikon svg { width: 22px; height: 22px; }

/* dertler */
.dert h3 { font-size: 17px; }

/* bugün / HUKBİS'te */
.kiyas { margin-top: 16px; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; background: var(--beyaz); }
.kiyas-baslik { padding: 13px 18px; border-bottom: 1px solid var(--cizgi); background: #f6f0e7; font-family: var(--yazi-baslik); font-size: 18px; font-weight: 650; }
.kiyas-govde { display: grid; }
@media (min-width: 780px) { .kiyas-govde { grid-template-columns: 1fr 1fr; } }
.kiyas-once, .kiyas-sonra { padding: 18px 18px 22px; }
.kiyas-once { background: #fbf1ef; }
.kiyas-sonra { background: #eef6f1; border-top: 1px solid var(--cizgi); }
@media (min-width: 780px) { .kiyas-sonra { border-top: 0; border-left: 1px solid var(--cizgi); } }
.kiyas h4 { font-size: 15.5px; margin-top: 10px; }
.kiyas ul, .madde-liste { list-style: none; margin-top: 12px; }
.kiyas li, .madde-liste li { display: flex; gap: 10px; margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
.kiyas li::before, .madde-liste li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: currentColor; opacity: .4;
}
.madde-liste-tik li::before {
  width: 16px; height: 16px; margin-top: 3px; opacity: 1; border-radius: 50%;
  background: var(--yesil-acik) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%231c6a46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* alan (kategori) kutuları */
.alan-izgara { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.alan {
  display: flex; align-items: baseline; gap: 12px; padding: 15px 16px; background: var(--beyaz);
  border: 1px solid var(--cizgi); border-radius: 12px; color: var(--murekkep); text-decoration: none;
  transition: border-color .16s, transform .12s;
}
.alan:hover { border-color: var(--altin); transform: translateY(-1px); color: var(--murekkep); }
.alan-sayi { font-family: var(--yazi-veri); font-size: 19px; font-weight: 700; color: var(--bordo); min-width: 2ch; }
.alan-ad { font-size: 14.5px; line-height: 1.35; }

/* platform şeridi */
.platformlar { display: grid; gap: 14px; }
@media (min-width: 760px) { .platformlar { grid-template-columns: repeat(3, 1fr); } }
.platform { padding: 22px; border-radius: 14px; background: var(--beyaz); border: 1px solid var(--cizgi); }
.platform h3 { font-size: 18px; margin-top: 12px; font-family: var(--yazi-baslik); font-weight: 650; }
.platform p { margin: 8px 0 0; color: var(--soluk); font-size: 14.5px; }

/* güven şeridi */
.guven-izgara { display: grid; gap: 14px; }
@media (min-width: 860px) { .guven-izgara { grid-template-columns: repeat(3, 1fr); } }

/* fiyat teaser */
.fiyat-seridi {
  display: grid; gap: 22px; align-items: center; padding: clamp(22px, 4vw, 38px);
  border-radius: 18px; background: var(--beyaz); border: 1px solid var(--cizgi);
}
@media (min-width: 900px) { .fiyat-seridi { grid-template-columns: 1.2fr .8fr; } }
.fiyat-buyuk { font-family: var(--yazi-baslik); font-size: clamp(38px, 6vw, 56px); font-weight: 650; color: var(--bordo); line-height: 1; font-variant-numeric: tabular-nums; }
.fiyat-buyuk small { font-family: var(--yazi-govde); font-size: 16px; font-weight: 600; color: var(--soluk); margin-left: 6px; }
.kdv-not { font-size: 13px; color: var(--soluk); margin-top: 8px; }

/* ==========================================================================
   Kapanış bandı ve alt bilgi (koyu bordo)
   ========================================================================== */
.kapanis { padding: 56px 0 72px; }
.kapanis-kart {
  position: relative; overflow: hidden; border-radius: 20px; padding: clamp(26px, 5vw, 54px);
  background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(221, 174, 92, 0.18), transparent 60%), var(--bordo-derin);
  color: var(--fildisi);
}
.kapanis-kart h2 { color: #fff; font-size: clamp(26px, 3.8vw, 40px); margin-top: 12px; max-width: 22ch; }
.kapanis-kart p { margin: 14px 0 0; max-width: 58ch; color: rgba(242, 232, 213, 0.82); font-size: 16.5px; }
.kapanis-kart .kemer-sus { right: -40px; top: -30px; width: 300px; opacity: .08; display: block; }

.altbilgi { background: var(--bordo-derin); color: rgba(242, 232, 213, 0.78); padding: 48px 0 28px; }
.altbilgi-izgara { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .altbilgi-izgara { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.altbilgi-marka { grid-column: 1 / -1; }
@media (min-width: 900px) { .altbilgi-marka { grid-column: auto; } }
.altbilgi-marka img { height: 36px; width: auto; }
.altbilgi-marka p { margin: 14px 0 0; font-size: 14px; max-width: 36ch; line-height: 1.6; }
.altbilgi h2 { font: 750 12px/1.4 var(--yazi-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--altin-koyu-zemin); margin: 0 0 10px; }
.altbilgi a { display: block; padding: 5px 0; font-size: 14px; color: rgba(242, 232, 213, 0.82); text-decoration: none; }
.altbilgi a:hover { color: #fff; text-decoration: underline; }
.altbilgi address { font-style: normal; font-size: 14px; line-height: 1.7; }
.altbilgi-son {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(242, 232, 213, 0.16); font-size: 13px;
}

/* ==========================================================================
   Modül listesi ve modül sayfası
   ========================================================================== */
.filtre-cubugu { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.arama-kutu { max-width: 520px; }
.arama-kutu input {
  width: 100%; min-height: 48px; padding: 11px 14px 11px 42px; font: 16px var(--yazi-govde);
  border: 1px solid var(--cizgi-koyu); border-radius: 10px; background: var(--beyaz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d534c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
}
.kategori-cipleri { display: flex; flex-wrap: wrap; gap: 8px; }
.kategori-cipleri a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--cizgi-koyu);
  border-radius: 999px; background: var(--beyaz); font-size: 13.5px; color: var(--murekkep); text-decoration: none;
}
.kategori-cipleri a:hover { border-color: var(--bordo); color: var(--bordo); }
.kategori-cipleri b { font-family: var(--yazi-veri); font-size: 12px; color: var(--altin-yazi); }
.kategori-blok { padding-top: 34px; }
.kategori-blok h2 { font-size: clamp(22px, 2.6vw, 28px); }
.kategori-blok > p { color: var(--soluk); margin: 8px 0 18px; max-width: 70ch; }
.modul-kart { display: flex; flex-direction: column; }
.modul-kart .kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.modul-kart h3 { font-size: 17.5px; }
.modul-kart .kart-alt { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sonuc-yok { padding: 22px; border: 1px dashed var(--cizgi-koyu); border-radius: 12px; color: var(--soluk); text-align: center; }

.modul-bas-izgara { display: grid; gap: 26px; }
@media (min-width: 980px) { .modul-bas-izgara { grid-template-columns: 1fr 320px; align-items: start; } }
.modul-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.paket-kutu {
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px; box-shadow: var(--golge);
}
.paket-kutu .ust { font-size: 11.5px; }
.paket-kutu strong { display: block; font-family: var(--yazi-baslik); font-size: 21px; margin-top: 8px; }
.paket-kutu .fiyat { font-size: 15px; color: var(--soluk); margin-top: 4px; }
.paket-kutu .fiyat b { color: var(--bordo); font-size: 20px; font-variant-numeric: tabular-nums; }
.paket-kutu .dugme { margin-top: 14px; width: 100%; }
.paket-kutu small { display: block; margin-top: 10px; color: var(--soluk); font-size: 12.5px; }

.bolum-nav { position: sticky; top: 64px; z-index: 30; background: rgba(251, 248, 243, 0.96); border-bottom: 1px solid var(--cizgi); }
.bolum-nav .kap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bolum-nav .kap::-webkit-scrollbar { display: none; }
.bolum-nav a { flex: none; padding: 12px 12px; font-size: 14px; color: var(--soluk); text-decoration: none; border-bottom: 2px solid transparent; }
.bolum-nav a:hover { color: var(--bordo); border-bottom-color: var(--altin); }

.giris-izgara { display: grid; gap: 24px; }
@media (min-width: 900px) { .giris-izgara { grid-template-columns: .9fr 1.1fr; gap: 48px; } }
.nesir p { font-size: 16.5px; color: #3e3430; }

.kazanim { counter-increment: kazanim; }
.numara { font-family: var(--yazi-veri); font-size: 12.5px; font-weight: 700; color: var(--altin-yazi); }

.detay-bolum {
  display: grid; gap: 18px; padding: 24px 0; border-top: 1px solid var(--cizgi);
}
.detay-bolum:first-of-type { border-top: 0; }
@media (min-width: 900px) { .detay-bolum { grid-template-columns: .9fr 1.1fr; gap: 44px; padding: 32px 0; } }
.detay-bolum h3 { font-family: var(--yazi-baslik); font-weight: 650; font-size: 21px; margin-top: 8px; }
.detay-bolum p { color: var(--soluk); margin: 10px 0 0; font-size: 15px; }
.detay-bolum .madde-liste { margin-top: 0; }
.detay-bolum .madde-liste li { font-size: 15px; }

.adimlar { display: grid; gap: 12px; list-style: none; }
@media (min-width: 760px) { .adimlar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .adimlar { grid-template-columns: repeat(4, 1fr); } }
.adim { position: relative; padding: 20px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 14px; }
.adim-no {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bordo); color: #fff; font: 700 13px/1 var(--yazi-veri);
}
.adim h3 { font-size: 16px; margin-top: 12px; }
.adim p { font-size: 14.5px; color: var(--soluk); margin: 6px 0 0; }

.not-kutu {
  display: flex; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--altin-acik);
  border: 1px solid #ecdcbc; color: #4b3a1c; font-size: 14.5px;
}
.not-kutu svg { flex: none; width: 20px; height: 20px; color: var(--altin-yazi); margin-top: 2px; }
.not-kutu p { margin: 0; }

/* ==========================================================================
   Paket yapılandırıcı
   ========================================================================== */
.taban-kart {
  display: grid; gap: 22px; padding: clamp(20px, 3.5vw, 32px); border-radius: 18px;
  background: var(--beyaz); border: 2px solid var(--bordo); box-shadow: var(--golge);
}
@media (min-width: 900px) { .taban-kart { grid-template-columns: 1fr 1.1fr; gap: 36px; } }
.taban-kart h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 10px; }
.limitler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.limitler div { padding: 12px; border-radius: 10px; background: var(--kagit); border: 1px solid var(--cizgi); }
.limitler b { display: block; font-family: var(--yazi-baslik); font-size: 22px; color: var(--bordo); font-variant-numeric: tabular-nums; }
.limitler span { font-size: 13px; color: var(--soluk); }
.taban-moduller { columns: 1; column-gap: 24px; }
@media (min-width: 560px) { .taban-moduller { columns: 2; } }
.taban-moduller li { break-inside: avoid; }

.hazirlar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.hazir {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; text-align: left;
  background: var(--beyaz); border: 1px solid var(--cizgi); color: inherit; text-decoration: none; cursor: pointer;
  font: inherit; transition: border-color .16s, box-shadow .16s;
}
.hazir:hover, .hazir[aria-current="true"] { border-color: var(--bordo); box-shadow: var(--golge); color: inherit; }
.hazir[aria-current="true"] { background: var(--bordo-acik); }
.hazir strong { font-size: 16.5px; }
.hazir span { font-size: 13.5px; color: var(--soluk); }
.hazir .hazir-fiyat { margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--murekkep); }
.hazir .hazir-fiyat b { color: var(--bordo); font-variant-numeric: tabular-nums; }

.yapilandirici { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .yapilandirici { grid-template-columns: 1fr 360px; } }

.secenek-grup { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.secenek-grup legend { padding: 0; margin-bottom: 10px; font: 700 13px/1.4 var(--yazi-govde); letter-spacing: .1em; text-transform: uppercase; color: var(--altin-yazi); }
.modul-sec {
  position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 12px; align-items: start;
  padding: 14px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--beyaz);
  border: 1px solid var(--cizgi); cursor: pointer; transition: border-color .15s, background .15s;
}
.modul-sec:hover { border-color: var(--cizgi-koyu); }
.modul-sec input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bordo); cursor: pointer; }
.modul-sec .ad { font-weight: 650; font-size: 15.5px; }
.modul-sec .aciklama { grid-column: 2 / 4; font-size: 13.5px; color: var(--soluk); line-height: 1.45; }
.modul-sec .fiyat { font-size: 14.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.modul-sec .fiyat small { font-weight: 500; color: var(--soluk); }
.modul-sec .bag { grid-column: 2 / 4; font-size: 12.5px; color: var(--altin-yazi); }
.modul-sec .oto { display: none; grid-column: 2 / 4; font-size: 12.5px; font-weight: 650; color: var(--yesil); }
.modul-sec.secili { border-color: var(--bordo); background: #fdf8f9; }
.modul-sec.otomatik .oto { display: block; }
.modul-sec .detay-link { font-size: 12.5px; }
.modul-sec .kanal { font-size: 12px; color: var(--soluk); }

.donem-sec { display: inline-flex; padding: 4px; border-radius: 10px; background: #efe7db; gap: 4px; }
.donem-sec label { position: relative; }
.donem-sec input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.donem-sec span {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
  font-weight: 650; font-size: 14.5px; color: var(--soluk);
}
.donem-sec input:checked + span { background: var(--beyaz); color: var(--murekkep); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.donem-sec input:focus-visible + span { outline: 3px solid var(--altin); outline-offset: 1px; }
.donem-sec em { font-style: normal; font-size: 11.5px; color: var(--yesil); background: var(--yesil-acik); padding: 2px 7px; border-radius: 999px; }

.adet { display: inline-flex; align-items: stretch; border: 1px solid var(--cizgi-koyu); border-radius: 10px; overflow: hidden; background: var(--beyaz); }
.adet button {
  width: 46px; border: 0; background: #f4ede3; font-size: 20px; line-height: 1; color: var(--murekkep); cursor: pointer;
}
.adet button:hover { background: #ece2d4; }
.adet input {
  width: 72px; border: 0; text-align: center; font: 650 17px var(--yazi-govde); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.adet input::-webkit-outer-spin-button, .adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ozet {
  position: sticky; top: 84px; padding: 22px; border-radius: 16px; background: var(--beyaz);
  border: 1px solid var(--cizgi); box-shadow: var(--golge);
}
.ozet h2 { font-size: 21px; }
.ozet-satirlar { list-style: none; margin: 14px 0 0; }
.ozet-satirlar li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px dashed var(--cizgi); }
.ozet-satirlar li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ozet-toplam { margin-top: 12px; }
.ozet-toplam div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 3px 0; }
.ozet-toplam .genel { font-size: 20px; font-weight: 750; color: var(--bordo); padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--cizgi); }
.ozet-toplam .aylik-karsilik { font-size: 13px; color: var(--soluk); }
.ozet .dugme { margin-top: 16px; }
.ozet small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--soluk); }
.ozet-ayarlar { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.ozet-ayarlar label.baslik { font-size: 13px; font-weight: 700; color: var(--soluk); display: block; margin-bottom: 6px; }
.canli-uyari { min-height: 1.2em; font-size: 13px; color: var(--yesil); margin-top: 8px; }

.mobil-toplam {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--cizgi-koyu); box-shadow: 0 -8px 24px -18px rgba(44, 12, 21, 0.5); font-size: 14.5px;
}
.mobil-toplam b { color: var(--bordo); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .mobil-toplam { display: none !important; } }
@media (max-width: 999px) { .ozet { position: static; } #yapilandirici { padding-bottom: 96px; } }

.fiyat-tablo { margin-top: 10px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; }
.fiyat-tablo th, .fiyat-tablo td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; vertical-align: top; }
.fiyat-tablo th { background: #f6f0e7; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.fiyat-tablo td.tutar, .fiyat-tablo th.tutar { text-align: right; white-space: nowrap; }
.fiyat-tablo tr:last-child td { border-bottom: 0; }
.fiyat-tablo .grup-satir td { background: var(--kagit); font-weight: 700; font-size: 13px; color: var(--altin-yazi); letter-spacing: .04em; }
.tablo-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }

/* ==========================================================================
   Formlar
   ========================================================================== */
.form-kart { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 16px; padding: clamp(18px, 3.5vw, 30px); box-shadow: var(--golge); }
.form-izgara { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-izgara-2 { grid-template-columns: 1fr 1fr; } .form-izgara .tam { grid-column: 1 / -1; } }
.alan-grup label, .alan-grup .etiket { display: block; font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.alan-grup .ipucu { display: block; font-size: 12.5px; color: var(--soluk); margin-top: 5px; font-weight: 400; }
.zorunlu { color: var(--kirmizi); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 16px/1.4 var(--yazi-govde); color: var(--murekkep);
  background: var(--beyaz); border: 1px solid var(--cizgi-koyu); border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--bordo); box-shadow: 0 0 0 3px rgba(90, 27, 42, 0.12); outline: none; }
[aria-invalid="true"] { border-color: var(--kirmizi) !important; background: #fffafa; }
.alan-hata { display: block; color: var(--kirmizi); font-size: 13px; margin-top: 5px; font-weight: 600; }
.onay-satir { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.onay-satir input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bordo); }
.onaylar { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding: 16px; border-radius: 12px; background: var(--kagit); border: 1px solid var(--cizgi); }
.sonek-alan { display: flex; align-items: stretch; }
.sonek-alan input { border-radius: 9px 0 0 9px; }
.sonek-alan span { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--cizgi-koyu); border-left: 0; border-radius: 0 9px 9px 0; background: #f4ede3; color: var(--soluk); font-size: 15px; white-space: nowrap; }
.radyo-grup { display: flex; flex-wrap: wrap; gap: 10px; }
.radyo-grup label { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--cizgi-koyu); border-radius: 9px; font-weight: 600; font-size: 14.5px; cursor: pointer; background: var(--beyaz); }
.radyo-grup input { accent-color: var(--bordo); width: 18px; height: 18px; margin: 0; }
.bal-kupu { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.uyari { padding: 14px 16px; border-radius: 12px; font-size: 14.5px; margin-bottom: 18px; }
.uyari-hata { background: var(--kirmizi-acik); color: #5f1f18; border: 1px solid #efcfc9; }
.uyari-hata ul { margin: 6px 0 0 18px; }
.uyari-bilgi { background: var(--bordo-acik); color: var(--bordo-koyu); border: 1px solid var(--bordo-cizgi); }
.uyari-basari { background: var(--yesil-acik); color: #134a31; border: 1px solid #c9e3d3; }

/* demo sayfası */
.demo-izgara { display: grid; gap: 22px; }
@media (min-width: 960px) { .demo-izgara { grid-template-columns: .95fr 1.05fr; align-items: start; } }
.demo-ac {
  padding: clamp(22px, 4vw, 34px); border-radius: 18px; color: var(--fildisi);
  background: radial-gradient(ellipse 80% 80% at 100% 0%, rgba(221, 174, 92, 0.2), transparent 60%), var(--bordo);
}
.demo-ac h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin-top: 10px; }
.demo-ac p { color: rgba(242, 232, 213, 0.86); margin-top: 12px; }
.demo-ac .madde-liste li { color: rgba(242, 232, 213, 0.9); font-size: 14.5px; }
.demo-bilgi { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.18); font-size: 14px; }
.demo-bilgi code { font-family: var(--yazi-veri); color: #fff; }

/* sipariş */
.siparis-izgara { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .siparis-izgara { grid-template-columns: 1fr 380px; } }
.referans {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px;
  background: var(--bordo-acik); border: 1px dashed var(--bordo);
}
.referans code { font: 750 clamp(20px, 3.4vw, 26px)/1.2 var(--yazi-veri); color: var(--bordo); letter-spacing: .04em; }
.kopyala { border: 1px solid var(--bordo-cizgi); background: var(--beyaz); color: var(--bordo); border-radius: 8px; padding: 7px 12px; font: 600 13.5px var(--yazi-govde); cursor: pointer; }
.kopyala:hover { border-color: var(--bordo); }
.banka-tablo { width: 100%; margin-top: 12px; }
.banka-tablo th, .banka-tablo td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; vertical-align: top; }
.banka-tablo th { width: 34%; color: var(--soluk); font-weight: 600; padding-right: 12px; }
.banka-tablo td { font-weight: 600; word-break: break-word; }
.durum-rozet { font-size: 13.5px; padding: 5px 12px; }

/* politika / uzun metin */
.metin-izgara { display: grid; gap: 30px; }
@media (min-width: 980px) { .metin-izgara { grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } }
.metin-yan { position: static; }
@media (min-width: 980px) { .metin-yan { position: sticky; top: 88px; } }
.icindekiler { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; font-size: 14px; }
.icindekiler strong { display: block; margin-bottom: 8px; }
.icindekiler ol { padding-left: 18px; }
.icindekiler li { margin: 5px 0; }
.icindekiler a { color: var(--soluk); text-decoration: none; }
.icindekiler a:hover { color: var(--bordo); text-decoration: underline; }
.kimlik-kutu { margin-top: 14px; background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; font-size: 14px; }
.kimlik-kutu dl { margin: 8px 0 0; }
.kimlik-kutu dt { color: var(--soluk); font-size: 12.5px; margin-top: 8px; }
.kimlik-kutu dd { margin: 0; font-weight: 600; word-break: break-word; }
.hukuk-metin { max-width: 72ch; }
.hukuk-metin section { padding: 22px 0; border-top: 1px solid var(--cizgi); }
.hukuk-metin section:first-child { border-top: 0; padding-top: 0; }
.hukuk-metin h2 { font-size: 22px; display: flex; gap: 12px; align-items: baseline; }
.hukuk-metin h2 .numara { font-size: 13px; }
.hukuk-metin p, .hukuk-metin li { font-size: 15.5px; color: #3a302b; }
.hukuk-metin p { margin: 12px 0 0; }
.hukuk-metin ul { margin: 12px 0 0 20px; list-style: disc; }
.hukuk-metin li { margin: 6px 0; }
.surum { font-size: 13.5px; color: var(--soluk); margin-top: 10px; }

/* SSS */
.sss-liste { display: flex; flex-direction: column; gap: 10px; }
.sss-liste details { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px; }
.sss-liste summary {
  list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
  font-weight: 650; font-size: 16px; line-height: 1.45;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after {
  content: "+"; margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bordo-acik); color: var(--bordo); font-weight: 700;
}
.sss-liste details[open] summary::after { content: "−"; }
.sss-liste details[open] { border-color: var(--cizgi-koyu); }
.sss-liste details p { padding: 0 18px 18px; margin: 0; color: #3e3430; font-size: 15.5px; }

/* senaryo */
.senaryo { display: grid; gap: 16px; padding: 26px 0; border-top: 1px solid var(--cizgi); }
@media (min-width: 900px) { .senaryo { grid-template-columns: 70px 1fr 1fr; gap: 28px; } }
.senaryo-no { font: 700 30px/1 var(--yazi-baslik); color: var(--altin); }
.senaryo h2 { font-size: 22px; margin-top: 8px; }
.senaryo p { color: var(--soluk); margin-top: 10px; }

/* teşekkür */
.tesekkur-kart { text-align: center; max-width: 640px; margin: 0 auto; }
.tesekkur-ikon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--yesil-acik); color: var(--yesil); }
.tesekkur-ikon svg { width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .ustbar, .altbilgi, .kapanis, .bolum-nav, .dugme { display: none !important; }
  body { background: #fff; }
}