/* ═══════════════════════════════════════════════════════════
   WixaKurye · tanıtım sitesi — ÖRNEK (site-v3)
   Koyu tema: sıcak siyah zemin, turuncu YALNIZCA eylem ve rota.
   Görseller zaten koyu/turuncu çekildi; sayfa onlarla aynı ışıkta.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0C0A09; --bg2:#121011; --bg3:#18151A;
  --kart:#151315; --cizgi:rgba(255,240,225,.09); --cizgi2:rgba(255,240,225,.16);
  --yazi:#F3EEE8; --govde:#B4ABA2; --sonuk:#7E766F;
  --tur:#FF6410; --tur2:#FF8A3D; --tur-koyu:#D94F00; --tur-yumusak:rgba(255,100,16,.12);
  --yesil:#3DD68C;
  --f-bas:"Archivo",system-ui,sans-serif;
  --f:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --w:1200px; --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--yazi);font-family:var(--f);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tur2);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-family:var(--f-bas);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,4.1rem);font-weight:800;font-stretch:112%;text-transform:uppercase}
h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;font-stretch:112%}
h3{font-size:1.08rem;font-weight:600;font-stretch:100%;letter-spacing:0;line-height:1.3}
p{margin:0}
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.dar{max-width:820px}

/* ── düğmeler ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:10px;font-weight:700;font-size:.97rem;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s,transform .14s,color .18s}
.btn:hover{transform:translateY(-1px)}
.b-or{background:var(--tur);color:#140800}
.b-or:hover{background:var(--tur2)}
.b-cizgi{border-color:var(--cizgi2);color:var(--yazi);background:rgba(255,255,255,.02)}
.b-cizgi:hover{border-color:var(--tur);color:#fff}
.b-sm{padding:10px 18px;font-size:.9rem}

/* ── üst bar ── */
.bar{position:fixed;inset:0 0 auto;z-index:50;transition:background .25s,border-color .25s;
  border-bottom:1px solid transparent}
.bar.dolu{background:rgba(12,10,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--cizgi)}
.bar-in{display:flex;align-items:center;gap:14px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-bas);font-weight:800;
  font-stretch:112%;font-size:1.12rem;letter-spacing:.02em;text-transform:uppercase;flex:none}
.logo img{width:62px;height:auto}
.logo b{color:var(--tur);font-weight:800}
.menu{display:none;gap:28px;margin-left:28px;font-size:.93rem;font-weight:600;color:var(--govde)}
.menu a:hover{color:#fff}
.bar-sp{flex:1}
.bar-tel{display:none;font-size:.92rem;font-weight:600;color:var(--govde)}
.bar-tel:hover{color:#fff}
.menu-ac{display:grid;gap:6px;width:42px;height:42px;place-content:center;background:none;
  border:1px solid var(--cizgi2);border-radius:10px;cursor:pointer}
.menu-ac span{display:block;width:18px;height:2px;background:var(--yazi);transition:transform .2s}
.menu-ac[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-ac[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media(max-width:999px){
  .menu.acik{display:flex;flex-direction:column;gap:4px;position:absolute;top:72px;left:0;right:0;
    margin:0;padding:12px clamp(16px,4vw,32px) 20px;background:rgba(12,10,9,.97);border-bottom:1px solid var(--cizgi)}
  .menu.acik a{padding:12px 0;font-size:1.05rem;border-bottom:1px solid var(--cizgi)}
}
@media(min-width:1000px){.menu{display:flex}.menu-ac{display:none}.bar-tel{display:inline}}
@media(max-width:420px){.logo span{display:none}}

/* ── HERO ── */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;
  padding-block:120px 72px;overflow:hidden;isolation:isolate}
.hero-gorsel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%;z-index:-2}
/* Görselin sol yarısı zaten boş ve karanlık; perde yalnız metnin
   okunurluğunu garantiler, görseli boğmaz. */
.hero-perde{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,10,9,.92) 0%,rgba(12,10,9,.72) 38%,rgba(12,10,9,.05) 70%),
             linear-gradient(0deg,var(--bg) 0%,transparent 26%)}
.hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--tur)}
.hero-alt{max-width:46ch;font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--govde)}
.rozet{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:100px;
  border:1px solid rgba(255,100,16,.4);background:rgba(255,100,16,.08);color:#FFC6A1;
  font-size:.84rem;font-weight:600}
.nokta{width:7px;height:7px;border-radius:50%;background:var(--tur);box-shadow:0 0 0 0 rgba(255,100,16,.6);
  animation:nabiz 2s infinite}
@keyframes nabiz{70%{box-shadow:0 0 0 9px rgba(255,100,16,0)}100%{box-shadow:0 0 0 0 rgba(255,100,16,0)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.guven{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:.88rem;color:var(--sonuk)}
.guven li::before{content:"✓";color:var(--tur);margin-right:7px;font-weight:700}
@media(max-width:760px){
  /* Dar ekranda cihazlar metnin ALTINA iner (üst üste binmez):
     görsel akışa girer, üst kenarı zemine eriyerek başlar. */
  .hero{flex-direction:column;align-items:stretch;padding:104px 0 0;min-height:auto}
  .hero-gorsel{position:relative;inset:auto;order:2;width:150%;max-width:none;height:auto;margin:-8px 0 0 -38%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
  .hero-perde{display:none}
}

/* ── üç söz ── */
.soz{border-block:1px solid var(--cizgi);background:var(--bg2)}
.soz-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.soz-in>div{padding:26px 24px 26px 0}
.soz-in>div+div{padding-left:24px;border-left:1px solid var(--cizgi)}
.soz b{font-family:var(--f-bas);font-stretch:112%;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em}
.soz p{color:var(--govde);font-size:.93rem;margin-top:4px}
@media(max-width:780px){.soz-in>div,.soz-in>div+div{padding:18px 0;border-left:0}
  .soz-in>div+div{border-top:1px solid var(--cizgi)}}

/* ── bölümler ── */
.bolum{padding-block:clamp(72px,10vw,128px)}
.koyu{background:var(--bg2);border-block:1px solid var(--cizgi)}
.ust{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tur);margin-bottom:14px}
.bolum-bas{max-width:640px;margin-bottom:clamp(36px,5vw,56px)}
.bolum-bas>p:not(.ust){color:var(--govde);margin-top:16px;font-size:1.05rem}
.bolum-bas.orta{margin-inline:auto;text-align:center}

.ikili{display:grid;gap:clamp(36px,6vw,80px);align-items:center}
@media(min-width:960px){.ikili{grid-template-columns:1.15fr 1fr}.ikili.ters{grid-template-columns:1fr 1.15fr}}
.ikili-metin{display:flex;flex-direction:column;gap:18px}
.ikili-metin .ust{margin:0}
.giris{color:var(--govde);font-size:1.05rem}
.foto{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--cizgi);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4)}
.foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.foto.afis img{aspect-ratio:3/2}
.liste{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.liste li{padding:14px 0 14px 22px;border-top:1px solid var(--cizgi);color:var(--govde);font-size:.96rem;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;border-radius:2px;background:var(--tur);transform:rotate(45deg)}
.liste b{display:block;color:var(--yazi);font-weight:700;margin-bottom:2px}
.liste.kisa b{display:inline;margin-right:6px}

/* ── THREE.JS dağıtım sahnesi ── */
.dagitim{position:relative;overflow:hidden;padding-block:clamp(80px,11vw,140px) clamp(40px,5vw,64px);background:var(--bg)}
.sahne-kap{position:absolute;inset:0;z-index:0}
.sahne-kap canvas{width:100%;height:100%;display:block}
/* Metin sahnenin üstünde; sol taraf sahneyi hafifçe karartır. */
.sahne-kap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(12,10,9,.85) 30%,rgba(12,10,9,0) 62%),
             linear-gradient(180deg,var(--bg) 0%,transparent 18%,transparent 82%,var(--bg) 100%)}
.dagitim-in{position:relative;z-index:1}
.dagitim .bolum-bas{max-width:520px}
.kurallar{list-style:none;margin:0;padding:0;max-width:520px;display:grid;gap:0}
.kurallar li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--cizgi)}
.kurallar li:last-child{border-bottom:1px solid var(--cizgi)}
.kurallar span{font-family:var(--f-bas);font-stretch:112%;font-weight:700;color:var(--tur);font-size:.95rem;padding-top:2px}
.kurallar b{display:block;font-weight:700}
.kurallar p{color:var(--govde);font-size:.94rem;margin-top:2px}
.sahne-not{margin-top:26px;display:flex;gap:18px;font-size:.8rem;color:var(--sonuk);align-items:center}
.sahne-not i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-10px}
.sahne-not .r{background:var(--tur)}.sahne-not .k{background:#FFE2C8}.sahne-not .m{background:var(--yesil)}
@media(max-width:860px){
  .sahne-kap{position:relative;height:340px;margin-bottom:-40px}
  .sahne-kap::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 20%,transparent 70%,var(--bg) 100%)}
  .dagitim{padding-top:20px}
}

/* ── özellik kartları ── */
.izgara{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:26px 22px;
  transition:border-color .2s,transform .2s}
.kart:hover{border-color:rgba(255,100,16,.45);transform:translateY(-2px)}
.kart svg{width:26px;height:26px;fill:none;stroke:var(--tur);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.kart p{color:var(--govde);font-size:.93rem;margin-top:8px}

/* ── panel rakamları ── */
.rakam{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:4px 0 8px;border:1px solid var(--cizgi);border-radius:12px;overflow:hidden}
.rakam div{padding:14px 16px}
.rakam div+div{border-left:1px solid var(--cizgi)}
.rakam dt{font-weight:700;font-size:.95rem}
.rakam dd{margin:2px 0 0;color:var(--sonuk);font-size:.85rem}
@media(max-width:560px){.rakam{grid-template-columns:1fr}.rakam div+div{border-left:0;border-top:1px solid var(--cizgi)}}

/* ── entegrasyonlar: logo ızgarası + talep formu ── */
.logolar{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.logolar li{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border:1px solid var(--cizgi);
  border-radius:12px;background:var(--kart);font-weight:600;font-size:.92rem;color:var(--yazi);transition:border-color .2s}
.logolar li:hover{border-color:rgba(255,100,16,.45)}
/* Logolar açık zemin için çizilmiş — beyaz yuvada duruyorlar. */
.yuv{flex:none;width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}
.yuv img{width:34px;height:34px;object-fit:contain}
.logolar .arti{border-style:dashed;border-color:rgba(255,100,16,.5);color:var(--tur2)}
.logolar .arti .yuv{background:var(--tur-yumusak);color:var(--tur);font-size:1.4rem;font-weight:700}
.talep-kutu{margin-top:40px;display:grid;gap:24px 48px;padding:clamp(22px,3vw,36px);border:1px solid var(--cizgi);border-radius:16px;background:var(--bg)}
@media(min-width:960px){.talep-kutu{grid-template-columns:.8fr 1.2fr}}
.talep-kutu h3{font-family:var(--f-bas);font-stretch:112%;font-weight:800;font-size:1.5rem;line-height:1.15}
.talep-kutu>div>p{color:var(--govde);margin-top:12px}
.talep-kutu b{color:var(--yazi)}
.talep{display:grid;gap:14px}
.talep-satir{display:grid;gap:14px}
@media(min-width:620px){.talep-satir{grid-template-columns:1fr 1fr}}
.alan{display:grid;gap:6px;font-size:.86rem;font-weight:600;color:var(--govde)}
.alan input,.alan textarea{width:100%;font:inherit;font-weight:500;font-size:1rem;color:var(--yazi);background:var(--kart);
  border:1px solid var(--cizgi2);border-radius:10px;padding:12px 14px;resize:vertical}
.alan input::placeholder,.alan textarea::placeholder{color:var(--sonuk)}
.alan input:focus,.alan textarea:focus{outline:none;border-color:var(--tur)}
.alan .eksik{border-color:#FF4D4D}
.talep-alt{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.talep-not{color:var(--tur2);font-size:.9rem}

/* ── ölçüm ── */
.olcum{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--cizgi)}
.olcum div{padding:28px 20px 6px 0}
.olcum b{display:block;font-family:var(--f-bas);font-stretch:112%;font-weight:800;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;color:var(--yazi)}
.olcum span{display:block;color:var(--govde);font-size:.93rem;margin-top:10px}

/* ── fiyat ── */
.paketler{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.paket{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 26px;border:1px solid var(--cizgi);
  border-radius:16px;background:var(--kart)}
.paket .btn{margin-top:18px}
.paket.one{border-color:var(--tur);background:linear-gradient(180deg,rgba(255,100,16,.1),var(--kart) 60%)}
.etiket{position:absolute;top:-12px;left:24px;background:var(--tur);color:#140800;font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:100px}
.tutar{font-family:var(--f-bas);font-stretch:112%;font-weight:800;font-size:2.4rem;line-height:1.1;margin-top:8px}
.birim{color:var(--sonuk);font-size:.9rem}
.hesap{margin-top:28px;padding:28px clamp(20px,3vw,34px);border:1px solid var(--cizgi);border-radius:16px;background:var(--bg2)}
.hesap label{display:flex;justify-content:space-between;gap:12px;font-weight:600;flex-wrap:wrap}
.hesap output{font-family:var(--f-bas);font-stretch:112%;font-weight:700;color:var(--tur)}
input[type=range]{width:100%;margin:18px 0 10px;accent-color:var(--tur);height:28px}
.hesap-sonuc{font-size:1rem;color:var(--govde)}
.hesap-sonuc b{font-family:var(--f-bas);font-stretch:112%;font-size:2rem;color:var(--yazi);margin-right:4px}
.hesap-not{color:var(--sonuk);font-size:.88rem;margin-top:10px}

/* ── SSS ── */
details{border-top:1px solid var(--cizgi);padding:4px 0}
details:last-of-type{border-bottom:1px solid var(--cizgi)}
summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.5rem;color:var(--tur);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--govde);padding:0 0 20px;max-width:64ch}

/* ── son çağrı ── */
.cagri{padding-block:clamp(72px,10vw,120px);position:relative;overflow:hidden}
.cagri-in{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:860px){.cagri-in{grid-template-columns:minmax(0,380px) 1fr}}
.cagri-amblem{width:min(380px,70vw);margin-inline:auto;border-radius:50%}
.cagri h2{max-width:16ch}
.cagri p{color:var(--govde);margin:16px 0 26px;max-width:48ch;font-size:1.05rem}

/* ── alt ── */
.alt{border-top:1px solid var(--cizgi);padding-block:34px;background:var(--bg2)}
.alt-in{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;color:var(--sonuk);font-size:.88rem}

/* ── yüzen WhatsApp ── */
.wa{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;
  background:#1F9E55;color:#fff;font-weight:700;font-size:.92rem;padding:12px 18px;border-radius:100px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7)}
.wa svg{width:22px;height:22px;fill:#fff}
@media(max-width:560px){.wa{padding:14px}.wa span{display:none}}

/* ── kaydırmada belirme (betik yoksa her şey görünür kalır) ── */
.js .bel{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .bel.gor{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .bel{opacity:1;transform:none}
}