/* ============================================================
   İKKonsol — Ultra Animation & Glassmorphism Theme
   ============================================================ */


:root {
  color-scheme: dark;

  --bg:        #060913;
  --bg-2:      #0B1120;
  --surface:   rgba(66, 89, 136, .6);
  --surface-2: rgba(28, 43, 72, 0.5);
  --border:    rgba(255, 255, 255, 0.08);
  --border-2:  rgba(76, 154, 240, 0.3);

  --text:      #F1F5F9;
  --text-2:    #94A3B8;
  --muted:     #64748B;

  --brand:     #3B82F6;
  --brand-2:   #60A5FA;
  --brand-glow:rgba(59, 130, 246, 0.4);
  --brand-dim: rgba(59, 130, 246, 0.12);
  --accent:    #8B5CF6;
  
  --success:   #10B981;
  --warn:      #F59E0B;
  --danger:    #EF4444;

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1180px;
  --shadow:    0 20px 50px rgba(0, 0, 0, 0.6);
  --glass:     blur(16px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:0px}
html.no-smooth{scroll-behavior:auto !important}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip, hidden DEĞİL: hidden gövdeyi kaydırma kutusuna çevirir, sayfa kaydırması
     ve yapışkan üst bar bozulur. clip aynı yatay taşma korumasını verir. */
  overflow-x:clip;
}
img{max-width:100%}
a{color:var(--brand-2); text-decoration:none; transition:all .2s ease}
a:hover{color:#fff}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.03em; font-weight:700}
h1{font-size:clamp(2.1rem, 1.2rem + 3.2vw, 3.8rem)}
h2{font-size:clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); background: linear-gradient(135deg, #fff 0%, #a5f3fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
h3{font-size:1.15rem; color:#fff}

/* Gradyanlı başlık yalnızca BÖLÜM başlığına aittir. Kart, uyarı kutusu, yer
   tutucu panel gibi bileşenlerin içindeki h2'ler düz beyaz durur; gradyan orada
   bileşenin kendi rengiyle yarışır ve küçük puntoda soluklaşır.
   Yalnızca color yazmak yetmez: yukarıdaki kuralın -webkit-text-fill-color
   değeri color'ı yok sayar, o yüzden ikisi birlikte geri alınır. */
.h2--plain{background:none; -webkit-text-fill-color:#fff; color:#fff}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section {
  --section-pad-y: clamp(27px, 4vw, 64px);
  padding: calc(var(--section-pad-y) / 2) 0 calc(var(--section-pad-y) * 2 / 3);
  position: relative;
}
.section--alt{
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-block:1px solid var(--border);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-2);
  background:var(--brand-dim); border:1px solid rgba(96, 165, 250, 0.3);
  padding:6px 14px; border-radius:999px; margin-bottom:10px;
  box-shadow: 0 0 15px var(--brand-dim);

  /* Huzme rozetin içinde kalsın diye. */
  position:relative;
  overflow:hidden;

  /* Dururken hafif bir canlılık: renk ve ışıltı mavi ile mor arasında gidip gelir,
     rozet 1 piksel yükselir. Yalnızca renk, gölge ve transform değişir; yerleşim
     hesaplanmaz, bu yüzden kaydırma akıcılığını etkilemez. */
  animation: eyebrowBreathe 7s ease-in-out infinite;
}

@keyframes eyebrowBreathe{
  0%, 100%{
    color: var(--brand-2);
    border-color: rgba(96, 165, 250, 0.30);
    box-shadow: 0 0 15px var(--brand-dim);
    transform: translateY(0);
  }
  50%{
    color: #A9B8FB;
    border-color: rgba(139, 92, 246, 0.40);
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.20);
    transform: translateY(-1px);
  }
}

/* Aralıklı geçen ince ışık huzmesi. Döngünün büyük bölümünü solda bekleyerek
   geçirir; sürekli değil, arada bir geçen bir parıltı gibi durur. */
.eyebrow::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(105deg,
              transparent 38%,
              rgba(255, 255, 255, 0.14) 50%,
              transparent 62%);
  transform: translateX(-130%);
  animation: eyebrowSheen 7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes eyebrowSheen{
  0%, 58%   { transform: translateX(-130%); }
  88%, 100% { transform: translateX(130%); }
}

/* Hareketi azalt tercihi açıksa rozet sabit kalır. */
@media (prefers-reduced-motion: reduce){
  .eyebrow{ animation:none; }
  .eyebrow::after{ animation:none; opacity:0; }
}
.lead{color:var(--text-2); font-size:1.05rem; max-width:62ch}
.section-head{margin-bottom:clamp(28px, 4vw, 36px); max-width:70ch}

/* ---------- Animasyonlu Arkaplan Parıltıları ---------- */
.glow-bg {
  position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0;
  animation: pulseGlow 8s infinite alternate ease-in-out;
}
@keyframes pulseGlow {
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 0.6; transform: scale(1.1); }
}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-sm); border:1px solid transparent;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative; overflow:hidden; z-index:1;
}
.btn::before {
  content: ''; position: absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease; z-index: -1;
}
.btn:hover::before { left: 100%; }
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow: 0 8px 25px var(--brand-glow)}
.btn:active{transform:translateY(0)}
.btn--primary{background: linear-gradient(135deg, var(--brand) 0%, #2563EB 100%); color:#fff; border-color: rgba(255,255,255,0.2)}
.btn--ghost{background: var(--surface); color:var(--text); border:1px solid var(--border); backdrop-filter: var(--glass);}
.btn--ghost:hover{background:var(--surface-2); border-color:var(--brand-2)}
.btn--block{width:100%}

/* Sağ Üst Satın Al Butonu İşıldama Animasyonu */
.btn--attention {
  animation: attentionGlow 3s infinite;
}
@keyframes attentionGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.8), 0 0 35px rgba(139, 92, 246, 0.5);
    border-color: #60A5FA;
    transform: scale(1.04);
  }
}

/* ---------- Üst Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(6, 9, 19, 0.85); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); transition: all 0.3s;
}
.topbar__inner{display:flex; align-items:center; gap:20px; height:76px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:-0.02em}
.brand svg{width:32px; height:32px; filter: drop-shadow(0 0 8px var(--brand)); color:var(--brand-2)}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  color:var(--text-2); padding:8px 14px; border-radius:8px; font-size:.92rem; font-weight:500;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,0.05)}
.nav a.is-active{color:var(--brand-2); background:var(--brand-dim); border:1px solid rgba(96, 165, 250, 0.2)}
.navtoggle{display:none; background:none; border:1px solid var(--border); border-radius:8px; color:var(--text); padding:8px 12px; cursor:pointer}

/* ---------- Hero Bölümü ---------- */
.hero{
  position:relative; 
  padding-top: 20px !important; /* İstenen Top Padding (yariya indirildi) */
  padding-bottom: clamp(26px, 1.67vw, 112px);
  z-index:1;
}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px, 3.5vw, 50px); align-items:center}
.hero h1{animation: fadeInUp 0.8s ease-out;}
.hero__sub{font-size:clamp(1rem, 0.95rem + .3vw, 1.2rem); color:var(--text-2); max-width:54ch; animation: fadeInUp 0.8s ease-out 0.1s both;}
.hero__points{display:flex; flex-wrap:wrap; gap:12px 20px; margin:22px 0 30px; animation: fadeInUp 0.8s ease-out 0.2s both;}
.hero__points li{display:flex; align-items:center; gap:10px; color:var(--text); font-size:.95rem; font-weight:500}
.hero__points li:last-child{ flex-basis:100% }
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; animation: fadeInUp 0.8s ease-out 0.3s both;}
.check{width:20px; height:20px; flex:none; color:var(--success); filter:drop-shadow(0 0 5px rgba(16,185,129,0.5))}

/* ---------- Uygulama Önizlemesi (Mockup) ---------- */
.mock{
  background: rgba(11, 17, 32, 0.85); border:1px solid var(--border-2); border-radius:var(--radius);
  box-shadow: 0 25px 60px rgba(0,0,0,0.7), 0 0 40px var(--brand-dim); overflow:hidden; font-size:.82rem;
  backdrop-filter: var(--glass); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: float 6s ease-in-out infinite;
}
/* Kalkma efekti YALNIZCA gerçek fareli aygıtta — video çerçevesiyle aynı sebep:
   dokunmatikte :hover bir kez tetiklenir ve parmak çekildikten sonra da üstte
   takılı kalır. */
@media (hover: hover) and (pointer: fine){
  .mock:hover { transform: translateY(-6px) scale(1.01); border-color: var(--brand-2); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.mock__bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(6, 9, 19, 0.9); border-bottom:1px solid var(--border)}
.mock__dot{width:10px; height:10px; border-radius:50%; background:#334155}
.mock__dot:nth-child(1){background:#EF4444} .mock__dot:nth-child(2){background:#F59E0B} .mock__dot:nth-child(3){background:#10B981}
.mock__title{margin-left:8px; color:var(--muted); font-size:.78rem; font-weight:600}
.mock__head{background:linear-gradient(90deg, #1E40AF, #2563EB); color:#fff; padding:12px 16px; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.mock__menu{display:flex; gap:2px; background:rgba(30, 58, 138, 0.4); padding:0 8px; overflow-x:auto}
.mock__menu span{padding:10px 14px; color:#94A3B8; font-size:.76rem; font-weight:600; white-space:nowrap}
.mock__menu span:first-child{color:#fff; background:rgba(255,255,255,0.1); border-bottom:2px solid var(--brand-2)}
.mock__body{padding:16px; overflow-x:auto}
.mock__row{display:grid; grid-template-columns:1.1fr 1.6fr 1.3fr auto; gap:12px; align-items:center; min-width: 480px;
  padding:11px 8px; border-bottom:1px solid var(--border); transition: background 0.2s}
.mock__row:not(.mock__row--head):hover { background: rgba(255,255,255,0.03); border-radius: 6px; }
.mock__row--head{color:var(--muted); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.mock__row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mock__btn{
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#060913; border-radius:6px; 
  padding:5px 14px; font-size:.74rem; font-weight:700; box-shadow:0 0 10px var(--brand-glow); cursor:pointer;
  transition: transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine){
  .mock__btn:hover { transform: scale(1.05); }
}
.mock__foot{padding:12px 16px; color:var(--brand-2); font-size:.76rem; border-top:1px solid var(--border); background:rgba(6, 9, 19, 0.8); display:flex; align-items:center; gap:8px}

/* ---------- Tanıtım Videosu ---------- */
/* Çerçeve, mockup ile aynı cam görünümü taşır. Oran 16:9 sabittir; iframe'in
   width/height nitelikleri değil, bu oran belirler — dar ekranda da taşmaz. */
.video{max-width:920px; margin:0 auto}
.video .section-head{text-align:center; margin-inline:auto}
.video__frame{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border-2); background:#000;
  box-shadow: 0 25px 60px rgba(0,0,0,0.7), 0 0 40px var(--brand-dim);
  transition: transform .4s cubic-bezier(0.175,0.885,0.32,1.275), border-color .3s ease;
}
/* Kalkma efekti YALNIZCA gerçek fareli aygıtta. Dokunmatikte :hover bir kez
   tetiklenip PARMAK ÇEKİLDİKTEN SONRA da üstte takılı kalır. */
@media (hover: hover) and (pointer: fine){
  .video__frame:hover{transform:translateY(-4px); border-color:var(--brand-2)}
}
/* Videonun kendisi. width/height nitelikleri yalnızca tarayıcı daha dosyayı
   indirmeden yeri ayırsın diye durur; boyutu bu kural belirler. */
.video__player{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; object-fit:cover; background:#000; cursor:pointer;
}

/* Ses düğmesi: video sessiz başladığı için ziyaretçinin sesi açabileceği
   görünür bir yer gerekir. Köşede durur, videonun üstünü kapatmaz. */
.video__sound{
  position:absolute; z-index:2; right:12px; bottom:12px;
  min-width:44px; height:44px; border-radius:999px; border:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(6,9,19,.62); backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,.5); cursor:pointer;
  transition:background .25s ease, transform .25s ease, padding .35s ease;
}
.video__soundicon{display:flex}
.video__sound svg{width:22px; height:22px; display:block}
@media (hover: hover) and (pointer: fine){
  .video__sound:hover{background:rgba(6,9,19,.85); transform:scale(1.06)}
}
.video__sound:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px}

/* "Sesi aç" ipucu: ilk kez gelen ziyaretçide video zorunlu olarak sessiz başlar
   (tarayıcılar sesli otomatik oynatmaya izin vermez) ve sesin kapalı olduğu hiçbir
   yerde belli olmaz. Yazı genişleyerek açılır, birkaç saniye sonra çekilir.
   max-width ile animasyon yapılır: width:auto geçiş almaz. */
.video__soundtext{
  max-width:0; margin-left:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:.85rem; font-weight:600; letter-spacing:.01em;
  transition:max-width .35s ease, opacity .3s ease, margin-left .35s ease;
}
.video__sound.is-hint{padding:0 16px; background:rgba(6,9,19,.85)}
.video__sound.is-hint .video__soundtext{max-width:100px; opacity:1; margin-left:8px}

@media (prefers-reduced-motion: reduce){
  .video__sound, .video__soundtext{transition:none}
}

@media (max-width:768px){
  /* Telefonda iri gölge ve ışıma hem ağır hem gereksiz; kenarlık yeter. */
  .video__frame{
    border-radius:var(--radius-sm);
    box-shadow:0 12px 30px rgba(0,0,0,0.6);
  }
  .video__sound{width:40px; height:40px; right:10px; bottom:10px}
  .video__sound svg{width:20px; height:20px}
}

@media (max-width:560px){
  /* Dar ekranda video kenardan kenara: .wrap'ın 16 px yan boşluğu geri alınır.
     Genişlik tam olarak ekran kadar olur, yatay kaydırma doğmaz. */
  .video__frame{
    margin-inline:-16px;
    border-radius:0;
    border-inline:0;
  }
}


/* ---------- Kartlar & Grid ---------- */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 20px; backdrop-filter: var(--glass);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden;
}
.card::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.card:hover{border-color:var(--border-2); transform:translateY(-5px); box-shadow: var(--shadow), 0 0 20px var(--brand-dim)}
.card h3{margin-bottom:.5em}
.card p{color:var(--text-2); font-size:.95rem; margin:0; line-height:1.6}
.icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--brand-dim); border:1px solid rgba(96,165,250,0.3); color:var(--brand-2);
  box-shadow: 0 0 15px var(--brand-dim); transition: transform 0.3s ease;
}
.card:hover .icon { transform: scale(1.1) rotate(3deg); }
.icon svg{width:22px; height:22px}

/* ---------- Adımlar ---------- */
.steps{counter-reset:step; display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
.step{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px;
  backdrop-filter: var(--glass); transition: all 0.3s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--brand-2); }
.step::before{
  counter-increment:step; content:counter(step);
  display:grid; place-items:center; width:36px; height:36px; margin-bottom:14px;
  border-radius:10px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#060913; font-weight:800; font-size:1.05rem;
  box-shadow: 0 0 15px var(--brand-glow);
}

/* Adim kartinin sonundaki rehber baglantisi. Kartin kendi hover efekti
   (translateY) var; baglanti onun icinde kaldigi icin ayri bir kutu degil,
   ince bir ust cizgiyle ayrilmis satir olarak duruyor. */
.step__link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding-top:12px; width:100%;
  border-top:1px solid var(--border);
  font-size:.88rem; font-weight:600; color:var(--brand-2);
}
.step__link:hover{ color:var(--text); text-decoration:none; gap:10px }
.step__link span{ transition:transform .2s ease }

/* ---------- Ekranlar (SGK/GİB/İŞKUR) ---------- */
.orgs{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
.org{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  backdrop-filter: var(--glass); transition: all 0.25s ease;
}
.org:hover { border-color: var(--brand-2); transform: translateX(4px); background: var(--surface-2); }
.org__tag{
  font-size:.72rem; font-weight:800; letter-spacing:.06em; padding:4px 10px; border-radius:6px; flex:none;
  background:var(--brand-dim); color:var(--brand-2); border:1px solid rgba(96,165,250,0.3);
}
.org__tag--iskur{background:rgba(16,185,129,0.12); color:var(--success); border-color:rgba(16,185,129,0.3)}
.org__tag--gib{background:rgba(245,158,11,0.12); color:var(--warn); border-color:rgba(245,158,11,0.3)}
.org__tag--egm{background:rgba(245, 154, 154,0.12); color:var(--danger); border-color:rgba(245, 154, 154,0.3)}

/* ---------- Fiyatlandırma & Form ---------- */
/* Sipariş formu ayrı sayfaya (satinal.html) taşındığı için fiyatlandırma
   bölümünde tek kart kalır. Kart, diğer bölümlerin içerikleriyle aynı hizada
   solda durur; ortalanmaz. */
.pricing{display:grid; grid-template-columns:1fr; gap:24px; align-items:start; max-width:620px}
.plan{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border-2); border-radius:var(--radius); padding:32px 28px; position:relative;
  backdrop-filter: var(--glass); box-shadow: var(--shadow);
}
.plan__amount{font-size:2.8rem; font-weight:800; letter-spacing:-.03em; color:#fff; text-shadow: 0 0 20px var(--brand-glow)}
.plan__unit{color:var(--muted); font-size:.92rem}
.plan ul{display:grid; gap:12px; margin:22px 0}
.plan li{display:flex; gap:10px; align-items:center; font-size:.94rem; color:var(--text)}
.trial{
  margin-top:20px; padding:16px; border-radius:var(--radius-sm);
  background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25); color:var(--text-2); font-size:.9rem;
  line-height:1.5;
}

/* Fiyatlandırma bölümünün altındaki ikinci Satın Al butonu. Kartla (.pricing)
   aynı genişlikte ve aynı hizada durması için aynı max-width kullanılır. */
.pricing-cta{max-width:620px; margin-top:24px}

.order{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; backdrop-filter: var(--glass);}
.field{margin-bottom:18px}
.field > label{display:block; font-size:.86rem; font-weight:600; color:var(--text-2); margin-bottom:6px}
.hint{font-size:.8rem; color:var(--muted); margin-top:4px}
input[type=text], input[type=email], input[type=number], select, textarea{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm);
  background:rgba(6, 9, 19, 0.7); border:1px solid var(--border); color:var(--text);
  font:inherit; font-size:.92rem; transition: all 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--brand-2); box-shadow: 0 0 12px var(--brand-dim); background:rgba(6, 9, 19, 0.9);
}
.qty{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.qty button{
  width:40px; height:40px; flex:none; border-radius:8px; cursor:pointer; font-size:1.2rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); transition: all 0.2s;
}
.qty button:hover:not(:disabled){border-color:var(--brand-2); color:var(--brand-2); background:var(--brand-dim)}
/* Adet sinirina gelindiginde dugme gorunur sekilde kapanir; sessizce hicbir sey yapmaz gorunmesin. */
.qty button:disabled{opacity:.35; cursor:not-allowed}
.qty input{text-align:center; max-width:80px; font-weight:700}
.segmented{display:flex; gap:10px; flex-wrap:wrap}
.segmented label{
  flex:1 1 140px; display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:rgba(6, 9, 19, 0.6); border:1px solid var(--border); font-size:.9rem; transition: all 0.2s;
}
.segmented label:hover { border-color: var(--border-2); }
.segmented input{accent-color:var(--brand)}
.segmented label:has(input:checked){border-color:var(--brand-2); background:var(--brand-dim); color:#fff; box-shadow:0 0 10px var(--brand-dim)}

.email-row{display:flex; align-items:center; gap:8px; position:relative; margin-bottom:8px}
.email-row .num{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-size:.78rem; font-weight:700;
}
.email-row input.is-error{border-color:var(--danger); background:rgba(239,68,68,0.1)}
.field input.is-error,
.field textarea.is-error{border-color:var(--danger); background:rgba(239,68,68,0.1)}
.email-row .flag{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--danger); font-weight:800}

.total{
  display:flex; justify-content:space-between; align-items:baseline; gap:6px 12px;
  flex-wrap:wrap;
  padding:16px 0; margin:8px 0 16px; border-top:1px solid var(--border);
}
/* Etiket ve tutar kendi icinde bolunmez; dar ekranda tutar komple alt satira
   iner, ":" ya da "dahildir)" tek basina asagi kaymaz. */
.total > span{white-space:nowrap}
.total__amount{font-size:1.7rem; font-weight:800; color:var(--brand-2)}
/* Tutarin hemen yanindaki KDV notu. Punto, tutarin (1.7rem) yarisi kadardir;
   .total flex kutusu baseline hizaladigi icin "TL" ile ayni satirda oturur. */
.total__kdv{margin-left:6px; font-size:.85rem; font-weight:600; color:var(--text-2)}
@media (max-width:480px){
  .total__amount{font-size:1.45rem}
}
.formnote{font-size:.82rem; color:var(--muted); margin-top:12px; line-height:1.5}

/* Yasal onay kutuları */
.consent{display:flex; flex-direction:column; gap:10px; margin:18px 0 4px}
.consent label{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.85rem; line-height:1.55; color:var(--text-2); cursor:pointer;
}
.consent input[type=checkbox]{
  flex:0 0 auto; width:17px; height:17px; margin-top:2px;
  accent-color:var(--brand); cursor:pointer;
}
.consent a{text-decoration:underline}
.consent.is-error label{color:var(--danger)}
.consent.is-error input[type=checkbox]{outline:2px solid var(--danger); outline-offset:2px}

/* Henüz doldurulmamış künye alanı — yasal/Doldur-Kunye.ps1 ile değiştirilir */
.fill{
  background:rgba(245,158,11,.18); color:var(--warn);
  border:1px dashed rgba(245,158,11,.5); border-radius:6px;
  padding:0 6px; font-size:.9em;
}
.status{
  display:none; margin-top:14px; padding:12px 14px; border-radius:var(--radius-sm); font-size:.88rem;
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); color:#FDE68A;
}
.status.is-visible{display:block}
.status--error{background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:#FCA5A5}

/* ---------- SSS ---------- */
.faq{display:grid; gap:12px; max-width:900px}
.faq details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  backdrop-filter: var(--glass); transition: border-color 0.2s ease;
}
.faq details[open]{border-color:var(--border-2); background:var(--surface-2)}
.faq summary{
  cursor:pointer; padding:18px 20px; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; user-select:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--brand-2); font-size:1.4rem; font-weight:300; transition: transform 0.2s}
.faq details[open] summary::after{transform: rotate(45deg);}
.faq .answer{padding:0 20px 20px; color:var(--text-2); font-size:.94rem; line-height:1.6}
.faq .answer ul{display:grid; gap:8px; margin-top:10px}
.faq .answer li{display:flex; gap:8px; align-items:flex-start}
.faq .answer li::before{content:"•"; color:var(--brand-2); flex:none}

/* ---------- İndir ---------- */
.download {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(139, 92, 246, 0.05)
  );
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 28px) clamp(28px, 4vw, 56px);
  backdrop-filter: var(--glass);
  position: relative;
  overflow: hidden;
}

/* ---------- Alt Bilgi ---------- */
.footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-2) 0%, #0A1428 100%);
  padding: 40px 0 90px; font-size:.9rem;

  /* Footer metinleri sayfanın geri kalanından bir tonluk daha açık. Genel
     --text-2 / --muted değerleri koyu zeminde fazla sönük kalıyordu. Renkler
     burada tek yerden ayarlanır. */
  --footer-text:#ced6e0;
  --footer-muted:#8A99AD;
}
/* Sütunlar tepeden hizalanır; ortalanmış olsaydı başlıklar künyenin ortasına düşerdi. */
.footer__inner{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-start}
.footer a{color:var(--footer-text)}
.footer a:hover{color:#fff}
.footer .muted{color:var(--footer-muted); font-size:.84rem}

/* ---------- Alt menü: başlıklı sütunlar + rozet bağlantılar ---------- */
.footer__nav{display:flex; flex-wrap:wrap; gap:28px 52px}
.footer__col{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.footer__col h4{
  margin:0 0 2px; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--footer-text); font-weight:700;

  /* align-self:stretch olmadan başlık yalnızca kendi metni kadar geniş kalır
     ve text-align hiçbir şey yapmaz; sütun genişliğine yayılınca alttaki
     rozetlere göre ortalanır. */
  align-self:stretch;
  text-align:center;

  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.footer__col a{
  padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  color:var(--footer-text); font-size:.85rem; font-weight:600;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;

  /* Tüm rozetler aynı genişlikte durur. Değer en uzun etiketten ("Neden
     İKKonsol ?") biraz geniş seçildi; başka bir yazı tipiyle metin bir miktar
     büyüse bile rozetler eşit kalsın. Yeni ve daha uzun bir etiket eklenirse
     bu değer büyütülmelidir. */
  min-width:156px;
  text-align:center;
}
.footer__col a:hover{
  background:var(--brand-dim); border-color:rgba(96,165,250,.35);
  color:var(--brand-2); transform:translateY(-1px);
}
/* Yasal belge bağlantıları altı çizili durur; rozetlerin aksine burada
   çerçeve yok, tek başına renk tıklanabilir olduklarını yeterince anlatmıyordu. */
.footer__legal a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

/* İletişim bağlantısı vurgulu durur: alt menüde en çok aranan bu. */
.footer__col a.is-accent{
  background:var(--brand-dim); border-color:rgba(96,165,250,.35); color:var(--brand-2);
}

/* ---------- WhatsApp Butonu ---------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:flex; align-items:center; gap:10px;
  padding:10px 18px 10px 14px; border-radius:999px;
  background:#25D366; color:#041E0B; font-weight:700; font-size:.9rem;
  box-shadow:0 10px 30px rgba(37,211,102,0.3);
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa:hover{background:#28E16D; text-decoration:none; transform:translateY(-3px) scale(1.03); box-shadow:0 15px 35px rgba(37,211,102,0.5)}
.wa svg{width:24px; height:24px; flex:none}
.wa__text{display:flex; flex-direction:column; line-height:1.2}
.wa__text small{font-weight:600; font-size:.72rem; opacity:.8}

/* Başa Dön düğmesi — WhatsApp düğmesinin üstünde durur */
.totop{
  position:fixed; right:20px; bottom:88px; z-index:91;
  width:46px; height:46px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:999px;
  /* background:rgba(11,16,32,0.85); color:var(--brand-2); */
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .25s, color .25s;
}
.totop.is-visible{opacity:1; visibility:visible; transform:translateY(0)}
.totop:hover{background:var(--brand); color:#041020; border-color:transparent; transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.totop svg{width:20px; height:20px}

/* Keyframe Animasyonları */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobil / Tablet Duyarlılık (Responsive) İyileştirmeleri */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .grid--4, .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  html{scroll-padding-top:66px}
  .wrap{padding:0 16px}
  .topbar__inner{height:66px}
  .nav{
    display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:4px;
    background:rgba(11, 17, 32, 0.98); border-bottom:1px solid var(--border); padding:16px;
    backdrop-filter: blur(20px);
  }
  .nav.is-open{display:flex}
  .navtoggle{display:block}
  .grid--4, .grid--2, .orgs, .steps{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .order, .plan{padding:24px 16px}
  .mock{animation:none} /* Mobilde batarya ve işlemci dostu yapıldı */
}
/* Rehberde ust barda IKI dugme var (Ana Sayfa + Satin Al); logo, menu dugmesi ve
   ikisi birlikte 560 px altinda sigmiyor. Ana sayfaya logodan da gidilebildigi icin
   dar ekranda bu dugme gizlenir. Satinal.html'de tek dugme oldugu icin o sayfada
   bu sinif kullanilmaz. */
@media (max-width:560px){
  .topbar__home{display:none}
}

@media (max-width:480px){
  .wa{right:14px; bottom:14px; padding:12px; gap:0}
  .totop{right:14px; bottom:78px; width:42px; height:42px}
  .wa .wa__text{display:none}
  .topbar .btn--attention { padding:8px 14px; font-size:0.85rem; }
}

/* Mobil yatay taşma düzeltmesi.
   html ve body'nin İKİSİNDE birden overflow-x:hidden olursa sayfa hiç kaymaz:
   scrollTo / scrollIntoView sessizce çalışmaz, menüdeki #bölüm bağlantıları ve
   "yukarı çık" düğmesi ölür. clip bu yan etkiyi yaratmaz. */
html{ overflow-x:clip }
body{ position:relative }

@media (max-width:768px){
  .glow-bg{ display:none }
}

@media (max-width:600px){
  .mock__row{
    min-width:0;
    gap:6px;
    padding:10px 4px;
    grid-template-columns:1fr 1.2fr 1.1fr auto;
  }
  .mock__row span{ font-size:.7rem }
  .mock__row--head{ font-size:.62rem; letter-spacing:0 }
  .mock__body{ padding:10px; overflow-x:hidden }
  .mock__btn{ padding:4px 8px; font-size:.66rem }
}


/* ---------- Satın Alma Sayfası ---------- */
/* Sipariş formu ana sayfada fiyat kartının yanındaki geniş sütundaydı;
   kendi sayfasında sayfa ortasında, okunur bir genişlikte durur. */
.order-page{max-width:760px; margin:0 auto}