/* SMARTMAIL - URUN UYARLAMASI (tasarim kiti v1). Kit dosyalari (kit/) DUZENLENMEZ; SmartMail'e ozgu
   her sey burada. Hareket: yalniz transform/opacity, .canli icinde (ekran disinda ve kaydirmada durur),
   dinlenme karesi dolu; prefers-reduced-motion'da hepsi kapali. Uretici: deploy/yeni-tasarim/uret.mjs */

/* 1) vurgu rengi + logo eki (kit ornegiyle ayni) */
body[data-urun]{--urun:#c8529b;--urun-acik:#fbe7f2}
.logo b span{color:var(--marka)}

/* 2) cerceveler */
.ekran{margin:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--cizgi2);box-shadow:var(--golge-l);background:var(--kart)}
.ekran img{width:100%}
.ekran.dik{max-width:440px;margin-inline:auto}
.ekran.dik img{max-height:640px;object-fit:cover;object-position:top}
.alt-sayfa .dev{font-size:clamp(34px,4.4vw,58px)}
.git{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px}
.git svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.git:hover svg{transform:translateX(3px)}
.orta-bag,.sss-tum{text-align:center;margin-top:28px}
.tur-video{max-width:1080px;margin-inline:auto}

/* 3) sabitlenen anlatim: gorselin data-adim'ine gore ust uste ekranlar (16:10, ust-sol kirpma) */
.pin-gorsel .sahne{aspect-ratio:16/10;overflow:hidden}
.pin-gorsel .sahne > img{width:100%;height:100%;object-fit:cover;object-position:left top}
.pin-gorsel[data-adim="2"] .sahne > img[data-a="2"],.pin-gorsel[data-adim="3"] .sahne > img[data-a="3"],
.pin-gorsel[data-adim="4"] .sahne > img[data-a="4"]{opacity:1}

/* 4) menu ve kartlar */
.acilir .ikon-kutu,.mobil-panel .ikon-kutu{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
.acilir .ikon-kutu svg,.mobil-panel .ikon-kutu svg{width:18px;height:18px}
a.mini-kart{color:inherit}
a.mini-kart h3::after{content:" →";color:var(--marka)}
.mini-gorsel{display:block;margin:-8px -8px 4px;border-radius:14px;overflow:hidden;border:1px solid var(--cizgi);background:var(--kart2);aspect-ratio:16/9}
.mini-gorsel img{width:100%;height:100%;object-fit:cover;object-position:left top}
.alt-marka .aile{margin-top:10px;font-size:14px;color:var(--soluk)}

/* 5) mobil: uc telefon */
.tel-dizi{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,22px)}
.tel-dizi .telefon{width:min(220px,31%);padding:6px;border-radius:30px}
.tel-dizi .telefon .sahne{border-radius:24px}
.tel-dizi .telefon.orta{transform:translateY(-28px)}

/* 6) kapanis: yalniz SmartMail isareti */
.kapanis-marka{justify-self:center;width:min(220px,60%);aspect-ratio:1;border-radius:28%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.kapanis-marka img{width:62%;height:auto}
@media (max-width:860px){ .kapanis-marka{display:none} }

/* 7) canli katmanlar (olculer demo DOM'undan, Smart360 urun sayfasiyla ayni) */
.t-bildirim{position:absolute;left:5%;right:5%;top:7%;z-index:4;background:rgba(255,255,255,.96);border-radius:16px;box-shadow:var(--golge-m);
  padding:9px 10px;display:flex;gap:8px;align-items:center;font-size:clamp(9px,4.4cqi,12px);line-height:1.3;animation:t-bil 7s var(--ease) infinite}
.t-bildirim img{width:22px;height:22px}
@keyframes t-bil{0%,20%{transform:translateY(-140%)}28%,88%{transform:none}96%,100%{transform:translateY(-140%)}}
.yuzen .balon i svg{width:18px;height:18px}
.on-imlec{animation:onim 7s var(--ease) infinite}
@keyframes onim{0%,10%{transform:translate(70cqi,36cqi)}36%,100%{transform:translate(42cqi,59.5cqi)}}
.on-dalga{left:41.8%;top:96.4%;animation:ondal 7s infinite}
@keyframes ondal{0%,38%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(.4)}52%,100%{opacity:0;transform:scale(1.5)}}
.on-sonuc{left:46%;top:76%;display:flex;gap:8px;align-items:center;animation:onsn 7s var(--ease) infinite}
.on-sonuc svg{width:18px;height:18px;color:var(--yesil)}
@keyframes onsn{0%,30%{transform:none}32%,44%{transform:translateY(10px) scale(.9)}50%,100%{transform:none}}
.ozet-panel{position:relative;max-width:360px;margin-inline:auto;border-radius:18px;overflow:hidden;border:1px solid var(--cizgi2);box-shadow:var(--golge-l);background:#fff}
.ozet-tara{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px;overflow:hidden}
.ozet-tara::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(107,63,212,.22),transparent);
  transform:translateX(-100%);animation:tara 3.6s var(--ease) infinite}
@keyframes tara{to{transform:translateX(100%)}}
.canli:not(.gorunur) :is(.t-bildirim,.on-imlec,.on-dalga,.on-sonuc,.ozet-tara::after),
.kayiyor :is(.t-bildirim,.on-imlec,.on-dalga,.on-sonuc){animation-play-state:paused}
.canli:not(.gorunur) .ozet-tara::after,.kayiyor .ozet-tara::after{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .t-bildirim,.on-imlec,.on-dalga,.on-sonuc,.ozet-tara::after{animation:none!important}
  .t-bildirim{transform:none}
  .on-dalga,.ozet-tara{display:none}
}

/* ICERIK SAYFALARI (.eski-icerik): canli sayfanin <main>'i yeni kabukta.
   Eski sinif adlari tasinir; burada yalniz okunur tipografi ve duzen. */
.eski-icerik { max-width: 980px; margin-inline: auto; display: grid; gap: 28px; font-size: 16px; line-height: 1.65; color: var(--metin, #15111d); }
.eski-icerik h1 { font-family: var(--baslik); font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.eski-icerik h2 { font-family: var(--baslik); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; margin: 12px 0 0; text-wrap: balance; }
.eski-icerik h3 { font-size: 18px; margin: 8px 0 0; }
.eski-icerik p, .eski-icerik ul, .eski-icerik ol { margin: 0; max-width: 72ch; }
.eski-icerik ul, .eski-icerik ol { padding-left: 1.2em; display: grid; gap: 6px; }
.eski-icerik a { color: var(--vurgu, #2563eb); text-underline-offset: 3px; }
.eski-icerik img, .eski-icerik video { max-width: 100%; height: auto; border-radius: 14px; }
.eski-icerik section, .eski-icerik .sec { display: grid; gap: 16px; }
.eski-icerik .wrap { display: grid; gap: 16px; }
.eski-icerik table { width: 100%; border-collapse: collapse; font-size: 15px; }
.eski-icerik th, .eski-icerik td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--cizgi, #e7e4dc); }
.eski-icerik thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk, #6b6676); }
.eski-icerik .tablo-sar, .eski-icerik .table-wrap { overflow-x: auto; }
.eski-icerik details { border: 1px solid var(--cizgi, #e7e4dc); border-radius: 14px; padding: 14px 18px; background: #fff; }
.eski-icerik details + details { margin-top: -16px; }
.eski-icerik summary { cursor: pointer; font-weight: 600; }
.eski-icerik details[open] summary { margin-bottom: 8px; }
.eski-icerik input, .eski-icerik select, .eski-icerik textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi, #d9d5cc); border-radius: 10px; background: #fff; }
.eski-icerik label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.eski-icerik form { display: grid; gap: 14px; max-width: 640px; }
.eski-icerik button, .eski-icerik .cta a { font: inherit; font-weight: 600; padding: 11px 18px; border-radius: 999px; border: 0; background: var(--vurgu, #2563eb); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.eski-icerik .paket-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.eski-icerik .paket { border: 1px solid var(--cizgi, #e7e4dc); border-radius: 18px; padding: 20px; background: #fff; display: grid; gap: 8px; align-content: start; }
.eski-icerik .eyebrow, .eski-icerik .cap-no { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--soluk, #6b6676); }
.eski-icerik :focus-visible { outline: 3px solid var(--vurgu, #2563eb); outline-offset: 2px; }
.sayfa-bas { padding-bottom: 0; }
.sayfa-bas + .b { padding-top: 32px; }
.eski-icerik .alt { font-size: 18px; color: var(--soluk, #6b6676); max-width: 60ch; }

/* ESKI stil.css ILE BIRLIKTE (belge/rehber/sektor sayfalari, 2026-10-17):
   o sayfalar icerik icin stil.css'i hala yukler; genel details/summary, a ve
   .menu kurallari yeni ust/alt bilgiyi bozmasin. Yalniz .ust/.alt-bilgi. */
.ust details, .ust details[open] { background: none; border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.ust details summary { position: static; font-size: inherit; font-weight: inherit; color: inherit; }
.ust .menu details summary { padding: 0 12px; }
.ust .mobil-menu summary { padding: 0; }
.ust details summary::after, .ust details[open] summary::after { content: none; }
.ust .menu { flex: 0 1 auto; min-width: 0; justify-content: flex-start; }
.ust .menu > details > summary { display: flex; }
.ust a, .ust a:hover, .alt-bilgi a, .alt-bilgi a:hover { border-bottom: 0; }

/* Tasinan icerikte ekran goruntusu: kitin sahnesi sabit oranla kirpip
   buyutur (yeni sayfalardaki yakin plan icin); burada kare TAM gorunur. */
.eski-icerik .tarayici .sahne { aspect-ratio: auto; height: auto; overflow: hidden; }
.eski-icerik .tarayici .sahne img { position: static; width: 100%; height: auto; transform: none; object-fit: contain; }
.eski-icerik figure { margin: 0; display: grid; gap: 10px; }
.eski-icerik figcaption { font-size: 14px; color: var(--soluk, #6b6676); }
.eski-icerik p + p { margin-top: 12px; }

/* NASIL YAPILIR (#G-299): belgelerden okunan adimlar, iki kart yan yana. */
.nasil { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 32px; }
.nasil-kart { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 20px; border: 1px solid var(--cizgi, #e7e4dc); background: #fff; }
.nasil-kart h3 { font-family: var(--baslik); font-size: 20px; line-height: 1.25; margin: 0; }
.nasil-gorsel .ekran img { width: 100%; height: auto; }
.nasil-adimlar { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--metin); }
.nasil-adimlar li::marker { color: var(--marka); font-weight: 700; }