/* Feron Scripts — kategori, urun ve sepet sayfalari. */

/* Kategori */
.fx-kat { padding-top: 32px; }
.fx-iz { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--s-kucuk); color: var(--soluk); margin-bottom: 20px; }
.fx-iz a { color: var(--soluk); text-decoration: none; }
.fx-iz a:hover { color: var(--metin); }
.fx-kat-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.fx-kat-bas h1 { font-size: var(--s-dev); line-height: .84; }
.fx-kat-aciklama { color: var(--soluk); max-width: 60ch; }
.fx-arac-cubugu { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.fx-filtre { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-sirala { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--soluk); }
.fx-sirala select { height: 48px; padding: 0 12px; background: var(--panel); color: var(--metin); border: 0; border-radius: 0; font-size: var(--s-govde); }
.fx-sayi { color: var(--soluk); font-variant-numeric: tabular-nums; }
.fx-bos { padding: 48px 0; color: var(--soluk); }

/* Urun sayfasi */
.fx-urun { padding-top: 24px; }
.fx-urun-izgara { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); grid-template-areas: "medya satin" "alt satin";
  gap: 0 4px; align-items: start; }
.fx-medya { grid-area: medya; background: var(--panel); padding: 4px; }
.fx-satin { grid-area: satin; }
.fx-urun-alt { grid-area: alt; min-width: 0; padding: 56px 48px 0 0; }
.fx-medya-sahne { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.fx-medya-sahne img, .fx-medya-sahne iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.fx-oynat { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .3); border: 0; cursor: pointer; }
.fx-oynat span { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 26px; background: var(--vurgu); color: var(--vurgu-murekkep);
  font: 800 var(--s-orta)/1 var(--baslik); text-transform: var(--harf); transition: transform .2s var(--gecis); }
.fx-oynat:hover span { transform: scale(1.05); }
.fx-oynat .lucide { fill: currentColor; }
.fx-medya-kucuk { display: flex; gap: 4px; margin-top: 4px; }
.fx-medya-kucuk button { position: relative; width: 132px; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: #000; opacity: .55; }
.fx-medya-kucuk button img { width: 100%; height: 100%; object-fit: cover; }
.fx-medya-kucuk button.is-aktif, .fx-medya-kucuk button:hover { opacity: 1; outline: 3px solid var(--metin); outline-offset: -3px; }
.fx-medya-kucuk .lucide { position: absolute; inset: 0; margin: auto; color: #fff; }

.fx-satin { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--panel); }
.fx-urun-ad { font-size: var(--s-baslik); }
.fx-urun-alt-ad { margin-top: -6px; color: var(--soluk); font-size: var(--s-orta); line-height: 1.3; }
.fx-urun-fiyat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.fx-urun-fiyat .fx-fiyat-yeni { font-size: clamp(48px, 4.4vw, 72px); line-height: .9; }
.fx-urun-fiyat .fx-fiyat-yeni small { font-size: var(--s-orta); }
.fx-urun-fiyat .fx-fiyat-eski { font-size: var(--s-orta); }
.fx-urun-fiyat .fx-etiket { background: var(--vurgu); color: var(--vurgu-murekkep); padding: 2px 8px; font-weight: 700; }
.fx-tasarruf { color: var(--vurgu-acik); font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-varyant { display: flex; flex-direction: column; gap: 14px; }
.fx-varyant-grup { display: flex; flex-direction: column; gap: 6px; }
.fx-varyant-ad { color: var(--soluk); font-size: var(--s-kucuk); font-weight: 600; }
.fx-varyant-secenek { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; }
.fx-varyant-secenek a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-2); color: var(--metin); text-decoration: none;
  font-weight: 700; line-height: 1.2; }
.fx-varyant-secenek a small { color: var(--soluk); font-weight: 500; font-variant-numeric: tabular-nums; }
.fx-varyant-secenek a:hover { background: var(--panel-3); text-decoration: none; }
.fx-varyant-secenek a.is-aktif { background: var(--metin); color: var(--murekkep); }
.fx-varyant-secenek a.is-aktif small { color: #4a4f57; }
.fx-satin-eylem { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fx-link-kucuk { color: var(--soluk); font-size: var(--s-kucuk); }
.fx-not { color: var(--soluk); font-size: var(--s-kucuk); }
.fx-satin-guven { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--soluk); }
.fx-satin-guven li { display: flex; align-items: center; gap: 10px; }
.fx-satin-guven .lucide { color: var(--yesil); }
.fx-satin-bag { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-link-ikon { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; background: var(--panel-2); color: var(--metin);
  text-decoration: none; font-weight: 600; font-size: var(--s-kucuk); }
.fx-link-ikon:hover { background: var(--panel-3); text-decoration: none; }
.fx-son-alim { display: flex; align-items: center; gap: 8px; font-size: var(--s-kucuk); color: var(--soluk); }
.fx-son-alim b { color: var(--metin); }
.fx-hediye summary { cursor: pointer; color: var(--soluk); font-weight: 600; }
.fx-hediye form, .fx-kupon-form { display: flex; gap: 4px; margin-top: 10px; }
.fx-hediye input, .fx-kupon-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; }

.fx-bolum-menu { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 40px; padding: 4px 0; background: var(--zemin); }
.fx-bolum-menu a { padding: 8px 12px; background: var(--panel); color: var(--soluk); text-decoration: none; font-weight: 600; font-size: var(--s-kucuk); }
.fx-bolum-menu a:hover, .fx-bolum-menu a.is-aktif { background: var(--metin); color: var(--murekkep); }
.fx-metin { font-size: var(--s-govde); line-height: 1.6; }
.fx-metin > * { max-width: 68ch; }
.fx-metin h2, .fx-metin h3 { font-size: var(--s-baslik); margin: 1.4em 0 .4em; }
.fx-metin h4 { font-size: var(--s-orta); margin: 1.4em 0 .4em; }
.fx-metin p { margin-bottom: 1em; }
.fx-metin a { color: var(--vurgu-acik); }
.fx-metin ul { padding-left: 1.2em; }
.fx-metin li { margin-bottom: .35em; }
.fx-metin li::marker { color: var(--vurgu); }
.fx-metin code { background: var(--panel-2); padding: 2px 6px; font-size: .92em; }
.fx-aciklama > :first-child { margin-top: 0; }
.fx-aciklama ul.fx-ozellik { columns: 2 300px; column-gap: 40px; max-width: none; padding: 0; list-style: none; }
.fx-aciklama ul.fx-ozellik li { position: relative; break-inside: avoid; margin: 0 0 14px; padding-left: 28px; }
.fx-aciklama ul.fx-ozellik li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 13px; height: 7px; border-left: 3px solid var(--yesil);
  border-bottom: 3px solid var(--yesil); transform: rotate(-45deg); }
.fx-aciklama ul.fx-ozellik strong, .fx-aciklama ul.fx-ozellik b { color: #fff; }
.fx-sss-dar { display: block; padding: 96px 0 0; }
.fx-sss-dar h2 { margin-bottom: 24px; }
.fx-bilet-ic { padding-top: 96px; }
.fx-bilet-ic h2 { font-size: var(--s-baslik); margin-bottom: 24px; }
.fx-bilet-ic .fx-bilet-fiyat b { font-size: var(--s-baslik); }
.fx-bilet-ic .fx-bilet-ana { flex-direction: column; align-items: stretch; }
.fx-benzer { padding-top: 160px; }
.fx-benzer h2 { font-size: var(--s-baslik); margin-bottom: 24px; }
.fx-satirlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.fx-satirlar .fx-kart { background: var(--panel); }
.fx-satirlar .fx-modul-odemeler { display: none; }

.fx-yapiskan { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--kenar) calc(10px + env(safe-area-inset-bottom)); background: var(--panel-2); box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, .7);
  transform: translateY(calc(100% + 32px)); transition: transform .35s var(--gecis); }
.fx-yapiskan.is-gorunur { transform: none; }
.fx-yapiskan-ic { display: flex; flex-direction: column; min-width: 0; }
.fx-yapiskan-ad { font-weight: 700; font-size: var(--s-kucuk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-yapiskan-fiyat { font: 800 var(--s-orta)/1.1 var(--baslik); font-variant-numeric: tabular-nums; }

/* Sepet */
.fx-kasa { padding-top: 40px; }
.fx-kasa-izgara { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 4px 48px; align-items: start; }
.fx-kasa-sol h1 { font-size: var(--s-dev); line-height: .84; margin-bottom: 14px; }
.fx-kasa-giris { color: var(--soluk); font-size: var(--s-orta); margin-bottom: 28px; max-width: 46ch; }
.fx-sepet-liste { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fx-sepet-satir { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 8px 8px 8px 8px; background: var(--panel); }
.fx-sepet-gorsel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); }
.fx-sepet-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.fx-sepet-bilgi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-sepet-ad { font: 800 var(--s-orta)/1 var(--baslik); text-transform: var(--harf); color: var(--metin); text-decoration: none; }
.fx-sepet-secenek { color: var(--soluk); font-size: var(--s-kucuk); }
.fx-sepet-fiyat { font: 800 var(--s-orta)/1 var(--baslik); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-sepet-fiyat small { font-size: var(--s-kucuk); color: var(--soluk); }
.fx-sepet-bos { padding: 40px; background: var(--panel); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fx-kasa-ozet { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--panel); }
.fx-kasa-ozet h2 { font-size: var(--s-baslik); }
.fx-ozet-satir { display: flex; justify-content: space-between; margin: 0; color: var(--soluk); font-variant-numeric: tabular-nums; }
.fx-ozet-satir dd { margin: 0; }
.fx-ozet-toplam { color: var(--metin); align-items: baseline; padding: 14px 0 0; }
.fx-ozet-toplam dt { font-weight: 700; }
.fx-ozet-toplam dd { font: 800 var(--s-baslik)/1 var(--baslik); }
.fx-kupon summary { cursor: pointer; color: var(--soluk); font-weight: 600; }
.fx-kupon-liste { margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--s-kucuk); }
.fx-kupon-liste li { display: flex; gap: 8px; align-items: center; }

@media (max-width: 1080px) {
  .fx-urun-izgara, .fx-kasa-izgara { grid-template-columns: minmax(0, 1fr); }
  .fx-urun-izgara { grid-template-areas: "medya" "satin" "alt"; gap: 4px; }
  .fx-satin, .fx-kasa-ozet { position: static; }
  .fx-urun-alt { padding-right: 0; }
  .fx-satirlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fx-kat-bas { flex-direction: column; align-items: flex-start; }
  .fx-sirala { margin-left: 0; }
  .fx-urun { padding-top: 12px; }
  .fx-urun .fx-iz span:nth-last-child(-n+2) { display: none; }
  .fx-medya-kucuk button { width: 30%; }
  .fx-satin { padding: 20px; }
  .fx-urun-alt { padding-top: 40px; }
  .fx-bolum-menu { position: static; }
  .fx-benzer { padding-top: 96px; }
  .fx-sepet-satir { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .fx-sepet-fiyat { grid-column: 2; }
  .fx-sepet-sil { grid-row: 1; grid-column: 3; }
  .fx-sayfa-package .fx-alt { padding-bottom: 96px; }
}
@media (min-width: 1081px) { .fx-yapiskan { left: auto; right: var(--kenar); bottom: 16px; width: 440px; padding: 12px 12px 12px 18px; } }

/* Sepet adedi (27.10): - [n] + ; degisince form kendiliginden gonderilir (feron.js sepetAdet) */
.fx-sepet-satir { grid-template-columns: 160px minmax(0, 1fr) auto auto auto; }
.fx-sepet-adet { display: inline-flex; align-items: center; height: 38px; border-radius: var(--r-hap, 999px);
  background: var(--cam, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px var(--cam-kenar, rgba(255, 255, 255, .11)); }
.fx-sepet-adet input { width: 34px; height: 100%; padding: 0; border: 0; background: none; color: var(--metin); text-align: center;
  font: 700 15px/1 var(--baslik); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.fx-sepet-adet input::-webkit-inner-spin-button, .fx-sepet-adet input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fx-adet-btn { display: grid; place-items: center; width: 34px; height: 100%; padding: 0; border: 0; background: none; color: var(--soluk); cursor: pointer; }
.fx-adet-btn:hover:not(:disabled) { color: var(--metin); }
.fx-adet-btn:disabled, .fx-sepet-adet input:disabled { opacity: .4; cursor: default; }
.fx-adet-btn svg { width: 15px; height: 15px; }
.fx-gizli-btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  /* adet ve fiyat ayni alt hucrede: fiyat solda, adet sagda */
  :root .fx-sepet-satir .fx-sepet-adet { grid-area: 2 / 2 / 3 / 4; justify-self: end; align-self: center; height: 34px; }
  :root .fx-sepet-satir .fx-sepet-fiyat { grid-area: 2 / 2 / 3 / 4; justify-self: start; align-self: center; }
  :root .fx-sepet-satir .fx-sepet-sil { grid-area: 1 / 3 / 2 / 4; }
}
@media (max-width: 380px) {
  /* dar telefonda adet fiyatin altina iner */
  :root .fx-sepet-satir .fx-sepet-adet { grid-area: 3 / 2 / 4 / 4; justify-self: start; margin-top: 4px; }
}

/* Buyuk gorsel (27.10): urun sayfasinda resme tiklayinca tam ekran (feron-urun.js buyukGorsel) */
.fx-buyutulur { cursor: zoom-in; }
.fx-buyuk { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px 72px; border: 0;
  background: transparent; color: #fff; overflow: hidden; }
.fx-buyuk[open] { display: grid; place-items: center; }
.fx-buyuk::backdrop { background: rgba(6, 6, 8, .92); backdrop-filter: blur(6px); }
.fx-buyuk img { max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; object-fit: contain;
  border-radius: var(--r, 10px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); user-select: none; }
.fx-buyuk button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 50%; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.fx-buyuk button:hover { background: rgba(255, 255, 255, .18); }
.fx-buyuk button svg { width: 22px; height: 22px; }
.fx-buyuk-kapat { top: 16px; right: 16px; }
.fx-buyuk-ok { top: 50%; transform: translateY(-50%); }
.fx-buyuk-geri { left: 16px; }
.fx-buyuk-ileri { right: 16px; }
.fx-buyuk.is-tek .fx-buyuk-ok { display: none; }
@media (max-width: 640px) {
  .fx-buyuk { padding: 64px 8px; }
  .fx-buyuk-ok { top: auto; bottom: 16px; transform: none; }
  .fx-buyuk-geri { left: calc(50% - 60px); }
  .fx-buyuk-ileri { right: calc(50% - 60px); }
}