/* =====================================================
   RENKLER VE YAZI TİPLERİ – site genelinde buradan değişir
   ===================================================== */
:root {
  --zemin: #F5F6F9;
  --kart: #FFFFFF;
  --murekkep: #0F1F3D;       /* ana yazı ve lacivert yüzeyler */
  --soluk: #5B667F;          /* ikincil yazı */
  --cizgi: #E1E5EE;
  --cizgi-koyu: #B9C1D3;
  --lacivert: #0F1F3D;       /* giriş bölümü zemini */
  --sari: #FFC93C;
  --cta: #C8102E;            /* "Show code" butonu ve US damgası */
  --cta-koyu: #A30D25;
  --fiyat: #C8102E;
  --yesil: #15803D;
  --yesil-zemin: #E7F5EC;
  --mavi-zemin: #E8EEFB;
  --golge: 0 1px 2px rgba(15, 31, 61, .06), 0 6px 20px rgba(15, 31, 61, .06);
  --baslik-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --yazi-font: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --kod-font: "JetBrains Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --zemin: #0A1326;
    --kart: #131F3A;
    --murekkep: #EDF1F9;
    --soluk: #9DA9C4;
    --cizgi: #24324F;
    --cizgi-koyu: #40507A;
    --lacivert: #14254B;
    --fiyat: #FF6B7A;
    --yesil: #4ADE80;
    --yesil-zemin: #12301F;
    --mavi-zemin: #1B2B52;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}

/* ===== Temel ===== */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

body {
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi-font);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--baslik-font); letter-spacing: -0.02em; line-height: 1.15; }

.gizli {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.atla {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--murekkep); color: var(--zemin);
  padding: .6rem 1rem; border-radius: .5rem;
}
.atla:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }

.ik { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.sayfa, .ust-ic, .kategori-menu, .giris-ic, .alt-ic, .alt-not {
  width: min(1180px, 100% - 2rem);
  margin-inline: auto;
}

/* ===== Butonlar ===== */
.buton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .7rem 1.25rem;
  border-radius: .6rem;
  border: 2px solid transparent;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.buton.birincil { background: var(--cta); color: #fff; }
.buton.birincil:hover { background: var(--cta-koyu); }
.buton.koyu { background: var(--murekkep); color: var(--kart); }
.buton.koyu:hover { opacity: .88; }
.buton.ikincil { background: none; border-color: var(--cizgi-koyu); }
.buton.ikincil:hover { border-color: var(--murekkep); }

.metin-buton {
  background: none; border: none; padding: 0;
  font-weight: 700; text-decoration: underline;
}

/* ===== Logo ===== */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--baslik-font);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.035em;
  text-decoration: none;
}
.logo-us {
  margin-left: .3rem;
  padding: 0 .3rem;
  font-size: .78em;
  letter-spacing: 0;
  color: var(--fiyat);
  border: 2.5px solid currentColor;
  border-radius: .3rem;
  transform: rotate(-8deg);
}

/* ===== Mağaza logosu kutusu ===== */
.logo-kutu {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: .4rem;
  color: #fff;
  font-family: var(--baslik-font);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: 0;
  overflow: hidden;
}
.logo-kutu img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.logo-kutu.orta  { width: 3.5rem; height: 3.5rem; border-radius: .8rem; font-size: 1.25rem; }
.logo-kutu.buyuk { width: 5rem; height: 5rem; border-radius: 1.1rem; font-size: 1.8rem; }
.logo-kutu.dev   { width: 5.5rem; height: 5.5rem; border-radius: 1.2rem; font-size: 2rem; }

/* ===== Üst menü ===== */
.ust {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ust-ic {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-block: .8rem;
}

.ust-arama {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  max-width: 34rem;
}
.ust-arama .ik {
  position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%);
  color: var(--soluk);
  pointer-events: none;
}
.ust-arama input {
  flex: 1; min-width: 0; width: 100%;
  padding: .62rem .9rem .62rem 2.5rem;
  background: var(--zemin);
  border: 1.5px solid var(--cizgi-koyu);
  border-right: none;
  border-radius: .6rem 0 0 .6rem;
}
.ust-arama input:focus { background: var(--kart); border-color: var(--murekkep); outline: none; }
.ust-arama button {
  padding: .62rem 1.1rem;
  font-weight: 700;
  background: var(--murekkep);
  color: var(--kart);
  border: none;
  border-radius: 0 .6rem .6rem 0;
}

.ust-menu { display: flex; gap: 1.5rem; margin-left: auto; }
.ust-menu a { font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.ust-menu a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

.kategori-menu {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--cizgi);
}
.kategori-menu a {
  flex-shrink: 0;
  padding: .55rem 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--soluk);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.kategori-menu a:hover { color: var(--murekkep); border-bottom-color: var(--murekkep); }

@media (max-width: 860px) {
  .ust-ic { flex-wrap: wrap; gap: .7rem 1rem; }
  .ust-menu { gap: 1rem; }
  .ust-arama { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .ust-menu a:nth-child(3) { display: none; }
  .ust-menu a { font-size: .875rem; }
  .logo { font-size: 1.25rem; }
}

/* ===== Giriş bölümü ===== */
.giris { background: var(--lacivert); color: #fff; overflow: hidden; }
.giris-yazi { min-width: 0; }

.giris-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  padding-block: 3.5rem;
}

.giris h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 13ch;
}

.giris-yazi > p { margin-top: 1rem; max-width: 30rem; color: #C5CEE2; font-size: 1.075rem; }

.giris-arama {
  display: flex;
  margin-top: 1.75rem;
  max-width: 32rem;
  background: #fff;
  border-radius: .75rem;
  padding: .3rem;
}
.giris-arama input {
  flex: 1; min-width: 0; width: 100%;
  padding: .7rem .9rem;
  border: none;
  background: none;
  color: #0F1F3D;
  font-size: 1.05rem;
}
.giris-arama input:focus { outline: none; }
.giris-arama:focus-within { outline: 3px solid var(--sari); outline-offset: 2px; }
.giris-arama button {
  padding: .7rem 1.3rem;
  border: none;
  border-radius: .55rem;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.giris-arama button:hover { background: var(--cta-koyu); }

.giris-yazi > .populer { font-size: .9rem; margin-top: 1rem; color: #9FABC7; }
.populer a { color: #fff; margin-left: .75rem; text-underline-offset: 3px; }

/* Girişteki bilet */
.giris-kupon { position: relative; max-width: 29rem; justify-self: end; width: 100%; }

.bilet {
  --kocan: 11.5rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--kocan);
  background: #fff;
  color: #0F1F3D;
  border-radius: 1rem;
  transform: rotate(-2.5deg);
  -webkit-mask:
    radial-gradient(circle .8rem at calc(100% - var(--kocan)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle .8rem at calc(100% - var(--kocan)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle .8rem at calc(100% - var(--kocan)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle .8rem at calc(100% - var(--kocan)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

.bilet-arka {
  position: absolute;
  inset: 0;
  background: var(--sari);
  transform: rotate(3.5deg) translate(.6rem, .5rem);
  -webkit-mask: none; mask: none;
}

.bilet-govde { padding: 1.4rem 1.25rem 1.4rem 1.5rem; }

.bilet-magaza { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.bilet-magaza a { text-decoration: none; }

.bilet-indirim {
  font-family: var(--baslik-font);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-block: .7rem .4rem;
}
.bilet-indirim span { font-size: 1.3rem; letter-spacing: -0.02em; }

.bilet-baslik { font-size: .95rem; color: #5B667F; margin-bottom: .7rem; }
.bilet .dogrulandi { color: #15803D; }

.bilet-kocan {
  display: grid;
  place-items: center;
  padding: .9rem;
  border-left: 2px dashed #B9C1D3;
}
.bilet .kod-ac { min-width: 0; color: #0F1F3D; }
.bilet .kod-ucu { background: #F5F6F9; border-color: #B9C1D3; }
.bilet .kod-acik code { color: #0F1F3D; border-color: #0F1F3D; background: #FFF6D6; }
.bilet .kod-acik a { color: #0F1F3D; }

@media (max-width: 860px) {
  .giris-ic { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 2.5rem 3rem; }
  .giris-kupon { justify-self: center; }
}
@media (max-width: 420px) {
  .bilet { --kocan: 9.75rem; }
  .bilet-govde { padding: 1.1rem .75rem 1.1rem 1rem; }
  .bilet-kocan { padding: .6rem; }
  .bilet-indirim { font-size: 2.4rem; }
}

/* ===== Bölümler ===== */
.bolum { padding-top: 2.75rem; }
.sayfa > .bolum:last-child, #detay, #magaza { padding-bottom: 3.5rem; }
.sayfa:has(> .magaza-izgara) { padding-bottom: 3.5rem; }

.bolum-basi {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.bolum-basi h2, .nasil h2 { font-size: 1.5rem; font-weight: 800; }

.hepsi { font-weight: 700; font-size: .95rem; text-underline-offset: 4px; white-space: nowrap; }

/* ===== Mağaza şeridi ve ızgarası ===== */
.magaza-serit, .magaza-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: .75rem;
}

.magaza-serit a, .magaza-izgara a {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .1rem;
  padding: 1.1rem .75rem;
  text-align: center;
  text-decoration: none;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
  height: 100%;
}
.magaza-serit a:hover, .magaza-izgara a:hover { border-color: var(--murekkep); box-shadow: var(--golge); }
.magaza-ad { margin-top: .6rem; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.magaza-sayi { font-size: .825rem; color: var(--soluk); }

/* ===== Ürün kartları ===== */
.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
}

.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
  overflow: hidden;
}
.kart:hover { border-color: var(--murekkep); box-shadow: var(--golge); }

.kart-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }

.kart-gorsel {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--mavi-zemin);
}
.kart-gorsel img, .detay-gorsel img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.kart-yuzde {
  position: absolute; left: .6rem; top: .6rem;
  padding: .15rem .5rem;
  border-radius: .35rem;
  background: var(--sari);
  color: #0F1F3D;
  font-size: .8rem;
  font-weight: 700;
}

.kart-icerik { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; }
.kart-magaza { font-size: .825rem; color: var(--soluk); font-weight: 500; }
.kart-baslik {
  font-family: var(--yazi-font);
  font-size: .975rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fiyat-satiri { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin-top: auto; padding-top: .3rem; }
.fiyat { font-family: var(--baslik-font); font-size: 1.3rem; font-weight: 800; color: var(--fiyat); letter-spacing: -0.02em; }
.eski-fiyat { color: var(--soluk); font-size: .9rem; }
.yuzde {
  padding: .1rem .5rem; border-radius: .35rem;
  background: var(--sari); color: #0F1F3D;
  font-size: .85rem; font-weight: 700;
}
.kart-kod { font-size: .8rem; font-weight: 700; color: var(--yesil); }

/* ===== Kupon satırları ===== */
.satirlar { display: grid; gap: .75rem; }

.satir {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem 1rem 1rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
}
.satir:hover { border-color: var(--cizgi-koyu); box-shadow: var(--golge); }

.satir-rozet {
  display: grid;
  place-content: center;
  text-align: center;
  align-self: stretch;
  min-height: 5.25rem;
  padding: .5rem .25rem;
  border-radius: .6rem;
  background: var(--mavi-zemin);
}
.rozet-buyuk {
  font-family: var(--baslik-font);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rozet-kucuk { font-size: .8rem; font-weight: 700; color: var(--soluk); margin-top: .15rem; }

.satir-ust { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.tur {
  padding: .05rem .5rem;
  border-radius: .3rem;
  font-size: .75rem;
  font-weight: 700;
}
.tur-kod { background: var(--yesil-zemin); color: var(--yesil); }
.tur-firsat { background: var(--mavi-zemin); color: var(--soluk); }
.satir-magaza { color: var(--soluk); font-weight: 500; text-decoration: none; }
.satir-magaza:hover { text-decoration: underline; }

.satir-baslik {
  font-family: var(--yazi-font);
  font-size: 1.075rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin-block: .3rem .4rem;
}
.satir-baslik a { text-decoration: none; }
.satir-baslik a:hover { text-decoration: underline; text-underline-offset: 3px; }

.satir-alt { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .85rem; color: var(--soluk); }
.dogrulandi, .bitis { display: inline-flex; align-items: center; gap: .3rem; }
.dogrulandi { color: var(--yesil); font-weight: 500; font-size: .85rem; }
.bitis.acil { color: var(--fiyat); font-weight: 700; }

.satir-eylem { width: 11.5rem; }
.satir-eylem .buton { width: 100%; }

@media (max-width: 640px) {
  .satir { grid-template-columns: 4.75rem minmax(0, 1fr); gap: .75rem 1rem; padding: .85rem; }
  .satir-rozet { min-height: 4.5rem; align-self: start; }
  .rozet-buyuk { font-size: 1.25rem; }
  .satir-eylem { grid-column: 1 / -1; width: 100%; }
}

/* ===== "Show code" butonu ===== */
.kod-alan { width: 100%; }

.kod-ac {
  position: relative;
  display: block;
  width: 100%;
  min-width: 10.5rem;
  height: 2.9rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: .6rem;
  overflow: hidden;
}
/* Sağda görünen kod ucu (kesik çizgili) */
.kod-ucu {
  position: absolute;
  inset: 0 0 0 auto;
  width: 5rem;
  display: grid;
  place-items: center end;
  padding-right: .65rem;
  font-family: var(--kod-font);
  font-size: .95rem;
  background: var(--zemin);
  border: 2px dashed var(--cizgi-koyu);
  border-left: none;
  border-radius: 0 .6rem .6rem 0;
}
/* Kodu örten kırmızı kısım */
.kod-ac-yazi {
  position: absolute;
  inset: 0 2.7rem 0 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-right: .5rem;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - .95rem) 100%, 0 100%);
  transition: right .18s ease;
}
.kod-ac:hover .kod-ac-yazi { right: 3.3rem; background: var(--cta-koyu); }

.kod-acik { display: grid; gap: .4rem; text-align: center; }
.kod-acik code {
  display: block;
  padding: .55rem .6rem;
  font-family: var(--kod-font);
  font-size: 1rem;
  border: 2px dashed var(--murekkep);
  border-radius: .6rem;
  background: var(--zemin);
  word-break: break-all;
  user-select: all;
}
.kod-acik a { font-size: .875rem; font-weight: 700; text-underline-offset: 3px; }

/* ===== Kategori ızgarası ===== */
.kategori-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .75rem;
}
.kategori-izgara a {
  display: grid;
  gap: .15rem;
  padding: 1.1rem;
  text-decoration: none;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
}
.kategori-izgara a:hover { border-color: var(--murekkep); box-shadow: var(--golge); }
.kategori-izgara .ik { width: 1.7rem; height: 1.7rem; margin-bottom: .6rem; }
.kategori-izgara span { font-weight: 700; }
.kategori-izgara small { font-size: .825rem; color: var(--soluk); }

/* ===== Nasıl çalışır ===== */
.nasil ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 2.5rem;
  margin-top: 1.25rem;
  counter-reset: adim;
}
.nasil li {
  counter-increment: adim;
  padding-top: 1rem;
  border-top: 2px solid var(--murekkep);
  color: var(--soluk);
  max-width: 24rem;
}
.nasil li::before {
  content: counter(adim);
  display: block;
  font-family: var(--baslik-font);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--murekkep);
  margin-bottom: .3rem;
}
.nasil strong { display: block; color: var(--murekkep); font-size: 1.05rem; }

/* ===== Sayfa başlıkları, kırıntı ===== */
.sayfa-basi { padding-block: 2.25rem 1.5rem; }
.sayfa-basi h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; }
.sayfa-basi p { color: var(--soluk); margin-top: .3rem; }

.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  padding-block: 1.25rem 1rem;
  font-size: .875rem;
  color: var(--soluk);
}
.kirinti a { text-decoration: none; }
.kirinti a:hover { text-decoration: underline; }
.kirinti .ik { width: .85rem; height: .85rem; }

/* ===== Arama sayfası ===== */
.arama-sayfasi {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 2rem;
  padding-block: 2rem 3.5rem;
  align-items: start;
}

.filtreler details {
  position: sticky;
  top: 7rem;
  padding: 1rem 1.1rem 1.25rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
}
.filtreler summary { font-family: var(--baslik-font); font-weight: 800; font-size: 1.1rem; cursor: pointer; }

#filtre-formu { display: grid; gap: 1rem; margin-top: 1rem; }
#filtre-formu > label, .fiyat-araligi legend { display: grid; gap: .3rem; font-size: .875rem; font-weight: 700; }

#filtre-formu input[type="search"],
#filtre-formu input[type="number"],
#filtre-formu select,
.siralama select {
  width: 100%;
  padding: .5rem .65rem;
  font-weight: 400;
  background: var(--zemin);
  border: 1.5px solid var(--cizgi-koyu);
  border-radius: .5rem;
}

.fiyat-araligi {
  display: flex; align-items: center; gap: .5rem;
  border: none; padding: 0;
  font-size: .875rem; color: var(--soluk);
}
.fiyat-araligi legend { margin-bottom: .3rem; color: var(--murekkep); }
.fiyat-araligi label { flex: 1; }

#filtre-formu .onay { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.onay input { width: 1.1rem; height: 1.1rem; accent-color: var(--cta); }

.sonuc-basi {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: end;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.sonuc-basi h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 800; }
.sonuc-sayisi { color: var(--soluk); margin-top: .2rem; }

.siralama { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--soluk); white-space: nowrap; }
.siralama select { width: auto; background: var(--kart); color: var(--murekkep); }

.bos {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--soluk);
  background: var(--kart);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: .85rem;
}
.bos strong { display: block; color: var(--murekkep); margin-bottom: .25rem; }

@media (max-width: 820px) {
  .arama-sayfasi { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1rem; }
  .filtreler details { position: static; }
}

/* ===== Fırsat detay ===== */
.detay {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  padding: 1.5rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 1rem;
}

.detay-gorsel {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--mavi-zemin);
  border-radius: .75rem;
  overflow: hidden;
}

.detay-bilgi { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }

.detay-magaza {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; text-decoration: none;
}
.detay-magaza:hover { text-decoration: underline; }

.detay-bilgi h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; }

.fiyat-satiri.buyuk { margin-top: 0; padding-top: 0; }
.fiyat-satiri.buyuk .fiyat { font-size: 2.3rem; }
.fiyat-satiri.buyuk .eski-fiyat { font-size: 1.1rem; }

.detay-eylem { width: min(100%, 17rem); }
.detay-eylem .buton { width: 100%; padding-block: .85rem; font-size: 1.05rem; }
.detay-eylem .kod-ac { height: 3.2rem; }

.uyari {
  padding: .6rem .9rem; border-radius: .5rem;
  background: var(--zemin); color: var(--fiyat); font-weight: 700;
}

.detay-aciklama {
  align-self: stretch;
  margin-top: .5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cizgi);
}
.detay-aciklama h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.detay-aciklama p { color: var(--soluk); max-width: 36rem; }

@media (max-width: 760px) {
  .detay { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1rem; }
  .detay-gorsel { aspect-ratio: 16 / 9; }
  .detay-eylem { width: 100%; }
}

.bulunamadi { max-width: 32rem; padding-block: 4rem; }
.bulunamadi h1 { font-size: 2rem; font-weight: 800; }
.bulunamadi p { margin-block: .75rem 1.5rem; color: var(--soluk); }

/* ===== Mağaza sayfası ===== */
.magaza-basi {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}
.magaza-basi h1 { font-size: clamp(1.6rem, 3.8vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; }
.magaza-basi p { color: var(--soluk); margin-top: .35rem; }

.magaza-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2rem;
  align-items: start;
}

.yan { display: grid; gap: 1rem; }
.yan section {
  padding: 1.1rem 1.2rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
}
.yan h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.yan p { color: var(--soluk); font-size: .95rem; }

.yan-liste a {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0;
  font-weight: 500; font-size: .95rem;
  text-decoration: none;
}
.yan-liste a:hover span { text-decoration: underline; }
.yan-liste small { margin-left: auto; color: var(--soluk); }

@media (max-width: 860px) {
  .magaza-duzen { grid-template-columns: minmax(0, 1fr); }
  .magaza-basi { align-items: flex-start; }
  .logo-kutu.dev { width: 4rem; height: 4rem; font-size: 1.4rem; border-radius: .9rem; }
}

/* ===== Alt kısım ===== */
.alt {
  margin-top: auto;
  background: var(--kart);
  border-top: 1px solid var(--cizgi);
  font-size: .925rem;
}

.alt-ic {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
  padding-block: 2.75rem 2rem;
}
.alt-marka p { margin-top: .75rem; max-width: 20rem; color: var(--soluk); }
.alt h2 { font-family: var(--yazi-font); font-size: .925rem; font-weight: 700; letter-spacing: 0; margin-bottom: .6rem; }
.alt li + li { margin-top: .35rem; }
.alt-ic a:not(.logo) { color: var(--soluk); text-decoration: none; }
.alt-ic a:not(.logo):hover { color: var(--murekkep); text-decoration: underline; }

.alt-not {
  display: grid;
  gap: .5rem;
  padding-block: 1.25rem 2rem;
  border-top: 1px solid var(--cizgi);
  font-size: .85rem;
  color: var(--soluk);
}
.alt-not p { max-width: 56rem; }
.alt-not strong { color: var(--murekkep); }

@media (max-width: 760px) {
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}

/* ===== Bildirim ===== */
.bildirim {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  z-index: 40;
  max-width: calc(100% - 2rem);
  padding: .8rem 1.3rem;
  background: #0F1F3D;
  color: #fff;
  border: 1px solid #40507A;
  border-radius: .6rem;
  font-weight: 700;
  box-shadow: var(--golge);
  transform: translate(-50%, 200%);
  transition: transform .3s;
}
.bildirim.gorunur { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===== Telefon ince ayarları ===== */
@media (max-width: 520px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .kart-icerik { padding: .7rem .75rem .85rem; }
  .kart-baslik { font-size: .9rem; }
  .fiyat { font-size: 1.15rem; }
  .kart-gorsel .logo-kutu.buyuk { width: 3.75rem; height: 3.75rem; font-size: 1.35rem; border-radius: .85rem; }
  .magaza-serit, .magaza-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .magaza-serit a, .magaza-izgara a { padding: .85rem .4rem; }
  .magaza-ad { font-size: .85rem; }
  .logo-kutu.orta { width: 3rem; height: 3rem; font-size: 1.05rem; }
  .kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bilet .kod-ac-yazi { font-size: .875rem; }
  .bolum-basi h2, .nasil h2 { font-size: 1.3rem; }
}

/* =====================================================
   EKLER: üst bilgi şeridi, trend bağlantıları, renkli
   kategoriler, yasal sayfalar
   ===================================================== */

/* Üstteki ince bilgi şeridi */
.ust-not {
  padding: .3rem 1rem;
  text-align: center;
  font-size: .78rem;
  background: var(--lacivert);
  color: #C5CEE2;
}
.ust-not a { color: #fff; text-underline-offset: 2px; }

/* Trend bağlantıları */
.trend {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.trend-etiket { font-weight: 700; font-size: .9rem; margin-right: .25rem; flex-shrink: 0; }
.trend a {
  flex-shrink: 0;
  padding: .4rem .9rem;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 2rem;
}
.trend a:hover { border-color: var(--murekkep); }
.bolum.bolum-ilk { padding-top: 1.75rem; }

/* Renkli kategori kutuları */
.kategori-izgara { grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); }
.kategori-izgara a {
  background: color-mix(in srgb, var(--k) 9%, var(--kart));
  border-color: color-mix(in srgb, var(--k) 22%, var(--kart));
  padding: 1rem;
}
.kategori-izgara a:hover { border-color: var(--k); }
.kat-ikon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: .7rem;
  border-radius: .75rem;
  background: var(--k);
  color: #fff;
}
.kategori-izgara .kat-ikon .ik { width: 1.45rem; height: 1.45rem; margin: 0; }
.kat-ad { font-weight: 700; line-height: 1.25; }

/* Kart görseli kategori renginde */
.kart-gorsel { background: color-mix(in srgb, var(--k, #2563EB) 11%, var(--kart)); }
.kartlar { grid-template-columns: repeat(auto-fill, minmax(11.75rem, 1fr)); }
.kart-not { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font-size: .8rem; color: var(--soluk); min-height: 1.2rem; }
.kart-zaman { font-size: .75rem; color: var(--soluk); }

/* Mağaza "promo codes" bağlantıları */
.magaza-linkleri { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1rem; font-size: .9rem; }
.magaza-linkleri a { color: var(--soluk); text-underline-offset: 3px; }
.magaza-linkleri a:hover { color: var(--murekkep); }

/* Yakında biten / bitmiş fırsatlar */
.eskiler {
  padding: 1rem 1.25rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: .85rem;
}
.eskiler summary { font-weight: 700; cursor: pointer; }
.eskiler ul { margin-top: .75rem; display: grid; gap: .4rem; color: var(--soluk); font-size: .95rem; }
.eskiler span { font-size: .85rem; }

/* Alt kısım: 5 sütun */
.alt-ic { grid-template-columns: 1.4fr 1.5fr repeat(3, 1fr); }
.iki-sutun { columns: 2; column-gap: 1.25rem; }
.iki-sutun li { break-inside: avoid; }
@media (max-width: 900px) {
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}

/* Yasal ve bilgi sayfaları */
.yazi { max-width: 44rem; padding-block: 2.5rem 4rem; }
.yazi h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; }
.yazi .tarih { margin-top: .5rem; font-size: .9rem; color: var(--soluk); }
.yazi .giris-paragraf { margin-top: 1.25rem; font-size: 1.15rem; line-height: 1.55; }
.yazi h2 { margin-top: 2.25rem; font-size: 1.35rem; font-weight: 800; scroll-margin-top: 8rem; }
.yazi h3 { margin-top: 1.25rem; font-family: var(--yazi-font); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.yazi p { margin-top: .75rem; line-height: 1.65; }
.yazi ul { margin-top: .75rem; padding-left: 1.25rem; list-style: disc; line-height: 1.65; }
.yazi li + li { margin-top: .35rem; }
.yazi a { font-weight: 500; text-underline-offset: 3px; }
.yazi p:not(.giris-paragraf):not(.tarih), .yazi li { color: color-mix(in srgb, var(--murekkep) 82%, var(--soluk)); }

@media (max-width: 520px) {
  .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ust-not { font-size: .72rem; }
}

/* Kategori ızgarası: masaüstünde 6, tablette 4, telefonda 2 sütun */
@media (min-width: 961px) { .kategori-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 521px) and (max-width: 960px) { .kategori-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .kategori-izgara { gap: .5rem; }
  .kategori-izgara a { grid-template-columns: auto minmax(0, 1fr); column-gap: .65rem; align-items: center; padding: .6rem .65rem; }
  .kat-ikon { grid-row: span 2; width: 2.4rem; height: 2.4rem; margin-bottom: 0; }
  .kat-ad { font-size: .9rem; align-self: end; }
  .kategori-izgara small { align-self: start; }
}

/* =====================================================
   DURUM, KAYNAK VE BOŞ DURUM
   ===================================================== */
.durum, .kaynak { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.durum-test { color: var(--yesil); font-weight: 700; }
.durum-yok { color: var(--soluk); font-weight: 500; }
.kaynak { color: var(--soluk); text-decoration: none; max-width: 100%; }
.kaynak:hover { color: var(--murekkep); text-decoration: underline; }
.kart-test { display: inline-flex; align-items: center; gap: .2rem; color: var(--yesil); font-weight: 700; }
.bilet-durum { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: #5B667F; font-size: .85rem; }
.bilet .durum-test { color: #15803D; }

.giris-ic.tek-sutun { grid-template-columns: minmax(0, 1fr); }
.giris-ic.tek-sutun .giris-kupon { display: none; }

.bos-durum {
  margin-top: 1.75rem;
  padding: 2rem 1.75rem;
  background: var(--kart);
  border: 1px dashed var(--cizgi-koyu);
  border-radius: 1rem;
}
.bos-durum h2 { font-size: 1.4rem; font-weight: 800; }
.bos-durum p { margin-top: .6rem; color: var(--soluk); max-width: 40rem; }
.bos-durum a { font-weight: 700; color: var(--murekkep); text-underline-offset: 3px; }

.kunye {
  align-self: stretch;
  display: grid;
  gap: .6rem;
  padding: 1rem 1.1rem;
  background: var(--zemin);
  border-radius: .7rem;
  font-size: .925rem;
}
.kunye div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; }
.kunye dt { font-weight: 700; }
.kunye dd { margin: 0; color: var(--soluk); }
.kunye a { color: var(--murekkep); font-weight: 600; text-underline-offset: 3px; }

/* Statik mağaza sayfası: yan sütun ekleri */
.yan-adimlar { list-style: decimal; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--soluk); font-size: .95rem; }
.yan-link { margin-top: .6rem; }
.yan-link a { font-weight: 700; color: var(--murekkep); text-underline-offset: 3px; }