:root{
  --gece:#150F2E; --gece2:#22174A; --mor:#5B2BD0; --mor-acik:#B9A6FF;
  --sari:#FFCE3A; --cam:#5EE2FF; --kagit:#FAF7FF; --murekkep:#1C1440; --gri:#5F5680;
  --r-lg:28px; --r-md:16px; --r-sm:10px;
  color-scheme: dark light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#fff;background:var(--gece);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto}
a{color:var(--cam)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sari);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
/* header */
.ust{position:sticky;top:0;z-index:10;background:rgba(21,15,46,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(185,166,255,.15)}
.ust .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;font-size:24px;font-style:italic;letter-spacing:-.5px}
.logo b{color:var(--cam)}
.logo svg{width:34px;height:34px}
.menu{display:flex;gap:22px;margin-left:auto}
.menu a{color:#e4ddff;text-decoration:none;font-size:15px}
.menu a:hover{color:#fff}
.btn{white-space:nowrap;display:inline-block;background:var(--sari);color:var(--murekkep);font-weight:700;text-decoration:none;padding:12px 22px;border-radius:999px;border:0;font-size:16px;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ikincil{background:transparent;color:#fff;border:2px solid var(--mor-acik)}
.ust .btn{padding:9px 18px;font-size:15px}
.sepet-ikon{color:#fff;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
.sepet-ikon:hover{background:rgba(255,255,255,.1)}
@media (max-width:820px){.menu{display:none}.sepet-ikon{margin-left:auto}}
/* hero */
.hero{position:relative;overflow:hidden;padding:64px 0 80px;background:
  radial-gradient(600px 400px at 85% 10%,rgba(124,58,237,.45),transparent 70%),
  radial-gradient(500px 380px at 0% 100%,rgba(255,150,60,.18),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
h1{font-size:clamp(38px,5.6vw,64px);line-height:1.08;margin:0 0 20px;font-weight:800;font-style:italic;letter-spacing:-1.5px}
h1 .serit{display:inline-block;background:var(--sari);color:var(--murekkep);padding:0 14px;border-radius:12px;transform:rotate(-2deg);font-style:italic}
h1 .ikinci{display:block;color:var(--cam)}
.giris{font-size:19px;color:#ddd5ff;max-width:34em;margin:0 0 28px}
.hero .butonlar{display:flex;gap:14px;flex-wrap:wrap}
.not{font-size:14px;color:#b7acde;margin-top:14px}
/* soru kartı (hero) */
.sahne{position:relative}
.kart{background:var(--kagit);color:var(--murekkep);border-radius:22px;padding:24px 26px 20px;transform:rotate(2.5deg);box-shadow:0 30px 60px rgba(0,0,0,.45);
  background-image:repeating-linear-gradient(transparent 0 39px,#d9def0 39px 41px);background-position:0 54px}
.kart .no{font-weight:700;font-size:13px;color:#7a64b8;margin-bottom:6px}
.kart p{margin:0;font-size:19px;line-height:40px;font-weight:500}
.isaret{position:relative;white-space:nowrap;background:linear-gradient(transparent 18%,var(--sari) 18% 85%,transparent 85%);padding:0 4px}
.isaret svg{position:absolute;left:-14px;top:-8px;width:calc(100% + 28px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.isaret ellipse{fill:none;stroke:#E33D5C;stroke-width:3.2;stroke-dasharray:420;stroke-dashoffset:420;animation:ciz 1s .6s ease-out forwards}
.siklar{font-size:16px;color:#6b6290;line-height:40px}
@media (max-width:600px){.kart{transform:rotate(1.2deg);padding:20px 18px 14px}.kart p{font-size:17px}}
@keyframes ciz{to{stroke-dashoffset:0}}
.sohbet{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.balon{max-width:85%;padding:12px 18px;border-radius:20px;font-size:16px;font-weight:500;opacity:0;animation:gel .4s ease-out forwards}
.balon.koc{align-self:flex-end;background:#4E34A5;border-bottom-right-radius:6px}
.balon.ogr{align-self:flex-start;background:#fff;color:var(--murekkep);border-bottom-left-radius:6px}
.balon:nth-child(1){animation-delay:1.7s}.balon:nth-child(2){animation-delay:2.4s}.balon:nth-child(3){animation-delay:3.1s}
.balon small{display:block;font-size:12px;opacity:.7;font-weight:400}
@keyframes gel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.isaret ellipse{animation:none;stroke-dashoffset:0}.balon{animation:none;opacity:1}}
/* bölümler */
section{padding:84px 0}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.15;margin:0 0 14px;font-weight:800;letter-spacing:-.8px}
.alt{color:#cfc5f5;max-width:40em;margin:0 0 40px}
.adimlar{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:a}
@media (max-width:860px){.adimlar{grid-template-columns:1fr}}
.adimlar li{background:var(--gece2);border:1px solid rgba(185,166,255,.22);border-radius:var(--r-lg);padding:28px;position:relative;counter-increment:a}
.adimlar li::before{content:counter(a);position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:50%;background:var(--sari);color:var(--murekkep);font-weight:800;display:grid;place-items:center;font-size:19px}
.adimlar h3{margin:10px 0 8px;font-size:21px}
.adimlar p{margin:0;color:#d6cdf8}
/* pasif-aktif */
.kiyas{background:linear-gradient(180deg,transparent,rgba(91,43,208,.18))}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:760px){.ikili{grid-template-columns:1fr}}
.sutun{border-radius:var(--r-lg);padding:30px}
.sutun h3{margin:0 0 4px;font-size:24px}
.sutun .k{margin:0 0 18px;font-size:15px}
.sutun ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sutun li{padding:12px 16px;border-radius:var(--r-md);font-weight:500}
.pasif{background:#2E2752;color:#bdb3dd}.pasif .k{color:#9d93c4}.pasif li{background:#3A3264}
.aktif{background:var(--kagit);color:var(--murekkep);box-shadow:0 0 0 3px var(--cam),0 0 40px rgba(94,226,255,.35)}.aktif .k{color:#6c4fd0}.aktif li{background:#ECE6FF;font-weight:600}
.arastirma{margin-top:26px;padding:18px 22px;border:1px solid var(--mor-acik);border-radius:var(--r-md);color:#e8e2ff;max-width:none}
/* paketler */
.paketler{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:900px}
@media (max-width:760px){.paketler{grid-template-columns:1fr}}
.paket{background:var(--gece2);border:1px solid rgba(185,166,255,.25);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column}
.paket.one{background:var(--kagit);color:var(--murekkep);border:0}
.paket h3{margin:0 0 6px;font-size:22px}
.fiyat{font-size:44px;font-weight:800;margin:6px 0 2px;letter-spacing:-1px}
.fiyat span{font-size:17px;font-weight:500}
.paket .kdv{font-size:14px;opacity:.75;margin:0 0 18px}
.paket ul{padding-left:20px;margin:0 0 26px;flex:1}
.paket li{margin-bottom:6px}
.paket .btn{text-align:center}
.paket.one .btn{background:var(--mor);color:#fff}
.odeme-notu{margin-top:22px;font-size:15px;color:#cfc5f5}
/* veliler */
.veli{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin-top:10px}
@media (max-width:760px){.veli{grid-template-columns:1fr}}
.veli div{border-left:4px solid var(--sari);padding:4px 0 4px 18px}
.veli h3{margin:0 0 4px;font-size:18px}
.veli p{margin:0;color:#d6cdf8;font-size:16px}
/* sss */
details{border-bottom:1px solid rgba(185,166,255,.2);padding:18px 0;max-width:820px}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--sari);font-size:26px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:#d6cdf8;margin:12px 0 0}
/* çağrı */
.cagri{text-align:center;background:var(--mor);border-radius:36px;padding:56px 26px;margin:0 22px}
.cagri h2{color:#fff}.cagri p{color:#e8e2ff;margin:0 auto 26px;max-width:34em}
/* alt bilgi */
footer{padding:56px 0 40px;margin-top:84px;border-top:1px solid rgba(185,166,255,.18);font-size:15px;color:#c3b9e6}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer h4{color:#fff;margin:0 0 10px;font-size:16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:#c3b9e6;text-decoration:none}footer a:hover{color:#fff;text-decoration:underline}
.kartlar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kartlar span{border:1px solid rgba(185,166,255,.4);border-radius:6px;padding:3px 9px;font-size:13px;font-weight:600;color:#e4ddff}
.telif{grid-column:1/-1;font-size:13px;color:#9b90c6;border-top:1px solid rgba(185,166,255,.12);padding-top:18px}
/* yasal sayfalar */
.yasal{background:var(--kagit);color:var(--murekkep)}
.yasal main{max-width:760px;margin:0 auto;padding:56px 22px 40px}
.yasal h1{font-size:clamp(30px,4vw,42px);font-style:normal;letter-spacing:-.8px;color:var(--murekkep)}
.yasal h2{font-size:22px;margin:36px 0 10px;letter-spacing:-.2px}
.yasal main p,.yasal main li{color:#2f2752}
.yasal main a{color:var(--mor)}
.yasal .ust{background:var(--gece)}
.yasal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.yasal .tablo{overflow-x:auto}
.yasal th,.yasal td{border:1px solid #d9d1f3;padding:10px 12px;text-align:left;vertical-align:top}
.yasal th{background:#ECE6FF}
.yasal .tarih{color:var(--gri);font-size:15px}
.yasal footer{background:var(--gece);margin-top:0}
.kutu{background:#FFF6D6;border:1px solid #F2D27A;border-radius:12px;padding:14px 18px;margin:18px 0}
/* form sayfası */
.form-kart{background:var(--gece2);border:1px solid rgba(185,166,255,.25);border-radius:var(--r-lg);padding:32px;max-width:640px}

/* sepet */
.sepet-tablo{width:100%;border-collapse:collapse;font-size:16px}
.sepet-tablo th,.sepet-tablo td{padding:12px 8px;border-bottom:1px solid rgba(185,166,255,.25);text-align:left;vertical-align:top}
.sepet-tablo tfoot td{border-bottom:0;font-size:18px}
.kucuk{font-size:14px;color:#b7acde}
.bag{background:none;border:0;color:var(--mor-acik);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;padding:6px 0;margin-top:8px}
.onay{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;cursor:pointer;color:#e4ddff}
.onay input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--sari)}
.uyari{background:#4a1d2e;border:1px solid #e33d5c;color:#ffd6de;padding:10px 14px;border-radius:10px}