/*
  UI V4 — Baştan tasarlanmış modern arayüz
  Not: Veri akışı ve PHP/DB bağları korunur. Sadece görünüm katmanı yenilenmiştir.
*/

:root{
  --ui-bg:#f6f8ff;
  --ui-surface:#ffffff;
  --ui-surface-2:#f0f5ff;
  --ui-ink:#0d1422;
  --ui-muted:#55627b;
  --ui-line:#d6e0f1;
  --ui-shadow:0 18px 48px rgba(13,20,34,.10);
  --ui-shadow-lg:0 28px 72px rgba(13,20,34,.16);
  --ui-r:24px;

  /* Admin panelinden gelen ana tema rengi (inc_ust.php içinde set edilir) */
  --theme-base:#0f172a;
  --theme-dark:#0b1020;
  --theme-darkest:#070b16;
  --theme-50:#f8fafc;
  --theme-100:#f1f5f9;
  --theme-200:#e2e8f0;
  --theme-300:#cbd5e1;
  --theme-on-dark:#ffffff;
}

html,body{scroll-behavior:smooth}

body.design-v4{
  font-family:"Manrope","Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
  color:var(--ui-ink)!important;
  background:
    radial-gradient(860px 320px at -10% -8%, color-mix(in srgb, var(--theme-base) 16%, transparent), transparent 64%),
    radial-gradient(860px 340px at 110% -12%, color-mix(in srgb, var(--theme-dark) 18%, transparent), transparent 66%),
    linear-gradient(180deg, var(--theme-50) 0%, #f7fbff 48%, #fbfcff 100%)!important;
}

body.design-v4 h1,
body.design-v4 h2,
body.design-v4 h3,
body.design-v4 h4,
body.design-v4 .font-black{
  font-family:"Sora","Manrope",sans-serif;
  letter-spacing:-.025em;
}

/* ========= GLOBAL TOKEN MAPPING ========= */
body.design-v4 .bg-slate-50{background:var(--theme-100)!important}
body.design-v4 .bg-slate-100{background:color-mix(in srgb, var(--theme-100) 74%, #fff)!important}
body.design-v4 .bg-slate-200{background:var(--theme-200)!important}
body.design-v4 .bg-slate-800,
body.design-v4 .bg-slate-900,
body.design-v4 .bg-slate-950{background:var(--theme-dark)!important;color:var(--theme-on-dark)!important}

body.design-v4 .text-slate-600{color:var(--ui-muted)!important}
body.design-v4 .text-slate-700{color:color-mix(in srgb, var(--theme-base) 55%, #111827)!important}
body.design-v4 .text-slate-900{color:var(--ui-ink)!important}

body.design-v4 .border-slate-200{border-color:var(--ui-line)!important}
body.design-v4 .border-slate-300{border-color:color-mix(in srgb, var(--theme-300) 78%, #d8e1f1)!important}

body.design-v4 .rounded-2xl{border-radius:16px!important}
body.design-v4 .rounded-3xl{border-radius:26px!important}

body.design-v4 .softshadow,
body.design-v4 .glow,
body.design-v4 .ring-theme{box-shadow:var(--ui-shadow)!important}

body.design-v4 section[id],
body.design-v4 main > section{
  scroll-margin-top:110px;
}

/* ========= HEADER ========= */
body.design-v4 header{position:sticky;top:0;z-index:75}

/* Üst bant artık doğrudan tema arkaplanından beslensin */
body.design-v4 header > div:first-child{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--theme-base) 88%, #000),
      color-mix(in srgb, var(--theme-dark) 92%, #000))!important;
  border-bottom:1px solid rgba(255,255,255,.14);
}

body.design-v4 header > div:nth-child(2){
  background:transparent!important;
  border:none!important;
}

body.design-v4 header > div:nth-child(2) > .mx-auto{
  margin-top:10px;
  margin-bottom:10px;
  padding:10px 14px!important;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--theme-200) 80%, #eaf0fb);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 12px 30px rgba(2,8,23,.10);
}

body.design-v4 nav a{
  border:1px solid transparent;
  transition:all .22s ease;
}

body.design-v4 nav a:hover,
body.design-v4 nav a.is-active{
  background:#fff!important;
  border-color:var(--ui-line)!important;
  box-shadow:0 8px 18px rgba(2,8,23,.08);
  transform:translateY(-1px);
}

body.design-v4 nav .group > div > div{
  border-radius:16px!important;
  border:1px solid var(--ui-line)!important;
  box-shadow:var(--ui-shadow)!important;
}

body.design-v4 #mMenu{background:transparent!important;border:0!important}
body.design-v4 #mMenu > div{
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.97);
  border-radius:18px;
  box-shadow:var(--ui-shadow);
}

/* ========= HERO ========= */
body.design-v4 #heroSlider{
  border-bottom-left-radius:34px;
  border-bottom-right-radius:34px;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(2,8,23,.28);
}

body.design-v4 #heroSlider .slide::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,8,23,.35), rgba(2,8,23,.45)),
    radial-gradient(480px 220px at 8% 100%, color-mix(in srgb, var(--theme-base) 35%, transparent), transparent 70%),
    radial-gradient(480px 220px at 92% 100%, color-mix(in srgb, var(--theme-dark) 40%, transparent), transparent 68%);
}

body.design-v4 #heroSlider .slide > div[style*="linear-gradient"]{display:none}

body.design-v4 #heroSlider h2{
  text-shadow:0 8px 24px rgba(0,0,0,.34);
  max-width:18ch;
  line-height:1.06;
}

body.design-v4 #heroPrev,
body.design-v4 #heroNext{
  border-radius:14px!important;
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.30)!important;
  backdrop-filter:blur(4px);
}

body.design-v4 #heroPrev:hover,
body.design-v4 #heroNext:hover{background:rgba(255,255,255,.24)!important}

body.design-v4 #heroSlider .hero-dot{
  width:9px!important;height:9px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.70)!important;
  background:rgba(255,255,255,.30)!important;
}
body.design-v4 #heroSlider .hero-dot.active,
body.design-v4 #heroSlider .hero-dot[aria-current="true"]{
  width:24px!important;
  border-radius:999px!important;
  background:#fff!important;
}

/* ========= SECTION TITLE ========= */
body.design-v4 section h2{
  position:relative;
  padding-left:18px;
}
body.design-v4 section h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.22em;
  bottom:.20em;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--theme-base), var(--theme-dark));
}

/* ========= HOME ORDER (DESEN KIRMA) ========= */
body.design-v4.home-v4 #icerik{display:flex;flex-direction:column}
body.design-v4.home-v4 #icerik > section:first-of-type{order:5}      /* Hero */
body.design-v4.home-v4 #onecikanlar{order:10}
body.design-v4.home-v4 #hizmetler{order:15}
body.design-v4.home-v4 #blog{order:20}
body.design-v4.home-v4 #galeri{order:25}
body.design-v4.home-v4 #videolar{order:30}
body.design-v4.home-v4 #yorumlar{order:35}
body.design-v4.home-v4 #teklif{order:40}

/* ========= GENEL KART ========= */
body.design-v4 .group.rounded-3xl,
body.design-v4 article.rounded-3xl,
body.design-v4 .reviewCard,
body.design-v4 .vgCard,
body.design-v4 .galItem{
  border:1px solid var(--ui-line)!important;
  background:linear-gradient(180deg, #fff, #f9fcff)!important;
  box-shadow:0 10px 30px rgba(2,8,23,.08);
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

body.design-v4 .group.rounded-3xl:hover,
body.design-v4 article.rounded-3xl:hover,
body.design-v4 .reviewCard:hover,
body.design-v4 .vgCard:hover,
body.design-v4 .galItem:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb, var(--theme-base) 34%, var(--ui-line))!important;
  box-shadow:var(--ui-shadow-lg)!important;
}

/* Hizmet / blog kartı görüntü kesimi farklı */
body.design-v4 #hizmetler .group.rounded-3xl .aspect-\[16\/10\],
body.design-v4 #blog .group.rounded-3xl .aspect-\[16\/10\],
body.design-v4 .vgCard .aspect-\[16\/10\]{
  position:relative;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
}

body.design-v4 #hizmetler .group.rounded-3xl .aspect-\[16\/10\]::after,
body.design-v4 #blog .group.rounded-3xl .aspect-\[16\/10\]::after,
body.design-v4 .vgCard .aspect-\[16\/10\]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:45%;
  pointer-events:none;
  background:linear-gradient(to top, rgba(2,8,23,.45), transparent);
}

/* ========= BİLGİ KUTULARI ========= */
body.design-v4 #onecikanlar .rounded-3xl{
  background:
    radial-gradient(560px 220px at -5% -15%, color-mix(in srgb, var(--theme-base) 16%, transparent), transparent 65%),
    linear-gradient(180deg,#fff,#f7fbff)!important;
  border:1px solid var(--ui-line)!important;
}

body.design-v4 #onecikanlar .grid.md\:grid-cols-4 > div{
  position:relative;
}

body.design-v4 #onecikanlar .grid.md\:grid-cols-4 > div::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ui-line),transparent);
}

body.design-v4 #onecikanlar .bg-slate-50{
  background:linear-gradient(180deg,#f7fbff,#eef4ff)!important;
}

/* ========= YORUMLAR ========= */
body.design-v4 #yorumlar .reviewCard{
  position:relative;
  overflow:hidden;
}

body.design-v4 #yorumlar .reviewCard::before{
  content:"\201C";
  position:absolute;
  top:-18px;
  right:14px;
  font-size:98px;
  line-height:1;
  color:color-mix(in srgb, var(--theme-base) 20%, #c7d4ef);
  pointer-events:none;
  font-family:Georgia,serif;
}

body.design-v4 #yorumlar .text-amber-500{color:#f59e0b!important}

body.design-v4 #revPrev,
body.design-v4 #revNext,
body.design-v4 #revPrev_m,
body.design-v4 #revNext_m{
  border-radius:14px!important;
  border-color:var(--ui-line)!important;
  background:#fff!important;
}

/* ========= TEKLİF / BİZ KİMİZ ========= */
body.design-v4 #teklif .rounded-3xl{
  background:
    radial-gradient(420px 180px at 7% 12%, color-mix(in srgb, var(--theme-base) 32%, transparent), transparent 66%),
    radial-gradient(420px 180px at 90% 88%, color-mix(in srgb, var(--theme-dark) 36%, transparent), transparent 68%),
    linear-gradient(140deg,
      color-mix(in srgb, var(--theme-dark) 90%, #05070f),
      color-mix(in srgb, var(--theme-base) 82%, #080d19))!important;
  border:1px solid color-mix(in srgb, var(--theme-base) 46%, #253658)!important;
  box-shadow:0 28px 70px color-mix(in srgb, var(--theme-dark) 40%, transparent)!important;
}

body.design-v4 #teklif p{color:rgba(255,255,255,.82)!important}

/* ========= GALERİ ========= */
body.design-v4 #galeri .galItem{
  border-radius:22px!important;
  overflow:hidden;
  position:relative;
}

body.design-v4 #galeri .galItem::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(2,8,23,.12));
}

/* ========= VIDEO ========= */
body.design-v4 #videolar .rounded-3xl{
  background:
    radial-gradient(560px 220px at 15% 0%, color-mix(in srgb, var(--theme-base) 30%, transparent), transparent 70%),
    linear-gradient(130deg,
      color-mix(in srgb, var(--theme-dark) 90%, #05070f),
      color-mix(in srgb, var(--theme-base) 80%, #090f1d))!important;
  border-color:color-mix(in srgb, var(--theme-base) 55%, #2a3f64)!important;
}

body.design-v4 #videolar .vgCard{
  background:#f8fbff!important;
  border-color:#d5e2f6!important;
}

body.design-v4 .vgPlayBadge span{
  background:linear-gradient(135deg, var(--theme-base), var(--theme-dark))!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 8px 16px color-mix(in srgb, var(--theme-dark) 35%, transparent);
}

/* ========= İÇ SAYFA HERO ========= */
body.design-v4 main > section.relative.overflow-hidden{
  position:relative;
}

body.design-v4 main > section.relative.overflow-hidden::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:22px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--theme-50) 88%, #fff));
  pointer-events:none;
}

body.design-v4 main > section.relative.overflow-hidden h1{
  text-shadow:0 8px 26px rgba(0,0,0,.30);
}

body.design-v4 main > section.relative.overflow-hidden .inline-flex.items-center.gap-2.text-xs{
  border-radius:999px!important;
  border-color:color-mix(in srgb, var(--theme-300) 55%, #ffffff)!important;
  background:rgba(255,255,255,.90)!important;
  box-shadow:0 8px 18px rgba(2,8,23,.12);
}

body.design-v4 article,
body.design-v4 aside > div,
body.design-v4 .rounded-3xl.bg-white{
  background:linear-gradient(180deg,#fff,#f9fcff)!important;
}

/* Tipografi */
body.design-v4 .prose,
body.design-v4 .content,
body.design-v4 .icerik,
body.design-v4 article p,
body.design-v4 main p{line-height:1.78}

/* Formlar */
body.design-v4 input,
body.design-v4 textarea,
body.design-v4 select{
  background:#fff!important;
  border-color:var(--ui-line)!important;
  box-shadow:inset 0 1px 0 rgba(2,8,23,.03);
}

body.design-v4 input:focus,
body.design-v4 textarea:focus,
body.design-v4 select:focus{
  outline:none;
  border-color:var(--theme-base)!important;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--theme-base) 24%, transparent)!important;
}

/* Butonlar */
body.design-v4 a.inline-flex,
body.design-v4 button,
body.design-v4 [type="submit"]{
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

body.design-v4 a.inline-flex:hover,
body.design-v4 button:hover,
body.design-v4 [type="submit"]:hover{
  transform:translateY(-1px);
}

/* Footer */
body.design-v4 footer{
  margin-top:72px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(600px 260px at 10% -15%, color-mix(in srgb, var(--theme-base) 34%, transparent), transparent 66%),
    radial-gradient(600px 240px at 90% -20%, color-mix(in srgb, var(--theme-dark) 40%, transparent), transparent 68%),
    linear-gradient(140deg,
      color-mix(in srgb, var(--theme-dark) 92%, #05070f),
      color-mix(in srgb, var(--theme-base) 82%, #0a1020))!important;
}

body.design-v4 footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  pointer-events:none;
}

body.design-v4 footer a{color:rgba(255,255,255,.86)!important}
body.design-v4 footer a:hover{color:#fff!important}

/* Mobile Dock */
body.design-v4 .mobileDock{
  border:1px solid var(--ui-line)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 14px 34px rgba(2,8,23,.18)!important;
}

body.design-v4 .mobileDock::before{opacity:.65!important}

body.design-v4 .mobileDock a span.bg-slate-950,
body.design-v4 .mobileDock a span.w-9.h-9{
  background:linear-gradient(135deg, var(--theme-base), var(--theme-dark))!important;
  color:#fff!important;
  box-shadow:0 8px 16px color-mix(in srgb, var(--theme-dark) 35%, transparent);
}

/* 404 */
body.design-v4-404{
  font-family:"Manrope","Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(760px 330px at 0% -10%, rgba(15,23,42,.18), transparent 58%),
    radial-gradient(760px 330px at 100% -10%, rgba(30,41,59,.18), transparent 58%),
    #f6f9ff;
  color:#0b1220;
}

/* Responsive */
@media (max-width:1200px){
  body.design-v4 header > div:nth-child(2) > .mx-auto{
    margin-left:10px;
    margin-right:10px;
  }
}

@media (max-width:1024px){
  body.design-v4 #heroSlider{border-bottom-left-radius:24px;border-bottom-right-radius:24px}
}

@media (max-width:640px){
  body.design-v4 section h2{padding-left:14px}
  body.design-v4 section h2::before{width:5px}

  body.design-v4 .group.rounded-3xl:hover,
  body.design-v4 article.rounded-3xl:hover,
  body.design-v4 .reviewCard:hover,
  body.design-v4 .vgCard:hover,
  body.design-v4 .galItem:hover{transform:none}

  body.design-v4 #heroPrev,
  body.design-v4 #heroNext{width:42px!important;height:42px!important}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================
   V4-E Refresh: Parallax/3D Hero + Biz Kimiz Redesign
   ===================================================== */
body.design-v4 #heroSlider{
  perspective:1400px;
  transform-style:preserve-3d;
  background:
    radial-gradient(900px 300px at 8% -12%, color-mix(in srgb, var(--theme-base) 34%, transparent), transparent 62%),
    radial-gradient(900px 300px at 92% -14%, color-mix(in srgb, var(--theme-dark) 40%, transparent), transparent 64%),
    linear-gradient(160deg, color-mix(in srgb, var(--theme-dark) 90%, #080b14), color-mix(in srgb, var(--theme-base) 74%, #0d1322))!important;
}

body.design-v4 #heroSlider .slide{
  opacity:0;
  pointer-events:none;
  transform:translate3d(16%,0,-120px) rotateY(-14deg) scale(.90);
  transform-origin:center center;
  transition:transform .92s cubic-bezier(.22,.74,.2,1), opacity .82s ease, filter .82s ease;
  filter:saturate(.9) brightness(.85);
  will-change:transform, opacity, filter;
}

body.design-v4 #heroSlider .slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) rotateY(0deg) scale(1);
  filter:saturate(1.03) brightness(1);
  z-index:4;
}

body.design-v4 #heroSlider .slide.is-prev{
  opacity:.26;
  transform:translate3d(-18%,0,-180px) rotateY(20deg) scale(.86);
  z-index:2;
}

body.design-v4 #heroSlider .slide.is-next{
  opacity:.30;
  transform:translate3d(18%,0,-180px) rotateY(-20deg) scale(.86);
  z-index:2;
}

body.design-v4 #heroSlider .hero-media-wrap{
  overflow:hidden;
  transform:translateZ(0);
}

body.design-v4 #heroSlider .hero-media{
  transition:transform 900ms cubic-bezier(.19,.82,.22,1);
  transform:scale(1.08) translate3d(0,0,0);
  will-change:transform;
}

body.design-v4 #heroSlider .slide.is-active .hero-media{
  transform:scale(1.02) translate3d(var(--mx,0px), var(--my,0px), 0);
}

body.design-v4 #heroSlider .hero-depth{
  background:
    radial-gradient(750px 300px at 12% 120%, color-mix(in srgb, var(--theme-base) 38%, transparent), transparent 68%),
    radial-gradient(620px 260px at 92% 112%, color-mix(in srgb, var(--theme-dark) 42%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(2,8,23,.20), rgba(2,8,23,.40));
}

body.design-v4 #heroSlider .hero-caption{
  background:linear-gradient(140deg, rgba(2,8,23,.58), rgba(2,8,23,.35));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 24px 58px rgba(2,8,23,.42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius:24px;
  padding:18px 18px 16px;
  max-width:min(720px, calc(100% - 8px));
}

body.design-v4 #heroSlider .hero-caption h2{
  margin:0;
  font-size:clamp(1.35rem, 2.9vw, 2.95rem);
  letter-spacing:-.028em;
  line-height:1.05;
}

body.design-v4 #heroSlider .hero-caption p{
  margin-top:10px;
  color:rgba(255,255,255,.90)!important;
  font-size:clamp(.88rem,1.2vw,1.03rem);
}

body.design-v4 #heroSlider .hero-dot{
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  background:rgba(255,255,255,.30)!important;
  transition:all .26s ease;
}

body.design-v4 #heroSlider .hero-dot.active,
body.design-v4 #heroSlider .hero-dot[aria-current="true"]{
  width:30px!important;
  border-color:#fff!important;
  background:#fff!important;
}

body.design-v4 #heroPrev,
body.design-v4 #heroNext{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.16)!important;
  box-shadow:0 10px 24px rgba(2,8,23,.24);
}

body.design-v4 #heroPrev:hover,
body.design-v4 #heroNext:hover{
  background:rgba(255,255,255,.24)!important;
}

/* Yorum isim okunurluğu */
body.design-v4 #yorumlar .reviewName{
  color:#0b1220!important;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}

/* Dock yazıları okunurluğu */
body.design-v4 .mobileDock .dockLabel,
body.design-v4 .mobileDock .dockLabel.text-slate-900,
body.design-v4 .mobileDock .dockLabel.text-emerald-700,
body.design-v4 .mobileDock .dockLabel.text-amber-700{
  color:#0b1220!important;
  text-shadow:0 1px 0 rgba(255,255,255,.82)!important;
  font-weight:900!important;
}

body.design-v4 .mobileDock .dockLabel-wa{color:#065f46!important}
body.design-v4 .mobileDock .dockLabel-loc{color:#9a3412!important}

/* Biz Kimiz - yeni modern yapı */
body.design-v4 #teklif .biz-modern{
  background:
    radial-gradient(700px 280px at 10% -14%, color-mix(in srgb, var(--theme-base) 38%, transparent), transparent 65%),
    radial-gradient(700px 260px at 92% 115%, color-mix(in srgb, var(--theme-dark) 44%, transparent), transparent 67%),
    linear-gradient(132deg,
      color-mix(in srgb, var(--theme-dark) 92%, #05070f),
      color-mix(in srgb, var(--theme-base) 78%, #0b1020));
  border-color:color-mix(in srgb, var(--theme-base) 46%, #2a3d61)!important;
  box-shadow:0 34px 80px color-mix(in srgb, var(--theme-dark) 48%, transparent)!important;
  position:relative;
}

body.design-v4 #teklif .biz-modern::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events:none;
}

body.design-v4 #teklif .biz-main{position:relative;z-index:2}

body.design-v4 #teklif .biz-pill{
  padding:7px 12px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.14);
  color:#fff;
}

body.design-v4 #teklif .biz-prose{
  color:rgba(255,255,255,.92)!important;
}

body.design-v4 #teklif .biz-prose :where(div,p,ul,ol,li,strong,b,h1,h2,h3,h4){
  color:rgba(255,255,255,.92)!important;
}

body.design-v4 #teklif .biz-prose :where(h1,h2,h3,h4){
  margin:.2rem 0 .55rem;
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight:800;
  letter-spacing:-.01em;
}

body.design-v4 #teklif .biz-prose :where(p,li){
  font-size:.96rem;
  line-height:1.72;
  margin:.45rem 0;
}

body.design-v4 #teklif .biz-prose :where(ul,ol){
  padding-left:1.15rem;
}

body.design-v4 #teklif .biz-stats .biz-stat-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding:12px 10px;
}

body.design-v4 #teklif .biz-stat-no{
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  line-height:1;
}

body.design-v4 #teklif .biz-stat-label{
  color:rgba(255,255,255,.78);
  font-size:.72rem;
  margin-top:4px;
  font-weight:700;
}

body.design-v4 #teklif .biz-visual{position:relative;z-index:2}

body.design-v4 #teklif .biz-frame{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 52px rgba(2,8,23,.30);
  min-height:250px;
}

body.design-v4 #teklif .biz-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform .6s ease;
}

body.design-v4 #teklif .biz-modern:hover .biz-frame img{transform:scale(1.08)}

body.design-v4 #teklif .biz-frame-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,8,23,.28));
  pointer-events:none;
}

body.design-v4 #teklif .biz-badge{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.84rem;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  border-radius:14px;
  padding:10px 12px;
}

body.design-v4 #teklif .biz-badge i{
  font-size:1rem;
  margin-top:1px;
}

@media (max-width:1024px){
  body.design-v4 #heroSlider .slide,
  body.design-v4 #heroSlider .slide.is-prev,
  body.design-v4 #heroSlider .slide.is-next{
    transform:translate3d(0,0,0) rotateY(0deg) scale(1);
  }

  body.design-v4 #heroSlider .slide.is-prev,
  body.design-v4 #heroSlider .slide.is-next{opacity:0}
}

@media (max-width:640px){
  body.design-v4 #heroSlider .hero-caption{
    border-radius:18px;
    padding:12px 12px 11px;
  }

  body.design-v4 #teklif .biz-stats .biz-stat-card{padding:10px 8px}
  body.design-v4 #teklif .biz-stat-no{font-size:1.08rem}
  body.design-v4 #teklif .biz-stat-label{font-size:.68rem}
}

/* ===== 2026-02-07 v5.1: yeni deck slider + mobil taşma fix + bizkimiz ayrımı ===== */
html,body{max-width:100%;}
@supports (overflow: clip){
  html,body{overflow-x:clip;}
}
@supports not (overflow: clip){
  html,body{overflow-x:hidden;}
}

body.design-v4 #icerik > #showcase{order:5}
body.design-v4 #icerik > #bizkimiz{order:40}
body.design-v4 #icerik > #teklif{order:45}

/* Parallax deck */
body.design-v4 #parallaxDeck{
  background:
    radial-gradient(1200px 520px at 8% -20%, color-mix(in srgb, var(--theme-base) 26%, transparent), transparent 55%),
    radial-gradient(1100px 520px at 100% 120%, color-mix(in srgb, var(--theme-dark) 38%, transparent), transparent 58%),
    linear-gradient(135deg, var(--theme-darkest), var(--theme-darker));
  aspect-ratio: 16 / 8.2;
  min-height: 290px;
}

@media (min-width:640px){
  body.design-v4 #parallaxDeck{min-height: 520px;}
}

body.design-v4 #parallaxDeck .deckGlow{
  background: color-mix(in srgb, var(--theme-base) 70%, #ffffff 30%);
  opacity:.30;
}

body.design-v4 #parallaxDeck .deckSlide{
  opacity:0;
  transform:scale(1.045) translate3d(0,0,0);
  transition:opacity .6s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  z-index:1;
}

body.design-v4 #parallaxDeck .deckSlide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

body.design-v4 #parallaxDeck .deckMediaWrap{position:absolute; inset:0; overflow:hidden}

body.design-v4 #parallaxDeck .deckMedia{
  transform:translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.05);
  transition:transform .18s ease-out;
  will-change: transform;
}

body.design-v4 #parallaxDeck .deckDepth{
  background:
    linear-gradient(180deg, rgba(2,6,23,.12) 12%, rgba(2,6,23,.56) 82%),
    linear-gradient(135deg, color-mix(in srgb, var(--theme-dark) 70%, transparent), transparent 55%);
}

body.design-v4 #parallaxDeck .deckCaption{
  background:linear-gradient(145deg, rgba(2,6,23,.46), rgba(2,6,23,.72));
  border:1px solid rgba(255,255,255,.17);
  border-radius:20px;
  padding:14px 14px 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(2,6,23,.28);
}

body.design-v4 #parallaxDeck .deck-dot{
  width:9px; height:9px; border-radius:999px;
  background:rgba(255,255,255,.44);
  transition:all .2s ease;
}

body.design-v4 #parallaxDeck .deck-dot.active,
body.design-v4 #parallaxDeck .deck-dot[aria-current="true"]{
  width:24px;
  background:#fff;
}

/* mobilde slider üzeri yazı yok */
@media (max-width:640px){
  body.design-v4 #parallaxDeck .deckCaption{display:none!important}
}

/* yorumlar: yatay kayma + okunabilirlik */
body.design-v4 #reviewTrack{
  overscroll-behavior-x:contain;
  scroll-padding-left: 0.5rem;
}

body.design-v4 .reviewCard{
  max-width:100%;
}

body.design-v4 .reviewName{
  line-height:1.2;
  word-break:break-word;
}

@media (max-width:640px){
  body.design-v4 #reviewTrack .reviewCard{
    min-width: calc(100% - 0.35rem)!important;
    max-width: calc(100% - 0.35rem)!important;
  }
}

/* mobil dock: genişlik sabitleme + okunabilir etiket */
body.design-v4 .mobileDockWrap{
  max-width:100vw!important;
  overflow-x:clip!important;
}
body.design-v4 .mobileDock{
  width:min(560px, calc(100vw - 20px))!important;
  max-width:min(560px, calc(100vw - 20px))!important;
}
body.design-v4 .mobileDock .dockGrid{width:100%!important; min-width:0!important;}
body.design-v4 .mobileDock .dockItem{padding:10px 4px 9px!important;}
body.design-v4 .mobileDock .dockLabel{
  font-size:11.5px!important;
  color:#0f172a!important;
  text-shadow:none!important;
}
body.design-v4 .mobileDock .dockLabel-wa{color:#065f46!important}
body.design-v4 .mobileDock .dockLabel-loc{color:#9a3412!important}

/* Biz Kimiz artık #bizkimiz altında */
body.design-v4 #bizkimiz .biz-modern{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 360px at -8% -10%, color-mix(in srgb, var(--theme-base) 33%, transparent), transparent 60%),
    radial-gradient(1000px 360px at 110% 120%, color-mix(in srgb, var(--theme-dark) 42%, transparent), transparent 62%),
    linear-gradient(135deg, var(--theme-darkest), var(--theme-darker));
  box-shadow:0 20px 54px rgba(2,8,23,.24);
}

body.design-v4 #bizkimiz .biz-main,
body.design-v4 #bizkimiz .biz-visual{position:relative; z-index:2;}

body.design-v4 #bizkimiz .biz-pill{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  border-radius:999px;
  padding:.4rem .72rem;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.02em;
}

body.design-v4 #bizkimiz .biz-prose :where(h1,h2,h3,h4){
  margin:.2rem 0 .55rem;
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight:800;
  letter-spacing:-.01em;
}

body.design-v4 #bizkimiz .biz-prose :where(p,li){
  font-size:.96rem;
  line-height:1.72;
  margin:.45rem 0;
}

body.design-v4 #bizkimiz .biz-prose :where(ul,ol){padding-left:1.15rem}

body.design-v4 #bizkimiz .biz-stat-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding:12px 10px;
}

body.design-v4 #bizkimiz .biz-stat-no{
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  line-height:1;
}

body.design-v4 #bizkimiz .biz-stat-label{
  color:rgba(255,255,255,.78);
  font-size:.72rem;
  margin-top:4px;
  font-weight:700;
}

body.design-v4 #bizkimiz .biz-frame{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 52px rgba(2,8,23,.30);
  min-height:250px;
}

body.design-v4 #bizkimiz .biz-frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  transition:transform .6s ease;
}
body.design-v4 #bizkimiz .biz-modern:hover .biz-frame img{transform:scale(1.08)}

body.design-v4 #bizkimiz .biz-frame-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(2,8,23,.3));
  pointer-events:none;
}

body.design-v4 #bizkimiz .biz-badge{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.84rem;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  padding:10px 12px;
}

body.design-v4 #bizkimiz .biz-badge i{font-size:1rem; margin-top:1px}

/* Teklif CTA - koyu gradient */
body.design-v4 #teklif .quick-cta{
  position:relative;
  background:
    radial-gradient(900px 260px at -10% -20%, color-mix(in srgb, var(--theme-base) 28%, transparent), transparent 60%),
    radial-gradient(900px 260px at 110% 110%, color-mix(in srgb, var(--theme-dark) 40%, transparent), transparent 62%),
    linear-gradient(145deg, var(--theme-dark), var(--theme-darker));
  box-shadow:0 16px 36px rgba(2,8,23,.2);
}

body.design-v4 #teklif .quick-pill{
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  border-radius:999px;
  padding:.38rem .75rem;
  background:rgba(255,255,255,.13);
  font-size:.74rem;
  font-weight:800;
}

@media (max-width:640px){
  body.design-v4 #bizkimiz .biz-stat-card{padding:10px 8px}
  body.design-v4 #bizkimiz .biz-stat-no{font-size:1.08rem}
  body.design-v4 #bizkimiz .biz-stat-label{font-size:.68rem}
}


/* ===== V7 MODERN OVERRIDES ===== */
#showcase{max-width:none !important;width:100% !important;padding-left:0 !important;padding-right:0 !important;}
#parallaxDeck{width:100% !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;min-height:380px;height:58vw;max-height:720px;background:#0b1220;}
.deckGlow,.deckDepth,.deckShade{display:none !important;}
.deckSlide{opacity:0;transform: translate3d(5%,0,0) scale(1.045);transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.72,.2,1);} 
.deckSlide.is-active{opacity:1;transform: translate3d(0,0,0) scale(1);z-index:2;}
.deckMedia{filter:none !important;transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.08);transition: transform 1.2s ease;}
.deckSlide.is-active .deckMedia{animation: deckKenBurns 7s ease both;}
@keyframes deckKenBurns{from{transform: translate3d(var(--mx,0px), calc(var(--my,0px) - 6px), 0) scale(1.12);}to{transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(1.06);}}
.quick-cta{width:100%;border-radius:0 !important;margin:0 !important;border:0 !important;background: linear-gradient(140deg, var(--theme-darkest), var(--theme-darker) 58%, var(--theme-dark));box-shadow: 0 18px 45px rgba(2,6,23,.22);} 
.quick-cta .quick-cta-inner{position:relative;} 
.quick-cta .quick-cta-inner::before{content:"";position:absolute;inset:0;background: radial-gradient(800px 240px at 78% 20%, rgba(255,255,255,.14), transparent 60%);pointer-events:none;} 
.quick-cta .quick-cta-inner > *{position:relative;z-index:1;} 
#reviewTrack{padding-inline:2px;}
.reviewCard{min-width: clamp(260px, 84vw, 420px) !important;max-width: min(92vw, 460px);} 
.reviewCard p,.reviewCard .reviewName{overflow-wrap:anywhere;word-break:break-word;} 
@media (max-width:767px){#parallaxDeck{min-height:280px;height:56vw;max-height:360px;}.deckCaption{display:none !important;}.reviewCard{min-width: calc(100vw - 2rem) !important;max-width: calc(100vw - 2rem);}}
.mobileDockWrap{overflow-x:hidden !important;}
.mobileDock{width:min(560px, calc(100vw - 16px)) !important;max-width:min(560px, calc(100vw - 16px)) !important;}
.mobileDock .dockLabel-call{color:#0b1220 !important;}
