/* ===========================================================================
   Birlik Balon — Site CSS
   ---------------------------------------------------------------------------
   Mobil öncelikli · Harici font/CDN yok · Sistem yazı tipi yığını
   Renkler config.php'deki $GLOBALS['ayar']['renk'] ile eşleşir.
   =========================================================================== */

/* --- 1. Tokenlar ---------------------------------------------------------- */
:root {
  --ana:      #E8386D;
  --ana-koyu: #C22356;
  --vurgu:    #7B2CBF;
  --ikincil:  #00B4D8;
  --basari:   #2A9D8F;
  --uyari:    #F4A261;
  --metin:    #1F2933;
  --metin-2:  #52606D;
  --acik:     #F8F9FA;
  --cizgi:    #E4E7EB;
  --beyaz:    #FFFFFF;

  --gokge:    0 1px 2px rgba(31,41,51,.06), 0 4px 16px rgba(31,41,51,.06);
  --gokge-yuk:0 8px 32px rgba(31,41,51,.12);
  --r:        14px;
  --r-k:      10px;
  --kutu:     1200px;
  --gecis:    .2s cubic-bezier(.4,0,.2,1);

  --y-sistem: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
}

/* --- 2. Sıfırlama --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  font-family: var(--y-sistem);
  font-size: 17px;
  line-height: 1.65;
  color: var(--metin);
  background: var(--beyaz);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ana-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; color: var(--metin); font-weight: 750; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2.5rem 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--ikincil); outline-offset: 2px; border-radius: 4px; }

.kutu { width: 100%; max-width: var(--kutu); margin-inline: auto; padding-inline: 18px; }
.bolum { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* Bölüm ritmi: hero → açık → beyaz → açık → beyaz ...
   DİKKAT: nth-of-type ile rastgele degrade EKLENMEZ. .bolum--acik ve
   .bolum--vurgu sınıfları tek kaynaktır; otomatik kural bunları
   ezer ve bölümler dama tahtası gibi karışır. */
.bolum--acik  { background: var(--acik); }
.bolum--vurgu { background: linear-gradient(160deg, #FFF4F8 0%, #F6F0FF 100%); }
.bolum--koyu  { background: linear-gradient(160deg, #FFF8E6 0%, #FFF4F8 100%); }
.bolum__baslik { margin-bottom: .6em; }
.bolum__aciklama { color: var(--metin-2); max-width: 68ch; margin-bottom: 1.8em; }
.bolum__iki { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
.bolum__eylem { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2em; }
.icerik { max-width: 74ch; }
.icerik--acik { max-width: 82ch; }
.icerik h2 { margin-top: 1.8em; }
.icerik h3 { margin-top: 1.4em; }
.icerik p { margin-bottom: 1em; }
.icerik strong { color: var(--metin); }
.bolum__alt-baslik { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.bos-durum { color: var(--metin-2); font-size: 1.05rem; }

/* --- 3. Erişilebilirlik --------------------------------------------------- */
.atlama {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--metin); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-k) 0;
}
.atlama:focus { left: 0; }
.gorsel-etiket {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(31,41,51,.82); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  padding: .3em .7em; border-radius: 4px; pointer-events: none;
}

/* --- 4. Butonlar ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .78em 1.35em; border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: .97rem; line-height: 1.2; text-align: center;
  cursor: pointer; transition: transform var(--gecis), box-shadow var(--gecis),
              background var(--gecis), color var(--gecis);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ana { background: var(--ana); color: #fff; box-shadow: 0 6px 18px rgba(232,56,109,.28); }
.btn--ana:hover { background: var(--ana-koyu); }
.btn--wa { background: #25D366; color: #06340F; box-shadow: 0 6px 18px rgba(37,211,102,.3); }
.btn--wa:hover { background: #1EBE5A; }
.btn--tel { background: var(--vurgu); color: #fff; }
.btn--tel:hover { background: #642093; }
.btn--kenarlik { background: transparent; border-color: var(--cizgi); color: var(--metin); }
.btn--kenarlik:hover { border-color: var(--metin); }
.btn--kucuk { padding: .55em 1em; font-size: .87rem; }
.btn--buyuk { padding: .95em 1.7em; font-size: 1.03rem; }
.btn--genis { width: 100%; }

/* --- 5. Üst bar ----------------------------------------------------------- */
.ust-bar { background: var(--metin); color: #E4E7EB; font-size: .86rem; }
.ust-bar__ic { display: flex; align-items: center; gap: 1rem; min-height: 42px; }
.ust-bar__tel { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
.ust-bar__adres { margin: 0; display: none; align-items: center; gap: .4em; opacity: .85; }
.ust-bar .btn { margin-left: auto; }
@media (min-width: 900px) { .ust-bar__adres { display: flex; } }

/* --- 6. Üst menü ---------------------------------------------------------- */
.ust-menu {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis);
}
.ust-menu--kaydirildi { box-shadow: var(--gokge); }
.ust-menu__ic { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.logo { flex-shrink: 0; }
.logo img { height: 40px; width: auto; }

.menu-masaustu { display: none; }
@media (min-width: 992px) {
  .menu-masaustu { display: block; margin-inline: auto; }
  .menu-liste { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
  .menu-oge { position: relative; }
  .menu-oge > a {
    display: inline-flex; align-items: center; gap: .3em;
    padding: .7rem .8rem; border-radius: var(--r-k);
    font-size: .95rem; font-weight: 650; color: var(--metin);
  }
  .menu-oge > a:hover { background: var(--acik); color: var(--ana-koyu); text-decoration: none; }
  .menu-oge--aktif > a { color: var(--ana-koyu); }
  .menu-ok { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
             transform: rotate(45deg) translateY(-2px); transition: transform var(--gecis); }
  .menu-oge:hover .menu-ok, .menu-oge:focus-within .menu-ok { transform: rotate(225deg) translateY(-2px); }

  /* Hover boşluğu YOK: menü butonun kendi dolgusu üzerinden açılır */
  .menu-alt {
    position: absolute; top: 100%; left: 0; min-width: 320px;
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
    box-shadow: var(--gokge-yuk); padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  }
  /* 1px komşuluk: imleç butondan menüye geçerken boşluk oluşmaz */
  .menu-alt::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 2px; }
  .menu-oge:hover > .menu-alt, .menu-oge:focus-within > .menu-alt {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .menu-alt ul { list-style: none; margin: 0; padding: 0; }
  .menu-alt a {
    display: block; padding: .6rem .75rem; border-radius: var(--r-k);
  }
  .menu-alt a:hover { background: var(--acik); text-decoration: none; }
  .menu-alt__ad { display: block; font-weight: 700; font-size: .95rem; color: var(--metin); }
  .menu-alt__aciklama { display: block; font-size: .82rem; color: var(--metin-2); line-height: 1.4; margin-top: .1em; }
}

.ust-menu__eylem { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
@media (min-width: 992px) { .ust-menu__eylem { margin-left: 0; } .ust-menu__ic .btn--wa { display: none; } }
@media (max-width: 991px) { .ust-menu__eylem .btn--wa { display: none; } }

.menu-dugme {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: var(--acik); border: 1px solid var(--cizgi); border-radius: var(--r-k);
}
.menu-cubuk { display: block; width: 22px; height: 2px; margin-inline: auto; background: var(--metin); border-radius: 2px;
              transition: transform var(--gecis), opacity var(--gecis); }
@media (min-width: 992px) { .menu-dugme { display: none; } }

/* --- 7. Mobil menü -------------------------------------------------------- */
.mobil-menu { position: fixed; inset: 0; z-index: 300; }
.mobil-menu[hidden] { display: none; }
.mobil-menu__perde { position: absolute; inset: 0; background: rgba(31,41,51,.5); opacity: 0; transition: opacity var(--gecis); }
.mobil-menu.acik .mobil-menu__perde { opacity: 1; }
.mobil-menu__panel {
  position: absolute; inset-block: 0; right: 0; width: min(92vw, 400px);
  background: #fff; box-shadow: var(--gokge-yuk);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobil-menu.acik .mobil-menu__panel { transform: translateX(0); }
.mobil-menu__ust { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--cizgi); }
.mobil-menu__kapat { width: 44px; height: 44px; font-size: 2rem; line-height: 1; background: var(--acik);
                     border: 1px solid var(--cizgi); border-radius: var(--r-k); cursor: pointer; color: var(--metin); }
.mobil-menu__liste { list-style: none; margin: 0; padding: .5rem 0; }
.mobil-menu__liste > li { border-bottom: 1px solid var(--cizgi); }
.mobil-menu__liste > li > a, .mobil-menu__satir > a {
  display: block; padding: .95rem 1.1rem; font-weight: 700; color: var(--metin);
}
.mobil-menu__satir { display: flex; align-items: stretch; }
.mobil-menu__satir > a { flex: 1; }
.mobil-menu__ac {
  width: 54px; border: 0; border-left: 1px solid var(--cizgi); background: var(--acik);
  cursor: pointer; position: relative;
}
.mobil-menu__ac span { position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
  border-right: 2px solid var(--metin); border-bottom: 2px solid var(--metin);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--gecis); }
.mobil-menu__ac[aria-expanded="true"] span { transform: rotate(225deg) translateY(-3px); }
.mobil-menu__alt { list-style: none; margin: 0; padding: 0 0 .5rem; background: var(--acik); }
.mobil-menu__alt[hidden] { display: none; }
.mobil-menu__alt a { display: block; padding: .7rem 1.1rem .7rem 1.7rem; font-size: .95rem; color: var(--metin-2); }
.mobil-menu__alt-cta { margin-top: auto; padding: 1.1rem; display: grid; gap: .6rem; border-top: 1px solid var(--cizgi); }

/* --- 8. Hero -------------------------------------------------------------- */
.hero { background: linear-gradient(155deg, #FFF1F6 0%, #F3EDFF 55%, #EAF9FC 100%); padding-block: clamp(2.2rem, 6vw, 4.2rem); }
.hero__ic { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hero__ic { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.hero__rozet { display: inline-block; background: #fff; border: 1px solid var(--cizgi); color: var(--ana-koyu);
               font-size: .82rem; font-weight: 700; padding: .35em .9em; border-radius: 999px; margin: 0 0 1rem; }
.hero__baslik { font-size: clamp(1.95rem, 5.4vw, 3.2rem); margin-bottom: .5em; }
.hero__alt { font-size: clamp(1rem, 2.2vw, 1.13rem); color: var(--metin-2); max-width: 58ch; }
.hero__eylem { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4em 0; }
.hero__adres { font-size: .92rem; color: var(--metin-2); margin: 0; }
.hero__gorsel { position: relative; }
.hero__gorsel img { width: 100%; border-radius: var(--r); box-shadow: var(--gokge-yuk); }

/* --- 9. Kartlar ----------------------------------------------------------- */
.kart-izgara { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kart-izgara--kucuk { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kart {
  position: relative; display: block; background: #fff; border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 1.1rem; color: var(--metin);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kart:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--gokge-yuk); border-color: var(--ana); }
/* position:relative ŞART: .gorsel-etiket (TEMSİLİ) absolute konumlanıyor.
   Bu olmadan .kart (position:relative) referans alınır ve rozet kartın
   en altına düşüp açıklama metnini örter. */
.kart__gorsel { position: relative; display: block; margin-bottom: .85rem; border-radius: var(--r-k); overflow: hidden; background: var(--acik); }
.kart__gorsel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s ease; }
.kart:hover .kart__gorsel img { transform: scale(1.04); }
.kart__baslik { display: block; font-weight: 750; font-size: 1.06rem; margin-bottom: .25rem; padding-right: 1.6rem; }
.kart__aciklama { display: block; font-size: .9rem; color: var(--metin-2); line-height: 1.5; padding-right: 1.6rem; }
.kart__ok { position: absolute; right: 1.1rem; bottom: 1.1rem; color: var(--ana); font-weight: 700; transition: transform var(--gecis); }
.kart:hover .kart__ok { transform: translateX(4px); }

.baglanti-satiri { display: flex; flex-wrap: wrap; gap: .7rem; }
.baglanti-kutu { display: inline-block; background: #fff; border: 1px solid var(--cizgi); border-radius: 999px;
                 padding: .6em 1.15em; font-weight: 650; font-size: .94rem; color: var(--metin);
                 transition: all var(--gecis); }
.baglanti-kutu:hover { border-color: var(--ana); color: var(--ana-koyu); text-decoration: none; transform: translateY(-2px); }

.madde-liste { list-style: none; padding: 0; }
.madde-liste li { position: relative; padding-left: 1.6em; margin-bottom: .5em; }
.madde-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ana); }
.madde-liste--sutun { columns: 2; column-gap: 2.5rem; }
@media (max-width: 700px) { .madde-liste--sutun { columns: 1; } }

.adim-liste { counter-reset: adim; list-style: none; padding: 0; }
.adim-liste li { counter-increment: adim; position: relative; padding-left: 2.6em; margin-bottom: .9em; }
.adim-liste li::before { content: counter(adim); position: absolute; left: 0; top: .05em;
  width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ana); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }

/* --- 10. Sayfa başlığı ---------------------------------------------------- */
.sayfa-baslik { background: linear-gradient(160deg, #FFF4F8, #F6F0FF); padding-block: clamp(1.8rem, 4vw, 3rem); }
.sayfa-baslik__ust { font-size: .84rem; font-weight: 700; color: var(--ana-koyu); margin: 0 0 .4em; }
.sayfa-baslik__h1 { margin-bottom: .35em; }
.sayfa-baslik__ozet { font-size: 1.06rem; color: var(--metin-2); max-width: 66ch; margin-bottom: 1.2em; }
.sayfa-baslik__eylem { display: flex; flex-wrap: wrap; gap: .7rem; }
.gorsel-uyari { background: #FFF8E6; border-left: 4px solid var(--uyari); border-radius: var(--r-k);
                padding: .9em 1.1em; font-size: .9rem; color: #6B5320; margin: 1.2em 0 0; }
.gorsel-uyari--kucuk { font-size: .85rem; margin-top: 1em; }

/* --- 11. Kirinti (breadcrumb) -------------------------------------------- */
.kirinti { padding-block: 1rem .2rem; }
.kirinti__liste { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
                  gap: .4rem; margin: 0; padding: 0; font-size: .87rem; color: var(--metin-2); }
.kirinti__liste a { color: var(--metin-2); }
.kirinti__liste a:hover { color: var(--ana-koyu); }
.kirinti__ayrac { color: var(--cizgi); margin: 0 .1rem; }
.kirinti__liste [aria-current] { color: var(--metin); font-weight: 650; }

/* --- 12. Ürün listesi ----------------------------------------------------- */
.urun-izgara { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.urun-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
             overflow: hidden; display: flex; flex-direction: column;
             transition: transform var(--gecis), box-shadow var(--gecis); }
.urun-kart:hover { transform: translateY(-4px); box-shadow: var(--gokge-yuk); }
.urun-kart__gorsel { position: relative; display: block; background: var(--acik); }
.urun-kart__gorsel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.urun-kart__stok { position: absolute; top: 10px; left: 10px; background: var(--metin); color: #fff;
                   font-size: .72rem; font-weight: 700; padding: .3em .7em; border-radius: 999px; }
.urun-kart__ic { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.urun-kart__kategori { font-size: .78rem; font-weight: 700; color: var(--ana-koyu); margin: 0 0 .3em; }
.urun-kart__ad { font-size: 1rem; margin-bottom: .35em; }
.urun-kart__ad a { color: var(--metin); }
.urun-kart__ad a:hover { color: var(--ana-koyu); text-decoration: none; }
.urun-kart__aciklama { font-size: .88rem; color: var(--metin-2); line-height: 1.5; margin-bottom: .6em; flex: 1; }
.urun-kart__sure { font-size: .82rem; color: var(--metin-2); margin: 0 0 .7em; }
.urun-kart__cta { margin: 0; }

.sayfalama { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }
.sayfalama__oge, .sayfalama__aktif { display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .6em; border: 1px solid var(--cizgi);
  border-radius: var(--r-k); font-weight: 650; color: var(--metin); }
.sayfalama__oge:hover { border-color: var(--ana); color: var(--ana-koyu); text-decoration: none; }
.sayfalama__aktif { background: var(--ana); border-color: var(--ana); color: #fff; }

/* --- 13. Ürün detay ------------------------------------------------------- */
.urun-detay { padding-block: 1.5rem 2.5rem; }
.urun-detay__duzen { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .urun-detay__duzen { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.urun-detay__ana { position: relative; border-radius: var(--r); overflow: hidden; background: var(--acik); }
.urun-detay__ana img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.urun-detay__galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-top: .7rem; }
.urun-detay__galeri img { border-radius: var(--r-k); aspect-ratio: 4/3; object-fit: cover; }
.urun-detay__kategori { margin: 0 0 .5em; font-size: .84rem; font-weight: 700; }
.urun-detay__ad { margin-bottom: .4em; }
.urun-detay__ozet { font-size: 1.05rem; color: var(--metin-2); }
.urun-detay__tablo { border-top: 1px solid var(--cizgi); margin: 1.4em 0; }
.urun-detay__tablo > div { display: flex; gap: 1rem; padding: .7em 0; border-bottom: 1px solid var(--cizgi); }
.urun-detay__tablo dt { font-weight: 700; color: var(--metin-2); min-width: 140px; margin: 0; }
.urun-detay__tablo dd { margin: 0; }
.urun-detay__fiyat-notu { background: var(--acik); border-radius: var(--r-k); padding: .9em 1.1em; font-size: .93rem; }
.urun-detay__eylem { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2em 0; }
.urun-detay__ozellik { margin-top: 1.6em; }
.urun-detay__ozellik-baslik { font-size: 1.05rem; }

/* --- 14. SSS -------------------------------------------------------------- */
.sss__liste { display: grid; gap: .7rem; }
.sss__oge { border: 1px solid var(--cizgi); border-radius: var(--r-k); background: #fff; overflow: hidden; }
.sss__soru { cursor: pointer; padding: 1em 3em 1em 1.2em; font-weight: 700; position: relative; list-style: none; }
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru::after { content: ""; position: absolute; right: 1.2rem; top: 1.35em; width: 10px; height: 10px;
  border-right: 2px solid var(--metin-2); border-bottom: 2px solid var(--metin-2);
  transform: rotate(45deg); transition: transform var(--gecis); }
.sss__oge[open] .sss__soru::after { transform: rotate(225deg) translateY(-2px); }
.sss__soru:hover { color: var(--ana-koyu); }
.sss__cevap { padding: 0 1.2em 1.1em; color: var(--metin-2); }
.sss__oge[open] .sss__cevap { animation: acil .28s ease; }
@keyframes acil { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- 15. CTA -------------------------------------------------------------- */
.cta { background: linear-gradient(135deg, var(--vurgu), var(--ana)); color: #fff; padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.cta__ic { display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 900px) { .cta__ic { grid-template-columns: 1.2fr auto; gap: 3rem; } }
.cta__baslik { color: #fff; margin-bottom: .4em; }
.cta__aciklama { color: rgba(255,255,255,.9); max-width: 58ch; }
.cta__adres { font-size: .9rem; color: rgba(255,255,255,.82); margin: 0; }
.cta__eylem { display: flex; flex-wrap: wrap; gap: .7rem; }
.cta .btn--kenarlik { border-color: rgba(255,255,255,.6); color: #fff; }
.cta .btn--kenarlik:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.cta .btn--tel { background: #fff; color: var(--vurgu); }

/* --- 16. Alt bilgi ------------------------------------------------------- */
.alt { background: var(--metin); color: #C8D0D9; padding-top: clamp(2.4rem, 5vw, 3.6rem); font-size: .93rem; }
.alt__ic { display: grid; gap: 2rem; padding-bottom: 2.4rem; }
@media (min-width: 700px) { .alt__ic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .alt__ic { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.alt__sutun--marka img { filter: brightness(0) invert(1); height: 38px; width: auto; margin-bottom: .9rem; }
.alt__slogan { color: #E4E7EB; }
.alt__adres { margin-bottom: 1rem; line-height: 1.8; }
.alt__adres a { color: #E4E7EB; }
.alt__baslik { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .9em; }
.alt__liste { list-style: none; margin: 0; padding: 0; }
.alt__liste li { margin-bottom: .5em; }
.alt__liste a { color: #C8D0D9; }
.alt__liste a:hover { color: #fff; }
.alt__serit { border-top: 1px solid #3E4C59; padding-block: 1.2rem 1.6rem; }
.alt__telif, .alt__uyari { font-size: .82rem; color: #9AA5B1; margin: 0 0 .3em; }

/* --- 17. Mobil alt aksiyon çubuğu --------------------------------------- */
.alt-eylem {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 150;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-top: 1px solid var(--cizgi); box-shadow: 0 -2px 12px rgba(31,41,51,.08);
}
.alt-eylem__oge { display: flex; flex-direction: column; align-items: center; justify-content: center;
                   gap: .1em; padding: .55rem .2rem; font-size: .76rem; font-weight: 700; color: var(--metin); }
.alt-eylem__oge span { font-size: 1.2rem; line-height: 1; }
.alt-eylem__oge--wa { color: #128C3E; }
@media (min-width: 992px) { .alt-eylem { display: none; } }
@media (max-width: 991px) {
  body { padding-bottom: 58px; }
  .alt { padding-bottom: 1rem; }
}

/* --- 18. Hata sayfası ----------------------------------------------------- */
.hata-sayfa { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.hata-sayfa__kod { font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 800; line-height: 1;
                   color: var(--cizgi); margin: 0; }
.hata-sayfa__baslik { margin: .3em 0 .4em; }
.hata-sayfa__aciklama { color: var(--metin-2); max-width: 56ch; margin-inline: auto; }
.hata-sayfa__eylem { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 1.8em 0; }
.hata-sayfa__baglantilar { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.hata-sayfa__baglantilar a { display: inline-block; padding: .5em 1em; border: 1px solid var(--cizgi);
                             border-radius: 999px; color: var(--metin); font-size: .9rem; }
.hata-sayfa__baglantilar a:hover { border-color: var(--ana); color: var(--ana-koyu); text-decoration: none; }

/* --- 19a. Kaydırma animasyonları (temel) ------------------------------ */
.gorunur {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1);
}
.gorunur--acik { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
  .gorunur { opacity: 1; transform: none; }
}

/* --- 19. Animasyon ve dekor ------------------------------------------- */

/* Kaydırmayla görünür olma — JS otomatik uygular */
.gorunur {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1) var(--gecikme, 0ms),
    transform .7s cubic-bezier(.16, 1, .3, 1) var(--gecikme, 0ms),
    box-shadow .25s ease, border-color .25s ease;
  will-change: opacity, transform;
}
.gorunur--acik { opacity: 1; transform: none; }

/* Hero giriş — sayfa açılışında kademeli */
.hero-giris {
  opacity: 0;
  animation: heroGiris .85s cubic-bezier(.16, 1, .3, 1) var(--gecikme, 0ms) forwards;
}
@keyframes heroGiris {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Görsel yumuşak yükleme (blur-up) */
.gorsel-yumusak {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.03);
  transition: opacity .6s ease, filter .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.gorsel-hazir { opacity: 1; filter: none; transform: none; }

/* Hero arka planı: yavaş akan renkli lekeler */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.hero::before {
  width: 460px; height: 460px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(232,56,109,.30), transparent 68%);
  animation: lekeA 17s ease-in-out infinite alternate;
}
.hero::after {
  width: 520px; height: 520px;
  bottom: -240px; right: -140px;
  background: radial-gradient(circle, rgba(123,44,191,.26), transparent 68%);
  animation: lekeB 21s ease-in-out infinite alternate;
}
@keyframes lekeA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(90px, 60px, 0) scale(1.18); }
}
@keyframes lekeB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-80px, -50px, 0) scale(.92); }
}

/* Hero'da yüzen balonlar */
.hero-balon {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  animation: yuz 14s ease-in-out infinite;
}
@keyframes yuz {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(14px, -26px, 0) rotate(4deg); }
  50%      { transform: translate3d(-10px, -48px, 0) rotate(-3deg); }
  75%      { transform: translate3d(-20px, -22px, 0) rotate(2deg); }
}

/* --- Tek kolonlu metin bölümlerinde masaüstü dengesi --------------------
   Ölçüm sonucu: .kutu 1200px, metin bloğu 751px → ~450px boş dikey şerit.
   Metin sola sabitlenir, sağa dekoratif balon kompozisyonu girer.
   Mobilde süsleme gizlenir; metin akışı değişmez. */
.metin-satir { display: grid; gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
.metin-satir__metin { min-width: 0; }
@media (min-width: 860px) {
  .metin-satir { grid-template-columns: minmax(0, 1fr) clamp(200px, 26%, 300px); }
}
.metin-satir__susle { display: none; position: relative; min-height: 220px; pointer-events: none; }
@media (min-width: 860px) { .metin-satir__susle { display: block; } }

.susle-halka {
  position: absolute; left: 50%; top: 50%;
  width: 188px; height: 188px;
  margin: -94px 0 0 -94px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(232,56,109,.15), rgba(100,32,147,.07) 56%, transparent 72%);
  border: 1px solid rgba(232,56,109,.13);
}
.susle-halka::after {
  content: ""; position: absolute; inset: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(100,32,147,.2);
  animation: don 46s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.susle-balon { position: absolute; opacity: .9; will-change: transform; }
.susle-balon--1 { left: 10%;  top: 4%;  width: 76px; animation: yuz 12s ease-in-out infinite; }
.susle-balon--2 { right: 6%; top: 30%; width: 58px; animation: yuz 15s ease-in-out infinite -5s; }
.susle-balon--3 { left: 26%; top: 50%; width: 66px; animation: yuz 18s ease-in-out infinite -9s; }

/* Başlıklarda degrade vurgu */
.bolum__baslik { position: relative; }
.bolum__baslik::after {
  content: "";
  display: block;
  width: 54px; height: 4px;
  margin-top: .55em;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ana), var(--vurgu));
  animation: cizgiGir .8s cubic-bezier(.16, 1, .3, 1) .2s backwards;
}
@keyframes cizgiGir { from { width: 0; opacity: 0; } to { width: 54px; opacity: 1; } }

/* Kartlarda üst vurgu çizgisi */
.kart { overflow: hidden; }
.kart::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ana), var(--vurgu), var(--ikincil));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.kart:hover::before, .kart:focus-visible::before { transform: scaleX(1); }

/* Buton parlama parıltısı */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover::after { left: 130%; }

/* Kategori/ürün kartı görselinde yavaş yakınlaşma */
.kart__gorsel img,
.urun-kart__gorsel img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.kart:hover .kart__gorsel img,
.urun-kart:hover .gorsel img { transform: scale(1.07); }

/* Sıra numaraları için adım listesi animasyonu */
.adim-liste li { transition: transform .3s ease; }
.adim-liste li:hover { transform: translateX(6px); }
.adim-liste li::before { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
.adim-liste li:hover::before { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(232,56,109,.15); }

/* WhatsApp butonu nabız */
.btn--wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: nabiz 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Yukarı çık butonu */
.yukari-btn {
  position: fixed;
  right: 18px; bottom: 82px;
  width: 46px; height: 46px;
  border: 1px solid var(--cizgi);
  background: #fff;
  color: var(--metin);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--gokge-yuk);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
  z-index: 140;
}
.yukari-btn--gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari-btn:hover { background: var(--ana); color: #fff; border-color: var(--ana); }
@media (min-width: 992px) { .yukari-btn { bottom: 26px; } }
@media (max-width: 991px) { .yukari-btn { bottom: 74px; right: 12px; width: 42px; height: 42px; } }

/* Menü açıkken sayfa kayması */
body.kaydirma-kilitli { overflow: hidden; }

/* Bölüm başlıklarının giriş animasyonu için başlangıç durumu */
.bolum__baslik, .sayfa-baslik__h1 { animation: cizgiGir .6s ease backwards; }

/* Hareket azaltma tercihi — her şey sabit */
@media (prefers-reduced-motion: reduce) {
  .gorunur, .hero-giris, .gorsel-yumusak { opacity: 1 !important; transform: none !important;
    filter: none !important; animation: none !important; }
  .hero::before, .hero::after, .hero-balon, .btn--wa::before,
  .susle-balon, .susle-halka::after { animation: none !important; }
  .kart:hover, .urun-kart:hover, .btn:hover, .baglanti-kutu:hover { transform: none !important; }
  .yukari-btn { transition: opacity .2s ease, visibility .2s ease; transform: none !important; }
}

/* --- 20. Yazdırma -------------------------------------------------------- */
@media print {
  .ust-bar, .ust-menu, .mobil-menu, .alt-eylem, .cta, .alt, .yukari-btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .gorunur { opacity: 1 !important; transform: none !important; }
}