/* =========================================================
   Kurtoğlu Elektrik — LED / OLED ışık efektleri (2026-10-30)
   Ağırbaşlı: yavaş, düşük yoğunluklu, hareket azaltma tercihine saygılı.
   Kaldırmak için index.php'deki led.css satırını silmeniz yeterli.
   ========================================================= */

@property --led-aci { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  --led: #FDE047;
  --led-soft: rgba(253,224,71,.35);
  --led-faint: rgba(253,224,71,.12);
  --led-mavi: #5B9BFF;
  --led-mavi-soft: rgba(91,155,255,.30);
}

/* ---------- Üst menü: altında akan ince LED şerit ---------- */
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--led-mavi-soft) 20%,var(--led) 50%,var(--led-mavi-soft) 80%,transparent 100%);
  background-size:200% 100%; opacity:.55;
  animation:ledSerit 9s linear infinite;
}
.nav.is-scrolled::after{opacity:.8; box-shadow:0 0 10px var(--led-soft)}
@keyframes ledSerit{from{background-position:200% 0}to{background-position:0 0}}

/* Menü bağlantıları: hover/aktifte yumuşak OLED parlaması */
.nav__link{transition:color .25s ease,text-shadow .25s ease}
.nav__link:hover,.nav__link.is-active{color:#fff;text-shadow:0 0 12px var(--led-soft)}
.nav__link::after{box-shadow:0 0 8px var(--led),0 0 2px var(--led)}

/* Logo ikonu: çok yavaş "nefes alan" LED */
.logo__mark{animation:ledNefes 4.5s ease-in-out infinite}
@keyframes ledNefes{
  0%,100%{box-shadow:0 0 0 1px rgba(253,224,71,.25),0 0 14px rgba(253,224,71,.25)}
  50%{box-shadow:0 0 0 1px rgba(253,224,71,.45),0 0 26px rgba(253,224,71,.45)}
}

/* Mobil menü */
.mobile-menu__inner a:not(.btn){transition:color .2s,text-shadow .2s,padding-left .2s}
.mobile-menu__inner a:not(.btn):hover{color:#fff;text-shadow:0 0 10px var(--led-soft);padding-left:6px}

/* ---------- Butonlar: arada bir üzerinden geçen ışık ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); animation:ledParilti 6s ease-in-out infinite;
}
.btn:hover{box-shadow:0 0 0 1px rgba(253,224,71,.5),0 8px 28px rgba(253,224,71,.35)}
@keyframes ledParilti{0%,70%{left:-60%}100%{left:130%}}

/* ---------- Bölüm başlıkları ---------- */
.eyebrow{text-shadow:0 0 10px var(--led-faint)}
.eyebrow::before{box-shadow:0 0 8px var(--led),0 0 2px var(--led)}
.section-title .hl,.gradient-text,.text-glow span{text-shadow:0 0 18px rgba(253,224,71,.28)}

/* Koyu bölümlerin üstünde ince ayraç LED çizgisi */
.section--dark{position:relative}
.section--dark::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); pointer-events:none;
  width:min(70%,760px); height:1px;
  background:linear-gradient(90deg,transparent,var(--led-mavi-soft),var(--led-soft),var(--led-mavi-soft),transparent);
  box-shadow:0 0 12px var(--led-mavi-soft);
}

/* ---------- Kartlar: hover'da çevresinde dönen LED kenar ---------- */
.service,.plan,.stat,.c-card,.help-card{position:relative;isolation:isolate;transition:transform .35s var(--ease,ease),box-shadow .35s ease}
.service::before,.plan::before,.stat::before,.c-card::before,.help-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:1;
  background:conic-gradient(from var(--led-aci),transparent 0deg,var(--led-mavi) 60deg,var(--led) 110deg,transparent 170deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease;
  animation:ledDon 5s linear infinite;
}
.service:hover,.plan:hover,.stat:hover,.c-card:hover,.help-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 30px rgba(91,155,255,.18);
}
.service:hover::before,.plan:hover::before,.stat:hover::before,.c-card:hover::before,.help-card:hover::before{opacity:1}
@keyframes ledDon{to{--led-aci:360deg}}

/* Öne çıkan paket ve öne çıkan hizmet: LED kenar sürekli, çok sakin */
.plan--featured::before,.service--featured::before{opacity:.85;animation-duration:8s}
.plan--featured{box-shadow:0 0 0 1px rgba(253,224,71,.35),0 0 40px rgba(253,224,71,.12)}
.plan__badge{box-shadow:0 0 14px rgba(253,224,71,.55)}

/* İkonlar: hafif LED halesi */
.service__icon,.stat__icon,.c-card__icon,.help-card__icon,.float-card__icon{transition:box-shadow .35s ease}
.service:hover .service__icon,.stat:hover .stat__icon,.c-card:hover .c-card__icon,.help-card:hover .help-card__icon{
  box-shadow:0 0 18px rgba(253,224,71,.45)
}

/* Fiyat satırları: hover'da satır ışığı */
.price-row{transition:background .25s ease}
.price-row:hover{background:linear-gradient(90deg,transparent,rgba(91,155,255,.10),transparent)}
.price-row:hover .price-row__price{text-shadow:0 0 10px var(--led-soft)}

/* SSS: açık soru LED çizgisiyle belirginleşir */
.faq details[open]{box-shadow:inset 3px 0 0 var(--led),-6px 0 18px -10px var(--led)}

/* Alt bilgi üst çizgisi */
.footer{position:relative}
.footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--led-soft),transparent);
  box-shadow:0 0 14px var(--led-soft);
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce){
  .nav::after,.logo__mark,.btn::after,
  .service::before,.plan::before,.stat::before,.c-card::before,.help-card::before{animation:none}
  .btn::after{display:none}
  .service:hover,.plan:hover,.stat:hover,.c-card:hover,.help-card:hover{transform:none}
}
/* Dokunmatik cihazlarda hover efektleri takılı kalmasın */
@media (hover:none){
  .service:hover,.plan:hover,.stat:hover,.c-card:hover,.help-card:hover{transform:none}
}