/* ===========================================================================
   KILIÇ ECZA DEPOSU — düzen, bölümler, hero
   Token'lar ana.css'te. Burada yeni renk/gölge/eğri TANIMLANMAZ.

   Tasarım yönü: FOTOĞRAF YÖNETİMİNDE. İkon-kutucuk kart yığını yok;
   büyük fotoğraf, geniş tipografi, hairline ayraç, editoryal ritim.
   =========================================================================== */

/* ===========================================================================
   ÜST BAR
   =========================================================================== */
.ustbar {
  background: var(--ink);
  color: #8e93b4;
  font-size: var(--t-mini);
}
.ustbar .kap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 42px; }
.ustbar a { color: #b9bdd6; text-decoration: none; }
.ustbar a:hover { color: #fff; }
.ustbar-sol { display: flex; align-items: center; gap: 1.75rem; }
.ustbar-oge { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.ustbar-oge svg { width: .9rem; height: .9rem; color: var(--brand); flex: none; }
@media (max-width: 1000px) { .ustbar-gizle-mobil { display: none; } }
@media (max-width: 620px) { .ustbar { display: none; } }

/* ===========================================================================
   BAŞLIK / NAVİGASYON
   =========================================================================== */
.basliksatir {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--sure) var(--gecis), background var(--sure) var(--gecis);
}
.basliksatir.kaydi { box-shadow: var(--golge-raised); background: color-mix(in srgb, var(--paper) 97%, transparent); }
.basliksatir .kap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

.marka { flex: none; display: block; line-height: 0; }
.marka img { height: clamp(32px, 4vw, 40px); width: auto; }

.gezinti { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.gezinti a {
  position: relative; padding: .55rem .8rem;
  font-size: var(--t-kucuk); font-weight: 550; text-decoration: none; color: var(--steel);
  transition: color var(--sure) var(--gecis);
}
.gezinti a::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: -.1rem; height: 2px;
  background: var(--brand); border-radius: 2px;
  scale: 0 1; transform-origin: left; transition: scale 280ms var(--gecis);
}
.gezinti a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.gezinti a[aria-current="page"]::after { scale: 1 1; }
@media (hover: hover) and (pointer: fine) {
  .gezinti a:hover { color: var(--ink); }
  .gezinti a:hover::after { scale: 1 1; }
}
.baslik-eylem { flex: none; display: flex; align-items: center; gap: .55rem; margin-left: .75rem; }
@media (max-width: 1120px) { .gezinti, .baslik-eylem { display: none; } }

.menu-dugme {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--surface); border: 0; border-radius: var(--r-sm); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
}
.menu-dugme span { display: block; width: 19px; height: 1.8px; background: var(--ink); border-radius: 2px; }
.menu-dugme span + span { margin-top: 5px; }
@media (max-width: 1120px) { .menu-dugme { display: flex; flex-direction: column; } }

/* ===========================================================================
   MOBİL KABUK
   =========================================================================== */
.perde {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 9, 26, .55); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 260ms var(--gecis);
}
.perde.acik { opacity: 1; pointer-events: auto; }

.mobil-menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--paper);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--golge-floating);
  padding: .75rem var(--oluk) calc(1.5rem + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  translate: 0 100%;
  transition: translate 420ms var(--cekmece);
}
.mobil-menu.acik { translate: 0 0; }
.mobil-menu-tut { width: 42px; height: 4px; background: var(--line-strong);
                  border-radius: 4px; margin: .35rem auto 1.15rem; }
.mobil-menu nav { display: grid; gap: 0; margin-bottom: 1.25rem; }
.mobil-menu nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .25rem; font-size: 1.0625rem; font-weight: 550;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.mobil-menu nav a[aria-current="page"] { color: var(--brand); font-weight: 650; }
.mobil-menu nav a svg { width: 1rem; height: 1rem; color: var(--steel-light); }
.mobil-menu-eylem { display: grid; gap: .6rem; }
.mobil-menu-bilgi { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
                    font-size: var(--t-mini); color: var(--steel); }

.alt-cubuk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; align-items: stretch; height: 64px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: var(--golge-floating);
  box-sizing: content-box;
  padding-bottom: env(safe-area-inset-bottom);
}
.alt-cubuk a, .alt-cubuk button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; padding: .35rem .2rem; text-decoration: none;
  font-family: inherit; font-size: .66rem; font-weight: 600; letter-spacing: .01em;
  color: var(--steel); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.alt-cubuk a svg, .alt-cubuk button svg { width: 1.2rem; height: 1.2rem; flex: none; }
.alt-cubuk a[aria-current="page"] { color: var(--brand); }
.alt-cubuk .vurgu {
  color: #fff; background: var(--brand); border-radius: var(--r-sm);
  margin: .4rem .25rem; padding: .3rem .2rem; box-shadow: var(--golge-brand);
}
.alt-cubuk .vurgu:hover { color: #fff; }
@media (max-width: 1120px) { .alt-cubuk { display: flex; } body { padding-bottom: 64px; } }

.wa-yuzen {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.15rem; border-radius: 100px;
  background: #1fa855; color: #fff; text-decoration: none;
  font-size: var(--t-kucuk); font-weight: 600;
  box-shadow: 0 4px 12px rgba(11, 90, 42, .26), 0 16px 38px rgba(11, 90, 42, .3);
  transition: transform var(--sure) var(--gecis), background var(--sure) var(--gecis);
}
.wa-yuzen svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .wa-yuzen:hover { transform: translateY(-2px); background: #17914a; color: #fff; }
}
@media (max-width: 1120px) { .wa-yuzen { display: none; } }

/* ===========================================================================
   HERO — aydınlık, asimetrik kurumsal. Solda tipografi, sağda fotoğraf paneli.
   =========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.hero .kap { position: relative; }

.hero-ic {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
@media (min-width: 1000px) { .hero-ic { grid-template-columns: 1.02fr .98fr; } }

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: 1.2rem; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-ozet {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); color: var(--steel);
  max-width: 48ch; margin-bottom: 2.15rem;
}
.hero-eylem { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Fotoğraf paneli — sağda, yumuşak köşeli, gerçek gölgeli */
.hero-panel {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--mist);
  box-shadow: 0 2px 6px rgba(18,17,42,.05), 0 28px 60px -18px rgba(18,17,42,.24);
}
.hero-panel img { width: 100%; height: 100%; object-fit: cover; }

/* Panelin üstünde künye — ürünün teknik kimliği */
.hero-kunye {
  position: absolute; z-index: 2; left: clamp(.75rem,2vw,1.15rem);
  right: clamp(.75rem,2vw,1.15rem); bottom: clamp(.75rem,2vw,1.15rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 10px 30px rgba(18,17,42,.16);
}
.hero-kunye > div { padding: .85rem .9rem; border-right: 1px solid var(--line); }
.hero-kunye > div:last-child { border-right: 0; }
.hero-kunye dt {
  font-family: var(--yazi-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-light); margin-bottom: .22rem;
}
.hero-kunye dd {
  margin: 0; font-family: var(--yazi-mono); font-weight: 700; color: var(--ink);
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) { .hero-kunye { grid-template-columns: repeat(2,1fr); } }

/* Güven şeridi — hairline, kutu yok */
.hero-guven {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line);
}
.hero-guven > div {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.6rem 1.5rem 1.6rem 0;
  border-right: 1px solid var(--line);
}
.hero-guven > div:last-child { border-right: 0; }
@media (min-width: 640px) { .hero-guven > div + div { padding-left: 1.5rem; } }
.hero-guven svg { width: 1.3rem; height: 1.3rem; color: var(--brand); flex: none; margin-top: .15rem; }
.hero-guven strong {
  display: block; color: var(--ink); font-family: var(--yazi-baslik);
  font-weight: 650; font-size: .9375rem; line-height: 1.3; margin-bottom: .18rem;
}
.hero-guven span { display: block; font-size: var(--t-mini); color: var(--steel); line-height: 1.4; }

/* ===========================================================================
   EDİTORYAL BÖLÜM BAŞLIĞI — asimetrik: başlık solda, açıklama sağda
   =========================================================================== */
.editoryal-bas {
  display: grid; gap: 1.5rem clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .editoryal-bas { grid-template-columns: 1.15fr .85fr; } }
.editoryal-bas h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing: -.03em;
  line-height: 1.08; margin: 0; max-width: 18ch;
}
.editoryal-bas .yan { padding-bottom: .3rem; }
.editoryal-bas .yan p { color: var(--steel); margin-bottom: 1rem; }
.bant-ink .editoryal-bas .yan p, .bant-ink-2 .editoryal-bas .yan p { color: #a2a6c3; }

/* Basit bölüm başlığı (tek sütun) */
.bolum-basi { max-width: 60ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.bolum-basi h2 { font-size: clamp(1.8rem, 3.1vw, 2.75rem); letter-spacing: -.03em; margin-bottom: .6rem; }
.bolum-basi p { color: var(--steel); font-size: 1.0625rem; margin: 0; }
.bant-ink .bolum-basi p, .bant-ink-2 .bolum-basi p { color: #a2a6c3; }

/* Ok'lu metin bağlantısı */
.ok-bag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--t-kucuk); font-weight: 650; text-decoration: none;
  color: var(--ink); padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--sure) var(--gecis), gap var(--sure) var(--gecis);
}
.ok-bag svg { width: .9rem; height: .9rem; transition: translate 260ms var(--gecis); }
.bant-ink .ok-bag, .bant-ink-2 .ok-bag, .hero .ok-bag { color: #fff; border-color: rgba(255,255,255,.3); }
@media (hover: hover) and (pointer: fine) {
  .ok-bag:hover { color: var(--brand); border-color: var(--brand); }
  .ok-bag:hover svg { translate: 4px 0; }
}

/* ===========================================================================
   FOTOĞRAF KARTI — aydınlık bağlam: görsel üstte, metin altta beyaz yüzeyde
   =========================================================================== */
.foto-serit { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem);
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.foto-kart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border-radius: var(--r-md); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
  transition: box-shadow var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.foto-kart .resim { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.foto-kart .resim img { width: 100%; height: 100%; object-fit: cover;
                        transition: scale 1100ms var(--gecis); }
.foto-kart .govde { padding: clamp(1.15rem, 2vw, 1.5rem); }
.foto-kart .no {
  font-family: var(--yazi-mono); font-size: .7rem; font-weight: 600;
  color: var(--brand); letter-spacing: .12em; display: block; margin-bottom: .5rem;
}
.foto-kart h3 { font-size: var(--t-baslik3); margin-bottom: .35rem; }
.foto-kart p { color: var(--steel); font-size: var(--t-mini); margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .foto-kart:hover { transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--golge-lifted); }
  .foto-kart:hover .resim img { scale: 1.05; }
}

/* ===========================================================================
   EDİTORYAL LİSTE — numaralı, hairline ayraçlı. Kutu YOK.
   =========================================================================== */
.liste-editoryal { border-top: 1px solid var(--line); }
.bant-ink .liste-editoryal, .bant-ink-2 .liste-editoryal { border-color: rgba(255,255,255,.14); }

.liste-editoryal > * {
  display: grid; gap: .35rem 1.75rem; align-items: baseline;
  grid-template-columns: auto 1fr;
  padding: clamp(1.25rem, 2.4vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.bant-ink .liste-editoryal > *, .bant-ink-2 .liste-editoryal > * { border-color: rgba(255,255,255,.14); }
@media (min-width: 780px) {
  .liste-editoryal > * { grid-template-columns: 3.5rem 1fr 1.25fr; gap: 0 2.5rem; align-items: start; }
}
.liste-editoryal .no {
  font-family: var(--yazi-mono); font-size: var(--t-mini); font-weight: 600;
  color: var(--steel-light); padding-top: .35rem; font-variant-numeric: tabular-nums;
}
.liste-editoryal h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 0; letter-spacing: -.02em;
  transition: color var(--sure) var(--gecis);
}
.bant-ink .liste-editoryal h3 { color: #fff; }
.liste-editoryal p { color: var(--steel); font-size: var(--t-kucuk); margin: 0; }
.bant-ink .liste-editoryal p { color: #9da1bf; }
@media (hover: hover) and (pointer: fine) {
  a.liste-oge:hover h3 { color: var(--brand); }
}

/* ===========================================================================
   IZGARALAR & İKİLİ DÜZEN
   =========================================================================== */
.izgara { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.izgara-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.ikili { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .ikili { grid-template-columns: 1.05fr .95fr; }
  .ikili-ters > :first-child { order: 2; }
}

/* Tam genişlik görsel bandı */
.genis-gorsel {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--mist-deep);
  box-shadow: var(--golge-lifted);
  aspect-ratio: 21 / 9;
}
.genis-gorsel img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .genis-gorsel { aspect-ratio: 16 / 10; } }

.gorsel-kuyu {
  border-radius: var(--r-md); overflow: hidden; background: var(--mist-deep);
  box-shadow: var(--golge-lifted);
}
.gorsel-kuyu img { width: 100%; height: 100%; object-fit: cover; }

/* Kesik çizgili teknik özellik satırı */
.ozellik-satir {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .85rem 0; border-bottom: 1px dashed var(--line-strong);
}
.ozellik-satir:last-child { border-bottom: 0; }
.ozellik-satir dt { color: var(--steel); font-size: var(--t-kucuk); flex: none; }
.ozellik-satir .nokta { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); translate: 0 -.25em; }
.ozellik-satir dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--ink);
  font-family: var(--yazi-mono); font-variant-numeric: tabular-nums; font-size: var(--t-kucuk);
}

/* Rozet */
.rozet {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); color: var(--ink);
  font-size: var(--t-mini); font-weight: 600;
  padding: .55rem .9rem; border-radius: 100px;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
}
.rozet svg { width: 1rem; height: 1rem; color: var(--brand); flex: none; }
.bant-ink .rozet, .bant-ink-2 .rozet {
  background: rgba(255,255,255,.07); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* İstatistik */
.sayi { font-family: var(--yazi-baslik); font-size: clamp(2.1rem, 3.6vw, 3rem);
        font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.035em;
        font-variant-numeric: tabular-nums; }
.bant-ink .sayi, .bant-ink-2 .sayi { color: #fff; }
.sayi + span { display: block; margin-top: .5rem; font-size: var(--t-kucuk); color: var(--steel); }
.bant-ink .sayi + span { color: #9da1bf; }

/* ===========================================================================
   SAYFA BAŞLIĞI (iç sayfalar) — aydınlık, hairline
   =========================================================================== */
.sayfa-basi {
  position: relative;
  background: linear-gradient(180deg, #ffffff, var(--paper));
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(3rem, 6vw, 4.5rem);
}
.sayfa-basi-ic { display: grid; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; }
@media (min-width: 900px) { .sayfa-basi-ic { grid-template-columns: 1.15fr .85fr; } }
.sayfa-basi h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -.032em;
  margin: 0; max-width: 17ch;
}
.sayfa-basi p { color: var(--steel); max-width: 56ch; font-size: 1.0625rem; margin: 0; }

.kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-mini); color: var(--steel-light); margin-bottom: 1.35rem;
}
.kirinti a { color: var(--steel); text-decoration: none; }
.kirinti a:hover { color: var(--brand); }
.kirinti svg { width: .7rem; height: .7rem; opacity: .5; }

/* ===========================================================================
   ÜRÜN
   =========================================================================== */
.urun-kart { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.urun-kart-gorsel {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, var(--mist) 78%);
  padding: 1.75rem;
}
.urun-kart-gorsel img { max-height: 100%; width: auto; object-fit: contain;
                        filter: drop-shadow(0 16px 26px rgba(0,0,0,.55)); }
.urun-kart-govde { padding: clamp(1.35rem, 2.2vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.urun-kart-govde h3 { margin-bottom: .35rem; }
.urun-kart-govde p { color: var(--steel); font-size: var(--t-kucuk); flex: 1; }
.urun-ust { font-family: var(--yazi-mono); font-size: var(--t-mini); text-transform: uppercase;
            letter-spacing: .12em; color: var(--brand); margin-bottom: .5rem; }

.urun-sahne {
  position: relative; display: grid; place-items: center; padding: clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #e9eef6 80%);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
}
.urun-sahne::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(46,42,92,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(46,42,92,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000, transparent 75%);
}
.urun-sahne img { position: relative; max-height: 470px; width: auto;
                  filter: drop-shadow(0 26px 34px rgba(18,17,42,.22)); max-height: 440px; }

.urun-galeri { display: flex; gap: .6rem; margin-top: .9rem; }
.urun-galeri button {
  flex: 1; aspect-ratio: 1; padding: .55rem; cursor: pointer;
  background: radial-gradient(ellipse at 50% 42%, #fff, var(--mist) 80%);
  border: 0; border-radius: var(--r-sm); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--sure) var(--gecis);
}
.urun-galeri button[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--brand); }
.urun-galeri img { max-height: 100%; width: auto; }

/* Uyarı kutusu */
.uyari-kutu {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  background: #fff7ed; border-radius: var(--r-md); padding: 1.35rem 1.5rem;
  box-shadow: inset 0 0 0 1px #f5d9b4;
}
.uyari-kutu svg { width: 1.4rem; height: 1.4rem; color: var(--uyari); flex: none; margin-top: .1rem; }
.uyari-kutu p { font-size: var(--t-kucuk); color: #7a4a10; margin: 0 0 .4rem; }
.uyari-kutu p:last-child { margin-bottom: 0; }
.uyari-kutu strong { color: #5e3a0c; }

/* ===========================================================================
   KART (genel yüzey)
   =========================================================================== */
.kart {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  transition: box-shadow var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.kart-ink {
  background: linear-gradient(160deg, #201d48, var(--ink));
  color: #b9bcd6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--golge-lifted);
}
.kart-ink h3, .kart-ink h4 { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  a.kart:hover, .kart-etkilesimli:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--golge-lifted);
  }
}

.deger-ikon {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand); border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
}
.deger-ikon svg { width: 21px; height: 21px; }

/* Numaralı adım */
.adim { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.adim-no {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff; border-radius: 50%;
  font-family: var(--yazi-mono); font-weight: 700; font-size: 1rem;
}
.adim h3 { margin-bottom: .4rem; }
.adim p { color: var(--steel); margin: 0; }
.kart-ink.adim p { color: #9da1bf; }

/* ===========================================================================
   CTA — sitedeki tek koyu bant. Vurgu burada.
   =========================================================================== */
.cta-bant {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink-3) 0%, var(--ink) 62%);
  color: #c8cbe2;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cta-bant::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 78%);
}
.cta-bant::after {
  content: ''; position: absolute; width: 640px; height: 640px; right: -180px; top: -220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(208,25,42,.28), transparent 66%); filter: blur(70px);
}
.cta-ic { position: relative; text-align: center; max-width: 50rem; margin-inline: auto; }
.cta-bant h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.03em; margin-bottom: .9rem; }
.cta-bant p { color: #b5b9d4; max-width: 56ch; margin: 0 auto 2rem; font-size: 1.0625rem; }
.cta-eylem { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ===========================================================================
   ALT BİLGİ — aydınlık. Logo tam renkli oturur.
   =========================================================================== */
.altbilgi {
  background: #ffffff; color: var(--steel); font-size: var(--t-kucuk);
  border-top: 1px solid var(--line);
}
.altbilgi-tepe {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(2.75rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .altbilgi-tepe { grid-template-columns: 1.5fr auto; } }
.altbilgi-tepe img.logo { height: 44px; width: auto; margin-bottom: 1.25rem; }
.altbilgi-tepe p { color: var(--steel); max-width: 52ch; margin: 0; }

/* Öne çıkan iletişim kartı */
.altbilgi-kart {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.35rem 1.6rem; border-radius: var(--r-md);
  background: var(--paper); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
  transition: box-shadow var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
.altbilgi-kart .ust { font-size: var(--t-mini); color: var(--steel-light); margin-bottom: .2rem; }
.altbilgi-kart .alt { font-family: var(--yazi-baslik); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.altbilgi-kart svg { width: 1.1rem; height: 1.1rem; color: var(--brand); margin-left: auto; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .altbilgi-kart:hover { transform: translateY(-2px); color: inherit;
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--golge-lifted); }
}

.altbilgi-ust {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.altbilgi h4 {
  color: var(--steel-light); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .16em; margin-bottom: 1.35rem;
  font-family: var(--yazi-mono); font-weight: 600;
}
.altbilgi ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.altbilgi li { margin: 0; line-height: 1.5; }
.altbilgi a { color: var(--steel); text-decoration: none; }
.altbilgi a:hover { color: var(--brand); }
.altbilgi .ince {
  color: var(--steel-light); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; margin-bottom: .25rem; display: block;
}

.altbilgi-alt {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; justify-content: space-between;
  align-items: center; padding-block: 1.75rem; border-top: 1px solid var(--line);
  font-size: var(--t-mini); color: var(--steel-light);
}
.altbilgi-alt a { color: var(--steel-light); }
.altbilgi-alt nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (max-width: 1120px) { .altbilgi-alt { padding-bottom: 5.5rem; } }

/* ===========================================================================
   DUYURU
   =========================================================================== */
.duyuru-kart { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.duyuru-kart .gorsel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-deep); }
.duyuru-kart .gorsel img { width: 100%; height: 100%; object-fit: cover; transition: scale 1100ms var(--gecis); }
@media (hover: hover) and (pointer: fine) { a.duyuru-kart:hover .gorsel img { scale: 1.05; } }
.duyuru-kart .govde { padding: clamp(1.25rem, 2vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.duyuru-tarih { font-family: var(--yazi-mono); font-size: var(--t-mini); color: var(--steel-light);
                font-variant-numeric: tabular-nums; margin-bottom: .55rem; }
.duyuru-kart h3 { font-size: var(--t-baslik3); margin-bottom: .45rem; }
.duyuru-kart p { color: var(--steel); font-size: var(--t-kucuk); flex: 1; margin-bottom: .9rem; }
.devam { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-kucuk);
         font-weight: 650; color: var(--brand); }
.devam svg { width: .85rem; height: .85rem; transition: translate 240ms var(--gecis); }
@media (hover: hover) and (pointer: fine) { a.duyuru-kart:hover .devam svg { translate: 3px 0; } }

/* Zengin metin */
.metin { max-width: 72ch; }
.metin h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.metin h3 { margin-top: 2rem; }
.metin > :first-child { margin-top: 0; }
.metin img { border-radius: var(--r-md); margin-block: 1.6rem; box-shadow: var(--golge-raised); }
.metin blockquote {
  margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--brand); color: var(--ink); font-size: 1.15rem;
}
.metin table { width: 100%; border-collapse: collapse; margin-block: 1.6rem; font-size: var(--t-kucuk); }
.metin th, .metin td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
.metin th { background: var(--mist); font-weight: 650; color: var(--ink); }

/* 404 */
.dortyuzdort { display: grid; place-items: center; text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.dortyuzdort .kod { font-family: var(--yazi-mono); font-size: clamp(4rem, 14vw, 9rem); font-weight: 700;
                    color: var(--line-strong); line-height: 1; letter-spacing: -.04em; margin-bottom: 1rem; }

/* Ürün listesi — yatay satır (tek ürün dev karta dönüşmesin) */
.urun-liste { display: grid; gap: 1.25rem; }
.urun-satir {
  display: grid; gap: 0; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--golge-raised);
  transition: box-shadow var(--sure) var(--gecis), transform var(--sure) var(--gecis);
}
@media (min-width: 860px) { .urun-satir { grid-template-columns: 380px 1fr; } }
.urun-satir-gorsel {
  display: grid; place-items: center; padding: 2rem; min-height: 320px;
  background: radial-gradient(ellipse at 50% 42%, #fff 0%, var(--mist) 80%);
}
.urun-satir-gorsel img { max-height: 300px; width: auto; filter: drop-shadow(0 20px 28px rgba(18,17,42,.2)); }
.urun-satir-govde { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.urun-satir-govde h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-bottom: .6rem; }
.urun-satir-govde p { color: var(--steel); max-width: 58ch; margin-bottom: 1.35rem; }
.urun-satir-rozet { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
.urun-satir .ok-bag { align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .urun-satir:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--golge-lifted); }
  .urun-satir:hover .ok-bag { color: var(--brand); border-color: var(--brand); }
}