/* Fatma Abla — üye paneli + üye giriş/aktivasyon (tanıtım sitesi tasarım diliyle) */
:root {
--cream: #FBF1EC; --blush: #F6E0DC; --rose: #D9435C; --rose-deep: #B93049;
--mauve: #C99FA8; --green: #2F6B4C; --gold: #D9B45B; --line: #EAD3CD;
--ink: #33262B; --ink-soft: #6E5A60; --surface: #FFFFFF;
--shadow: 0 10px 30px rgba(90, 40, 50, .08);
--serif: "Iowan Old Style", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink);
font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--rose-deep); }
h1, h2, h3 { font-family: var(--serif); }
/* ---------- Giriş / aktivasyon ---------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center;
padding: 24px; background: linear-gradient(160deg, var(--blush), var(--cream) 55%); }
.auth-box { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
border-radius: 20px; box-shadow: var(--shadow); padding: 36px 32px; text-align: center; }
.auth-logo { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; }
.auth-box h1 { font-size: 24px; margin: 0 0 6px; }
.auth-box .sub { color: var(--ink-soft); margin: 0 0 20px; font-size: 14.5px; }
.auth-box form { text-align: left; }
.auth-box label { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 5px; }
.auth-box input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
font-size: 15px; background: var(--cream); }
.auth-box input:focus { outline: 2px solid var(--rose); outline-offset: 1px; background: #fff; }
.auth-box .err { color: var(--rose-deep); font-size: 14px; margin-top: 14px; }
.foot-note { font-size: 13px; color: var(--ink-soft); margin-top: 18px; }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line);
background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 999px; font-size: 14.5px;
font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.pbtn:active { transform: scale(.97); }
.pbtn.primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.pbtn.primary:hover { background: var(--rose-deep); }
.pbtn.ghost:hover { border-color: var(--rose); color: var(--rose-deep); }
.pbtn.wide { width: 100%; margin-top: 20px; }
.pbtn:disabled { opacity: .55; cursor: default; }
/* ---------- Panel iskeleti ---------- */
.pwrap { max-width: 1060px; margin: 0 auto; padding: 0 18px 60px; }
.phead { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
margin-bottom: 22px; flex-wrap: wrap; }
.phead img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.phead .kim b { display: block; font-size: 16px; }
.phead .kim span { font-size: 12.5px; color: var(--ink-soft); }
.phead .esnek { flex: 1; }
.rozet { font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; letter-spacing: .03em; }
.rozet.gold { background: linear-gradient(120deg, #F3D98B, var(--gold)); color: #5C4708; }
.rozet.hak { background: var(--blush); color: var(--rose-deep); }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
box-shadow: var(--shadow); padding: 24px; margin-bottom: 22px; }
.pcard > h2 { margin: 0 0 4px; font-size: 21px; }
.pcard > .aciklama { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }
/* ---------- "Fatma Abla düşünüyor" animasyonu ---------- */
.dusun { display: none; text-align: center; padding: 34px 10px 26px; }
.dusun.on { display: block; }
.dusun .avatar { width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
animation: kalp 1.15s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(217, 67, 92, .35); }
@keyframes kalp {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 67, 92, .35); }
35% { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(217, 67, 92, 0); }
}
.dusun p { font-family: var(--serif); font-size: 17px; color: var(--ink); margin: 16px 0 4px; min-height: 24px; }
.dusun .noktalar { display: inline-flex; gap: 7px; margin-top: 6px; }
.dusun .noktalar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); opacity: .3;
animation: nokta 1.2s infinite; }
.dusun .noktalar i:nth-child(2) { animation-delay: .2s; }
.dusun .noktalar i:nth-child(3) { animation-delay: .4s; }
@keyframes nokta { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
/* ---------- Aday kartları ---------- */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.aday { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, #FFFBF9);
padding: 18px; position: relative; }
.aday.gizli-giris { opacity: 0; transform: translateY(26px) scale(.96); }
.aday.giris { animation: kartGiris .55s cubic-bezier(.2, .8, .3, 1.1) forwards; }
@keyframes kartGiris {
from { opacity: 0; transform: translateY(26px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.aday .ust { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aday .harf { width: 46px; height: 46px; border-radius: 50%; background: var(--blush); color: var(--rose-deep);
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
font-family: var(--serif); flex: none; }
.aday .ust b { font-size: 15.5px; display: block; }
.aday .ust span { font-size: 12.5px; color: var(--ink-soft); }
.aday .ozet { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.aday .ozet i { font-style: normal; font-size: 12px; background: var(--cream); border: 1px solid var(--line);
border-radius: 999px; padding: 4px 10px; color: var(--ink-soft); }
.aday .detay { display: none; font-size: 13.5px; color: var(--ink-soft); border-top: 1px dashed var(--line);
padding-top: 10px; margin: 8px 0 10px; }
.aday .detay b { color: var(--ink); display: block; margin-bottom: 2px; font-size: 12.5px; }
.aday .detay p { margin: 0 0 10px; white-space: pre-line; }
.aday.acik .detay { display: block; }
.aday .alt { display: flex; gap: 8px; }
.aday .alt .pbtn { padding: 8px 14px; font-size: 13.5px; }
.aday .gonderildi { color: var(--green); font-weight: 700; font-size: 13.5px; display: none;
align-items: center; gap: 6px; }
.aday.teklifli .gonderildi { display: inline-flex; }
.aday.teklifli .teklif-btn { display: none; }
/* Skor halkası */
.skor { position: absolute; top: 14px; right: 14px; width: 56px; height: 56px; }
.skor svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.skor circle { fill: none; stroke-width: 5; }
.skor .art { stroke: var(--blush); }
.skor .dolu { stroke: var(--rose); stroke-linecap: round; stroke-dasharray: 138.2;
stroke-dashoffset: 138.2; transition: stroke-dashoffset 1.1s cubic-bezier(.3, .7, .3, 1); }
.skor.yesil .dolu { stroke: var(--green); }
.skor b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--ink); }
/* ---------- Filtre çubuğu ---------- */
.filtreler { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
margin-bottom: 16px; }
.filtreler label { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); display: block;
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.filtreler input, .filtreler select { width: 100%; padding: 9px 11px; border: 1px solid var(--line);
border-radius: 10px; font-size: 14px; background: var(--cream); color: var(--ink); }
.filtreler input:focus, .filtreler select:focus { outline: 2px solid var(--rose); background: #fff; }
.yaslar { display: flex; gap: 6px; }
/* ---------- Teklif listeleri ---------- */
.satir { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.satir:last-child { border-bottom: 0; }
.satir .harf { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); color: var(--rose-deep);
display: flex; align-items: center; justify-content: center; font-weight: 800;
font-family: var(--serif); flex: none; }
.satir .esnek { flex: 1; min-width: 0; }
.satir b { font-size: 14.5px; }
/* DİKKAT: bu kural `.satir span` olarak yazılırsa harf-avatar'ı da yakalar (0-1-1 > 0-1-0):
avatar inline-flex'ini kaybeder, harf sola-yukarı kayar ve rengi soluklaşır. .esnek ile sınırlı. */
.satir .esnek span { display: block; font-size: 12.5px; color: var(--ink-soft); }
.satir .pbtn { padding: 7px 13px; font-size: 13px; }
/* Satır içindeki "Reddet" sessiz durur. `background` da SIFIRLANMALI: dosya sonundaki
`.pbtn.red` (modalın dolu zeminli yıkıcı butonu) burayı da boyuyor, bu kural yalnız
rengi soluklaştırdığı için soluk metin + koyu gül zemin = okunmaz kontrast çıkıyor. */
.satir .pbtn.red { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.satir .pbtn.red:hover { background: #fff; border-color: var(--rose-deep); color: var(--rose-deep); }
.yakinda { font-size: 12px; font-weight: 800; background: var(--blush); color: var(--rose-deep);
border-radius: 999px; padding: 4px 11px; }
/* Toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--ink);
color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; opacity: 0;
pointer-events: none; transition: all .25s; max-width: 90vw; text-align: center; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) {
.pcard { padding: 18px 15px; }
.kartlar { grid-template-columns: 1fr; }
.phead .kim b { font-size: 15px; }
}
/* ---------- Ödeme / yenileme ekranı ---------- */
.rozet.uyelik { background: #EAF3EC; color: var(--green); }
.odeme-kutu { border: 1px solid var(--line); border-radius: 14px; background: #FFFBF9; padding: 18px; margin-top: 8px; }
.odeme-kutu .satirlar > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.odeme-kutu .satirlar > div:last-child { border-bottom: 0; }
.odeme-kutu .satirlar span { width: 210px; flex: none; font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.odeme-kutu .mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.odeme-kutu .kod { font-family: ui-monospace, Menlo, monospace; font-size: 20px; color: var(--rose-deep); background: var(--blush); padding: 4px 14px; border-radius: 10px; letter-spacing: .08em; }
.odeme-kutu .uyari { font-size: 13px; color: var(--rose-deep); background: var(--blush); border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; }
.paket-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.paket-kart { border: 2px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; cursor: pointer; background: #fff; }
.paket-kart:has(input:checked) { border-color: var(--rose); background: #FFF6F4; }
.paket-kart input { display: none; }
.paket-kart b { display: block; font-family: var(--serif); font-size: 17px; }
.paket-kart span { color: var(--rose-deep); font-weight: 800; }
.ek-sec { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); padding: 7px 0; cursor: pointer; }
.ek-sec input { margin-top: 3px; accent-color: var(--rose); }
.basarili { color: var(--green); background: #EAF3EC; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 700; }
.alan-label { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 5px; }
.profil-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-size: 14.5px; background: var(--cream); }
.profil-form textarea:focus { outline: 2px solid var(--rose); background: #fff; }
.kilit-rozet { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--cream); border: 1px dashed var(--mauve); border-radius: 999px; padding: 7px 13px; }
/* ---------- Danışma ---------- */
.danis-kutu { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.danis-kutu .tarih { font-size: 11.5px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.danis-kutu p { margin: 4px 0 0; white-space: pre-line; }
.danis-kutu .cevap { margin-top: 10px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; }
.danis-kutu .bekliyor-not { color: var(--mauve); font-size: 13px; margin: 8px 0 0; }
/* ---------- Hesap silme ---------- */
.pcard.tehlike { border-color: #E8C9C9; }
.pcard.tehlike h2 { color: var(--rose-deep); }
.tehlike-btn { border-color: var(--rose-deep); color: var(--rose-deep); background: #fff; margin-top: 10px; }
.tehlike-btn:hover { background: var(--rose-deep); color: #fff; }
/* ============================================================
PANEL v4 — uygulama kabuğu: topbar + sidebar + bottom tabbar
============================================================ */
.papp-body { background: var(--cream); }
body.drawer-kilit { overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; }
.ico.kucuk { width: 14px; height: 14px; }
/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
height: 64px; padding: 0 18px; background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line); }
.tb-marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.tb-marka img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tb-marka b { font-family: var(--serif); font-size: 17px; display: block; line-height: 1.1; }
.tb-marka i { font-style: normal; font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.tb-esnek { flex: 1; }
.tb-guven { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--green);
background: #EAF3EC; border: 1px solid #D5E6DA; border-radius: 12px; padding: 7px 13px; }
.tb-guven b { font-size: 12.5px; display: block; line-height: 1.15; }
.tb-guven i { font-style: normal; font-size: 10.5px; color: var(--ink-soft); }
.ikonbtn { position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
.ikonbtn:hover { border-color: var(--rose); color: var(--rose-deep); }
.rz { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px;
background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; font-style: normal;
display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.rz.satirici { position: static; margin-left: 8px; vertical-align: middle; }
.tb-kim { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 14px 5px 5px; }
.tb-kim:hover { border-color: var(--rose); }
.harf-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blush); color: var(--rose-deep);
display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
font-size: 16px; font-family: var(--serif); flex: none; }
.tk-ad b { display: block; font-size: 13.5px; line-height: 1.15; }
.tk-ad i { font-style: normal; font-size: 11px; color: var(--ink-soft); }
.drawer-ac { display: none; }
.drawer-kapat { display: none; position: absolute; top: 14px; right: 14px; }
/* ---------- Sidebar ---------- */
.sidebar { position: fixed; left: 0; top: 64px; bottom: 0; width: 248px; z-index: 45;
background: var(--surface); border-right: 1px solid var(--line); padding: 18px 14px;
display: flex; flex-direction: column; overflow-y: auto; }
.snav { display: flex; flex-direction: column; gap: 4px; }
.snav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14.5px; position: relative; }
.snav-link:hover { background: var(--cream); }
.snav-link.aktif { background: var(--rose); color: #fff; box-shadow: 0 8px 18px rgba(217, 67, 92, .28); }
.snav-link.kilitli { color: var(--ink-soft); opacity: .62; }
.snav-link .rz { position: static; margin-left: auto; }
.snav-link .ico.kucuk { margin-left: auto; }
.snav-cizgi { height: 1px; background: var(--line); margin: 10px 6px; }
.s-soz { margin-top: auto; background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
padding: 14px 15px; }
.s-soz p { font-family: var(--serif); font-style: italic; font-size: 13px; margin: 0 0 8px; color: var(--ink); }
.s-soz span { font-size: 11.5px; color: var(--ink-soft); }
.drawer-ort { display: none; }
/* ---------- İçerik ---------- */
.picerik { margin-left: 248px; padding: 22px 26px 60px; max-width: 1240px; }
.sayfa-bas { margin: 4px 0 18px; }
.sayfa-bas h1 { font-size: 26px; margin: 0 0 4px; }
.sayfa-bas p { color: var(--ink-soft); margin: 0; font-size: 14.5px; }
/* ---------- Hoş geldin banner ---------- */
.banner { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line);
background: linear-gradient(115deg, #FFF7F4 0%, var(--blush) 55%, #F3D9CF 100%);
padding: 30px 32px; margin-bottom: 22px; box-shadow: var(--shadow); }
.banner h1 { font-size: 30px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.banner h1 .dal { width: 26px; height: 26px; color: var(--rose); }
.banner p { max-width: 560px; margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.banner-cip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .82);
border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: 12.5px;
font-weight: 700; color: var(--green); }
.banner-sus { position: absolute; right: 22px; top: 0; bottom: 0; width: 150px; pointer-events: none; }
.banner-sus svg { position: absolute; color: var(--rose); opacity: .18; }
.banner-sus .s1 { width: 90px; height: 90px; right: 10px; top: 12px; }
.banner-sus .s2 { width: 44px; height: 44px; right: 92px; bottom: 22px; opacity: .14; }
.banner-sus .s3 { width: 56px; height: 56px; right: 0; bottom: -8px; opacity: .12; }
/* ---------- Dashboard ızgara ---------- */
.pana { min-width: 0; }
.yanyana { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pcard-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pcard-bas h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18.5px; flex: 1; min-width: 0; }
.bas-ikon { color: var(--rose); width: 21px; height: 21px; }
.hepsi { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700;
color: var(--rose-deep); text-decoration: none; white-space: nowrap; }
.hepsi:hover { text-decoration: underline; }
.hepsi .ico { width: 14px; height: 14px; }
.bos-kucuk { color: var(--ink-soft); font-size: 13.5px; margin: 8px 0 2px; }
.pbtn.mini { padding: 7px 14px; font-size: 13px; }
.pbtn.tam { width: 100%; margin-top: 12px; }
/* ---------- Mini eşleşme kartları (dashboard) ---------- */
.mini-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mini-aday { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 3px; padding: 18px 12px 14px; border: 1px solid var(--line); border-radius: 16px;
background: linear-gradient(180deg, #fff, #FFFBF9); text-decoration: none; color: var(--ink);
transition: transform .18s ease, box-shadow .18s ease; }
.mini-aday:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.harf-avatar.buyukav { width: 58px; height: 58px; font-size: 24px; margin-bottom: 6px; }
.harf-avatar.kucukav { width: 40px; height: 40px; font-size: 16px; }
.mini-aday .uyum { position: absolute; top: 10px; right: 10px; background: #EAF3EC; color: var(--green);
font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 8px; }
.mini-aday .ad { font-size: 14.5px; }
.mini-aday .yer { font-size: 12px; color: var(--ink-soft); }
.mini-aday .cips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 7px; }
.mini-aday .cips i { font-style: normal; font-size: 10.5px; background: var(--cream); border: 1px solid var(--line);
border-radius: 999px; padding: 3px 8px; color: var(--ink-soft); }
.mini-aday.gizli-giris { opacity: 0; transform: translateY(20px) scale(.96); }
.mini-aday.giris { animation: kartGiris .5s cubic-bezier(.2, .8, .3, 1.1) forwards; }
/* ---------- Üyelik özeti + güven listesi ---------- */
.guven-liste { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding-top: 12px; }
.guven-liste span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.guven-liste .ico { width: 15px; height: 15px; color: var(--green); }
/* ---------- Profil tamamlama halkası ---------- */
.tamamla { display: flex; align-items: center; gap: 16px; }
.halka { position: relative; width: 76px; height: 76px; flex: none; }
.halka svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.halka circle { fill: none; stroke-width: 7; }
.halka .art { stroke: var(--blush); }
.halka .dolu { stroke: var(--rose); stroke-linecap: round; stroke-dasharray: 201;
stroke-dashoffset: calc(201 - 201 * var(--oran, 0) / 100);
transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .3, 1); }
.halka b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 15px; }
.tamamla p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
/* ---------- Öneri + tavsiye kartları ---------- */
.pcard.oneri { background: linear-gradient(165deg, #fff 30%, #FFF3EF); }
.pcard.oneri > p { margin: 4px 0 6px; font-size: 14.5px; }
.pcard.tavsiye blockquote { font-family: var(--serif); font-style: italic; font-size: 15.5px;
margin: 6px 0 8px; color: var(--ink); line-height: 1.5; }
.pcard.tavsiye .kaynak { font-size: 12.5px; color: var(--ink-soft); }
.danis-link { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
font-size: 13px; font-weight: 700; }
/* ---------- Alt tab bar (mobil) ---------- */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
justify-content: space-around; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
color: var(--ink-soft); font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
min-width: 58px; }
.tab .t-ikon { position: relative; display: inline-flex; }
.tab.aktif { color: var(--rose-deep); }
.tab.aktif .t-ikon::after { content: ""; position: absolute; inset: -7px -11px; background: var(--blush);
border-radius: 12px; z-index: -1; }
.tab.kilitli { opacity: .5; }
/* ---------- Durum ekranları (inceleme / onay) ---------- */
.durum-kapak { text-align: center; padding: 30px 16px 10px; max-width: 640px; margin: 0 auto 18px; }
.durum-kapak h1 { font-size: 26px; margin: 18px 0 10px; }
.durum-kapak .durum-alt { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.durum-ikon { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.durum-ikon img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.durum-ikon .halka-donen { position: absolute; inset: -8px; border-radius: 50%;
border: 3px solid var(--blush); border-top-color: var(--rose);
animation: donen 1.6s linear infinite; }
@keyframes donen { to { transform: rotate(360deg); } }
.durum-ikon.onay { display: flex; align-items: center; justify-content: center; border-radius: 50%;
background: var(--green); color: #fff; box-shadow: 0 14px 34px rgba(47, 107, 76, .35);
animation: onayPat .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.durum-ikon.onay .ico { width: 44px; height: 44px; }
@keyframes onayPat { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.adimlar-karti { max-width: 640px; margin: 0 auto 16px; }
.surec-adim { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.surec-adim:last-child { border-bottom: 0; }
.sa-no { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line);
color: var(--ink-soft); font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center;
justify-content: center; flex: none; }
.surec-adim.aktif .sa-no { background: var(--rose); border-color: var(--rose); color: #fff; }
.surec-adim b { display: block; font-size: 14.5px; }
.surec-adim span { font-size: 13px; color: var(--ink-soft); }
.aciklama.ortada { text-align: center; max-width: 640px; margin: 0 auto; }
.odeme-sonrasi { display: flex; gap: 10px; align-items: flex-start; background: #EAF3EC;
border: 1px solid #D5E6DA; border-radius: 12px; padding: 13px 16px; font-size: 13.5px;
color: var(--ink); margin: 14px 0 0; }
.odeme-sonrasi .ico { color: var(--green); margin-top: 1px; }
/* ---------- Konfeti ---------- */
.konfeti-kap { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.konfeti-kap i { position: absolute; top: -20px; display: block; opacity: 0;
animation: konfetiDus linear forwards; }
@keyframes konfetiDus {
0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
100% { opacity: .9; transform: translate3d(var(--kay, 0px), 105vh, 0) rotate(var(--don, 360deg)); }
}
/* ---------- Responsive: tablet/mobil — uygulama görünümü ---------- */
@media (max-width: 1080px) {
.yanyana { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.drawer-ac { display: inline-flex; }
.drawer-kapat { display: inline-flex; }
.sidebar { top: 0; transform: translateX(-105%); transition: transform .28s cubic-bezier(.3, .8, .3, 1);
width: 280px; box-shadow: 0 0 60px rgba(60, 20, 30, .25); padding-top: 56px; }
.sidebar.acik { transform: translateX(0); }
.drawer-ort { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(51, 38, 43, .4);
opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-ort.acik { opacity: 1; pointer-events: auto; }
.picerik { margin-left: 0; padding: 16px 14px calc(86px + env(safe-area-inset-bottom)); }
.tabbar { display: flex; }
.tb-guven { display: none; }
.tb-kim .tk-ad { display: none; }
.tb-kim { border: 0; background: none; padding: 0; }
.tb-marka i { display: none; }
.banner { padding: 22px 18px; }
.banner h1 { font-size: 24px; }
.banner-sus { display: none; }
.topbar { padding: 0 12px; gap: 9px; }
}
@media (max-width: 560px) {
.mini-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sayfa-bas h1 { font-size: 22px; }
.durum-kapak h1 { font-size: 22px; }
}
.s-yasal { text-align: center; font-size: 12px; color: var(--ink-soft); padding-top: 10px; }
.s-yasal a { color: var(--ink-soft); text-decoration: none; }
.s-yasal a:hover { color: var(--rose-deep); text-decoration: underline; }
.teklif-blok { border-bottom: 1px dashed var(--line); }
.teklif-blok:last-child { border-bottom: 0; }
.teklif-blok .satir { border-bottom: 0; }
/* NOT: mobil satır yerleşimi tek yerde toplandı — dosya sonundaki 620px bloğuna bak.
Buradaki eski `.teklif-blok .satir .esnek` kuralı `.satir-profil` refactor'undan sonra
yanlış elemanı hedefliyordu: .esnek artık .satir'ın değil, butonun flex çocuğu. */
/* ============================================================
PANEL v5 — geniş ekran yerleşimi + iddialı dashboard
============================================================ */
/* İçerik ekrana yayılsın: genişlik sınırı yok — her ekranı doldurur */
.picerik { max-width: none; padding: 26px 38px 70px; }
.pcard { border-radius: 20px; padding: 26px; }
.pcard-bas h2 { font-size: 20px; }
/* ---------- Topbar arama ---------- */
.tb-ara { display: flex; align-items: center; gap: 10px; background: var(--cream);
border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
width: min(420px, 34vw); margin-left: 16px; color: var(--ink-soft); }
.tb-ara:focus-within { border-color: var(--rose); background: #fff; }
.tb-ara .ico { width: 17px; height: 17px; flex: none; }
.tb-ara input { border: 0; background: none; outline: none; font: inherit; font-size: 14px;
color: var(--ink); width: 100%; }
.tb-ara input::placeholder { color: var(--mauve); }
/* ---------- Banner: sahneli, iddialı ---------- */
.banner { display: flex; align-items: stretch; min-height: 220px; padding: 0; margin-bottom: 26px;
background: linear-gradient(105deg, #FFF8F5 0%, #F9E4DD 46%, #F1D2C4 78%, #EAC3B2 100%); }
.banner-ic { flex: 1; padding: 40px 44px; display: flex; flex-direction: column; justify-content: center;
align-items: flex-start; position: relative; z-index: 2; }
.banner h1 { font-size: 36px; margin: 0 0 10px; }
.banner h1 .dal { width: 30px; height: 30px; }
.banner p { font-size: 15.5px; max-width: 600px; margin: 0 0 18px; }
.banner-cip { font-size: 13px; padding: 9px 17px; }
/* Sahne: kemerli pencere + fenerler + çiçekler */
.banner-sahne { position: relative; width: 420px; flex: none; overflow: hidden; }
.banner-sahne .kemer { position: absolute; bottom: -40px; right: 46px; width: 220px; height: 300px;
border-radius: 110px 110px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 240, 232, .15));
border: 1px solid rgba(255, 255, 255, .65); }
.banner-sahne .kemer.k2 { right: 210px; width: 150px; height: 210px; border-radius: 75px 75px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 240, 232, .08)); }
.banner-sahne .fener { position: absolute; color: #C99C4A; filter: drop-shadow(0 6px 14px rgba(217, 180, 91, .45)); }
.banner-sahne .fener.f1 { width: 64px; height: 64px; right: 120px; top: 26px; animation: fenerSalla 5s ease-in-out infinite; }
.banner-sahne .fener.f2 { width: 42px; height: 42px; right: 268px; top: 58px; opacity: .75;
animation: fenerSalla 6s ease-in-out infinite reverse; }
@keyframes fenerSalla { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.banner-sahne .cicek { position: absolute; color: var(--rose); }
.banner-sahne .cicek.c1 { width: 92px; height: 92px; right: 22px; bottom: 18px; opacity: .5; }
.banner-sahne .cicek.c2 { width: 54px; height: 54px; right: 330px; bottom: 30px; opacity: .35; }
.banner-sahne .cicek.c3 { width: 38px; height: 38px; right: 96px; bottom: 96px; opacity: .3; }
.banner-sahne .kalp { position: absolute; width: 34px; height: 34px; right: 208px; bottom: 64px;
color: var(--rose); opacity: .35; }
/* ---------- Vitrin: 4'lü zengin aday kartları ---------- */
.vitrin { background: linear-gradient(180deg, #fff 70%, #FFF8F5); }
.mini-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mini-aday { padding: 26px 14px 20px; border-radius: 18px; gap: 4px;
background: linear-gradient(180deg, #fff, #FFF9F6); }
.mini-aday .ma-ust { position: relative; display: inline-flex; padding: 5px; border-radius: 50%;
background: conic-gradient(from 210deg, var(--rose), var(--gold), var(--mauve), var(--rose)); margin-bottom: 8px; }
.mini-aday .ma-ust .harf-avatar { border: 3px solid #fff; }
.harf-avatar.buyukav { width: 72px; height: 72px; font-size: 30px; margin-bottom: 0; }
.mini-aday .uyum { top: 12px; right: 12px; font-size: 12px; padding: 4px 10px;
box-shadow: 0 4px 10px rgba(47, 107, 76, .16); }
.mini-aday .ad { font-size: 16px; font-family: var(--serif); }
.mini-aday .yer { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.mini-aday .yer .ico { width: 13px; height: 13px; color: var(--rose); }
.mini-aday .cips { margin-top: 9px; }
.mini-aday .cips i { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 10px; }
.mini-aday .cips i .ico { width: 12px; height: 12px; color: var(--rose-deep); }
/* ---------- Alt sıra (4 kart: talepler / danış / güven / tavsiye) ----------
DİKKAT: burada auto-fit KULLANMA. Kart sayısı sabit 4; auto-fit geniş ekranda
5-6 kolon üretip sondaki gözleri boş bırakıyor, dar ekranda ise sıçramalı
(900px'te 1, 1024px'te 2) davranıyordu. Açık kolon sayısı öngörülebilir. */
.uclu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.uclu .pcard { margin-bottom: 0; }
.guven-liste.buyuk { border-top: 0; padding-top: 2px; gap: 11px; }
.guven-liste.buyuk span { font-size: 13.5px; color: var(--ink); }
.guven-liste.buyuk .ico { width: 17px; height: 17px; background: #EAF3EC; border-radius: 50%; padding: 2px; }
.danis-ozet { border-bottom: 1px dashed var(--line); padding: 9px 0; }
.danis-ozet:last-of-type { border-bottom: 0; }
.danis-ozet p { margin: 0 0 4px; font-size: 13.5px; color: var(--ink); font-style: italic; }
.danis-ozet .cevaplandi { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
font-weight: 800; color: var(--green); }
.danis-ozet .cevaplandi .ico { width: 13px; height: 13px; }
.danis-ozet .bekliyor { font-size: 12px; font-weight: 700; color: var(--mauve); }
/* ---------- Kart süslemeleri ----------
.kart-sus mutlak konumlu: kapsayıcısı position:relative + overflow:hidden OLMALI,
yoksa fener/çiçek kartın dışına taşar. Eskiden `.pyan .pcard`'a bağlıydı; sağ ray
kaldırılınca tavsiye kartına taşındı. */
.pcard.tavsiye { position: relative; overflow: hidden; }
.kart-sus { position: absolute; right: 10px; bottom: 6px; pointer-events: none; }
.kart-sus .s-fener { width: 44px; height: 44px; color: var(--gold); opacity: .4;
display: inline-block; vertical-align: bottom; }
.kart-sus .s-cicek { width: 34px; height: 34px; color: var(--rose); opacity: .3;
display: inline-block; vertical-align: bottom; margin-right: -6px; }
.pcard.tavsiye .tirnak { font-family: var(--serif); font-size: 30px; color: var(--gold);
line-height: .6; margin-right: 2px; }
.pcard.tavsiye blockquote { font-size: 16.5px; }
.pbtn.tam .ico { width: 15px; height: 15px; }
.halka { width: 92px; height: 92px; }
.halka svg { width: 92px; height: 92px; }
.halka b { font-size: 18px; }
/* ---------- Ara breakpoint'ler ---------- */
/* 1560 → 1180: sağ ray kalkınca içerik ~340px genişledi, eski eşik erken tetikleniyordu
(1101px kolonda 4 kart rahat sığarken 3'e düşüp aşağı sarıyordu). Şeritler 4 kayıt
döndürdüğü için üst sınır 4 kolonda sabit — auto-fit boş göz bırakırdı. */
@media (max-width: 1180px) { .mini-kartlar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 4 kart 1100px'lik kolonda 262px'e düşüyor (güven listesi metinleri sarıyor);
2x2 bu genişlikte 4x1'den okunaklı. Tek kolona ancak sidebar kalkınca iniyor. */
@media (max-width: 1560px) { .uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 900px) { .uclu { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
.banner-sahne { width: 300px; }
.banner-sahne .kemer.k2, .banner-sahne .cicek.c2, .banner-sahne .fener.f2, .banner-sahne .kalp { display: none; }
.tb-ara { width: min(300px, 26vw); }
}
@media (max-width: 1080px) {
.mini-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) { .tb-ara { display: none; } }
@media (max-width: 860px) {
.picerik { padding: 16px 14px calc(86px + env(safe-area-inset-bottom)); }
.banner { min-height: 0; }
.banner-ic { padding: 24px 20px; }
.banner h1 { font-size: 25px; }
.banner-sahne { display: none; }
.pcard { padding: 20px 16px; border-radius: 18px; }
}
.uclu .pcard-bas h2 { font-size: 17px; }
.uclu .pcard-bas .hepsi { flex: none; }
.banner-ic { padding: 32px 40px; }
.banner h1 { font-size: 33px; }
/* ============================================================
Üyelik & Paketler sayfası + standart boş durum bileşeni
============================================================ */
/* ---------- Boş durum (tüm ekranlarda aynı format) ---------- */
.bos-durum { display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 4px; padding: 30px 16px 22px; }
.bos-durum .bd-ikon { width: 62px; height: 62px; border-radius: 50%; background: var(--blush);
color: var(--rose-deep); display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 8px; animation: bdYuzer 3.4s ease-in-out infinite;
box-shadow: 0 10px 22px rgba(217, 67, 92, .14); }
.bos-durum .bd-ikon .ico { width: 27px; height: 27px; }
@keyframes bdYuzer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bos-durum b { font-family: var(--serif); font-size: 16.5px; color: var(--ink); }
.bos-durum p { margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 340px; }
.bos-durum .pbtn { margin-top: 12px; }
.bos-durum.mini { padding: 18px 8px 12px; }
.bos-durum.mini .bd-ikon { width: 50px; height: 50px; }
.bos-durum.mini .bd-ikon .ico { width: 22px; height: 22px; }
.bos-durum.mini b { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .bos-durum .bd-ikon { animation: none; } }
/* ---------- Üyelik durumu şeridi ---------- */
.uz-durum { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
padding: 20px 26px; margin-bottom: 22px; animation: kartGiris .5s cubic-bezier(.2, .8, .3, 1.1) both; }
.uzd-parca { display: flex; align-items: center; gap: 16px; }
.uzd-baslik { display: block; font-family: var(--serif); font-size: 21px; }
.uzd-parca span { font-size: 13.5px; color: var(--ink-soft); }
.halka.kucuk { width: 68px; height: 68px; }
.halka.kucuk svg { width: 68px; height: 68px; }
.halka.kucuk b { font-size: 19px; font-family: var(--serif); }
.uzd-rozetler { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.rozet.sonuk { background: var(--cream); color: var(--mauve); border: 1px dashed var(--line); }
/* ---------- Paket kartları (panel) ---------- */
.pk-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.pk-kart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 26px 14px 20px; border: 2px solid var(--line); border-radius: 18px; background: #fff;
cursor: pointer; text-align: center; opacity: 0;
animation: kartGiris .5s cubic-bezier(.2, .8, .3, 1.1) forwards;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.pk-kart:nth-child(1) { animation-delay: .05s; }
.pk-kart:nth-child(2) { animation-delay: .15s; }
.pk-kart:nth-child(3) { animation-delay: .25s; }
.pk-kart input { position: absolute; opacity: 0; pointer-events: none; }
.pk-kart > b { font-size: 19px; font-family: var(--serif); }
.pk-kart .pk-gun { font-size: 12.5px; font-weight: 800; color: var(--green); background: #EAF3EC;
border-radius: 999px; padding: 3px 11px; margin-top: 3px; }
.pk-kart .pk-tutar { font-size: 21px; font-weight: 800; color: var(--rose-deep); margin-top: 8px; }
.pk-kart .pk-rozet { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: var(--gold); color: #4A3A12; font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px; }
.pk-kart:hover { transform: translateY(-3px); border-color: var(--rose); }
.pk-kart:has(input:checked) { border-color: var(--rose); background: #FFF6F4;
box-shadow: 0 12px 28px rgba(217, 67, 92, .18); transform: translateY(-3px); }
.pk-kart:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
border-radius: 50%; background: var(--rose) url('data:image/svg+xml;utf8,') center/13px no-repeat;
animation: onayPat .35s cubic-bezier(.2, 1.4, .4, 1) both; }
/* ---------- Eklenti kartları + örnek animasyonlar (panel) ---------- */
.ek-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.ek-kart { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 15px; border: 2px solid var(--line);
border-radius: 18px; background: #fff; cursor: pointer; opacity: 0;
animation: kartGiris .5s cubic-bezier(.2, .8, .3, 1.1) forwards;
transition: border-color .22s ease, box-shadow .22s ease; }
.ek-kart:nth-child(1) { animation-delay: .2s; }
.ek-kart:nth-child(2) { animation-delay: .3s; }
.ek-kart:has(input:checked) { border-color: var(--rose); background: #FFF6F4;
box-shadow: 0 10px 24px rgba(217, 67, 92, .14); }
.ek-kart .ek-ust { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.ek-kart .ek-ust input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rose); flex: none; }
.ek-kart .ek-fiyat { font-style: normal; font-weight: 800; color: var(--rose-deep); font-size: 13.5px; }
.ek-kart > p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ek-kart .ek-not { font-size: 12px; font-weight: 700; color: var(--green); background: #EAF3EC;
border-radius: 999px; padding: 4px 11px; align-self: flex-start; }
.ek-demo { margin-top: 4px; border: 1px dashed var(--line); border-radius: 12px; background: var(--cream);
padding: 10px; overflow: hidden; }
.demo-one { display: flex; flex-direction: column; gap: 6px; }
.demo-one .d-kart { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
border-radius: 8px; padding: 7px 10px; }
.demo-one .d-kart i { width: 22px; height: 22px; border-radius: 50%; background: rgba(201, 159, 168, .35); flex: none; }
.demo-one .d-kart em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--rose-deep); }
.demo-one .d-kart.siz { order: -1; border-color: var(--gold); box-shadow: 0 4px 12px rgba(217, 180, 91, .35);
animation: oneYuksel 3.2s ease-in-out infinite; }
.demo-one .d-kart.siz i { background: var(--gold); }
@keyframes oneYuksel {
0% { transform: translateY(34px); opacity: .5; }
30%, 88% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.demo-gizli { position: relative; display: flex; align-items: center; justify-content: center; min-height: 78px; }
.demo-gizli .d-profil { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line);
border-radius: 8px; padding: 8px 14px; animation: gizliSol 3.2s ease-in-out infinite; }
.demo-gizli .d-profil i { width: 24px; height: 24px; border-radius: 50%; background: rgba(201, 159, 168, .35); }
.demo-gizli .d-profil em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.demo-gizli .d-kilit { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--green);
color: #fff; display: flex; align-items: center; justify-content: center; animation: kilitGel 3.2s ease-in-out infinite; }
.demo-gizli .d-kilit .ico { width: 16px; height: 16px; }
@keyframes gizliSol { 0%, 18% { opacity: 1; filter: blur(0); } 45%, 88% { opacity: .3; filter: blur(1.6px); } 100% { opacity: .3; } }
@keyframes kilitGel { 0%, 18% { opacity: 0; transform: scale(.5); } 45%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
/* ---------- Toplam şeridi ---------- */
.uz-toplam { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
background: linear-gradient(120deg, #fff 40%, #FFF3EF); }
.ut-etiket { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: .05em; }
.ut-tutar { font-family: var(--serif); font-size: 38px; color: var(--rose-deep); line-height: 1.1; }
.ut-tl { font-weight: 800; color: var(--rose-deep); margin-left: 6px; font-size: 17px; }
.ut-ozet { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.pbtn.buyukbtn { padding: 15px 30px; font-size: 16px; border-radius: 16px; }
.pbtn.buyukbtn .ico { width: 17px; height: 17px; }
.hafif { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.odeme-goster { animation: kartGiris .5s cubic-bezier(.2, .8, .3, 1.1) both; }
@media (max-width: 900px) {
.pk-kartlar { grid-template-columns: 1fr; }
.pk-kart { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 16px 18px; }
.pk-kart .pk-tutar { margin-top: 0; }
.ek-kartlar { grid-template-columns: 1fr; }
.uzd-rozetler { align-items: flex-start; }
.uz-toplam { flex-direction: column; align-items: stretch; text-align: center; }
.pbtn.buyukbtn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.pk-kart, .ek-kart, .uz-durum, .odeme-goster { animation-duration: .01s; }
.demo-one .d-kart.siz, .demo-gizli .d-profil, .demo-gizli .d-kilit { animation: none; }
}
@media (max-width: 900px) { .pk-kart:has(input:checked)::after { top: -9px; right: -9px; } }
/* Ultra geniş ekranlar: vitrin kartları ve aside oranı */
@media (min-width: 1900px) {
.mini-kartlar { gap: 20px; }
.banner-sahne { width: 520px; }
}
/* ============================================================
Üye Girişi — sahneli tasarım (background.jpg + merkez kart)
============================================================ */
.giris-sayfa { margin: 0; background: var(--cream); }
.giris-sahne { min-height: 88vh; display: flex; align-items: center; justify-content: center;
padding: 34px 16px; position: relative;
/* Çift katman: üstte fotoğraf, altta degrade — görsel yüklenmezse degrade görünür */
background-image: url('/img/background.jpg'), linear-gradient(160deg, var(--blush), var(--cream) 55%);
background-size: cover, cover; background-position: center, center; }
.giris-sahne::before { content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, .06), rgba(90, 40, 50, .16)); }
.giris-kart { position: relative; width: 100%; max-width: 460px; background: rgba(255, 253, 251, .96);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .8); border-radius: 24px; padding: 34px 38px 30px;
box-shadow: 0 30px 80px rgba(70, 25, 35, .35); text-align: center;
animation: kartGiris .55s cubic-bezier(.2, .8, .3, 1.1) both; }
.g-marka { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 18px; }
.g-logo-resim { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
border: 3px solid #fff; box-shadow: 0 0 0 2px #C99C4A, 0 10px 24px rgba(70, 25, 35, .25); margin-bottom: 6px; }
.g-marka b { font-family: var(--serif); font-size: 21px; letter-spacing: .14em; color: var(--rose-deep); }
.g-marka i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: #8A6A2C; }
.g-minik-kalp { width: 12px; height: 12px; color: var(--rose); margin-top: 4px; }
/* Alt başlık login'den kaldırıldı (marka sloganıyla aynı şeyi söylüyordu) ama engelli.php
hâlâ .g-alt basıyor — h1'in alt boşluğu buna göre kendini ayarlar. */
.giris-kart h1 { font-family: var(--serif); font-size: 26px; margin: 0 0 18px; color: var(--ink); }
.giris-kart h1:has(+ .g-alt) { margin-bottom: 4px; }
.g-alt { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.g-hata { background: #FBE9EC; border: 1px solid #F0C7CE; color: var(--rose-deep); font-size: 13.5px;
font-weight: 700; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.giris-kart form { text-align: left; }
.giris-kart label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.g-alan { position: relative; }
.g-alan .gi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--mauve); pointer-events: none; }
.g-alan input { width: 100%; padding: 12px 44px 12px 42px; border: 1px solid var(--line);
border-radius: 12px; font-size: 14.5px; background: #fff; color: var(--ink); }
.g-alan input::placeholder { color: #8F7278; }
.g-alan input:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.g-goz { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0;
background: none; padding: 8px; cursor: pointer; color: var(--ink-soft); display: flex; border-radius: 8px; }
.g-goz svg { width: 19px; height: 19px; }
.g-goz:hover { color: var(--rose-deep); }
.g-goz.acik { color: var(--rose); }
.g-satir { display: flex; justify-content: flex-end; margin: 10px 0 16px; }
.g-unut { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.g-unut:hover { color: var(--rose-deep); }
.g-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
background: var(--rose); color: #fff; border: 0; border-radius: 12px; padding: 14px 20px;
font-size: 15.5px; font-weight: 800; cursor: pointer; transition: background .15s, transform .12s; }
.g-btn:hover { background: var(--rose-deep); }
.g-btn:active { transform: scale(.985); }
.g-btn svg { width: 18px; height: 18px; }
.g-veya { display: flex; align-items: center; gap: 14px; margin: 18px 0 12px; color: var(--ink-soft); font-size: 12.5px; }
.g-veya::before, .g-veya::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.g-kayit { font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
.g-kayit a { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--rose-deep); }
.g-kayit a svg { width: 15px; height: 15px; }
.g-guven { display: flex; gap: 11px; align-items: flex-start; text-align: left; background: var(--cream);
border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 12.5px;
color: var(--ink-soft); }
.g-guven b { display: block; color: var(--ink); font-size: 13px; }
.gg-ikon { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--green);
color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.gg-ikon svg { width: 18px; height: 18px; }
/* Alt güven şeridi */
.giris-serit { display: flex; justify-content: center; gap: clamp(24px, 6vw, 90px); flex-wrap: wrap;
padding: 22px 18px 26px; background: var(--cream); }
.gs-oge { display: flex; align-items: center; gap: 11px; }
.gs-ikon { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); color: var(--rose-deep);
display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gs-ikon svg { width: 19px; height: 19px; }
.gs-oge b { display: block; font-size: 14px; color: var(--ink); }
.gs-oge i { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 560px) {
.giris-sahne { padding: 20px 12px; min-height: 92vh; align-items: flex-start; }
.giris-kart { padding: 26px 22px 24px; margin-top: 4vh; }
.giris-serit { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 28px; }
}
@media (prefers-reduced-motion: reduce) { .giris-kart { animation: none; } }
/* Engellenmiş giriş sayfası (reddedildi/yasaklı) */
.engel-ikon { width: 66px; height: 66px; border-radius: 50%; background: #FBE9EC; color: var(--rose-deep);
display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.engel-ikon svg { width: 34px; height: 34px; }
.engel-sebep { text-align: left; background: var(--cream); border: 1px solid var(--line);
border-left: 4px solid var(--rose); border-radius: 12px; padding: 12px 15px; margin: 4px 0 18px; }
.engel-sebep .es-etiket { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.engel-sebep p { margin: 4px 0 0; font-size: 14px; color: var(--ink); white-space: pre-line; }
/* ---------- Panel onay modalı (çıkış vb.) ---------- */
.p-modal-ort { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(51, 38, 43, .48);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 18px; }
.p-modal-ort.acik { display: flex; animation: pmGiris .18s ease both; }
@keyframes pmGiris { from { opacity: 0; } to { opacity: 1; } }
.p-modal { background: #fff; border-radius: 20px; padding: 28px 26px 22px; width: 100%; max-width: 400px;
text-align: center; box-shadow: 0 30px 70px rgba(50, 20, 30, .38);
animation: pmKart .28s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes pmKart { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.pm-ikon { width: 56px; height: 56px; border-radius: 50%; background: var(--blush); color: var(--rose-deep);
display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.pm-ikon .ico { width: 26px; height: 26px; }
.p-modal h3 { font-family: var(--serif); font-size: 20px; margin: 0 0 6px; }
.p-modal p { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 18px; }
.pm-alt { display: flex; gap: 10px; justify-content: center; }
.pm-alt .pbtn { min-width: 118px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .p-modal-ort.acik, .p-modal { animation: none; } }
/* ---------- Öne Çıkarma (ücretli vitrin) rozetleri ---------- */
/* Rozet akış içinde durur; mutlak konumlanınca isim satırının üstüne biniyordu */
.one-rozet { display: inline-flex; align-self: flex-start; margin-bottom: 10px;
background: linear-gradient(120deg, #F3D98B, var(--gold)); color: #5C4708;
font-size: 10px; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 3px 9px;
box-shadow: 0 4px 10px rgba(217, 180, 91, .4); }
.aday.one-cikan, .mini-aday.one-cikan { position: relative; border-color: var(--gold);
box-shadow: 0 10px 26px rgba(217, 180, 91, .22); background: linear-gradient(180deg, #FFFDF7, #FFF9F0); }
.aday.one-cikan { display: flex; flex-direction: column; }
.aday.one-cikan .skor { top: 40px; right: 14px; }
/* Mini kartta ayrı rozet yok: kart başlığı zaten "Öne Çıkanlar", altın çerçeve işaret olarak yeter */
.one-cikan-kart { border-color: #EBD9A8; background: linear-gradient(180deg, #fff 70%, #FFFBF2); }
.one-cikan-kart .bas-ikon { color: #C99C4A; }
/* Aday listesi başlık sayacı */
#liste-sayi { color: var(--ink-soft); font-weight: 700; font-size: 13px; }
/* Filtre butonları: dar ekranda 150px'lik ızgara hücresine sığmıyor, tam satıra alınır */
.filtreler .filtre-aksiyon { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.filtreler .filtre-aksiyon .pbtn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
@media (max-width: 620px) { .filtreler .filtre-aksiyon { grid-column: 1 / -1; } }
/* ============================================================
Aday hikaye kartı — 9:16, altın varak süslemeli açık tema.
KAYDIRMA YOK: .hik-ic flex kolon; .hik-bas ve .hik-alt sabit,
yalnız .hik-govde kendi içinde kayar → butonlar hep görünür.
Işıltı: .isilti-3 (>=85) / .isilti-2 (70-84) / .isilti-1 (50-69) / .isilti-0 (<50)
============================================================ */
.hik-ort { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center;
padding: 18px; background: rgba(74, 40, 52, .5); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.hik-ort.acik { display: flex; animation: hikOrtGir .2s ease forwards; }
@keyframes hikOrtGir { from { opacity: 0; } to { opacity: 1; } }
/* DİKKAT: kapat butonu hem KOYU perdenin hem de AÇIK kartın üstüne denk gelebilir
(mobilde kart tam ekran, tablette de kartın üstüne biniyor). Bu yüzden yarı saydam
DEĞİL, dolu zeminli ve koyu ikonlu — her iki zeminde de okunur. */
.hik-kapat { position: absolute; top: 14px; right: 14px; z-index: 6; width: 44px; height: 44px;
border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--rose-deep); border: 1.5px solid rgba(201, 162, 39, .55);
box-shadow: 0 4px 16px rgba(60, 25, 38, .28); transition: background .15s, transform .12s; }
.hik-kapat:hover { background: #FDF0EC; }
.hik-kapat:active { transform: scale(.93); }
.hik-kapat:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.hik-kapat .ico { width: 22px; height: 22px; stroke-width: 2.6; }
/* 9:16 — Instagram hikayesi oranı */
.hik-kart { position: relative; aspect-ratio: 9 / 16; height: min(94vh, 880px); max-width: calc(100vw - 28px);
border-radius: 20px; overflow: hidden; color: #4A2F38;
background:
radial-gradient(120% 60% at 50% 0%, #FFF7F4 0%, transparent 60%),
linear-gradient(168deg, #FDF0EC 0%, #FBE4DE 52%, #F7D9D3 100%);
box-shadow: 0 24px 64px rgba(74, 30, 44, .38), 0 0 0 1px rgba(201, 162, 39, .5);
animation: hikKartGir .4s cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes hikKartGir { from { opacity: 0; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }
.hik-ort.yukleniyor .hik-kart { opacity: .4; }
/* Damask doku — çok soluk, altın tonlu */
.hik-kart::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
radial-gradient(circle at 20% 18%, rgba(201, 162, 39, .09) 0 12px, transparent 13px),
radial-gradient(circle at 72% 38%, rgba(201, 162, 39, .07) 0 14px, transparent 15px),
radial-gradient(circle at 38% 72%, rgba(201, 162, 39, .07) 0 11px, transparent 12px),
radial-gradient(circle at 84% 84%, rgba(201, 162, 39, .06) 0 13px, transparent 14px); }
/* Altın varak çerçeve: ince çift çizgi + köşe süsleri + madalyonlar */
.hik-kart::after { content: ''; position: absolute; inset: 13px; border-radius: 12px; pointer-events: none;
border: 1.5px solid rgba(201, 162, 39, .55); box-shadow: inset 0 0 0 3.5px rgba(201, 162, 39, .13); }
.hik-kose { position: absolute; width: 74px; height: 74px; z-index: 2; pointer-events: none; }
.hik-kose.ku { top: 8px; left: 8px; }
.hik-kose.su { top: 8px; right: 8px; transform: scaleX(-1); }
.hik-kose.ka { bottom: 8px; left: 8px; transform: scaleY(-1); }
.hik-kose.sa { bottom: 8px; right: 8px; transform: scale(-1); }
.hik-madalyon { position: absolute; left: 50%; width: 108px; height: 36px; margin-left: -54px;
z-index: 2; pointer-events: none; }
.hik-madalyon.ust { top: 5px; }
.hik-madalyon.alt { bottom: 5px; transform: scaleY(-1); }
/* --- İç yerleşim: üst sabit / orta kayar / alt sabit --- */
.hik-ic { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
padding: 46px 22px 38px; text-align: center; overflow: hidden; }
.hik-bas { flex: none; display: flex; flex-direction: column; align-items: center; }
.hik-rozetler { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hik-rozet { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; border-radius: 999px; padding: 4px 10px; }
.hik-rozet.one { background: linear-gradient(120deg, #F6E3B0, #C9A227); color: #4A3405; }
.hik-rozet.pasif { background: #EFE7E4; color: #7A6C67; border: 1px solid #E0D4CF; }
.hik-avatar-kap { position: relative; display: inline-flex; margin: 8px 0 10px; }
.hik-avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 35px; font-weight: 700; color: #8A5A2B;
background: linear-gradient(160deg, #FFF6E4, #F3DCB0);
border: 3px solid #fff;
box-shadow: 0 0 0 3px #C9A227, 0 0 0 6px rgba(201, 162, 39, .22), 0 8px 20px rgba(120, 70, 40, .18); }
/* Uyum mührü — avatarın sağ altında, referanstaki onay rozetinin yerinde */
.hik-muhur { position: absolute; right: -16px; bottom: -2px; min-width: 46px; padding: 4px 7px 3px;
border-radius: 14px; background: linear-gradient(150deg, #F6E3B0, #C9A227); border: 2.5px solid #fff;
box-shadow: 0 4px 12px rgba(140, 100, 20, .3); display: flex; flex-direction: column; align-items: center; }
.hik-muhur b { font-family: var(--serif); font-size: 15px; line-height: 1; color: #4A3405; }
.hik-muhur i { font-style: normal; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: #6B4E10; }
.hik-muhur.yesil { background: linear-gradient(150deg, #A8DCC0, #2F6B4C); }
.hik-muhur.yesil b { color: #fff; } .hik-muhur.yesil i { color: #DBF0E4; }
.hik-ad { font-family: var(--serif); font-size: 24px; line-height: 1.15; color: #45242F; }
.hik-yer { font-size: 12.5px; color: #8A6B72; margin-top: 3px; }
.hik-ayrac { width: 88px; height: 12px; margin: 7px 0 6px; }
.hik-alinti { margin: 0 0 11px; font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5;
color: #6E4A55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Onaylı profil şeridi (eski iki büyük nişan kartının yerine — yer kazandırır) */
.hik-onayli { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 9px;
padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
background: #E7F3EC; color: var(--green); border: 1px solid #CFE5D9; }
.hik-onayli .ico { width: 13px; height: 13px; }
/* --- Gövde: TEK kayan alan (gerekirse), akordeon YOK --- */
.hik-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
text-align: left; padding-right: 3px; }
.hik-govde::-webkit-scrollbar { width: 3px; }
.hik-govde::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, .45); border-radius: 3px; }
/* Bilgi ızgarası — dolu olan her alan tek bakışta */
.hik-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hik-cip { background: rgba(255, 255, 255, .72); border: 1px solid rgba(201, 162, 39, .28);
border-radius: 12px; padding: 7px 10px; min-width: 0; }
.hik-cip i { display: block; font-style: normal; font-size: 9px; letter-spacing: .09em;
text-transform: uppercase; color: #9A7A82; margin-bottom: 1px; }
.hik-cip b { font-size: 12.5px; font-weight: 600; color: #45242F; overflow-wrap: anywhere; }
/* Eşinde aradıkları */
.hik-serbest { margin-top: 11px; }
.hik-serbest b { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: #B8902F; margin-bottom: 4px; }
.hik-serbest p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #5C3C46; white-space: pre-line; }
/* --- Alt aksiyonlar: SABİT, kaydırma gerektirmez --- */
.hik-alt { flex: none; display: flex; gap: 8px; padding-top: 12px; }
.hik-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 12px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer;
border: 1.5px solid var(--rose); background: #fff; color: var(--rose-deep);
transition: transform .12s, background .16s, color .16s; }
.hik-btn:active { transform: scale(.97); }
/* "Sohbete Git" bir — .hik-btn