/* =========================================================
   DBO — görsel katman v2  (style.css'in üstüne yüklenir)
   Kurumsal kimlik: #0a0a14 · #00f2ff · #d400ff · Poppins/Inter
   ========================================================= */
:root{
  --bg:#0a0a14; --bg-2:#0d1020; --bg-3:#11152a;
  --cyan:#00f2ff; --mor:#d400ff; --ak:#e8ecf4; --gri:#98a0b4; --gri-2:#6c7488;
  --cizgi:rgba(255,255,255,.09);
  --cam:rgba(255,255,255,.035);
  --r:18px;
  --gecis:.45s cubic-bezier(.2,.7,.2,1);
}
body{background:var(--bg);color:var(--ak);font-family:'Inter','Poppins',sans-serif;
     -webkit-font-smoothing:antialiased;letter-spacing:.1px}
h1,h2,h3,h4,.baslik{font-family:'Poppins',sans-serif;letter-spacing:-.5px}

/* zemin dokusu */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(60rem 40rem at 12% -10%, rgba(0,242,255,.10), transparent 60%),
  radial-gradient(50rem 38rem at 100% 8%, rgba(212,0,255,.10), transparent 60%),
  var(--bg);}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom, #000 0, transparent 75%)}

/* --- bölüm iskeleti --- */
.bolum{padding:96px 0;position:relative}
.etiket{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.etiket::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--mor),var(--cyan))}
.bolum-baslik{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:700;line-height:1.12;margin-bottom:1rem}
.bolum-baslik .vurgu{background:linear-gradient(90deg,var(--cyan),var(--mor));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bolum-alt{color:var(--gri);max-width:62ch;font-size:1.02rem;line-height:1.75}

/* --- HERO --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, rgba(10,10,20,.94) 0%, rgba(10,10,20,.78) 42%, rgba(10,10,20,.35) 72%, rgba(10,10,20,.6) 100%),
  linear-gradient(to top, var(--bg) 2%, transparent 45%)}
.hero .hero-content{position:relative;z-index:2;max-width:820px}
.hero-rozet{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem 1rem;border-radius:100px;
  border:1px solid rgba(0,242,255,.35);background:rgba(0,242,255,.08);color:var(--cyan);
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.6rem}
.hero-rozet .nokta{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(0,242,255,.7);animation:nabiz 2.2s infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(0,242,255,.55)}70%{box-shadow:0 0 0 12px rgba(0,242,255,0)}100%{box-shadow:0 0 0 0 rgba(0,242,255,0)}}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.5rem);font-weight:700;line-height:1.06;margin-bottom:1.3rem}
.hero h1 .vurgu{background:linear-gradient(100deg,var(--cyan),var(--mor));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.hero-alt{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--gri);max-width:60ch;line-height:1.8;margin-bottom:2.2rem}

/* düğmeler */
.dbo-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.7rem;border-radius:100px;
  font-weight:600;font-size:.95rem;text-decoration:none;transition:var(--gecis);border:1px solid transparent}
.dbo-btn-ana{background:linear-gradient(100deg,var(--cyan),var(--mor));color:#07070f;
  box-shadow:0 10px 34px -12px rgba(0,242,255,.75)}
.dbo-btn-ana:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(212,0,255,.8);color:#07070f}
.dbo-btn-cizgi{border-color:rgba(255,255,255,.22);color:var(--ak);background:rgba(255,255,255,.03)}
.dbo-btn-cizgi:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,242,255,.07);transform:translateY(-3px)}

/* --- SAYI ŞERİDİ --- */
.sayi-serit{border-block:1px solid var(--cizgi);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.sayi-serit .kutu{padding:34px 12px;text-align:center;border-right:1px solid var(--cizgi)}
.sayi-serit .kutu:last-child{border-right:none}
.sayi-serit .rakam{font-family:'Poppins';font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;line-height:1;
  background:linear-gradient(180deg,#fff,#9fd8e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.sayi-serit .etiket-kucuk{margin-top:.5rem;font-size:.82rem;color:var(--gri-2);letter-spacing:.04em}

/* --- KARTLAR --- */
.kart{position:relative;height:100%;padding:30px 28px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--cizgi);transition:var(--gecis);overflow:hidden;backdrop-filter:blur(6px)}
.kart::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;
  background:linear-gradient(130deg,var(--cyan),transparent 40%,transparent 60%,var(--mor));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:var(--gecis)}
.kart:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03))}
.kart:hover::before{opacity:1}
.kart .ikon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:linear-gradient(135deg,rgba(0,242,255,.16),rgba(212,0,255,.16));border:1px solid rgba(0,242,255,.22)}
.kart .ikon i{font-size:1.4rem;color:var(--cyan)}
.kart h3{font-size:1.06rem;font-weight:600;margin-bottom:.6rem;color:#fff}
.kart p{font-size:.92rem;line-height:1.7;color:var(--gri);margin:0}
.kart .rozet{display:inline-block;margin-top:1rem;padding:.28rem .75rem;border-radius:100px;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(0,242,255,.3);color:var(--cyan);background:rgba(0,242,255,.08)}
.kart .rozet.mor{border-color:rgba(212,0,255,.35);color:#e79bff;background:rgba(212,0,255,.09)}

/* öne çıkan ürün kartı */
.kart.one-cikan{background:linear-gradient(160deg,rgba(0,242,255,.10),rgba(212,0,255,.07));
  border-color:rgba(0,242,255,.28)}

/* --- REFERANS IZGARASI --- */
.ref-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px}
.ref-kutu{aspect-ratio:1/1;display:grid;place-items:center;padding:14px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid var(--cizgi);transition:var(--gecis)}
.ref-kutu img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) brightness(1.7) contrast(.75);
  opacity:.62;transition:var(--gecis)}
.ref-kutu:hover{background:rgba(255,255,255,.08);border-color:rgba(0,242,255,.4);transform:translateY(-4px)}
.ref-kutu:hover img{filter:none;opacity:1}
.ref-ad{font-size:.78rem;font-weight:600;color:var(--gri);text-align:center;line-height:1.35;padding:6px}
.ref-kutu:hover .ref-ad{color:var(--cyan)}

/* --- CTA --- */
.cta-kutu{position:relative;border-radius:26px;padding:56px 44px;overflow:hidden;
  background:linear-gradient(130deg,rgba(0,242,255,.13),rgba(212,0,255,.13));border:1px solid rgba(0,242,255,.25)}
.cta-kutu::after{content:"";position:absolute;inset:0;
  background:radial-gradient(40rem 20rem at 80% 120%, rgba(212,0,255,.25), transparent 60%)}
.cta-kutu > *{position:relative;z-index:1}

/* --- kaydırma ile beliren --- */
.bel{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .bel{opacity:0;transform:translateY(26px)}
html.js .bel.gorundu{opacity:1;transform:none}

/* --- navbar --- */
.navbar{background:rgba(10,10,20,.55)!important;backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:var(--gecis)}
.navbar.kaydi{background:rgba(8,8,16,.92)!important;border-bottom-color:var(--cizgi)}
.navbar .nav-link{font-size:.93rem;font-weight:500;position:relative}
.navbar .nav-link::after{content:"";position:absolute;left:15px;right:100%;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--mor));transition:right .35s ease;border-radius:2px}
.navbar .nav-link:hover::after{right:0}

/* --- footer --- */
.footer-section{border-top:1px solid var(--cizgi);background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}

@media (max-width:991px){
  .bolum{padding:68px 0}
  .sayi-serit .kutu{border-right:none;border-bottom:1px solid var(--cizgi)}
}
@media (prefers-reduced-motion:reduce){
  .bel{opacity:1;transform:none}
  .hero-rozet .nokta{animation:none}
}

/* --- eski style.css hero kurallarının üzerine yaz --- */
.hero{height:auto;min-height:92vh;justify-content:flex-start;text-align:left;padding:130px 0 90px}
.hero::before{background:transparent!important}
.hero .container{width:100%}
.hero .hero-content{max-width:880px;margin:0}
.hero h1{max-width:none;text-shadow:0 2px 30px rgba(0,0,0,.55);letter-spacing:-1.5px}
.hero p.hero-alt{max-width:62ch;margin:0 0 2.2rem}
.hero::after{background:
  linear-gradient(90deg, rgba(10,10,20,.90) 0%, rgba(10,10,20,.66) 38%, rgba(10,10,20,.18) 66%, rgba(10,10,20,.5) 100%),
  linear-gradient(to top, var(--bg) 1%, transparent 38%)!important}

/* ===== iç sayfa başlığı ===== */
.sayfa-basi{position:relative;padding:170px 0 70px;overflow:hidden;border-bottom:1px solid var(--cizgi)}
.sayfa-basi::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(45rem 26rem at 15% 0%, rgba(0,242,255,.16), transparent 62%),
  radial-gradient(40rem 24rem at 90% 10%, rgba(212,0,255,.16), transparent 62%)}
.sayfa-basi h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700;line-height:1.1;margin-bottom:1rem}
.sayfa-basi h1 .vurgu{background:linear-gradient(90deg,var(--cyan),var(--mor));-webkit-background-clip:text;background-clip:text;color:transparent}
.sayfa-basi p{color:var(--gri);max-width:66ch;font-size:1.05rem;line-height:1.75;margin:0}
.kirintili{font-size:.82rem;color:var(--gri-2);margin-bottom:1rem}
.kirintili a{color:var(--gri);text-decoration:none}
.kirintili a:hover{color:var(--cyan)}

/* ===== ürün satırı ===== */
.urun-satir{padding:74px 0;border-bottom:1px solid var(--cizgi)}
.urun-satir:last-child{border-bottom:none}
.urun-etiket{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem;border-radius:100px;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(0,242,255,.32);
  color:var(--cyan);background:rgba(0,242,255,.09);margin-bottom:1rem}
.urun-etiket.mor{border-color:rgba(212,0,255,.36);color:#e79bff;background:rgba(212,0,255,.1)}
.urun-satir h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:700;margin-bottom:.9rem}
.urun-satir p{color:var(--gri);line-height:1.78;font-size:1rem}
.ozellik{display:flex;gap:.75rem;align-items:flex-start;margin-top:.9rem}
.ozellik i{color:var(--cyan);font-size:1.05rem;margin-top:.15rem;flex:none}
.ozellik span{color:var(--gri);font-size:.95rem;line-height:1.6}

/* ekran görüntüsü çerçevesi */
.ekran{border-radius:14px;overflow:hidden;border:1px solid var(--cizgi);background:#0d1120;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);transition:var(--gecis)}
.ekran:hover{transform:translateY(-5px);border-color:rgba(0,242,255,.35)}
.ekran .cubuk{display:flex;gap:6px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--cizgi)}
.ekran .cubuk i{width:9px;height:9px;border-radius:50%;background:#3a4058}
.ekran .cubuk i:first-child{background:#ff5f57}.ekran .cubuk i:nth-child(2){background:#febc2e}.ekran .cubuk i:nth-child(3){background:#28c840}
.ekran img{display:block;width:100%;height:auto}
.ekran-alt{font-size:.82rem;color:var(--gri-2);margin-top:.6rem}

/* ===== makale tipografisi ===== */
.yazi{max-width:76ch;margin:0 auto}
.yazi h2{font-size:1.55rem;font-weight:600;margin:2.4rem 0 .9rem;color:#fff}
.yazi h3{font-size:1.2rem;font-weight:600;margin:1.8rem 0 .6rem;color:var(--cyan)}
.yazi p{color:var(--gri);line-height:1.85;margin-bottom:1.15rem;font-size:1.02rem}
.yazi strong{color:#fff;font-weight:600}
.yazi ul{color:var(--gri);line-height:1.85;padding-left:1.2rem}
.yazi li{margin-bottom:.5rem}
.yazi img{max-width:100%;border-radius:14px;border:1px solid var(--cizgi);margin:1.6rem 0}

/* blog kartı */
.blog-kart{display:block;text-decoration:none;height:100%;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--cizgi);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:var(--gecis)}
.blog-kart:hover{transform:translateY(-6px);border-color:rgba(0,242,255,.35)}
.blog-kart .govde{padding:26px}
.blog-kart h3{font-size:1.08rem;color:#fff;font-weight:600;line-height:1.45;margin-bottom:.6rem}
.blog-kart p{color:var(--gri);font-size:.92rem;line-height:1.65;margin:0}
.blog-kart .oku{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;color:var(--cyan);font-size:.88rem;font-weight:600}

/* iletişim */
.iletisim-kutu{padding:26px;border-radius:var(--r);border:1px solid var(--cizgi);background:rgba(255,255,255,.04);height:100%}
.iletisim-kutu .ikon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(135deg,rgba(0,242,255,.16),rgba(212,0,255,.16));border:1px solid rgba(0,242,255,.22)}
.iletisim-kutu .ikon i{color:var(--cyan);font-size:1.25rem}
.iletisim-kutu h3{font-size:1rem;color:#fff;margin-bottom:.4rem}
.iletisim-kutu a,.iletisim-kutu p{color:var(--gri);text-decoration:none;font-size:.95rem;line-height:1.7}
.iletisim-kutu a:hover{color:var(--cyan)}
.form-control,.form-select{background:rgba(255,255,255,.045);border:1px solid var(--cizgi);color:var(--ak);border-radius:12px;padding:.8rem 1rem}
.form-control:focus{background:rgba(255,255,255,.07);border-color:var(--cyan);box-shadow:0 0 0 .2rem rgba(0,242,255,.12);color:#fff}
.form-control::placeholder{color:var(--gri-2)}
.form-label{font-size:.85rem;color:var(--gri);margin-bottom:.35rem}
