/* Giriş sayfası telefon önizlemesi — beyaz zeminli, renkli grid kart tema turu (3 sn, rastgele sıra).
   Yalnız .phone-screen[data-pv] kapsamında; mobil/profil sayfalarına dokunmaz. Seçiciler, home.css/home-light-overrides.css/home-dark.css
   içindeki !important'lı telefon kurallarını geçmek için bilinçli uzundur (kısaltma yok: her seçici tam yazılı). */

/* ───────── Marka renkleri (her kart kendi renk çifti) ───────── */
body.home-light-page .phone-screen .link-item.contact-card{--a:#818cf8;--b:#4f46e5}
body.home-light-page .phone-screen .link-item.phone-call{--a:#34d399;--b:#059669}
body.home-light-page .phone-screen .link-item.sms{--a:#60a5fa;--b:#2563eb}
body.home-light-page .phone-screen .link-item.telegram{--a:#38bdf8;--b:#0284c7}
body.home-light-page .phone-screen .link-item.appointment{--a:#22d3ee;--b:#0e7490}
body.home-light-page .phone-screen .link-item.whatsapp{--a:#4ade80;--b:#16a34a}
body.home-light-page .phone-screen .link-item.email{--a:#fb7185;--b:#e11d48}
body.home-light-page .phone-screen .link-item.location{--a:#fbbf24;--b:#d97706}
body.home-light-page .phone-screen .link-item.google-review{--a:#fb923c;--b:#ea580c}
body.home-light-page .phone-screen .link-item.instagram{--a:#f472b6;--b:#a21caf}
body.home-light-page .phone-screen .link-item.facebook{--a:#60a5fa;--b:#1d4ed8}
body.home-light-page .phone-screen .link-item.twitter{--a:#64748b;--b:#0f172a}
body.home-light-page .phone-screen .link-item.linkedin{--a:#38bdf8;--b:#0369a1}
body.home-light-page .phone-screen .link-item.youtube{--a:#f87171;--b:#dc2626}
body.home-light-page .phone-screen .link-item.tiktok{--a:#52525b;--b:#18181b}
body.home-light-page .phone-screen .link-item.website{--a:#a78bfa;--b:#6d28d9}
body.home-light-page .phone-screen .link-item.iban{--a:#2dd4bf;--b:#0f766e}
body.home-light-page .phone-screen .link-item.invoice{--a:#f59e0b;--b:#b45309}

/* ───────── Ortak: beyaz ekran + renkli kartlar ───────── */
body.home-light-page .phone-screen[data-pv]{background:radial-gradient(120% 55% at 100% 0,rgba(99,102,241,.09),transparent 62%),radial-gradient(110% 50% at 0 100%,rgba(244,63,94,.07),transparent 62%),#fff!important}
body.home-light-page .phone-screen[data-pv] .status-bar,body.home-light-page .phone-screen[data-pv] .status-time,body.home-light-page .phone-screen[data-pv] .status-icons{color:#0f172a!important}
body.home-light-page .phone-screen[data-pv] .profile-name{color:#0f172a!important}
body.home-light-page .phone-screen[data-pv] .profile-username{color:#64748b!important}
body.home-light-page .phone-screen[data-pv] .avatar-ring{border-color:rgba(99,102,241,.35)!important}
body.home-light-page .phone-screen[data-pv] .links-grid{overflow:hidden!important;padding:2px 2px 10px!important;-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
body.home-light-page .phone-screen[data-pv] .links-grid .link-item{position:relative!important;overflow:hidden!important;min-height:0!important;border:0!important;color:#fff!important;background:linear-gradient(145deg,var(--a),var(--b))!important;box-shadow:0 10px 18px -8px color-mix(in srgb,var(--b) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.28)!important;transition:none}
body.home-light-page .phone-screen[data-pv] .links-grid .link-item::before{display:none!important}
body.home-light-page .phone-screen[data-pv] .links-grid .link-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);animation:pvShine 5s ease-in-out infinite;animation-delay:calc(var(--i,0)*170ms + 1.2s)}
body.home-light-page .phone-screen[data-pv] .links-grid .link-icon,body.home-light-page .phone-screen[data-pv] .links-grid .link-icon-svg{background:rgba(255,255,255,.24)!important;color:#fff!important;box-shadow:none!important;animation:pvBob 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*210ms)}
body.home-light-page .phone-screen[data-pv] .links-grid .link-text{color:#fff!important;font-weight:750!important;text-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ───────── 1) Renkli Kareler ───────── */
body.home-light-page .phone-screen[data-pv="kareler"] .links-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
body.home-light-page .phone-screen[data-pv="kareler"] .links-grid .link-item{height:64px!important;border-radius:18px!important;padding:6px 3px!important;gap:5px!important}
body.home-light-page .phone-screen[data-pv="kareler"] .links-grid .link-icon{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:10px!important;font-size:.82rem!important}
body.home-light-page .phone-screen[data-pv="kareler"] .links-grid .link-text{font-size:.54rem!important}

/* ───────── 2) Bento ───────── */
body.home-light-page .phone-screen[data-pv="bento"] .links-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:52px!important;grid-auto-flow:dense!important;gap:7px!important}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item{height:100%!important;border-radius:16px!important;padding:4px 2px!important;gap:3px!important}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(1){grid-column:span 2;grid-row:span 2}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(6){grid-column:span 2}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(11){grid-column:span 2;grid-row:span 2}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(15){grid-column:span 2}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(1) .link-icon,body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-item:nth-child(11) .link-icon{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;font-size:1.1rem!important;border-radius:14px!important}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-icon{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;border-radius:9px!important;font-size:.7rem!important}
body.home-light-page .phone-screen[data-pv="bento"] .links-grid .link-text{font-size:.5rem!important}

/* ───────── 3) Yuvarlak İkonlar (beyaz zemin, renkli daireler) ───────── */
body.home-light-page .phone-screen[data-pv="daire"] .links-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px 4px!important}
body.home-light-page .phone-screen[data-pv="daire"] .links-grid .link-item{background:transparent!important;box-shadow:none!important;height:auto!important;padding:2px 0!important;gap:4px!important;overflow:visible!important}
body.home-light-page .phone-screen[data-pv="daire"] .links-grid .link-item::after{display:none}
body.home-light-page .phone-screen[data-pv="daire"] .links-grid .link-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:50%!important;font-size:1rem!important;background:linear-gradient(145deg,var(--a),var(--b))!important;box-shadow:0 10px 16px -8px color-mix(in srgb,var(--b) 80%,transparent),0 0 0 3px #fff,0 0 0 4.5px color-mix(in srgb,var(--a) 45%,transparent)!important}
body.home-light-page .phone-screen[data-pv="daire"] .links-grid .link-text{color:#334155!important;text-shadow:none!important;font-size:.54rem!important}

/* ───────── 4) Geniş Kartlar (2 sütun, ikon solda) ───────── */
body.home-light-page .phone-screen[data-pv="genis"] .links-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
body.home-light-page .phone-screen[data-pv="genis"] .links-grid .link-item{flex-direction:row!important;justify-content:flex-start!important;height:40px!important;padding:0 8px 0 6px!important;gap:7px!important;border-radius:14px!important}
body.home-light-page .phone-screen[data-pv="genis"] .links-grid .link-icon{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;border-radius:50%!important;font-size:.7rem!important}
body.home-light-page .phone-screen[data-pv="genis"] .links-grid .link-text{text-align:left!important;font-size:.56rem!important;flex:1 1 auto!important;min-width:0}

/* ───────── 5) Şerit (tam genişlik renkli bar) ───────── */
body.home-light-page .phone-screen[data-pv="serit"] .links-grid{grid-template-columns:1fr!important;gap:5px!important}
body.home-light-page .phone-screen[data-pv="serit"] .links-grid .link-item{flex-direction:row!important;justify-content:flex-start!important;height:25px!important;padding:0 10px 0 5px!important;gap:8px!important;border-radius:99px!important;background:linear-gradient(100deg,var(--a),var(--b))!important}
body.home-light-page .phone-screen[data-pv="serit"] .links-grid .link-item::before{display:block!important;content:"\203A";position:absolute;left:auto;right:10px;top:50%;width:auto;height:auto;background:none;transform:translateY(-52%);color:#fff;font-weight:800;font-size:.85rem}
body.home-light-page .phone-screen[data-pv="serit"] .links-grid .link-icon{width:17px!important;height:17px!important;min-width:17px!important;min-height:17px!important;border-radius:50%!important;font-size:.5rem!important}
body.home-light-page .phone-screen[data-pv="serit"] .links-grid .link-text{text-align:left!important;font-size:.6rem!important;flex:1 1 auto!important}

/* ───────── 6) Altıgen ───────── */
body.home-light-page .phone-screen[data-pv="altigen"] .links-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px 6px!important;padding-left:5px!important;padding-right:5px!important}
body.home-light-page .phone-screen[data-pv="altigen"] .links-grid .link-item{height:66px!important;padding:6px 4px!important;gap:3px!important;border-radius:0!important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);box-shadow:none!important}
body.home-light-page .phone-screen[data-pv="altigen"] .links-grid .link-item:nth-child(3n+2){top:22px}
body.home-light-page .phone-screen[data-pv="altigen"] .links-grid .link-icon{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;border-radius:50%!important;font-size:.7rem!important}
body.home-light-page .phone-screen[data-pv="altigen"] .links-grid .link-text{font-size:.5rem!important}

/* ───────── 7) Büyük Karolar (2 sütun, ikon üstte sol) ───────── */
body.home-light-page .phone-screen[data-pv="buyuk"] .links-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
body.home-light-page .phone-screen[data-pv="buyuk"] .links-grid .link-item{height:88px!important;align-items:flex-start!important;justify-content:space-between!important;padding:10px 11px!important;border-radius:22px!important}
body.home-light-page .phone-screen[data-pv="buyuk"] .links-grid .link-icon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:13px!important;font-size:1rem!important}
body.home-light-page .phone-screen[data-pv="buyuk"] .links-grid .link-text{text-align:left!important;font-size:.68rem!important}

/* ───────── 8) Etiketler (hap) ───────── */
body.home-light-page .phone-screen[data-pv="etiket"] .links-grid{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-content:flex-start!important;gap:10px 7px!important}
body.home-light-page .phone-screen[data-pv="etiket"] .links-grid .link-item{flex:0 0 auto!important;flex-direction:row!important;height:31px!important;padding:0 12px 0 4px!important;gap:6px!important;border-radius:99px!important}
body.home-light-page .phone-screen[data-pv="etiket"] .links-grid .link-icon{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;border-radius:50%!important;font-size:.58rem!important}
body.home-light-page .phone-screen[data-pv="etiket"] .links-grid .link-text{font-size:.62rem!important}

/* ───────── 9) Yaprak (asimetrik köşe) ───────── */
body.home-light-page .phone-screen[data-pv="yaprak"] .links-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
body.home-light-page .phone-screen[data-pv="yaprak"] .links-grid .link-item{height:64px!important;padding:6px 3px!important;gap:5px!important;border-radius:26px 8px 26px 8px!important}
body.home-light-page .phone-screen[data-pv="yaprak"] .links-grid .link-item:nth-child(even){border-radius:8px 26px 8px 26px!important}
body.home-light-page .phone-screen[data-pv="yaprak"] .links-grid .link-icon{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;border-radius:50%!important;font-size:.78rem!important}
body.home-light-page .phone-screen[data-pv="yaprak"] .links-grid .link-text{font-size:.54rem!important}

/* ───────── 10) Mozaik (4 sütun, yalnız ikon) ───────── */
body.home-light-page .phone-screen[data-pv="mozaik"] .links-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px 8px!important;align-content:start!important}
body.home-light-page .phone-screen[data-pv="mozaik"] .links-grid .link-item{height:0!important;padding:0 0 118%!important;border-radius:18px!important}
body.home-light-page .phone-screen[data-pv="mozaik"] .links-grid .link-icon{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);width:100%!important;height:100%!important;min-width:0!important;background:transparent!important;font-size:1.15rem!important;display:flex!important;align-items:center;justify-content:center;animation:none!important}
body.home-light-page .phone-screen[data-pv="mozaik"] .links-grid .link-text{display:none!important}

/* ───────── 11) Cam Parlak ───────── */
body.home-light-page .phone-screen[data-pv="parlak"] .links-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
body.home-light-page .phone-screen[data-pv="parlak"] .links-grid .link-item{height:68px!important;padding:7px 3px!important;gap:5px!important;border-radius:20px!important;box-shadow:0 12px 20px -10px color-mix(in srgb,var(--b) 85%,transparent),inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -8px 14px rgba(0,0,0,.12)!important;background:linear-gradient(160deg,var(--a) 0%,var(--b) 100%)!important}
body.home-light-page .phone-screen[data-pv="parlak"] .links-grid .link-item::before{display:block!important;content:"";position:absolute;left:8%;right:8%;top:3px;width:auto;height:38%;border-radius:16px 16px 40px 40px;background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0));transform:none;animation:none}
body.home-light-page .phone-screen[data-pv="parlak"] .links-grid .link-icon{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:50%!important;font-size:.8rem!important}
body.home-light-page .phone-screen[data-pv="parlak"] .links-grid .link-text{font-size:.54rem!important}

/* ───────── 12) Rozet Kartlar (beyaz ikon rozeti) ───────── */
body.home-light-page .phone-screen[data-pv="rozet"] .links-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
body.home-light-page .phone-screen[data-pv="rozet"] .links-grid .link-item{height:58px!important;flex-direction:row!important;justify-content:flex-start!important;padding:0 8px!important;gap:8px!important;border-radius:16px!important}
body.home-light-page .phone-screen[data-pv="rozet"] .links-grid .link-icon{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:12px!important;font-size:.9rem!important;background:#fff!important;color:var(--b)!important;box-shadow:0 6px 12px -5px rgba(0,0,0,.3)!important}
body.home-light-page .phone-screen[data-pv="rozet"] .links-grid .link-text{text-align:left!important;font-size:.6rem!important;flex:1 1 auto!important;min-width:0}

/* ───────── Geçiş: çıkış / giriş ───────── */
@keyframes pvOut{to{opacity:0;transform:scale(.8) translateY(-10px);filter:blur(3px)}}
@keyframes pvPop{0%{opacity:0;transform:scale(.3) rotate(-6deg)}60%{opacity:1;transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes pvSlide{0%{opacity:0;transform:translateX(-34px)}100%{opacity:1;transform:none}}
@keyframes pvZoom{0%{opacity:0;transform:scale(1.8);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
@keyframes pvFlip{0%{opacity:0;transform:perspective(320px) rotateX(-90deg)}100%{opacity:1;transform:perspective(320px) rotateX(0)}}
@keyframes pvRise{0%{opacity:0;transform:translateY(30px) scale(.92)}100%{opacity:1;transform:none}}
@keyframes pvAv{0%{transform:scale(.55) rotate(-90deg);opacity:0}70%{transform:scale(1.12) rotate(8deg);opacity:1}100%{transform:none}}
@keyframes pvHead{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
@keyframes pvSweep{0%{left:-70%}100%{left:130%}}
@keyframes pvWash{0%{opacity:0}35%{opacity:.5}100%{opacity:0}}
@keyframes pvShine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes pvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pvName{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes pvBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

body.home-light-page .phone-screen.pv-out .links-grid .link-item{animation:pvOut .3s ease-in both!important;animation-delay:calc(var(--i,0)*7ms)!important}
body.home-light-page .phone-screen.pv-out .profile-header{opacity:.4;transition:opacity .25s}
body.home-light-page .phone-screen.pv-in .links-grid .link-item{animation-duration:.58s!important;animation-timing-function:cubic-bezier(.22,1,.36,1)!important;animation-fill-mode:both!important;animation-delay:calc(var(--i,0)*28ms)!important;animation-iteration-count:1!important}
body.home-light-page .phone-screen.pv-in[data-fx="pop"] .links-grid .link-item{animation-name:pvPop!important}
body.home-light-page .phone-screen.pv-in[data-fx="slide"] .links-grid .link-item{animation-name:pvSlide!important}
body.home-light-page .phone-screen.pv-in[data-fx="zoom"] .links-grid .link-item{animation-name:pvZoom!important}
body.home-light-page .phone-screen.pv-in[data-fx="flip"] .links-grid .link-item{animation-name:pvFlip!important}
body.home-light-page .phone-screen.pv-in[data-fx="rise"] .links-grid .link-item{animation-name:pvRise!important}
body.home-light-page .phone-screen.pv-in .profile-avatar{animation:pvAv .7s cubic-bezier(.22,1,.36,1) both}
body.home-light-page .phone-screen.pv-in .profile-name,body.home-light-page .phone-screen.pv-in .profile-username{animation:pvHead .5s ease both}

/* ───────── Süpürme ışığı + renk dalgası ───────── */
.phone-screen .pv-sweep{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;border-radius:inherit}
.phone-screen .pv-sweep::before{content:"";position:absolute;top:-12%;bottom:-12%;left:-70%;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-14deg);opacity:0}
.phone-screen .pv-sweep::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 45%,var(--pvw,#818cf8),transparent 70%);opacity:0}
.phone-screen.pv-in .pv-sweep::before{opacity:1;animation:pvSweep .85s ease-out both}
.phone-screen.pv-in .pv-sweep::after{animation:pvWash .8s ease-out both}

/* ───────── Tema etiketi (telefonun altında) ───────── */
.phone-mockup .pv-label{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);width:244px;z-index:12;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(15,23,42,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;pointer-events:none;box-shadow:0 8px 18px rgba(15,23,42,.28);overflow:hidden}
.phone-mockup .pv-cap{font-size:.44rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);flex:0 0 auto}
.phone-mockup .pv-name{font-size:.62rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.phone-mockup .pv-name.is-in{animation:pvName .45s ease both}
.phone-mockup .pv-count{font-size:.5rem;font-weight:700;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;flex:0 0 auto}
.phone-mockup .pv-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#818cf8,#f93230);transform-origin:left;transform:scaleX(0)}
.phone-mockup .pv-bar.is-run{animation:pvBar 3s linear both}

@media (prefers-reduced-motion:reduce){
  body.home-light-page .phone-screen[data-pv] .links-grid .link-item,body.home-light-page .phone-screen[data-pv] .links-grid .link-item::after,body.home-light-page .phone-screen[data-pv] .links-grid .link-icon,
  body.home-light-page .phone-screen.pv-out .links-grid .link-item,body.home-light-page .phone-screen.pv-in .links-grid .link-item,body.home-light-page .phone-screen.pv-in .profile-avatar,body.home-light-page .phone-screen.pv-in .profile-name,body.home-light-page .phone-screen.pv-in .profile-username,
  .phone-screen.pv-in .pv-sweep::before,.phone-screen.pv-in .pv-sweep::after,.phone-mockup .pv-name.is-in,.phone-mockup .pv-bar.is-run{animation:none!important}
}