/* Auto PPF Center — ppf-sahne.css (taban tasarım kodundan uyarlandı, 04.11.2026, webci). Renk: kırmızı #F2131A, siyah, beyaz; Poppins. */
/* ---------- A) PPF uygulaması (anasayfa) ---------- */
.s-uygula{background:var(--bg-2);border-block:1px solid var(--line-soft);overflow-x:clip}
.pu-kap{padding-block:clamp(56px,8vw,96px)}
.pu-ic{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
.pu-bas,.pu-metin{position:relative;min-width:0}
.pu-bas h2{font-size:clamp(28px,4.4vw,54px);line-height:1.05;letter-spacing:-.035em;max-width:13ch;margin:0 0 clamp(18px,2.4vw,28px)}
.pu-adimlar{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pu-adim{border-left:3px solid var(--sari);padding:4px 0 4px 16px}
.pu-adim small{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:600;margin-bottom:4px}
.pu-adim strong{display:block;color:var(--ink);font-size:clamp(19px,2.1vw,28px);line-height:1.18;letter-spacing:-.02em;font-weight:700;margin-bottom:6px}
.pu-adim p{color:var(--text-soft);margin:0;max-width:38ch}
.pu-adim--son strong{color:var(--navy)}
.pu-adim--son .dg{margin-top:4px}
.pu-ilerleme{display:none}

.pu-sahne{position:relative;width:min(100%,640px);aspect-ratio:5/4;margin-inline:auto}
.pu-zemin{position:absolute;left:4%;right:4%;top:22%;bottom:5%;perspective:1500px;perspective-origin:50% -30%}
.pu-panel{position:absolute;inset:0;overflow:hidden;border-radius:44% 44% 20px 20px / 15% 15% 20px 20px;transform:rotateX(22deg);transform-origin:50% 100%;background:#0c0d10;box-shadow:0 46px 60px -34px rgba(0,0,0,.55)}
.pu-boya{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,rgba(205,210,220,.26),transparent 62%),linear-gradient(180deg,#2c2f35 0%,#121418 55%,#1d2025 100%)}
.pu-boya::before,.pu-boya::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 85%)}
.pu-boya::before{left:29%;transform:skewX(9deg)}
.pu-boya::after{right:29%;transform:skewX(-9deg)}
.pu-parilti{position:absolute;inset:-10% -50%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 47%,rgba(255,255,255,.05) 52%,transparent 58%);transform:translateX(-8%)}
.pu-film,.pu-su,.pu-iz{position:absolute;inset:0}
.pu-film,.pu-su{overflow:hidden}
.pu-film__ic,.pu-su__ic{position:absolute;inset:0}
.pu-film__ic{overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 42%,rgba(255,255,255,.09));box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.pu-film__isik{position:absolute;inset:-10% -60%;background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.3) 48%,transparent 53%);transform:translateX(30%)}
.pu-su{opacity:0}
.pu-su__ic{background:rgba(190,220,255,.1)}
.pu-su__ic canvas{position:absolute;inset:0;width:100%;height:100%}
.pu-iz{pointer-events:none}
.pu-rulo{position:absolute;top:-6%;bottom:-6%;left:-15px;width:30px;overflow:hidden;border-radius:15px;background:linear-gradient(90deg,#7f8c9d,#e6ecf2 34%,#fff 48%,#c0cad5 70%,#748294);box-shadow:5px 0 16px rgba(0,0,0,.4);opacity:0}
.pu-rulo__cizgi{position:absolute;left:0;right:0;top:0;height:200%;background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 2px,transparent 2px 20px)}
.pu-rakle{position:absolute;top:-6%;bottom:-6%;left:-10px;width:20px;border-radius:10px;background:linear-gradient(90deg,#9e0c12,var(--sari) 45%,#ff7a7e 62%,#9e0c12);box-shadow:4px 0 12px rgba(0,0,0,.4);opacity:0}
.pu-rakle__dalga{position:absolute;top:6%;bottom:6%;left:100%;width:30px;background:linear-gradient(90deg,rgba(200,230,255,.4),rgba(200,230,255,0))}

.pu-sise{position:absolute;right:3%;top:0;width:13%;transform-origin:40% 85%}
.pu-sise svg,.pm-sise svg{display:block;width:100%;height:auto}
.pu-sis{position:absolute;right:13%;top:6%;width:48%;height:34%;opacity:0;transform-origin:100% 0;clip-path:polygon(100% 0,0 70%,38% 100%);background:radial-gradient(ellipse at 100% 0%,rgba(205,230,255,.95),rgba(205,230,255,.4) 45%,rgba(205,230,255,0) 75%)}
.pu-carp{position:absolute;left:34%;top:42%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:40% 55% 45% 50%;background:radial-gradient(circle at 35% 30%,#d9dde2,#7d858f 70%);box-shadow:0 2px 3px rgba(0,0,0,.35);opacity:0}
.pu-halka{position:absolute;left:34%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid rgba(255,255,255,.75);opacity:0}
.pu-etiket{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--golge);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.pu-etiket--tas{left:0;top:27%}
.pu-etiket--cizik{right:0;top:52%}
.pu-etiket--kir{left:9%;bottom:1%}
.pu-ikon{position:relative;width:20px;height:20px;border-radius:50%;flex:none;background:var(--bg-3)}
.pu-ikon::after{content:"";position:absolute;inset:0;border-radius:50%}
.pu-ikon--tas::after{inset:5px 6px 6px 5px;border-radius:40% 55% 45% 50%;background:#7d858f}
.pu-ikon--cizik::after{inset:9px 3px;border-radius:2px;background:var(--navy);transform:rotate(-35deg)}
.pu-ikon--kir::after{background:radial-gradient(circle at 30% 35%,#8a6d4b 0 2px,transparent 2.5px),radial-gradient(circle at 65% 40%,#8a6d4b 0 1.6px,transparent 2px),radial-gradient(circle at 45% 70%,#8a6d4b 0 2.2px,transparent 2.7px),radial-gradient(circle at 75% 72%,#8a6d4b 0 1.3px,transparent 1.8px)}
.pu-not,.pm-not{font-size:12px;color:var(--text-soft)}
.pu-not{position:absolute;right:0;bottom:-26px}

@media (min-width:900px){
  .pu-kap{display:flex;align-items:center;min-height:calc(100svh - var(--ust-h));padding-block:clamp(28px,5vh,56px)}
  .pu-ic{width:100%;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);row-gap:0;align-content:center}
  .pu-bas{grid-column:1;grid-row:1;align-self:end}
  .pu-metin{grid-column:1;grid-row:2;align-self:start}
  .pu-sahne{grid-column:2;grid-row:1/span 2;align-self:center}
  .pu-sahne{width:min(100%,calc((100svh - var(--ust-h) - 96px) * 1.25),720px)}
  .pu--pin .pu-adimlar{position:relative;min-height:210px}
  .pu--pin .pu-adim{position:absolute;left:0;right:0;top:0}
  .pu--pin .pu-adim+.pu-adim{opacity:0;visibility:hidden}   /* JS gelmeden üst üste binmesin; GSAP satır içi değerle açar */
  .pu--pin .pu-ilerleme{display:block;position:absolute;left:-18px;top:0;bottom:0;width:3px;border-radius:3px;background:var(--line);overflow:hidden}
  .pu-ilerleme i{position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:top}
}
@media (max-width:599px){
  .pu-etiket{font-size:12px;padding:5px 10px 5px 6px;gap:6px}
  .pu-ikon{width:16px;height:16px}
  .pu-ikon--tas::after{inset:4px 5px 5px 4px}
  .pu-ikon--cizik::after{inset:7px 2px}
}

/* ---------- B) Parlak PPF / Mat PPF (ppf-kaplama) ---------- */
.pm-ikili{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,28px)}
.pm-panel{margin:0;min-width:0}
.pm-yuzey{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;border-radius:clamp(14px,2vw,24px);box-shadow:0 26px 50px -26px rgba(0,0,0,.5)}
@media (min-width:760px){.pm-yuzey{aspect-ratio:5/4}}
.pm-panel--parlak .pm-yuzey{background:radial-gradient(90% 60% at 50% 8%,#3b3e45 0%,#131418 55%,#050506 100%)}
.pm-panel--mat .pm-yuzey{background:radial-gradient(120% 90% at 30% 12%,#424b56 0%,#2a3038 52%,#1d2229 100%)}
.pm-yansima{position:absolute;z-index:0;pointer-events:none}
.pm-panel--parlak .pm-yansima{inset:-20% -10%;background:linear-gradient(104deg,transparent 15%,rgba(255,255,255,.08) 15.6%,rgba(255,255,255,.8) 16.4%,rgba(255,255,255,.8) 19%,rgba(255,255,255,.08) 19.8%,transparent 20.4%,transparent 25%,rgba(255,255,255,.5) 25.5%,rgba(255,255,255,.5) 26.4%,transparent 26.9%),linear-gradient(180deg,transparent 61%,rgba(150,190,240,.22) 61.5%,rgba(150,190,240,0) 76%)}
.pm-panel--mat .pm-yansima{inset:-20%;background:radial-gradient(55% 40% at 38% 30%,rgba(255,255,255,.11),rgba(255,255,255,0) 70%)}
.pm-panel--mat .pm-yuzey::after{content:"";position:absolute;inset:0;z-index:1;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.pm-damla{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.pm-sise{position:absolute;z-index:3;right:5%;top:3%;width:17%;opacity:0;transform-origin:40% 85%}
.pm-sis{position:absolute;z-index:3;right:16%;top:7%;width:62%;height:46%;opacity:0;transform-origin:100% 0;clip-path:polygon(100% 0,0 62%,30% 100%);background:radial-gradient(ellipse at 100% 0%,rgba(215,235,255,.9),rgba(215,235,255,.35) 45%,rgba(215,235,255,0) 75%)}
.pm-panel figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 2px 0}
.pm-panel figcaption b{font-size:clamp(16px,1.8vw,20px);color:var(--navy);letter-spacing:-.01em}
.pm-panel figcaption span{font-size:14px;color:var(--text-soft);line-height:1.4}
.pm-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:18px}
.pm-sik{cursor:pointer}