/*
 * ÖZELLİKLER sayfası — 2026-09-15 sıfırdan (kullanıcı isteği).
 * 🔴 İçerik GERÇEK: notebook üzerindeki ekranlar canlı panelden çekildi
 *    (varlik/urun/notebook-*.webp), WhatsApp konuşması botun gerçek yanıt
 *    kalıplarından (app/Services/Wa/Gelen.php, WaGonder.php) kuruldu.
 * 🔴 Slayt JS'i sayfanın altında (index.php); kütüphane yok.
 */
.oz-bolum{padding:84px 0}
.oz-kap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.oz-ust{text-align:center;max-width:64ch;margin:0 auto 44px}
.oz-etiket{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--marka)}
.oz-ust h2,.oz-baslik{margin-top:12px;font-size:clamp(26px,3.3vw,38px);font-weight:780;line-height:1.2;letter-spacing:-.02em;color:var(--koyu)}
.oz-ust p{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--ikincil)}

/* ══ 1 — Panel slaytı ══ */
.slayt{display:grid;grid-template-columns:340px minmax(0,1fr);gap:40px;align-items:start}
.slayt-sekmeler{display:flex;flex-direction:column;gap:6px;position:sticky;top:96px}
.slayt-sekme{display:flex;gap:14px;align-items:flex-start;text-align:left;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:16px;
  background:transparent;font:inherit;cursor:pointer;color:var(--metin);transition:background .2s,border-color .2s,transform .2s}
.slayt-sekme:hover{background:var(--yuzey);border-color:var(--kenar)}
.slayt-sekme.acik{background:var(--yuzey);border-color:var(--kenar);box-shadow:0 10px 26px rgba(24,20,18,.07)}
.slayt-sekme .no{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--kagit);border:1px solid var(--kenar);color:var(--soluk);font-size:12.5px;font-weight:700;transition:background .2s,color .2s}
.slayt-sekme.acik .no{background:var(--marka);border-color:var(--marka);color:#fff}
.slayt-sekme b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.slayt-sekme span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--ikincil)}
/* ilerleme çubuğu: aktif sekmenin altında akar (otomatik geçiş süresi) */
.slayt-sekme .cubuk{position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--kenar2);border-radius:2px;overflow:hidden;opacity:0}
.slayt-sekme{position:relative}
.slayt-sekme.acik .cubuk{opacity:1}
.slayt-sekme.acik .cubuk::after{content:"";position:absolute;inset:0;background:var(--marka);transform-origin:left;animation:slayt-akis 6s linear forwards}
.slayt.duruk .slayt-sekme.acik .cubuk::after{animation-play-state:paused}
@keyframes slayt-akis{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.slayt-sahne{position:relative;min-width:0}
.slayt-gorsel{position:relative;aspect-ratio:2600/1733;border-radius:20px;overflow:hidden}
.slayt-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);
  transition:opacity .55s ease,transform .8s ease}
.slayt-gorsel img.acik{opacity:1;transform:none}
.slayt-alt{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:22px}
.slayt-aciklama{flex:1 1 auto;min-width:0}
.slayt-aciklama h3{font-size:20px;font-weight:740;color:var(--koyu)}
.slayt-aciklama ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.slayt-aciklama li{position:relative;padding-left:26px;font-size:15px;line-height:1.6;color:var(--ikincil)}
.slayt-aciklama li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--yesil-zemin);border:1px solid var(--yesil-kenar)}
.slayt-aciklama li::after{content:"";position:absolute;left:5px;top:10px;width:6px;height:3px;border-left:1.6px solid var(--yesil);border-bottom:1.6px solid var(--yesil);transform:rotate(-45deg)}
.slayt-oklar{display:flex;gap:8px;flex:none}
.slayt-ok{width:44px;height:44px;border-radius:50%;border:1px solid var(--kenar);background:var(--yuzey);color:var(--metin);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .16s,transform .16s}
.slayt-ok:hover{border-color:var(--metin);transform:translateY(-1px)}
.slayt-ok svg{width:18px;height:18px}
.slayt-noktalar{display:none;justify-content:center;gap:7px;margin-top:16px}
.slayt-noktalar button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--kenar);cursor:pointer}
.slayt-noktalar button.acik{background:var(--marka);width:22px;border-radius:4px}

/* ══ 2 — WhatsApp asistan ══ */
.wa-bolum{background:var(--yuzey);border-top:1px solid var(--kenar);border-bottom:1px solid var(--kenar)}
.wa-duzen{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:center}
.wa-metin h2{margin-top:12px;font-size:clamp(26px,3.2vw,36px);font-weight:780;line-height:1.2;letter-spacing:-.02em;color:var(--koyu)}
.wa-metin p{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--ikincil)}
.wa-adimlar{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.wa-adimlar li{display:flex;gap:14px;align-items:flex-start}
.wa-adimlar .n{flex:none;width:30px;height:30px;border-radius:50%;background:#25d366;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.wa-adimlar b{display:block;font-size:15px;color:var(--koyu)}
.wa-adimlar span{display:block;font-size:14px;color:var(--ikincil);line-height:1.55}
.wa-not{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--kagit);border:1px solid var(--kenar);font-size:14px;color:var(--ikincil)}
.wa-not strong{color:var(--koyu)}

/* Telefon çerçevesi + WhatsApp görünümü (gerçek konuşma kalıpları) */
.tel{position:relative;width:100%;max-width:400px;margin:0 auto;background:#0B1020;border-radius:44px;padding:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 40px 70px rgba(13,19,34,.28)}
.tel::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#0B1020;border-radius:0 0 18px 18px;z-index:3}
.tel-ekran{border-radius:34px;overflow:hidden;background:#E5DDD5;display:flex;flex-direction:column;height:940px;position:relative}
.wa-bas{background:#075E54;color:#fff;padding:34px 14px 10px;display:flex;align-items:center;gap:10px;flex:none}
.wa-bas img{width:40px;height:40px;border-radius:50%;background:#fff;padding:6px;flex:none;object-fit:contain;box-sizing:border-box}
.wa-bas b{display:flex;align-items:center;gap:5px;font-size:14.5px;font-weight:650}
.wa-bas span{display:block;font-size:11.5px;opacity:.85}
.wa-bas .tik-mavi{margin-left:4px;color:#25d366;font-size:11px;vertical-align:1px}
/* 🔴 Akış üstten başlar ve gerekirse kayar: alttan hizalayıp overflow gizleyince
   ilk mesaj (kullanıcının isteği) kesiliyordu. JS mesaj belirdikçe en alta kaydırır. */
.wa-akis{flex:1 1 auto;overflow-y:auto;scrollbar-width:none;padding:12px 10px;display:flex;flex-direction:column;gap:5px;justify-content:flex-start;
  background:#E5DDD5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.2'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Cpath d='M52 14h14v14H52zM10 52l8 8-8 8-8-8zM50 50c6 0 6 10 12 10s6-10 12-10'/%3E%3C/g%3E%3C/svg%3E")}
.wa-m{max-width:90%;padding:5px 9px 4px;border-radius:10px;font-size:11.4px;line-height:1.34;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.12);white-space:pre-line;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.wa-m.gorundu{opacity:1;transform:none}
.wa-m.ben{align-self:flex-end;background:#DCF8C6;border-top-right-radius:2px}
.wa-m.bot{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.wa-m .sa{display:block;text-align:right;font-size:10px;color:#667781;margin-top:3px}
.wa-m .sa i{font-style:normal;color:#53BDEB;margin-left:3px;letter-spacing:-2px}
.wa-m b{font-weight:700}
.wa-m em{font-style:italic;color:#333}
.wa-dosya{display:flex;align-items:center;gap:9px;background:#F5F6F6;border-radius:8px;padding:8px 10px;margin:-2px -3px 4px}
.wa-dosya .pdf{width:30px;height:36px;border-radius:5px;background:#E53935;color:#fff;font-size:8.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.wa-dosya b{display:block;font-size:12px}
.wa-dosya small{display:block;font-size:10.5px;color:#667781}
.wa-yaz{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 12px;background:#F0F0F0}
.wa-yaz span{flex:1;height:36px;border-radius:18px;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:#8696A0}
.wa-yaz i{width:36px;height:36px;border-radius:50%;background:#25d366;flex:none;display:flex;align-items:center;justify-content:center}
.wa-yaz svg{width:16px;height:16px;fill:#fff}
.wa-tarih{align-self:center;background:rgba(255,255,255,.9);border-radius:7px;padding:4px 10px;font-size:11px;color:#54656F;box-shadow:0 1px 1px rgba(0,0,0,.08);margin-bottom:4px;opacity:0;transition:opacity .35s}
.wa-tarih.gorundu{opacity:1}

/* ══ 3 — Diğer özellikler ══ */
.oz-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oz-kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:20px;padding:26px;box-shadow:var(--golge-s);transition:transform .2s,box-shadow .2s}
.oz-kart:hover{transform:translateY(-3px);box-shadow:var(--golge)}
.oz-kart .ik{width:44px;height:44px;border-radius:13px;background:rgba(163,33,31,.07);color:var(--marka);display:flex;align-items:center;justify-content:center}
.oz-kart .ik svg{width:22px;height:22px}
.oz-kart h3{margin-top:16px;font-size:17px;font-weight:700;color:var(--koyu)}
.oz-kart p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--ikincil)}

/* ══ 4 — Çağrı ══ */
.oz-cagri{position:relative;overflow:hidden;border-radius:24px;padding:52px 40px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#8E1C1A 0%,#C02726 55%,#7A1917 100%)}
.oz-cagri h2{font-size:clamp(23px,2.8vw,31px);font-weight:800;color:#fff}
.oz-cagri p{margin-top:12px;font-size:15.5px;color:rgba(255,255,255,.86)}
.oz-cagri .dugmeler{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.oz-cagri .d-beyaz{background:#fff;color:var(--marka)}

@media (max-width:1024px){
  .slayt{grid-template-columns:1fr;gap:26px}
  .slayt-sekmeler{position:static;display:none}
  .slayt-noktalar{display:flex}
  .wa-duzen{grid-template-columns:1fr;gap:40px}
  .tel{max-width:360px}.tel-ekran{height:900px}
  .oz-izgara{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .oz-bolum{padding:56px 0}
  .oz-izgara{grid-template-columns:1fr}
  .slayt-alt{flex-direction:column}
  .oz-cagri{padding:38px 22px;border-radius:18px}
  .tel{max-width:320px;border-radius:38px;padding:10px}.tel-ekran{height:840px;border-radius:30px}
}