/* Gerçekçi telefon gövdesi + canlı ekran (tel-ekran.js). Kaynak: banka.css 76–133 (ana sayfa kapağı). 8 Kas 2026: Keşfet kapağı için ayrıldı; ana sayfa banka.css'i kullanmaya devam eder. */
:root{--yf-yazi:#1D1433; --yf-gri:#5E5472}

/* ---- Gerçekçi telefon gövdesi ---- */
.fc-tel{position:relative; width:100%; max-width:260px; justify-self:end; padding:9px; box-sizing:border-box; border-radius:46px; background:linear-gradient(145deg,#55545a 0%,#1b1b1f 22%,#101013 60%,#3b3a40 100%); box-shadow:0 0 0 1px #000,inset 0 0 2px 1px rgba(255,255,255,.28),0 28px 54px rgba(36,19,56,.24)}
.fc-tel::before,.fc-tel::after{content:""; position:absolute; width:3px; border-radius:2px; background:#2a2a2e}
.fc-tel::before{left:-3px; top:112px; height:52px; box-shadow:0 66px 0 #2a2a2e}
.fc-tel::after{right:-3px; top:138px; height:82px}
.fc-tel-ekran{border-radius:37px}

/* ---- Canlı uygulama ekranı: 280×624 çizilir, kabına ölçeklenir ---- */
.te{position:relative; overflow:hidden; aspect-ratio:280/624; background:#F6F4FA; text-align:left}
.te-ic{position:absolute; left:0; top:0; width:280px; height:624px; transform-origin:0 0; color:var(--yf-yazi); font-family:var(--font-arayuz); font-size:14px; line-height:1.3; -webkit-font-smoothing:antialiased}
.te-durum{display:flex; align-items:center; justify-content:space-between; height:44px; padding:6px 22px 0; box-sizing:border-box; font-size:14px}
.te-durum b{font-weight:700}
.te-ada{position:absolute; left:50%; top:10px; width:84px; height:24px; margin-left:-42px; border-radius:14px; background:#050506}
.te-sim{display:flex; align-items:center; gap:5px}
.te-sim svg{width:17px; height:11px; fill:var(--yf-yazi)}
.te-pil{display:block; width:22px; height:11px; padding:1px; box-sizing:border-box; border:1px solid rgba(29,20,51,.5); border-radius:3px}
.te-pil u{display:block; width:78%; height:100%; border-radius:1px; background:var(--yf-yazi)}
.te-ust{display:flex; align-items:center; gap:8px; height:44px; padding:0 18px}
.te-ust img{width:26px; height:26px; border-radius:50%}
.te-ust b{font-size:17px; font-weight:700; color:#4A1E94}
.te-sahne{position:absolute; left:0; right:0; top:92px; bottom:96px; padding:6px 16px 0; box-sizing:border-box; opacity:0; transform:translateX(14px); transition:opacity .35s ease,transform .35s ease; pointer-events:none}
.te-sahne.on{opacity:1; transform:none}
.te h4{margin:0; font-size:22px; font-weight:700; line-height:1.2; color:var(--yf-yazi)}
.te-kisa{margin:4px 0 0; font-size:14px; color:var(--yf-gri)}
.te-kart{margin-top:14px; padding:2px 14px; border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(36,19,56,.08)}
.te-sat{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; border-top:1px solid #EFECF5}
.te-sat:first-child{border-top:0}
.te-sat > span{font-size:14px; color:var(--yf-gri)}
.te-sat > b{font-size:15px; font-weight:700}
.te-ok{color:#5B24A8}
.te-rozet{display:flex; align-items:center; gap:6px; margin-top:12px; font-size:14px; font-weight:600; color:#5B24A8}
.te-rozet svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.te-dugme{display:flex; align-items:center; justify-content:center; height:50px; margin-top:16px; border-radius:25px; background:#5B24A8; color:#fff; font-size:16px; font-weight:700}
.te-etiket{margin:0; font-size:14px; color:var(--yf-gri)}
.te-tutar{margin:2px 0 0; font-size:40px; font-weight:800; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.te-cubuk{height:8px; margin-top:12px; border-radius:4px; background:#E4DEF0; overflow:hidden}
.te-cubuk i{display:block; width:0; height:100%; border-radius:inherit; background:#5B24A8; transition:width .6s ease}
.te-oran{display:flex; justify-content:space-between; margin-top:6px; font-size:13px; color:var(--yf-gri)}
.te-bas{margin:18px 0 0; font-size:15px; font-weight:700}
.te-akis{margin-top:8px}
.te-kisi{justify-content:flex-start; gap:10px; min-height:58px}
.te-kisi > i{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:#EDE7F8; color:#4A1E94; font-size:13px; font-style:normal; font-weight:700}
.te-kisi > span{flex:1; min-width:0}
.te-kisi > span b{display:block; font-size:14px; font-weight:600; color:var(--yf-yazi)}
.te-kisi > span small{display:block; font-size:12px; color:var(--yf-gri)}
.te-bos{margin:0; padding:18px 0; font-size:14px; color:var(--yf-gri); text-align:center}
.te-son{text-align:center}
.te-son .te-kart{text-align:left}
.te-buyuk{display:grid; place-items:center; width:72px; height:72px; margin:10px auto 12px; border-radius:50%; background:var(--lamba)}
.te-buyuk svg{width:42px; height:42px; fill:none; stroke:#2A1466; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.te-alt{position:absolute; left:0; right:0; bottom:0; height:96px; text-align:center}
.te-alt small{display:block; height:18px; font-size:11px; line-height:18px; color:#6B6280}
.te-sekme{display:grid; grid-template-columns:repeat(4,1fr); height:78px; padding-top:8px; box-sizing:border-box; border-top:1px solid #E6E1F0; background:#fff}
.te-sekme span{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:500; color:#6B6280}
.te-sekme span.on{font-weight:700; color:#5B24A8}
.te-sekme svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.te-alt > i{position:absolute; left:50%; bottom:8px; width:104px; height:4px; margin-left:-52px; border-radius:2px; background:var(--yf-yazi)}

/* 8 Kas 2026: canlı telefon ekranının yeri betik çalışmadan ayrılır (yüklenirken boyut değişip sayfayı kaydırmasın). */
[data-tel-ekran]{aspect-ratio:280/624}

/* 8 Kas 2026 (kullanıcı: "telefonlar gerçek telefon olsun, kasaları ve ekranları", "telefonlar 3d olsun"):
   kasa hafif perspektifte; sağ kenarda kasa kalınlığı, camda yansıma, yumuşak gölge. Ekran içeriği aynen. */
.fc-tel{transform:perspective(1400px) rotateY(-14deg) rotateX(4deg); transform-origin:50% 50%;
  box-shadow:0 0 0 1px #000, inset 0 0 2px 1px rgba(255,255,255,.3),
    1px 1px 0 #3a3940, 2px 2px 0 #2f2e34, 3px 3px 0 #29282e, 4px 4px 0 #232228, 5px 5px 0 #1d1c21, 6px 6px 0 #17161a,
    26px 34px 46px -8px rgba(36,19,56,.32), 8px 10px 18px rgba(36,19,56,.18)}
.fc-tel-ekran{position:relative}
.fc-tel-ekran::after{content:""; position:absolute; inset:0; z-index:6; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 40%)}
@media (max-width:940px){
  .fc-tel{transform:perspective(900px) rotateY(-10deg) rotateX(3deg);
    box-shadow:0 0 0 1px #000, inset 0 0 2px 1px rgba(255,255,255,.3), 1px 1px 0 #34333a, 2px 2px 0 #2a292f, 3px 3px 0 #1f1e23, 14px 18px 26px -6px rgba(36,19,56,.3)}
}


/* 8 Kas 2026 (kullanıcı: "telefon kasası siyah olmasın, en çok tutulan beğenilen kasa olsun"): Derin Mor titanyum kasa
   (fırçalanmış metal tonları, parlak kenar çizgisi); yan tuşlar ve kasa kalınlığı aynı tonda. */
.fc-tel{background:linear-gradient(145deg,#9C8FAE 0%,#6F6282 14%,#544867 38%,#463B58 62%,#5E5272 86%,#8A7D9D 100%);
  box-shadow:0 0 0 1px #2E2540, inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 3px 1px rgba(255,255,255,.25),
    1px 1px 0 #5B4F6E, 2px 2px 0 #52476A, 3px 3px 0 #4A3F5F, 4px 4px 0 #423856, 5px 5px 0 #3B324D, 6px 6px 0 #342C44,
    26px 34px 46px -8px rgba(36,19,56,.32), 8px 10px 18px rgba(36,19,56,.18)}
.fc-tel::before,.fc-tel::after{background:linear-gradient(90deg,#3E3450,#7A6D8E)}
.fc-tel-ekran{box-shadow:0 0 0 2px #120E18}
@media (max-width:940px){
  .fc-tel{box-shadow:0 0 0 1px #2E2540, inset 0 0 0 1px rgba(255,255,255,.35), 1px 1px 0 #554A68, 2px 2px 0 #483E5C, 3px 3px 0 #3B324D, 14px 18px 26px -6px rgba(36,19,56,.3)}
}

/* 8 Kas 2026 (kullanıcı: "daha 3D göstermek için konumuna göre gölge ekle"): ışık sol üstten; telefon sağa dönük olduğu için
   zemine düşen gölge sağ alta uzanır (dar, yumuşak), temas gölgesi alt kenarda. */
.fc-tel{box-shadow:0 0 0 1px #2E2540, inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 3px 1px rgba(255,255,255,.25),
    1px 1px 0 #5B4F6E, 2px 2px 0 #52476A, 3px 3px 0 #4A3F5F, 4px 4px 0 #423856, 5px 5px 0 #3B324D, 6px 6px 0 #342C44,
    10px 14px 18px rgba(36,19,56,.22),
    46px 70px 46px -30px rgba(30,16,52,.40),
    90px 110px 70px -50px rgba(30,16,52,.22)}
@media (max-width:940px){
  .fc-tel{box-shadow:0 0 0 1px #2E2540, inset 0 0 0 1px rgba(255,255,255,.35), 1px 1px 0 #554A68, 2px 2px 0 #483E5C, 3px 3px 0 #3B324D,
    6px 8px 10px rgba(36,19,56,.22), 20px 34px 22px -16px rgba(30,16,52,.38)}
}