/* Tanıtım (kapı) sayfalarının ortak görünümü — mavikus-kenar/tanitim-uret.mjs üretir sayfaları. */
:root{
  --ink:#263254; --muted:#5c6884; --teal:#12a7a0; --deep:#176f86;
  --sun:#ffd052; --coral:#ff7589; --purple:#7554d9; --violet:#5235a5;
  --midnight:#202959; --aqua:#59dfd0; --zemin:#f4f7ff; --kart:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--zemin);color:var(--ink);
  font:400 17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--deep)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header{background:#fff;border-bottom:1px solid #e6ebf7}
.bar{display:flex;align-items:center;gap:14px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--midnight);font-weight:800}
.logo img{width:46px;height:46px}
.giris-yeri{margin-left:auto;display:flex;align-items:center}

/* Masaüstü: solda metin + video, sağda satın alma kutusu (iki satıra yayılır).
   Telefon: metin → satın alma kutusu → video (kutu videonun altında kaybolmasın). */
.kahraman{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"metin kutu" "video kutu";column-gap:28px;row-gap:0;
  align-items:start;padding:30px 0 10px}
.kahraman .metin{grid-area:metin}
.kahraman .video-blok{grid-area:video}
.kahraman .kutu{grid-area:kutu;position:sticky;top:16px}
@media(max-width:820px){
  .kahraman{grid-template-columns:1fr;grid-template-areas:"metin" "kutu" "video";row-gap:18px;padding-top:20px}
  .kahraman .kutu{position:static}
}
@media(max-width:480px){
  .logo span{display:none}
  .bar{gap:8px}
}
.yas{display:inline-block;background:#e7fbf8;color:var(--deep);font-weight:800;font-size:14px;
  border-radius:999px;padding:4px 12px}
h1{font-size:clamp(34px,6vw,52px);line-height:1.05;margin:10px 0 6px;color:var(--midnight)}
.alt{margin:0 0 16px;color:var(--purple);font-weight:800;font-size:19px}
.kahraman p{margin:0 0 14px;color:var(--muted)}
ul.ozellik{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
ul.ozellik li{background:#fff;border:1px solid #e6ebf7;border-radius:14px;padding:10px 14px;font-weight:600}
ul.ozellik li::before{content:"✓";color:var(--teal);font-weight:900;margin-right:8px}

.kutu{background:var(--kart);border:1px solid #e3e8f6;border-radius:20px;padding:20px;
  box-shadow:0 10px 30px rgba(32,41,89,.07)}
.fiyat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.fiyat b{font-size:34px;color:var(--midnight)}
.fiyat span{color:var(--muted);font-weight:600}
.not{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.dugmeler{display:grid;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;
  border-radius:16px;border:0;font:800 17px/1.2 inherit;cursor:pointer;text-decoration:none;padding:12px 16px}
.btn-al{background:var(--teal);color:#fff;box-shadow:0 6px 0 #0b7a76}
.btn-al:hover{filter:brightness(1.05)}
.btn-giris{background:#fff;color:var(--violet);border:2px solid #d9d0f5;box-shadow:0 4px 0 #e3dbf7}
.btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.durum{margin:14px 0 0;font-size:15px;min-height:1.4em;color:var(--muted)}
.durum.iyi{color:#0b7a76;font-weight:700}
.durum.kotu{color:#b4234a;font-weight:700}
.durum[hidden]{display:none}

.video{margin-top:16px;border-radius:20px;overflow:hidden;background:#071629;
  display:flex;justify-content:center}
.video video{display:block;width:100%;max-width:360px;max-height:640px;aspect-ratio:9/16;background:#071629}
.video-not{font-size:13.5px;color:var(--muted);text-align:center;margin:8px 0 0}

.bolum{padding:18px 0 40px}
.bolum h2{font-size:24px;color:var(--midnight);margin:0 0 12px}
.seviyeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.seviye{background:#fff;border:1px solid #e6ebf7;border-radius:16px;padding:14px}
.seviye b{display:block;color:var(--violet);margin-bottom:4px}
.seviye span{font-size:15px;color:var(--muted)}

footer{border-top:1px solid #e6ebf7;background:#fff;padding:18px 0;font-size:14.5px;color:var(--muted)}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap}
.yukleniyor{opacity:.6;pointer-events:none}
.kahraman h2#satinBaslik{margin:0 0 8px;font-size:20px;color:var(--midnight)}
.kapak{width:100%;border-radius:20px;display:block}