/* Form ve yardimci sayfalar v17 (27.10.2026): giris (username), paket secenekleri, abonelik katmanlari, teklif, modallar,
   yan moduller, hediye/referans parcalari. v8 cam dili + C altin + 6/10/16 kose. Eski Bootstrap siniflari icin genel
   koruma feron-eski.css'te; bu dosya yalniz yeni (fx-) isaretlemeyi giydirir. Degiskenlerin "Eski" yon icin yedegi var. */

/* ---- Ortak: ortali cam kart ---- */
.fx-form-sayfa { display: flex; justify-content: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.fx-form-kart {
  position: relative; width: 100%; max-width: 520px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-b);
  background: linear-gradient(180deg, rgba(24, 25, 29, .92), rgba(14, 15, 18, .94));
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .07)), var(--cam-isik, none), 0 30px 70px -40px #000;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.fx-form-kart::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; border-radius: var(--r-b) var(--r-b) 0 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, var(--vurgu-sis, rgba(255, 255, 255, .05)), transparent 70%); }
.fx-form-genis { max-width: 720px; }
.fx-form-kart > * { position: relative; }
.fx-form-kart h1 { font: 700 clamp(26px, 2vw + 10px, 34px)/1.1 var(--baslik); text-transform: none; letter-spacing: -.01em; margin: 0 0 12px; }
.fx-form-genis h1 { margin-bottom: 28px; }
.fx-form-ikon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: var(--r);
  color: var(--vurgu); background: var(--vurgu-sis, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--vurgu-cizgi, var(--panel-3)); }
.fx-form-ikon .lucide { width: 24px; height: 24px; }
.fx-form-ust { display: inline-block; margin-bottom: 10px; font: 600 13px/1 var(--govde);
  letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); }
.fx-form-giris { color: var(--soluk); margin: 0 0 24px; }
.fx-form-notlar { list-style: none; margin: 24px 0 0; padding: 18px 0 0; display: grid; gap: 10px; font-size: 14px; color: var(--soluk);
  box-shadow: 0 -1px 0 var(--kenar-ince, var(--panel-3)); }
.fx-form-notlar li { display: flex; align-items: center; gap: 10px; }
.fx-form-notlar .lucide { color: var(--vurgu); }

/* Alanlar */
.fx-form .fx-alan, .fx-form .form-group { margin-bottom: 20px; }
.fx-form label, .fx-discord-alan p { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; color: var(--metin); }
.fx-form-alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 22px;
  box-shadow: 0 -1px 0 var(--kenar-ince, var(--panel-3)); }
.fx-geri { display: inline-flex; align-items: center; gap: 8px; color: var(--soluk); font-weight: 600; text-decoration: none; }
.fx-geri:hover { color: var(--metin); text-decoration: none; }
.btn.fx-geri, .btn.fx-geri:hover { background: none; box-shadow: none; padding-left: 0; padding-right: 0; min-height: 0; }

/* Girdi + ek (para birimi, dugme) tek parca */
.fx-girdi-grup { flex-wrap: nowrap; }
.fx-girdi-grup .form-control { min-height: 48px; }
.fx-girdi-grup > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fx-girdi-grup .input-group-append > *, .fx-girdi-grup .input-group-btn > * { height: 100%; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fx-girdi-grup .input-group-btn { display: flex; }

/* ---- Giris: Tebex'in  ciktisi ---- */
.fx-giris-form > p { color: var(--soluk); margin: 0 0 18px; }
.fx-giris-form form, .fx-giris-form .username, .fx-giris-form .input-group { margin: 0; }
.fx-giris-form .input-group { gap: 8px; }
.fx-giris-form .input-group > .btn:only-child { width: 100%; }
.fx-giris-form .input-group > .form-control { border-radius: var(--r) !important; }
.fx-giris-form .input-group-btn .btn { border-radius: var(--r) !important; }
.fx-giris-form .btn { min-height: 52px; font-size: 17px; }

/* ---- Abonelik katmanlari ---- */
.fx-kat-aciklama { max-width: 64ch; margin-top: 12px; color: var(--soluk); }
.fx-katmanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fx-katman { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 18px; border-radius: var(--r-b);
  background: linear-gradient(180deg, rgba(24, 25, 29, .92), rgba(14, 15, 18, .94));
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .07)), var(--cam-isik, none); }
.fx-katman.is-secili { box-shadow: inset 0 0 0 1px var(--vurgu-cizgi, var(--vurgu)), 0 20px 50px -30px var(--vurgu-parlama, transparent); }
.fx-katman-gorsel { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.fx-katman-ad { font: 700 20px/1.2 var(--baslik); text-transform: none; margin: 0; padding: 0 4px; }
.fx-katman-ad .fx-rozet { margin-left: 6px; vertical-align: middle; font-size: 12px; padding: 3px 8px; background: var(--vurgu); color: var(--vurgu-murekkep); }
.fx-katman-metin { padding: 0 4px; font-size: 15px; max-height: 12em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.fx-katman-metin img, .fx-katman-metin iframe { display: none; }
.fx-katman-alt { margin-top: auto; display: grid; gap: 10px; padding: 0 4px; }
.fx-katman-fiyat { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.fx-katman-fiyat strong { font: 700 26px/1 var(--baslik); }
.fx-katman-fiyat del { color: var(--soluk); }
.fx-katman-alt .btn { width: 100%; }

/* ---- Modallar ---- */
.fx-modal .modal-content { background: linear-gradient(180deg, #18191d, #0f1013); color: var(--metin); border: 0;
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .08)), 0 40px 90px -30px #000; }
.fx-modal .modal-header { align-items: center; padding: 20px 24px; background: none; border: 0; box-shadow: 0 1px 0 var(--kenar-ince, var(--panel-3)); }
.fx-modal .modal-title { font: 700 22px/1.2 var(--baslik); text-transform: none; }
.fx-modal .modal-body { padding: 24px; }
.fx-modal-kapat { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: var(--r);
  color: var(--soluk); background: var(--cam, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--kenar-ince, transparent); cursor: pointer; }
.fx-modal-kapat:hover { color: var(--metin); background: var(--cam-2, var(--panel-3)); }
.fx-modal-giris { color: var(--soluk); margin-bottom: 18px; }
.btn-copy { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Yan moduller (urun izgarasinda kart olarak durur) ---- */
.fx-modul-kart { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-b); color: var(--metin);
  background: linear-gradient(180deg, rgba(24, 25, 29, .92), rgba(14, 15, 18, .94));
  box-shadow: inset 0 0 0 1px var(--kenar-ince, rgba(255, 255, 255, .07)), var(--cam-isik, none); }
.fx-modul-baslik, .fx-benzer .fx-modul-baslik, .fx-kartlar .fx-modul-baslik {
  display: flex; align-items: center; gap: 10px; margin: 0; font: 700 18px/1.2 var(--baslik); text-transform: none; }
.fx-modul-baslik .lucide { color: var(--vurgu); }
.fx-modul-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; color: var(--soluk); font-size: 14px; }
.fx-modul-alt strong { color: var(--metin); font: 700 16px/1 var(--baslik); }
.fx-modul-sayi { margin-left: auto; }
.fx-modul-metin { font-size: 15px; }
.fx-modul-metin > :last-child { margin-bottom: 0; }
.fx-modul-gorsel { width: 100%; height: auto; border-radius: var(--r); }
.fx-modul-bos { margin: 0; color: var(--soluk); }
.fx-ilerleme.progress { height: 10px; padding: 0; overflow: hidden; border-radius: var(--r-hap); background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--kenar-ince, transparent); }
.fx-ilerleme .progress-bar { border-radius: var(--r-hap); background: linear-gradient(90deg, var(--ana), var(--vurgu)); }
.fx-durum { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-k);
  font: 600 12px/1 var(--govde); color: var(--soluk); background: var(--cam, var(--panel-2)); }
.fx-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.fx-durum.is-acik::before { background: var(--yesil); }
.fx-sunucu { display: grid; gap: 4px; padding: 16px; border-radius: var(--r); background: rgba(0, 0, 0, .28); text-align: center; }
.fx-sunucu b { font: 700 18px/1.2 var(--baslik); word-break: break-all; }
.fx-sunucu span { color: var(--soluk); font-size: 14px; }
.fx-bagisci { display: flex; align-items: center; gap: 14px; }
.fx-bagisci img { width: 56px; height: 56px; border-radius: var(--r); object-fit: cover; }
.fx-bagisci b { display: block; font: 700 17px/1.2 var(--baslik); }
.fx-bagisci span { color: var(--soluk); font-size: 14px; }
.fx-modul-kart .alert { margin: 12px 0 0; }

/* ---- Sepet parcalari: secenek, hediye, referans ---- */
.fx-paket-secenek { display: inline-flex; gap: 5px; margin-right: 10px; font-size: 13px; color: var(--soluk); }
.fx-paket-secenek b { color: var(--metin); font-weight: 600; }
.fx-paket-secenek b::after { content: ":"; }
.fx-hediye-kutu { margin: 12px 0 0; }
.fx-hediye-kutu .col-12 { padding: 0; }
.fx-onay { display: flex; align-items: center; gap: 10px; }
.fx-onay input { width: 18px; height: 18px; accent-color: var(--vurgu); }
.fx-onay label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.fx-hediye-kutu .form-control { margin-top: 10px; min-height: 44px; }
.fx-referans.card { padding: 0; margin: 18px 0 16px; background: transparent; box-shadow: none; }
.fx-referans .card-body { padding: 0; }
.fx-referans-ac { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--r);
  color: var(--metin); font-weight: 600; text-decoration: none; background: var(--cam, var(--panel-2));
  box-shadow: inset 0 0 0 1px var(--kenar-ince, transparent); }
.fx-referans-ac:hover { color: var(--metin); text-decoration: none; background: var(--cam-2, var(--panel-3)); }
.fx-referans-ac .lucide:first-child { color: var(--vurgu); }
.fx-referans-ok { margin-left: auto; transition: transform .2s; }
.fx-referans-ac[aria-expanded="true"] .fx-referans-ok { transform: rotate(180deg); }
.fx-referans-ic { padding: 16px 4px 4px; color: var(--soluk); font-size: 15px; }
.fx-referans .input-group-prepend { display: none; } /* Font Awesome yuklu degil; ikon bos kaliyordu */
.fx-referans .form-control { border-radius: var(--r) !important; }
.fx-referans-not { margin-top: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 14px; color: var(--metin);
  background: var(--vurgu-sis, var(--panel-2)); box-shadow: inset 0 0 0 1px var(--vurgu-cizgi, transparent); }

/* Onizlemeye ozel kabuk (Tebex'te yok) */
.fx-onizleme-moduller { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding-top: 40px; padding-bottom: 60px; }
.fx-onizleme-parca { max-width: 560px; padding-top: 40px; padding-bottom: 60px; }

@media (max-width: 640px) {
  .fx-form-sayfa { padding-left: 12px; padding-right: 12px; }
  .fx-form-kart { padding: 22px 18px; }
  .fx-form-alt { flex-direction: column-reverse; align-items: stretch; }
  .fx-form-alt .btn { width: 100%; }
  .fx-form-alt .fx-geri { justify-content: center; min-height: 44px; }
  .fx-girdi-grup { flex-wrap: wrap; }
  .fx-discord-alan .fx-girdi-grup > .form-control, .fx-discord-alan .input-group-append { flex: 1 1 100%; }
  .fx-discord-alan .fx-girdi-grup > .form-control { border-radius: var(--r) var(--r) 0 0 !important; }
  .fx-discord-alan .input-group-append { margin-left: 0; }
  .fx-discord-alan .input-group-append > * { width: 100%; border-radius: 0 0 var(--r) var(--r) !important; }
  .fx-modal .modal-header, .fx-modal .modal-body { padding: 18px; }
}

/* Katman aciklamasi kisa ozet: urun aciklamasindaki dev basliklar kartta normal yaziya iner */
.fx-katman-metin h1, .fx-katman-metin h2, .fx-katman-metin h3, .fx-katman-metin h4 { font: 600 15px/1.4 var(--govde); margin: 0 0 6px; padding: 0; box-shadow: none; }