/*
 * PSP Acente Siteleri - özgün bileşenler
 * ------------------------------------------------------------------
 * Canlı sahne ve poliçe kartı girişleri, akıllı şerit, "Hayatınızda ne değişti?" bulucusu, poliçe sayacı,
 * acil durum düğmesi ve hareketler. Renkler tema değişkenlerinden gelir; hareketler "az hareket" tercihinde kapanır.
 */

/* ---------- Kaydırdıkça beliren bölümler (yalnızca betik çalışıyorsa gizlenir) ---------- */
.js .bolum:not(.hero) > .kap { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .bolum.gorundu > .kap { opacity: 1; transform: none; }

/* ---------- Akıllı şerit: açık / kapalı durumu ve mevsime göre öneri ---------- */
.akilli { background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); font-size: .9rem; }
.akilli-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 46px; padding-block: 8px; }
.akilli-durum { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--baslik); }
.akilli-durum i { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: nabiz 2s infinite; }
.akilli-durum.kapali i { background: #94a3b8; animation: none; }
.akilli-durum small { font-weight: 400; color: var(--yazi-2); font-size: inherit; }
.akilli-oneri { display: inline-flex; align-items: center; gap: 8px; color: var(--yazi); }
.akilli-oneri .icon { color: var(--c2-koyu); }
.akilli-oneri b { color: var(--c1); }
@keyframes nabiz { 70% { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

/* ---------- Giriş: canlı sahne ---------- */
.hero.b-sahne .hero-ic { grid-template-columns: 1fr 1.05fr; }
.sahne { width: 100%; height: auto; overflow: visible; }
.sahne-gunes { fill: var(--c2); opacity: .9; animation: gunes 9s ease-in-out infinite; transform-origin: 452px 86px; }
.sahne-bulut { fill: var(--zemin); opacity: .95; filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .12)); }
.sahne-bulut.b1 { animation: bulut 16s ease-in-out infinite alternate; }
.sahne-bulut.b2 { animation: bulut 22s ease-in-out infinite alternate-reverse; }
.sahne-yagmur line { stroke: var(--c1); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: yagmur 1.6s linear infinite; }
.sahne-yagmur .d1 { animation-delay: .3s; } .sahne-yagmur .d2 { animation-delay: .7s; } .sahne-yagmur .d3 { animation-delay: 1s; } .sahne-yagmur .d4 { animation-delay: 1.3s; }
.sahne-kubbe { fill: none; stroke: var(--c1); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: kubbe 2.2s .3s cubic-bezier(.3, .7, .2, 1) forwards; }
.sahne-kubbe-ic { fill: var(--c1); opacity: 0; animation: kubbe-ic 1.4s 1.9s ease forwards; }
.sahne-sicrama circle { fill: var(--c2); opacity: 0; transform-box: fill-box; transform-origin: center; animation: sicrama 1.6s 2.4s ease-out infinite; }
.sahne-sicrama .s1 { animation-delay: 2.7s; } .sahne-sicrama .s2 { animation-delay: 3s; } .sahne-sicrama .s3 { animation-delay: 2.55s; } .sahne-sicrama .s4 { animation-delay: 3.2s; }
.sahne-zemin { stroke: var(--baslik); stroke-width: 3; stroke-linecap: round; opacity: .25; }
.sahne-agac rect { fill: var(--baslik); opacity: .45; }
.sahne-agac circle { fill: var(--c2); opacity: .55; }
.ev-cati { fill: var(--c1-koyu); } .ev-govde { fill: var(--zemin); stroke: var(--c1); stroke-width: 3; } .ev-kapi { fill: var(--c2); } .ev-cam { fill: var(--c1-acik); stroke: var(--c1); stroke-width: 2; } .ev-baca { fill: var(--c1-koyu); }
.sahne-aile circle, .sahne-aile rect { fill: var(--baslik); opacity: .82; }
.sahne-arac { animation: arac 5s ease-in-out infinite; }
.sahne-arac path:first-child, .sahne-arac rect { fill: var(--c2); }
.sahne-arac .teker { fill: var(--baslik); }
.sahne-arac .arac-cam { fill: var(--zemin); opacity: .85; }
.sahne-rozet circle { fill: var(--c1); }
.sahne-rozet path { fill: none; stroke: var(--c1-ustu); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: onay 0.6s 2.4s ease forwards; }
.sahne-rozet { opacity: 0; transform-box: fill-box; transform-origin: center; animation: rozet .5s 2.1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes kubbe { to { stroke-dashoffset: 0; } }
@keyframes kubbe-ic { to { opacity: .07; } }
@keyframes yagmur { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .55; } 70% { opacity: .55; } 100% { opacity: 0; transform: translate(-34px, 112px); } }
@keyframes sicrama { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes rozet { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes onay { to { stroke-dashoffset: 0; } }
@keyframes bulut { to { transform: translateX(34px); } }
@keyframes gunes { 50% { transform: scale(1.08); } }
@keyframes arac { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.koyu .sahne-bulut { fill: var(--zemin-2); }

/* ---------- Giriş: poliçe kartları ---------- */
.hero.b-kart .hero-ic { grid-template-columns: 1.1fr .9fr; }
.hero-police { position: relative; aspect-ratio: 5 / 4.4; perspective: 1200px; }
.police { position: absolute; inset: 8% 6% 10% 6%; border-radius: calc(var(--kose) * 1.3 + 6px); background: var(--zemin); border: 1px solid var(--cizgi); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); }
.police.p3 { transform: rotate(-9deg) translate(-5%, 4%); background: var(--c2); border: 0; opacity: .9; }
.police.p2 { transform: rotate(5deg) translate(5%, -3%); background: var(--c1); border: 0; }
.police.p1 { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 32px); animation: suzul 6s ease-in-out infinite; }
.police-ust { display: flex; justify-content: space-between; align-items: center; }
.police-etiket { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--yazi-2); font-weight: 700; }
.police-durum { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .8rem; font-weight: 700; }
.police-durum .icon { width: 1em; height: 1em; stroke-width: 3; }
.police-brans { position: relative; min-height: 64px; }
.police-brans span { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.police-brans span.acik { opacity: 1; transform: none; }
.police-brans .icon { width: 44px; height: 44px; padding: 10px; border-radius: var(--kose-kucuk); background: var(--c1-acik); color: var(--c1); }
.police-brans b { font-family: var(--baslik-tipi); font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--baslik); line-height: 1.15; }
.police dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.police dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--yazi-2); }
.police dd { margin: 2px 0 0; font-weight: 700; color: var(--baslik); font-size: .95rem; }
.police-cubuk { height: 8px; border-radius: 999px; background: var(--c1-acik); overflow: hidden; margin-top: auto; }
.police-cubuk i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); transform-origin: left; animation: dol 2.4s .4s cubic-bezier(.2, .7, .2, 1) backwards; }
.police-alt { display: flex; justify-content: space-between; font-size: .8rem; color: var(--yazi-2); font-weight: 600; }
@keyframes suzul { 50% { transform: translateY(-10px) rotate(-.6deg); } }
@keyframes dol { from { transform: scaleX(0); } }
.gecisli .hero.b-kart .police.p2 { background: rgba(255, 255, 255, .28); }
.gecisli .hero.b-kart .police.p3 { background: rgba(255, 255, 255, .16); }

/* ---------- "Hayatınızda ne değişti?" ---------- */
.bulucu-ic { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.bulucu-olaylar { display: grid; gap: 8px; }
.bulucu-olaylar button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 18px; border: 1.5px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--baslik); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.bulucu-olaylar button:hover { border-color: var(--c1); transform: translateX(3px); }
.bulucu-olaylar button[aria-selected="true"] { background: var(--c1); border-color: var(--c1); color: var(--c1-ustu); transform: translateX(6px); }
.bulucu-olaylar .icon { width: 22px; height: 22px; }
.bulucu-oneri { animation: belir .45s ease; }
.bulucu-not { font-size: 1.12rem; color: var(--baslik); margin-bottom: 18px; padding-left: 16px; border-left: 4px solid var(--c2); }
.bulucu-oneri ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.bulucu-oneri a { position: relative; display: grid; gap: 6px; height: 100%; padding: 22px; border-radius: var(--kose); border: 1px solid var(--cizgi); background: var(--zemin); color: var(--yazi); transition: transform .15s, box-shadow .15s, border-color .15s; }
.bulucu-oneri a:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: var(--c1); }
.bulucu-oneri li:first-child a { border-color: var(--c1); box-shadow: inset 0 4px 0 var(--c1); }
.bulucu-sira { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yazi-2); }
.bulucu-oneri li:first-child .bulucu-sira { color: var(--c2-koyu); }
.bulucu-simge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--kose-kucuk); background: var(--c1-acik); color: var(--c1); margin-block: 6px; }
.bulucu-oneri strong { color: var(--baslik); font-size: 1.05rem; }
.bulucu-oneri small { color: var(--yazi-2); font-size: .88rem; line-height: 1.45; }
@keyframes belir { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Poliçe sayacı ---------- */
.sayac-ic { display: grid; grid-template-columns: 1.2fr auto; gap: clamp(28px, 6vw, 80px); align-items: center; }
.sayac h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.sayac-yazi > p { color: var(--yazi-2); max-width: 52ch; }
.sayac-alan { display: grid; gap: 8px; max-width: 300px; margin: 22px 0 14px; font-weight: 600; color: var(--baslik); font-size: .9rem; }
.sayac-alan input { font: inherit; font-size: 1.1rem; padding: 13px 14px; border: 1.5px solid var(--cizgi); border-radius: var(--kose-kucuk); background: var(--zemin); color: var(--baslik); color-scheme: light; }
.koyu .sayac-alan input { color-scheme: dark; }
.sayac-alan input:focus { outline: none; border-color: var(--c1); box-shadow: 0 0 0 4px var(--c1-acik); }
.sayac-mesaj { min-height: 3.2em; font-size: 1.05rem; color: var(--baslik); }
.sayac-halka { position: relative; display: grid; place-items: center; }
.sayac-iz { stroke: var(--cizgi); }
.sayac-dolu { stroke: var(--c1); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1), stroke .4s; }
.sayac[data-durum="yakin"] .sayac-dolu { stroke: #f59e0b; }
.sayac[data-durum="bitti"] .sayac-dolu { stroke: #dc2626; }
.sayac-orta { position: absolute; display: grid; justify-items: center; }
.sayac-orta strong { font-family: var(--baslik-tipi); font-size: 3.6rem; line-height: 1; color: var(--baslik); letter-spacing: -.03em; }
.sayac-orta span { color: var(--yazi-2); font-weight: 600; }

/* ---------- Acil durum ---------- */
.acil-dugme { position: fixed; left: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; background: #dc2626; color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 8px 24px rgba(220, 38, 38, .4); }
.acil-nokta { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fde047; animation: nabiz-sari 1.8s infinite; }
@keyframes nabiz-sari { 0% { box-shadow: 0 0 0 0 rgba(253, 224, 71, .7); } 70% { box-shadow: 0 0 0 10px rgba(253, 224, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0); } }
.hd-yan .acil-dugme { left: 284px; }
.acil { width: min(92vw, 520px); border: 0; border-radius: var(--kose); padding: 34px; background: var(--zemin); color: var(--yazi); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.acil::backdrop { background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px); }
.acil[open] { animation: belir .3s ease; }
.acil h2 { font-size: 1.6rem; }
.acil-kapat { position: absolute; top: 14px; right: 14px; background: none; border: 0; padding: 8px; color: var(--yazi-2); cursor: pointer; }
.acil-adimlar { display: grid; gap: 16px; margin: 20px 0 24px; }
.acil-adimlar li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; }
.acil-adimlar li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #dc2626; color: #fff; font-weight: 800; }
.acil-adimlar strong { color: var(--baslik); }
.acil-adimlar p { margin: 2px 0 0; color: var(--yazi-2); font-size: .95rem; }

@media (max-width: 980px) {
    .hero.b-sahne .hero-ic, .hero.b-kart .hero-ic, .bulucu-ic, .sayac-ic { grid-template-columns: 1fr; }
    .bulucu-olaylar { grid-template-columns: repeat(2, 1fr); }
    .bulucu-olaylar button[aria-selected="true"], .bulucu-olaylar button:hover { transform: none; }
    .sayac-halka { order: -1; }
    .hd-yan .acil-dugme { left: 20px; }
    .acil-dugme span:last-child { display: none; }
    .acil-dugme { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .sahne *, .police, .police-cubuk i, .akilli-durum i, .acil-nokta { animation: none !important; }
    .sahne-kubbe { stroke-dashoffset: 0; } .sahne-kubbe-ic { opacity: .07; } .sahne-rozet { opacity: 1; } .sahne-rozet path { stroke-dashoffset: 0; }
    .js .bolum:not(.hero) > .kap { opacity: 1; transform: none; }
}

/* Yüzen menü (hap): şerit menünün arkasından başlar, giriş alanı kendi yerinde kalır. */
.hd-hap .akilli { margin-top: -76px; padding-top: 84px; }
.hd-hap .akilli + .hero { margin-top: 0; padding-top: clamp(48px, 7vw, 96px); }