/* 📱 Telefon kılıfı ortak görünümü (2026-10-03) — ürün sayfası (_phone-case.php) ve
   kategori sayfası (_phone-case-catalog.php) aynı kılıf motorunu kullanır.
   Şablon sözleşmesi: baskı alanı OPAK, kılıf dışı + kamera deliği SAYDAM (mask-image). */
.kfp,.kfc,.kfp-modal{--kf-acc:#a4e22b;--kf-line:var(--border,#2a2a2a);--kf-card:var(--bg-card,#141414);--kf-muted:var(--text-muted,#9aa09a)}

/* Kılıf: gövde + kamera camı + baskı (maske) + parlama */
.kfp-phone{position:relative;aspect-ratio:var(--kf-ar,715/1496);transition:aspect-ratio .25s ease}
.kfp-body{position:absolute;inset:.6%;border-radius:15% / 7.2%;background:var(--kf-phone,#1c1c1e);box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.kfp-shadow{position:absolute;inset:0;filter:drop-shadow(0 0 .6px rgba(255,255,255,.95)) drop-shadow(0 14px 26px rgba(0,0,0,.5))}
/* Kamera katmanı: şablonun TERSİ (mask-composite: exclude) → yalnız kamera deliği ve dış alan;
   gövdenin yuvarlak köşesiyle kırpılınca yalnız delikten koyu kamera camı görünür. */
.kfp-cam{position:absolute;inset:.6%;border-radius:15% / 7.2%;overflow:hidden;pointer-events:none}
.kfp-cam i{position:absolute;inset:-.7%;background:radial-gradient(circle at 30% 30%,#2b2f3a 0,#0c0d10 55%);
  -webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.kfp-print,.kfp-gloss{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.kfp-print{overflow:hidden}
.kfp-art{position:absolute;left:0;right:0;top:0;height:100%;background-size:cover;background-position:center top;background-repeat:no-repeat}
.kfp-art.is-contain{background-size:contain;background-position:center}
img.kfp-art{display:block;width:100%;object-fit:cover;object-position:center top}
img.kfp-art.is-contain{object-fit:contain;object-position:center}
.kfp-gloss{background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.10) 100%);pointer-events:none}
/* Kamera objektifleri (CaseLens): şablonun kamera deliklerine oturur; konum/çap kılıf kutusuna göre % */
.kfp-lenses{position:absolute;inset:0;pointer-events:none}
.kfl{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.kfl-lens{background:
  radial-gradient(circle at 37% 33%,rgba(255,255,255,.7) 0 3%,rgba(255,255,255,0) 8%),
  radial-gradient(circle at 60% 64%,rgba(150,120,255,.45) 0 5%,rgba(150,120,255,0) 12%),
  radial-gradient(circle closest-side,#020305 0 28%,#14304a 31%,#05080d 38%,#20252c 47%,#07080a 52%,#3b3f46 60%,#16171a 66%,#585c63 82%,#2a2c30 90%,#0d0e10 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 2px 5px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.35)}
.kfl-flash{background:radial-gradient(circle closest-side at 45% 42%,#fffef6 0 35%,#efe6c4 60%,#b9ae88 82%,#5e5a4c 100%);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
/* Modele özel kamera görseli (panelden yüklenir): çizilen objektiflerin yerine; genişlik %, yükseklik görselin oranından */
.kfl-img{position:absolute;display:block;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;user-select:none;-webkit-user-drag:none}
.kfl-lidar{background:radial-gradient(circle closest-side at 42% 38%,#3d4048 0,#0b0c0f 85%);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.kfp-phone.is-boom{animation:kfBoom .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes kfBoom{0%{transform:scale(.86) rotate(-3deg);opacity:.35}60%{transform:scale(1.04) rotate(.6deg);opacity:1}100%{transform:none}}

/* Marka → model seçici */
.kfp-brands{display:flex;gap:8px;flex-wrap:wrap}
.kfp-brands button{flex:1 1 0;min-width:96px;padding:12px 10px;border-radius:12px;border:1px solid var(--kf-line);background:transparent;color:inherit;font:inherit;font-weight:800;cursor:pointer}
.kfp-brands button.on{border-color:var(--kf-acc);background:rgba(164,226,43,.12)}
.kfp-search{width:100%;box-sizing:border-box;padding:11px 12px;border-radius:10px;border:1px solid var(--kf-line);background:transparent;color:inherit;font:inherit;font-size:16px;margin-bottom:10px}
.kfp-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:290px;overflow:auto;padding-right:2px}
.kfp-models button{text-align:left;padding:10px 11px;border-radius:10px;border:1px solid var(--kf-line);background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.kfp-models button.on{border-color:var(--kf-acc);background:rgba(164,226,43,.12)}
.kfp-models button[disabled]{opacity:.45;cursor:not-allowed}
.kfp-models small{display:block;font-size:11px;font-weight:600;color:var(--kf-muted);margin-top:2px}
.kfp-empty{grid-column:1/-1;font-size:13px;color:var(--kf-muted);padding:8px}
@media (min-width:900px){.kfp-models{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.kfp-phone.is-boom{animation:none}}