:root{
  --bg-top:#f6f8fc;
  --bg-bot:#050b16;

  --text:#0f1a2a;

  --orange1:#ffb14a;
  --orange2:#ff6a00;

  --edu1:#ffc26d;  --edu2:#ff7a2f;
  --bart1:#8e7bff; --bart2:#5a2cd6;
  --quant1:#44d2ff;--quant2:#1b6cff;
  --snap1:#57f1c4; --snap2:#14a0ff;
  --mom1:#58e2ff;  --mom2:#22c2b4;
  --vpoint1:#ffd36a; --vpoint2:#7a5cff;
--cloud-blue: #4aa3e0;

  --shadow:0 18px 50px rgba(0,0,0,.28);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
}
body.product-edusis-universite {
  --accent-ui: #3288c9;   /* bulut mavi */
}
/* Önerilen modüller başlıkları */
body.product-edusis-universite .module-title {
  color: var(--accent-ui);
}

/* Modül ikonları */
body.product-edusis-universite .module-icon {
  color: var(--accent-ui);
  background: color-mix(in srgb, var(--accent-ui) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-ui) 30%, transparent);
}

/* SVG ikon stroke */
body.product-edusis-universite .module-icon svg {
  stroke: var(--accent-ui);
}

/* Modül haritasındaki ikonlar */
body.product-edusis-universite .uni-icon {
  stroke: var(--accent-ui);
}

/* Modül haritası merkez halkası */
body.product-edusis-universite .module-map-radial circle {
  stroke: color-mix(in srgb, var(--accent-ui) 40%, transparent);
}

/* Pill (etiketler) */
body.product-edusis-universite .pill {
  border-color: color-mix(in srgb, var(--accent-ui) 40%, transparent);
  color: color-mix(in srgb, var(--accent-ui) 80%, #000);
}

*{box-sizing:border-box}
html,body{ --heroImage: none;  --heroIcon: none; height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 70% 25%, rgba(63,157,255,.22), transparent 60%),
    radial-gradient(900px 700px at 25% 35%, rgba(255,130,62,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, #eef2fb 18%, #0d1e3a 45%, var(--bg-bot) 100%);
}
a{color:inherit; text-decoration:none}
.container{width:min(1160px, calc(100% - 40px)); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:#0F2438;
  border-bottom:1px solid rgba(15,26,42,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:210px}
.logo-mark{
  width:34px; height:26px; border-radius:10px;
  background: linear-gradient(135deg, #33e0c7, #2d7dff);
  transform:skewX(-16deg);
  box-shadow:0 10px 24px rgba(45,125,255,.18);
}
.brand-title{font-weight:900; letter-spacing:.6px}
.brand-sub{font-size:12px; color:rgba(255, 255, 255, 0.742); margin-top:2px}

.nav{display:flex; gap:18px; align-items:center; font-weight:700; color:rgba(15,26,42,.75)}
.nav a{padding:10px 10px; border-radius:12px}
.nav a:hover{background:rgba(15,26,42,.06)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(15,26,42,.12);
  font-weight:900;
  transition:transform .15s ease, filter .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:white; border-color:transparent;
  background:linear-gradient(135deg, var(--orange1), var(--orange2));
  box-shadow:0 16px 34px rgba(255,106,0,.28);
}
.btn-primary:hover{filter:saturate(1.05); transform:translateY(-1px)}
.btn-secondary{background:rgba(255,255,255,.72)}
.btn-secondary:hover{transform:translateY(-1px)}




.hero{padding:44px 0 18px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.h1{font-size:52px; line-height:1.04; letter-spacing:-.8px; margin:0 0 14px}
.lead{font-size:16px; line-height:1.7; color:rgba(15,26,42,.74); margin:0 0 18px; max-width:60ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

.hero-art{
  border-radius:26px; overflow:hidden; min-height:260px;
  box-shadow:0 30px 80px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(700px 420px at 30% 30%, rgba(255,140,72,.46), transparent 60%),
    radial-gradient(620px 440px at 70% 50%, rgba(63,157,255,.48), transparent 60%),
    conic-gradient(from 220deg at 60% 40%, rgba(88,226,255,.85), rgba(255,122,47,.75), rgba(142,123,255,.78), rgba(20,160,255,.72), rgba(88,226,255,.85));
  position:relative;
}
.hero-art::after{
  content:""; position:absolute; inset:-40px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 38%, transparent 55%);
  transform:rotate(-10deg); mix-blend-mode:screen; opacity:.55;
}
.hero-art .tag{
  position:absolute; right:18px; top:18px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.92);
  padding:10px 12px; border-radius:14px; font-weight:900;
}
.hero-art .chips{position:absolute; left:18px; bottom:18px; display:flex; gap:10px; flex-wrap:wrap}
.chip{
  font-size:12px; padding:9px 11px; border-radius:999px;
  color:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22); backdrop-filter: blur(8px);
}

.section{padding:22px 0 18px}
.section-title{font-size:28px; margin:0 0 12px; letter-spacing:-.3px}
.section-note{color:rgba(15,26,42,.68); margin:0 0 12px}

.products{margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.products.row2{grid-template-columns:repeat(3,1fr); width:100%; margin:0}
.product-card{
  border-radius:20px; border:1px solid rgba(255,255,255,.16);
  background:rgba(8,18,36,.56);
  color:#fff; box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
.product-card .top{padding:18px 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.pname{display:flex; align-items:center; gap:10px; font-weight:950; font-size:22px}
.pbadge{
  width: 40px; 
  height: 40px; 
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.16);
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 0; /* 7px'i kaldır */
  overflow: hidden; /* border-radius'un düzgün çalışması için */
}
.plogo{width:24px; height:24px; display:block; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));}
.product-card .desc{padding:0 18px 14px; margin:0; color:rgba(7, 0, 0, 0.85); line-height:1.5; min-height:44px}
.product-card .actions{padding:0 18px 18px}
.product-card .btn{width:100%; border-color:transparent; color:#0a0101; box-shadow:0 14px 30px rgba(0,0,0,.24)}

.btn-edu{background:linear-gradient(135deg, var(--edu1), var(--edu2))}
.btn-bart{background:linear-gradient(135deg, var(--bart1), var(--bart2))}
.btn-quant{background:linear-gradient(135deg, var(--quant1), var(--quant2))}
.btn-snap{background:linear-gradient(135deg, var(--snap1), var(--snap2))}
.btn-mom{background:linear-gradient(135deg, var(--mom1), var(--mom2))}
.btn-vpoint{background:linear-gradient(135deg, var(--vpoint1), var(--vpoint2))}

.product-card.bartes::before,
.product-card.quant::before,
.product-card.snapkart::before,
.usecases{margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.usecase{
  border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:rgba(8,18,36,.50); color:#fff; padding:16px;
  box-shadow:0 18px 42px rgba(0,0,0,.20);
}
.usecase h4{margin:0 0 6px; font-size:16px}
.usecase p{margin:0; opacity:.82; font-size:13px; line-height:1.4}

.footer{margin-top:26px; padding:20px 0 28px; color:rgba(255,255,255,.78)}
.footer-inner{
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
}
.small{font-size:12px; opacity:.72}

/* Product pages (kept same as v1) */
.page-hero{padding:26px 0 16px}
.breadcrumb{font-size:12px; color:rgba(15,26,42,.58); margin:10px 0 0}
.breadcrumb a{color:rgba(15,26,42,.72)}
.product-hero{
  margin-top:14px; border-radius:26px; overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.24);
  color:#fff;
  background:
    radial-gradient(860px 520px at 25% 35%, rgba(255,140,72,.38), transparent 58%),
    radial-gradient(760px 520px at 70% 45%, rgba(63,157,255,.42), transparent 60%),
    linear-gradient(135deg, rgba(8,18,36,.92), rgba(8,18,36,.58));
}
.product-hero .inner{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; padding:26px; align-items:center}
.product-hero h1{margin:0 0 8px; font-size:44px; letter-spacing:-.6px; color:#fff}
.product-hero .subtitle{margin:0 0 10px; font-size:18px; opacity:.92; color:rgba(255,255,255,.86)}
.product-hero .ptext{margin:0 0 16px; line-height:1.6; opacity:.92; color:rgba(255,255,255,.78)}
.product-hero .art{min-height:220px; border-radius:22px; border:1px solid rgba(255,255,255,.18); position:relative; overflow:hidden}
.product-hero .art::after{
  content:""; position:absolute; inset:-60px;
  background: conic-gradient(from 220deg at 55% 45%, rgba(255,255,255,.22), transparent 40%, rgba(255,255,255,.18), transparent 70%, rgba(255,255,255,.22));
  transform:rotate(12deg); opacity:.55;
}
.product-hero.edu .art{background: radial-gradient(520px 340px at 40% 40%, rgba(255,194,109,.36), transparent 62%),
  radial-gradient(520px 360px at 70% 55%, rgba(255,122,47,.34), transparent 62%)}
.product-hero.bartes .art{background: radial-gradient(520px 340px at 40% 40%, rgba(142,123,255,.36), transparent 62%),
  radial-gradient(520px 360px at 70% 55%, rgba(90,44,214,.34), transparent 62%)}
.product-hero.quant .art{background: radial-gradient(520px 340px at 40% 40%, rgba(68,210,255,.36), transparent 62%),
  radial-gradient(520px 360px at 70% 55%, rgba(27,108,255,.34), transparent 62%)}
.product-hero.snapkart .art{background: radial-gradient(520px 340px at 40% 40%, rgba(87,241,196,.34), transparent 62%),
  radial-gradient(520px 360px at 70% 55%, rgba(20,160,255,.34), transparent 62%)}
.product-hero.momento .art{background: radial-gradient(520px 340px at 40% 40%, rgba(88,226,255,.34), transparent 62%),
  radial-gradient(520px 360px at 70% 55%, rgba(34,194,180,.34), transparent 62%)}

.features{padding:18px 0 10px}
.panel{background:rgba(255,255,255,.94); border:1px solid rgba(15,26,42,.10); border-radius:22px; box-shadow:0 20px 50px rgba(0,0,0,.14); padding:22px}
.panel h2{margin:0 0 10px; font-size:26px}
.checkgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-top:10px}
.check{display:flex; gap:10px; align-items:flex-start; color:rgba(15,26,42,.84)}
.check .dot{width:26px; height:26px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:950; color:white;
  background:linear-gradient(135deg, rgba(255,177,74,1), rgba(255,106,0,1)); margin-top:1px; overflow:hidden}
.check .dot svg{width:16px; height:16px; display:block; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.check .dot svg *{vector-effect:non-scaling-stroke}
.check p{margin:0; line-height:1.5}

.section-slim{padding:12px 0 6px}
.h2-slim{margin:0 0 10px; font-size:22px; letter-spacing:-.2px}
.list{margin:0; padding-left:18px; color:rgba(15,26,42,.82); line-height:1.7}
.list li{margin:6px 0}

.docs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px}
.doc{border-radius:18px; border:1px solid rgba(15,26,42,.10); background:rgba(255,255,255,.90); padding:16px; box-shadow:0 18px 46px rgba(0,0,0,.12)}
.doc h4{margin:0 0 6px}
.doc p{margin:0 0 10px; color:rgba(15,26,42,.70); font-size:13px; line-height:1.45}
.doc .btn{width:100%}

.cta-band{margin-top:18px; border-radius:22px; padding:18px; color:#fff; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(8,18,36,.78), rgba(8,18,36,.50)); box-shadow:0 26px 70px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.cta-band p{margin:0; opacity:.90}
.cta-band .btn{min-width:210px}




/* Pastel gradient product cards (no hard split line) */
.product-card.momento{ background:linear-gradient(180deg, rgba(88,226,255,.38) 0%, rgba(34,194,180,.26) 58%, rgba(34,194,180,.18) 100%); }
.product-card.edu{ background:linear-gradient(180deg, rgba(255,194,109,.38) 0%, rgba(255,122,47,.26) 58%, rgba(255,122,47,.18) 100%); }
.product-card.bartes{ background:linear-gradient(180deg, rgba(142,123,255,.38) 0%, rgba(90,44,214,.26) 58%, rgba(90,44,214,.18) 100%); }
.product-card.quant{ background:linear-gradient(180deg, rgba(68,210,255,.38) 0%, rgba(27,108,255,.26) 58%, rgba(27,108,255,.18) 100%); }
.product-card.snapkart{ background:linear-gradient(180deg, rgba(87,241,196,.36) 0%, rgba(20,160,255,.24) 58%, rgba(20,160,255,.18) 100%); }

.product-card{ border-color: rgba(255,255,255,.22); }
.product-card .desc{ color: rgba(255,255,255,.92); }

/* Product page accent colors (used for buttons + check dots) */
body.product-page{ --accent1: var(--orange1); --accent2: var(--orange2); }
body.product-momento{ --accent1: var(--mom1); --accent2: var(--mom2); }
body.product-edusis{ --accent1: var(--edu1); --accent2: var(--edu2); }
body.product-bartes{ --accent1: var(--bart1); --accent2: var(--bart2); }
body.product-quant{ --accent1: var(--quant1); --accent2: var(--quant2); }
body.product-snapkart{ --accent1: var(--snap1); --accent2: var(--snap2); }

/* Override primary button + check dots on product pages to match product color */
body.product-page .btn-primary{
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
body.product-page .check .dot{
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
}


/* VPoint product colors */
.product-card.vpoint{ background:linear-gradient(180deg, rgba(255,211,106,.36) 0%, rgba(122,92,255,.24) 58%, rgba(122,92,255,.18) 100%); }

/* Extra vertical rhythm to avoid sections looking merged */
#urunler{ padding-bottom: 190px; }
#referanslar{ padding-top: 34px; }

body.product-vpoint{ --accent1: var(--vpoint1); --accent2: var(--vpoint2); }

/* Simple form styling */
.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 14px;
  margin-top:10px;
}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-weight:800; font-size:13px; color:rgba(15,26,42,.78)}
.input, .select, .textarea{
  border-radius:14px;
  border:1px solid rgba(15,26,42,.14);
  padding:12px 12px;
  font:inherit;
  background:rgba(255,255,255,.92);
}
.textarea{min-height:110px; resize:vertical}
.form .full{grid-column: 1 / -1}
.hint{font-size:12px; color:rgba(15,26,42,.58); margin-top:2px}
@media (max-width: 980px){
  .form{grid-template-columns:1fr}
}


/* Hero watermark icon (Option 1) */
.hero-art{
  position: relative;
  overflow:hidden;
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:-10px;
  background:
    radial-gradient(70% 70% at 20% 25%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.hero-art::after{
  content:"";
  position:absolute;
  inset:-30px -10px -30px -10px;
  background-image: var(--heroIcon);
  background-repeat:no-repeat;
  background-position: 78% 55%;
  background-size: 340px 340px;
  opacity: .12;
  filter: saturate(1.05) contrast(1.02);
  pointer-events:none;
}
@media (max-width: 980px){
  .hero-art::after{ background-size: 240px 240px; background-position: 85% 30%; }
}

/* Hero icon per product */
body.product-momento{ --heroIcon: url("../img/momento.png"); }
body.product-edusis{ --heroIcon: url("../img/edusis.png"); }
body.product-bartes{ --heroIcon: url("../img/bartes.png"); }
body.product-quant{ --heroIcon: url("../img/quant.png"); }
body.product-snapkart{ --heroIcon: url("../img/snapkart.png"); }
body.product-vpoint{ --heroIcon: url("../img/vpoint.png"); }

.section-dark{ background: transparent; }


/* Gallery */
.filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:10px 0 16px;
}
.filter{
  border:1px solid rgba(15,26,42,.14);
  background:rgba(255,255,255,.70);
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.filter.active{
  border-color: rgba(15,26,42,.22);
  background: linear-gradient(135deg, rgba(15,26,42,.06), rgba(15,26,42,.02));
}
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){
  .gallery{ grid-template-columns: 1fr; }
}
.gitem{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
}
.gthumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(88,226,255,.22), rgba(122,92,255,.18));
}
.gcap{
  padding:12px 12px 14px;
  color: rgba(255,255,255,.92);
}
.gcap .t{ font-weight:900; letter-spacing:.2px; }
.gcap .s{ font-size:13px; color: rgba(255,255,255,.72); margin-top:4px; line-height:1.5; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(2,6,23,.78);
  display:none;
  align-items:center; justify-content:center;
  padding:22px;
  z-index: 9999;
}
.lightbox.open{ display:flex; }
.lb-card{
  width:min(1040px, 100%);
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.lb-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  color: rgba(255,255,255,.92);
}
.lb-title{ font-weight:900; }
.lb-close{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.lb-img{
  width:100%;
  max-height: 72vh;
  object-fit: contain;
  background: rgba(0,0,0,.25);
}
.lb-desc{
  padding:12px 14px 16px;
  color: rgba(255,255,255,.72);
  line-height:1.6;
  font-size:13px;
}


/* Premium card glow (subtle color spill) */
.product-card{
  position: relative;
  z-index: 0;
}
.product-card::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius: 32px;
  background: radial-gradient(60% 60% at 30% 25%, var(--glow1), transparent 60%),
              radial-gradient(70% 70% at 80% 85%, var(--glow2), transparent 62%);
  filter: blur(18px);
  opacity: .40;
  z-index:-1;
  pointer-events:none;
}
.product-card:hover::before{
  opacity: .58;
  filter: blur(16px);
}
.product-card.momento{ --glow1: rgba(88,226,255,.38); --glow2: rgba(34,194,180,.30); }
.product-card.edu{ --glow1: rgba(255,194,109,.42); --glow2: rgba(255,122,47,.30); }
.product-card.bartes{ --glow1: rgba(142,123,255,.40); --glow2: rgba(90,44,214,.30); }
.product-card.quant{ --glow1: rgba(68,210,255,.40); --glow2: rgba(27,108,255,.28); }
.product-card.snapkart{ --glow1: rgba(87,241,196,.38); --glow2: rgba(20,160,255,.28); }
.product-card.vpoint{ --glow1: rgba(255,211,106,.38); --glow2: rgba(122,92,255,.28); }


/* Hero image (auto per product) */
.hero-art{
  position: relative;
  background-image: var(--heroImage);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Hero image per product (logo+slogan files) */
body.product-momento{ --heroImage: url("../img/momento.jpg"); }
body.product-edusis{ --heroImage: url("../img/edusis.jpg"); }
body.product-bartes{ --heroImage: url("../img/bartes.png"); }
body.product-quant{ --heroImage: url("../img/quant.jpg"); }
body.product-snapkart{ --heroImage: url("../img/snapkart.png"); }
body.product-vpoint{ --heroImage: url("../img/vpoint.jpg"); }

/* Hero art overlay (keeps text readable on busy images) */
.hero-art::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(90% 90% at 50% 50%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
              linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,0));
  pointer-events:none;
}
.hero-art > *{ position: relative; z-index: 2; }

/* eduSIS variants */
body.product-edusis-kolej{ --heroImage: url("../img/edusis.jpg"); --heroIcon: url("../img/edusis.png"); }
body.product-edusis-universite{ --heroImage: url("../img/edusis.jpg"); --heroIcon: url("../img/edusis.png"); }

/* Hero cover utility (for real photos) */
.hero-art.hero-cover{
  background-size: cover;
  background-position: center;
}
.hero-art.hero-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.12) 0%, rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}

/* eduSIS main page real photo (optional) */
body.product-edusis.product-edusis-photo{ --heroImage: url("../img/edusis-hero.jpg"); }

/* Real photo hero per product */
body.product-momento.product-momento-photo{ --heroImage: url("../img/momento-hero.jpg"); }
body.product-bartes.product-bartes-photo{ --heroImage: url("../img/bartes-hero.jpg"); }
body.product-quant.product-quant-photo{ --heroImage: url("../img/quant-hero.jpg"); }
body.product-snapkart.product-snapkart-photo{ --heroImage: url("../img/snapkart-hero.jpg"); }
body.product-vpoint.product-vpoint-photo{ --heroImage: url("../img/vpoint-hero.jpg"); }
body.product-edusis.product-edusis-photo{ --heroImage: url("../img/edusis-hero.jpg"); }
body.product-edusis-kolej.product-edusis-kolej-photo{ --heroImage: url("../img/edusis-kolej-hero.jpg"); }
body.product-edusis-universite.product-edusis-universite-photo{ --heroImage: url("../img/edusis-universite-hero.jpg"); }

/* Product card logo tile */
.product-card .plogo{
  background: #fff;
  border-radius: 14px;
  padding: 0; /* 10px'i kaldır veya azalt */
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  width: 100%; /* 52px yerine */
  height: 100%; /* 52px yerine */
  object-fit: cover; /* contain yerine cover dene */
  display: block;
}
@media (max-width: 720px){
  .product-card .plogo{ width:46px; height:46px; padding:8px; }
}

/* Module map diagram */
.module-map{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
}
.module-map svg{ width:100%; height:auto; display:block; }
.module-map .legend{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px;
}
.module-map .pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 8px 12px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 13px;
}
@media (max-width: 720px){
  .module-map{ padding:14px; border-radius:16px; }
  .module-map .pill{ font-size:12px; padding:7px 10px; }
}

/* Module map vivid tweaks */
.module-map{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
}
.module-map .pill{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
}

/* Module map (corporate / light) */
.module-map-light{
  background:#fff;
  border:1px solid rgba(15,26,42,.10);
  border-radius:16px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.module-map-light:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(500px 240px at 18% 20%, rgba(255,140,40,.12), rgba(255,140,40,0) 60%),
    radial-gradient(520px 260px at 85% 78%, rgba(255,180,90,.10), rgba(255,180,90,0) 60%);
  pointer-events:none;
}
.module-map-light *{ position:relative; z-index:2; }

.module-grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  grid-template-rows: auto auto auto;
  gap:14px;
  align-items:stretch;
}
.module-center{
  grid-column:2;
  grid-row:2;
  border-radius:18px;
  padding:18px 16px;
  background: linear-gradient(180deg, rgba(255,140,40,.16), rgba(255,140,40,.08));
  border:1px solid rgba(255,140,40,.22);
  box-shadow: 0 12px 32px rgba(15,26,42,.08);
  text-align:center;
}
.module-center .title{
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(15,26,42,.92);
  font-size:18px;
  margin:0;
}
.module-center .sub{
  margin:6px 0 0;
  color:rgba(15,26,42,.70);
  font-weight:700;
  font-size:13px;
}
.module-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,26,42,.10);
  box-shadow: 0 10px 26px rgba(15,26,42,.06);
}
.module-card .ico{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(255,140,40,.14);
  border:1px solid rgba(255,140,40,.18);
  flex:0 0 38px;
}
.module-card svg{ width:20px; height:20px; display:block; }
.module-card .name{
  margin:0;
  font-weight:900;
  color:rgba(15,26,42,.92);
  font-size:14px;
  line-height:1.2;
}
.module-card .desc{
  margin:6px 0 0;
  color:rgba(15,26,42,.72);
  font-weight:600;
  font-size:12.5px;
  line-height:1.5;
}
.module-card .meta{
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:6px;
}
.module-tag{
  font-size:11px;
  font-weight:800;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(15,26,42,.10);
  background: rgba(15,26,42,.03);
  color: rgba(15,26,42,.70);
}

.module-map-legend{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px;
}
.module-map-legend .pill{
  background: rgba(15,26,42,.04);
  border: 1px solid rgba(15,26,42,.10);
  color: rgba(15,26,42,.72);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: 12px;
}

/* positioning in grid */
.mm-top{ grid-column:2; grid-row:1; }
.mm-left{ grid-column:1; grid-row:2; }
.mm-right{ grid-column:3; grid-row:2; }
.mm-top-left{ grid-column:1; grid-row:1; }
.mm-top-right{ grid-column:3; grid-row:1; }
.mm-bottom-left{ grid-column:1; grid-row:3; }
.mm-bottom-right{ grid-column:3; grid-row:3; }

/* Responsive: stack cards */
@media (max-width: 920px){
  .module-grid{ grid-template-columns:1fr; grid-template-rows:auto; }
  .module-center{ grid-column:auto; grid-row:auto; }
  .mm-top,.mm-left,.mm-right,.mm-top-left,.mm-top-right,.mm-bottom-left,.mm-bottom-right{ grid-column:auto; grid-row:auto; }
}

/* Module map (radial / light) */
.module-map-radial{
  background:#fff;
  border:1px solid rgba(15,26,42,.10);
  border-radius:16px;
  padding:18px;
  overflow:hidden;
  position:relative;
}
.module-map-radial:before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(520px 260px at 18% 18%, rgba(255,140,40,.12), rgba(255,140,40,0) 62%),
    radial-gradient(520px 260px at 86% 78%, rgba(255,180,90,.10), rgba(255,180,90,0) 62%);
  pointer-events:none;
}
.module-map-radial svg{
  width:100%;
  height:auto;
  display:block;
  max-width: 100%;
}
.module-map-radial .legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.module-map-radial .pill{
  background: rgba(15,26,42,.04);
  border:1px solid rgba(15,26,42,.10);
  color: rgba(15,26,42,.72);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: 12px;
}

/* === Layout fix: container/panel stable width === */
.container{
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  max-width: none; /* alttaki max-width çakışmalarını iptal */
}

.panel{
  
  max-width: none; /* panelin kendi max-width sınırı olmasın */
  overflow: visible; /* içerik kesilmesin */
}

/* feature grid kesin otursun */
.feature-grid{
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px){
  .feature-grid{ grid-template-columns: 1fr; }
}


.modules-section { background: transparent; padding: 22px 0 18px; }


/* Modules table when embedded inside a panel */
.panel .modules-section{padding:0;background:transparent}
.panel .modules-container{padding:0}
.module-row{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:16px 0;border-top:1px solid rgba(15,23,42,.08)}
.module-row:first-child{border-top:none;padding-top:0}
.module-title{font-weight:800;color:var(--modules-accent,#f59e0b);display:flex;align-items:center;gap:10px;line-height:1.2}
.module-desc{color:rgba(15,23,42,.78);line-height:1.7}
.module-desc ul{margin:8px 0 0 18px}
.module-icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(245,158,11,.12);color:var(--modules-accent,#f59e0b);flex:0 0 26px}
.module-icon svg{width:18px;height:18px}
@media (max-width: 900px){.module-row{grid-template-columns:1fr;gap:8px}.module-title{font-size:16px}}
.modules-container { max-width:1100px; margin:0 auto; }
.module-row { display:grid; grid-template-columns:260px 1fr; gap:40px; padding:25px 0; border-bottom:1px solid #eee; }
.module-title { font-size:20px; font-weight:600; color:#ff7a18; }
.module-desc { font-size:15.5px; line-height:1.7; color:#333; }
.module-desc ul { margin-top:10px; padding-left:20px; }
.module-desc li { margin-bottom:6px; }
@media(max-width:768px){ .module-row{ grid-template-columns:1fr; gap:12px;} }



/* === Professional modules table === */
.modules-container{max-width:1100px;margin:0 auto}
.module-row{display:grid;grid-template-columns:280px 1fr;gap:40px;padding:22px 0;border-bottom:1px solid #eee}
.module-title{font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--modules-accent,#ff7a18)}
.module-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--modules-accent,#ff7a18)}
.module-icon svg{width:22px;height:22px}
.module-desc{font-size:15.5px;line-height:1.7;color:#334155}
@media(max-width:900px){.module-row{grid-template-columns:1fr;gap:10px}}

/* Inline link inside module descriptions (e.g., Momento PDKS cross-link) */
.inline-link{color:var(--modules-accent,#ff7a18);font-weight:800;text-decoration:none;border-bottom:1px solid rgba(255,122,24,.35)}
.inline-link:hover{border-bottom-color:rgba(255,122,24,.75)}



.hardware-strip{ background: rgba(255,255,255,.04); padding: 28px 0 48px; }
.hardware-card{
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 22px 22px 18px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
}
.hardware-card h2{ margin:0 0 8px; font-size: 24px; }
.hardware-card p{ margin:0 0 14px; color:#333; line-height:1.65; }
.hardware-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-content:flex-start;
  justify-content:flex-end;
}
.hb{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-weight: 600;
  font-size: 13px;
  color:#1b1b1b;
}
@media(max-width: 900px){
  .hardware-card{ grid-template-columns: 1fr; }
  .hardware-badges{ justify-content:flex-start; }
}
.feature-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Kart */
.fitem{
  display: flex;              /* İKON + METİN YAN YANA */
  align-items: flex-start;    /* ikon tepe hizası */
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* İkon kutusu */
.ficon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;             /* ikon asla satır kırmaz */
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #1f2a37;             /* ikon rengi */
  background: rgba(31,42,55,.06);
}

/* svg boyutu */
.ficon svg{
  width: 22px;
  height: 22px;
  display: block;
}

/* Metin alanı */
.ftext{ min-width: 0; }       /* uzun metinlerde taşmayı engeller */

.ftitle{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px 0;
}

.fdesc{
  font-size: 16px;
  line-height: 1.45;
  opacity: .85;
  margin: 0;
}

/* Mobilde tek kolona düşsün */
@media (max-width: 860px){
  .feature-grid{ grid-template-columns: 1fr; }
}
/* genel kutu modeli taşma yapmasın */
* { box-sizing: border-box; }

.panel{
  display: block;           /* panel flex ise bunu ez */
  /* eğer flex kullanıyorsan:
  display:flex;
  flex-direction:column;
  */
}

.feature-grid{
  display: grid;
  width: 100%;              /* kritik */
  max-width: 100%;          /* kritik */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fitem{ min-width: 0; }     /* uzun metin vs taşmasın */

/* eduSIS Kolej - two-column feature list (minimal icons) */
.feature-intro{margin:8px 0 14px}
.feature-slogan{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.feature-sub{margin-top:6px;color:rgba(15,26,42,.72);line-height:1.7}
.feature-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.feature-item{display:flex;gap:12px;padding:14px 14px;border:1px solid rgba(15,26,42,.12);border-radius:16px;background:rgba(255,255,255,.92)}
.feature-item svg{width:22px;height:22px;flex:0 0 auto;stroke:#1f8aa2;stroke-width:2;fill:none;opacity:.95;margin-top:2px}
.feature-item .title{font-weight:800;margin:0 0 4px;color:var(--text)}
.feature-item .desc{margin:0;color:rgba(15,26,42,.70);line-height:1.6;font-size:14px}
@media(max-width:820px){.feature-grid2{grid-template-columns:1fr}}

/* SVG ikon güvenli boyutlandırma (tarayıcı varsayılanlarını engelle) */
.feature-grid2 svg,
.feature-grid svg,
.module-table .module-icon svg,
.feature-item svg{width:22px;height:22px;max-width:22px;max-height:22px}

.feature-grid2 svg *,
.feature-grid svg *,
.module-table .module-icon svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Modül haritası: genel özelliklerle aynı genişlikte kalsın */
#moduller .module-map,
#moduller .module-map-light,
#moduller .module-map-radial,
#moduller .modules-container{
  max-width: 1160px;
  width: calc(100% - 40px);
  margin-left: auto;
  margin-right: auto;
}
.modules-container{ max-width:none; } /* eski tanımlar çakışmasın */

.module-map,
.module-map-light,
.module-map-radial,
.modules-container{
  width: min(1160px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
}
/* Arka plan gradient kesilmesin */
main, section{ background: transparent !important; }

/* =========================================================
   PATCH: Modül Haritası genişlik + gradient kesilmesi fix
   (Bunu style.css'in EN ALTINA ekle)
   ========================================================= */

/* 1) Sayfa arka planı her yerde body gradient olarak kalsın */
html, body { min-height: 100%; }
main, section { background: transparent !important; }

/* 2) “container” standart genişliği: her yerde aynı */
.container{
  width: min(1160px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) Panel: beyaz kart kalsın ama sayfaya yayılmasın */
.panel{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,26,42,.10);
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
  padding: 22px;
  overflow: hidden; /* taşma/yan kayma önler */
}

/* 4) Modül Haritası: panel içinde dahi “container” genişliğini geçmesin */
.module-map,
.module-map-light,
.module-map-radial{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* 5) Modül Haritası SVG taşma yapmasın */
.module-map-radial svg{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 6) Eğer herhangi bir yer #fff basıyorsa (ör. modules-section), şeffaf yap */
.modules-section,
.hardware-strip{
  background: transparent !important;
}

/* 7) “modules-container” çakışmalarını iptal et (sende birkaç kez tanımlanmış) */
.modules-container{
   max-width: 1100px !important;
  width: 100% !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
   box-sizing: border-box !important;
}

/* 8) Güvenlik: global overflow-x kapat (sağa taşma olmasın) */
html, body{
  overflow-x: hidden;
}
/* eduSIS Üniversite modül haritası: bulut mavisi vurgu */
.module-map-uni .pill{
  background: rgba(110,203,255,.10);
  border: 1px solid rgba(110,203,255,.22);
  color: rgba(15,26,42,.78);
}
/* Üniversite sayfasında ana butonlar mavi */
body.product-edusis-universite .btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-ui) 90%, white),
    var(--accent-ui)
  );
  box-shadow: 0 14px 32px rgba(103, 185, 246, 0.35);
  border: none;
}

/* Hover efekti */
body.product-edusis-universite .btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
/* =========================================================
   eduSIS Üniversite — Premium UI Pack (ONLY this page)
   Body class: .product-edusis-universite
   ========================================================= */

/* 1) Sayfaya özel bulut mavi aksan */
body.product-edusis-universite{
  --uni1:#7fd2ff;           /* açık bulut mavi */
  --uni2:#3aa7ff;           /* koyu bulut mavi */
  --uniGlow: rgba(58,167,255,.32);
  --uniGlow2: rgba(127,210,255,.22);
  --uniLine: rgba(58,167,255,.18);
  --accent1: var(--uni1);
  --accent2: var(--uni2);
}

/* 2) Üniversite hero arka planını mavi tonlu yap */
body.product-edusis-universite .hero-art{
  background:
    radial-gradient(700px 420px at 28% 30%, rgba(127,210,255,.55), transparent 60%),
    radial-gradient(620px 440px at 75% 55%, rgba(58,167,255,.50), transparent 62%),
    conic-gradient(from 220deg at 60% 40%,
      rgba(127,210,255,.88),
      rgba(58,167,255,.78),
      rgba(27,108,255,.65),
      rgba(127,210,255,.88)
    );
}

/* Hero üstündeki tag/chip’ler biraz daha premium dursun */
body.product-edusis-universite .hero-art .tag,
body.product-edusis-universite .chip{
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.26);
}

/* 3) Kart gölgelerine mavi glow (panel + modül kartları + feature item) */
body.product-edusis-universite .panel{
  box-shadow:
    0 22px 58px rgba(0,0,0,.14),
    0 0 0 1px rgba(15,26,42,.06),
    0 0 40px var(--uniGlow2);
}

/* Genel özellik kartları (fitem) */
body.product-edusis-universite .fitem{
  box-shadow:
    0 14px 34px rgba(15,26,42,.08),
    0 0 0 1px rgba(15,26,42,.05),
    0 0 28px rgba(58,167,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 4) Hover animasyonları (premium hissiyat) */
body.product-edusis-universite .fitem:hover{
  transform: translateY(-3px);
  border-color: rgba(58,167,255,.25);
  box-shadow:
    0 18px 44px rgba(15,26,42,.10),
    0 0 0 1px rgba(58,167,255,.14),
    0 0 46px rgba(58,167,255,.22);
}

/* Modül haritası kutusu hover */
body.product-edusis-universite .module-map-radial{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.product-edusis-universite .module-map-radial:hover{
  transform: translateY(-2px);
  border-color: rgba(58,167,255,.22);
  box-shadow:
    0 20px 52px rgba(15,26,42,.10),
    0 0 56px rgba(58,167,255,.18);
}

/* Modül tablosu satır hover */
body.product-edusis-universite .module-row{
  transition: background .18s ease;
}
body.product-edusis-universite .module-row:hover{
  background: linear-gradient(90deg, rgba(58,167,255,.05), rgba(58,167,255,0));
}

/* Üniversite ikon kutuları mavi olsun */
body.product-edusis-universite .ficon{
  color: rgba(58,167,255,.95);
  background: rgba(58,167,255,.08);
  border: 1px solid rgba(58,167,255,.16);
}
body.product-edusis-universite .module-icon{
  background: rgba(58,167,255,.10);
  color: rgba(58,167,255,.95);
}

/* Butonlar (Demo Talep Et / Mobil sayfa butonu) — sadece üniversite */
body.product-edusis-universite .btn-primary{
  background: linear-gradient(135deg, var(--uni1), var(--uni2));
  box-shadow: 0 18px 40px rgba(58,167,255,.28);
}
body.product-edusis-universite .btn-primary:hover{
  filter: saturate(1.06);
  transform: translateY(-1px);
}

/* Secondary buton biraz mavi cam efekti */
body.product-edusis-universite .btn-secondary{
  border-color: rgba(58,167,255,.18);
  background: rgba(255,255,255,.76);
}
body.product-edusis-universite .btn-secondary:hover{
  border-color: rgba(58,167,255,.28);
  transform: translateY(-1px);
}

/* Link alt çizgisi de mavi */
body.product-edusis-universite .inline-link{
  color: rgba(58,167,255,.98);
  border-bottom-color: rgba(58,167,255,.35);
}
body.product-edusis-universite .inline-link:hover{
  border-bottom-color: rgba(58,167,255,.75);
}

/* 5) Mobil rafine: spacing + tipografi + kart radius */
@media (max-width: 980px){
  body.product-edusis-universite .hero{ padding: 34px 0 14px; }
  body.product-edusis-universite .h1{ font-size: 40px; letter-spacing: -0.6px; }
  body.product-edusis-universite .lead{ font-size: 15.5px; }

  body.product-edusis-universite .panel{
    padding: 18px;
    border-radius: 20px;
  }

  body.product-edusis-universite .fitem{
    padding: 14px;
    border-radius: 16px;
  }

  body.product-edusis-universite .module-row{
    padding: 16px 0;
  }
}

@media (max-width: 520px){
  body.product-edusis-universite .container{ width: min(1160px, calc(100% - 22px)); }
  body.product-edusis-universite .h1{ font-size: 34px; }
  body.product-edusis-universite .btn{ width: 100%; }
  body.product-edusis-universite .cta-row{ gap: 10px; }
}
/* =========================================================
   eduSIS Üniversite — Premium (Glow + Hover)
   Sadece universite sayfasına uygulanır
   ========================================================= */

body.product-edusis-universite{
  /* Bulut mavisi tonları */
  --uni1:#8fd3ff;
  --uni2:#2d8cff;

  /* Glow renkleri */
  --uniGlow1: rgba(143,211,255,.55);
  --uniGlow2: rgba(45,140,255,.35);

  /* Hover shadow */
  --uniShadow: 0 22px 60px rgba(15,26,42,.16);
  --uniShadowHover: 0 30px 80px rgba(15,26,42,.20);
}

/* === Kart Glow: panel + feature + module kartlarında hafif mavi ışık === */
body.product-edusis-universite .panel,
body.product-edusis-universite .fitem,
body.product-edusis-universite .module-row,
body.product-edusis-universite .module-map-radial{
  position: relative;
}

body.product-edusis-universite .panel::before,
body.product-edusis-universite .fitem::before,
body.product-edusis-universite .module-row::before,
body.product-edusis-universite .module-map-radial::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 28px;
  background:
    radial-gradient(60% 60% at 20% 20%, var(--uniGlow1), transparent 60%),
    radial-gradient(70% 70% at 85% 80%, var(--uniGlow2), transparent 62%);
  filter: blur(18px);
  opacity: .28;
  z-index: -1;
  pointer-events:none;
}

/* Panel gölgesini biraz “premium” yap */
body.product-edusis-universite .panel{
  box-shadow: var(--uniShadow);
  border-color: rgba(45,140,255,.14);
}

/* === Hover animasyonları (premium his) === */
body.product-edusis-universite .panel,
body.product-edusis-universite .fitem,
body.product-edusis-universite .module-row{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}

body.product-edusis-universite .panel:hover{
  transform: translateY(-2px);
  box-shadow: var(--uniShadowHover);
  border-color: rgba(45,140,255,.22);
}

body.product-edusis-universite .fitem:hover{
  transform: translateY(-2px);
  border-color: rgba(45,140,255,.22);
  box-shadow: 0 18px 50px rgba(15,26,42,.12);
}

body.product-edusis-universite .module-row:hover{
  transform: translateY(-2px);
  border-color: rgba(45,140,255,.18);
}

/* Glow hover’da biraz artsın */
body.product-edusis-universite .panel:hover::before,
body.product-edusis-universite .fitem:hover::before,
body.product-edusis-universite .module-row:hover::before,
body.product-edusis-universite .module-map-radial:hover::before{
  opacity: .42;
  filter: blur(16px);
}

/* Üniversite sayfasında butonlar cloud mavi (Demo + Mobil buton dahil) */
body.product-edusis-universite .btn-primary{
  background: linear-gradient(135deg, var(--uni1), var(--uni2)) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 44px rgba(45,140,255,.28) !important;
}
body.product-edusis-universite .btn-primary:hover{
  transform: translateY(-1px);
  filter: saturate(1.06);
}

/* (İstersen) ikona da aynı mavi */
body.product-edusis-universite .ficon{
  color: var(--uni2);
  border-color: rgba(45,140,255,.18);
  background: rgba(143,211,255,.16);
}
/* === eduSIS Üniversite: Hero Slider (only this page) === */
body.product-edusis-universite .uni-hero-slider{
  position: relative;
}

/* slider container */
body.product-edusis-universite .uni-slider{
  position:absolute;
  inset:0;
  border-radius:26px;
  overflow:hidden;
}

/* slides */
body.product-edusis-universite .uni-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  transform: none !important;
  transition: opacity .55s ease, transform 1.2s ease;
}

/* active slide */
body.product-edusis-universite .uni-slide.is-active{
  opacity:1;
  transform: none !important;;
}

/* readability overlay */
body.product-edusis-universite .uni-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.12) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}

/* dots */
body.product-edusis-universite .uni-dots{
  position:absolute;
  right:18px;
  bottom:16px;
  display:flex;
  gap:10px;
  z-index:3;
}
body.product-edusis-universite .uni-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  opacity:.85;
}
body.product-edusis-universite .uni-dot.is-active{
  background: rgba(255,255,255,.92);
  opacity:1;
}
/* ================================
   Alt Çözümler kart renk iyileştirme
   ================================ */

/* Kolej = daha koyu turuncu + daha okunur yazı */
.alt-cozumler .card-kolej,
.alt-cozumler .edusis-kolej-card,
.alt-cozumler .product-card.kolej,
.alt-cozumler .product-card.edu {
  color: rgba(255,255,255,.96) !important;
  border-color: rgba(255,255,255,.22) !important;

  /* daha koyu / kontrastlı turuncu */
  background: linear-gradient(
    180deg,
    rgba(255,140,40,.62) 0%,
    rgba(255,106,0,.52) 55%,
    rgba(255,106,0,.38) 100%
  ) !important;
}

/* Kolej kart içindeki açıklama yazıları */
.alt-cozumler .card-kolej p,
.alt-cozumler .edusis-kolej-card p,
.alt-cozumler .product-card.edu p {
  color: rgba(255,255,255,.92) !important;
}

/* Kolej butonları (Sayfayı Aç / Demo) */
.alt-cozumler .card-kolej .btn,
.alt-cozumler .edusis-kolej-card .btn,
.alt-cozumler .product-card.edu .btn {
  color:#fff !important;
  border-color: rgba(255,255,255,.18) !important;
}
.alt-cozumler .card-kolej .btn-primary,
.alt-cozumler .edusis-kolej-card .btn-primary,
.alt-cozumler .product-card.edu .btn-primary {
  background: linear-gradient(135deg, #ff8a1a, #ff5a00) !important;
  box-shadow: 0 16px 34px rgba(255,90,0,.28) !important;
}
.alt-cozumler .card-kolej .btn-secondary,
.alt-cozumler .edusis-kolej-card .btn-secondary,
.alt-cozumler .product-card.edu .btn-secondary {
  background: rgba(255,255,255,.16) !important;
}

/* -------------------------------- */

/* Üniversite = daha koyu bulut mavi + premium */
.alt-cozumler .card-universite,
.alt-cozumler .edusis-universite-card,
.alt-cozumler .product-card.universite,
.alt-cozumler .product-card.uni {
  color: rgba(255,255,255,.96) !important;
  border-color: rgba(255,255,255,.22) !important;

  /* bulut mavi (koyu ama pastel hissi koru) */
  background: linear-gradient(
    180deg,
    rgba(40,140,255,.46) 0%,
    rgba(30,120,235,.38) 55%,
    rgba(20,96,210,.30) 100%
  ) !important;
}

/* Üniversite kart içindeki açıklama yazıları */
.alt-cozumler .card-universite p,
.alt-cozumler .edusis-universite-card p,
.alt-cozumler .product-card.uni p {
  color: rgba(255,255,255,.92) !important;
}

/* Üniversite butonları */
.alt-cozumler .card-universite .btn,
.alt-cozumler .edusis-universite-card .btn,
.alt-cozumler .product-card.uni .btn {
  color:#fff !important;
  border-color: rgba(255,255,255,.18) !important;
}
.alt-cozumler .card-universite .btn-primary,
.alt-cozumler .edusis-universite-card .btn-primary,
.alt-cozumler .product-card.uni .btn-primary {
  background: linear-gradient(135deg, #2f98ff, #1c6fe6) !important;
  box-shadow: 0 16px 34px rgba(28,111,230,.28) !important;
}
.alt-cozumler .card-universite .btn-secondary,
.alt-cozumler .edusis-universite-card .btn-secondary,
.alt-cozumler .product-card.uni .btn-secondary {
  background: rgba(255,255,255,.16) !important;
}

/* Kart içi küçük ikon kutularının da kontrastı artsın */
.alt-cozumler .product-card.edu .pbadge,
.alt-cozumler .product-card.uni .pbadge {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.22) !important;
}
/* ==========================================
   edusis.html > Alt Çözümler kart renk fix
   (inline background'ları !important ile ezer)
   ========================================== */

/* Kolej kartı = 1. kart */
.alt-cozumler .products > article.product-card:nth-child(1){
  background: linear-gradient(180deg,
    rgba(255,140,40,.70) 0%,
    rgba(255,106,0,.56) 55%,
    rgba(255,90,0,.40) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
}

/* Üniversite kartı = 2. kart */
.alt-cozumler .products > article.product-card:nth-child(2){
  background: linear-gradient(180deg,
    rgba(60,160,255,.58) 0%,
    rgba(35,130,245,.44) 55%,
    rgba(25,110,230,.32) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
}

/* Kart içi yazıları beyaz/okunur yap */
.alt-cozumler .product-card .pname,
.alt-cozumler .product-card .ptag,
.alt-cozumler .product-card .desc{
  color: rgba(255,255,255,.94) !important;
}
.alt-cozumler .product-card .ptag{
  opacity: .92 !important;
}
.alt-cozumler .product-card .desc{
  opacity: .92 !important;
}

/* Genel: buton yazıları */
.alt-cozumler .product-card .btn{
  color:#fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Kolej butonları (kart 1) */
.alt-cozumler .products > article.product-card:nth-child(1) .btn-primary{
  background: linear-gradient(135deg, #ff8a1a, #ff5a00) !important;
  box-shadow: 0 16px 34px rgba(255,90,0,.28) !important;
}
.alt-cozumler .products > article.product-card:nth-child(1) .btn-secondary{
  background: rgba(255,255,255,.16) !important;
}

/* Üniversite butonları (kart 2) */
.alt-cozumler .products > article.product-card:nth-child(2) .btn-primary{
  background: linear-gradient(135deg, #2f98ff, #1c6fe6) !important;
  box-shadow: 0 16px 34px rgba(28,111,230,.28) !important;
}
.alt-cozumler .products > article.product-card:nth-child(2) .btn-secondary{
  background: rgba(255,255,255,.16) !important;
}
.product-hero.edu .art {
  background-image: url("../img/edusis-hero.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 28px;
}

/* Hero iki kolon düzeni */
.product-hero .inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* sol biraz geniş, sağ biraz dar */
  gap: 28px;
  align-items: center;
}

/* Sağdaki görsel alanı */
.product-hero .art{
  border-radius: 28px;
  overflow: hidden;              /* KRİTİK: taşmayı keser */
  position: relative;
  height: 520px;                 /* senin tasarıma göre ayarla */
  box-shadow: 0 24px 60px rgba(2,6,23,.25);
  background: rgba(255,255,255,.03);
}

/* Görselin kutuya oturması */
.product-hero .art img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             /* kutuyu doldurur, taşırmaz */
  object-position: center;
}
@media (max-width: 900px){
  .product-hero .inner{
    grid-template-columns: 1fr;
  }
  .product-hero .art{
    height: 360px;
  }
}.hero-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

/* Sağdaki büyük yuvarlatılmış alan */
.hero-mockup {
  width: 520px;
  height: 420px;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    #8c6b4f 0%,
    #d39a5c 100%
  );
  position: relative;
  overflow: hidden;
}

/* Kolejli çocuklar + kart görseli */
.hero-visual {
  position: absolute;
  bottom: -20px;      /* yere basma hissi */
  right: -30px;       /* hafif taşsın */
  height: 110%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.25));
}
 @media (max-width: 992px) {
  .hero-right {
    justify-content: center;
    margin-top: 40px;
  }

  .hero-mockup {
    width: 100%;
    max-width: 420px;
    height: 360px;
  }

  .hero-visual {
    right: -10px;
    height: 105%;
  }
}
.hero-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,.15),
    transparent 40%
  );
  pointer-events: none;
}

/* Ortak kart stili */
.subcard{
  border-radius: 28px;
  padding: 34px 34px 28px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 26px 60px rgba(15,26,42,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Üniversite: koyu, ciddi “cloud blue” */
.subcard--uni{
  background: linear-gradient(180deg,
    rgba(90,130,205,.42) 0%,
    rgba(60,92,155,.45) 35%,
    rgba(35,56,105,.55) 100%);
}

/* Üniversite kartına çok hafif “bulut” sis dokusu */
.subcard--uni::before{
  content:"";
  position:absolute; inset:-40px;
  background:
    radial-gradient(800px 320px at 30% 20%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(700px 260px at 80% 35%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(900px 360px at 40% 85%, rgba(255,255,255,.10), transparent 65%);
  pointer-events:none;
  filter: blur(0.2px);
}

.subcard--uni *{ position: relative; z-index: 1; }
.btn-uni{
  background: linear-gradient(180deg, #1944a2, #093092);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 34px rgba(20,45,110,.35);
}
.btn-uni:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.btn-uni:active{
  transform: translateY(0);
}
.subcard .icon-badge{
  width: 56px; height: 56px;
  border-radius: 16px;              /* daire değil */
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.subcard--uni .icon-badge{
  background: rgba(255,255,255,.14);
}



.subcard svg{
  width: 28px; height: 28px;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.2;
  fill: none;
}
.subcard--kolej svg{
  stroke: rgba(255,255,255,.95);
}
.subcard .card-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.subcard--uni .card-title{
  text-transform: none;
}

.subcard--uni .card-title strong{
  letter-spacing: -0.015em;
}
.subcard .tag,
.subcard .chips,
.subcard .hero-art,
.subcard .hero-cover,
.subcard .hero-mockup{
  display:none !important;
}
.icon-badge{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 24px rgba(15,26,42,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.subcard--uni svg{
  width: 28px;
  height: 28px;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.2;
  fill: none;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-mark{
  width:56px;         /* ekran görüntündeki ölçü gibi */
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.logo-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.logo-mark{
  width:56px;
  height:44px;
  background-image: url("../img/veribilgi-logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border-radius:12px;  /* istersen */
}
.hero-cover{ position: relative; overflow: hidden; }
.hero-cover{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #465f8e 0%,
    #4d6a98 55%,
    #122036 100%
  );
}
.net-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.85;              /* Apple gibi hafif */
  pointer-events:none;       /* tıklamaları engellemesin */
}

.hero-cover .tag,
.hero-cover .chips{
  position:relative;
  z-index:2;
}
.net-canvas{ opacity:.55; transition: opacity .25s ease; }
.hero-cover:hover .net-canvas{ opacity:.9; }
.hero-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 360px at 20% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 420px at 80% 25%, rgba(255,255,255,.08), transparent 65%);
  pointer-events:none;
  z-index:1;
}
.hero-cover{
  position: relative;
  overflow: hidden;
}


.hero-cover{
  background: radial-gradient(
    120% 120% at 50% 20%,
    #1a1a1a 0%,
    #000000 60%
  );
}
.hero-cover{
  background: radial-gradient(
    120% 120% at 50% 20%,
    #1a1a1a 0%,
    #000 60%
  );
}
#netCanvas {
  background: #000;
  /* veya */
  background: rgb(0, 0, 0);
}
.pbadge{
  width: 40px; 
  height: 40px; 
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.16);
  display: flex; 
  align-items: center; 
  justify-content: center;
  padding: 0; /* ÖNEMLİ: 7px değil, 0 olmalı */
  overflow: hidden;
}

.product-card .plogo{
  background: transparent; /* ÖNEMLİ: #fff değil, transparent */
  border-radius: 14px;
  padding: 0; /* ÖNEMLİ: 10px değil, 0 olmalı */
  box-shadow: none; /* veya kaldırın */
  width: 100%; /* ÖNEMLİ: 52px değil, 100% */
  height: 100%; /* ÖNEMLİ: 52px değil, 100% */
  object-fit: cover; /* veya contain */
  display: block;
}





/* =========================
   Veribilgi — YENI TEMA 
  
   Requires: <body class="vb-theme">
   ========================= */

:root{
  /* ---- Core palette (edit these) ---- */
  --vb-page-bg:    #EAF1FF;                 /* page background */
  --vb-surface:    #0F2438;                 /* cards/panels surface */
  --vb-text:       #0F2438;                /* arkaplan üstündeki metinler */
  --vb-head:       #0F2438;                 /* başlık */
  --vb-muted:      rgb(255, 255, 255);   /* secondary text */
  --vb-accent:     #278a90;                 /* accent color */

  /* ---- Borders & shadow (edit these) ---- */
  --vb-border:     rgba(255,255,255,.12);
  --vb-shadow:     0 12px 30px rgba(0,0,0,.35);

  /* ---- Footer specific (optional edits) ---- */
  --vb-footer-bg:  #0F2438;
  --vb-footer-text: #EAF1FF;
  --vb-footer-muted: var(--vb-muted);

  /* ---- Buttons (optional edits) ---- */
  --vb-btn-bg:       transparent;
  --vb-btn-text:     var(--vb-accent);
  --vb-btn-border:   var(--vb-accent);
  --vb-btn-hover-bg: rgba(30,202,211,.08);
}

/* =========================
   PAGE (background + base text)
   ========================= */
body.vb-theme{
  background: var(--vb-page-bg) !important;
  color: var(--vb-text) !important;
}

/* If any global "small/muted" text disappears, catch it here */
body.vb-theme .muted,
body.vb-theme .small{
  color: var(--vb-muted) !important;
}

/* =========================
   HEADERS / TITLES
   - section titles, card titles, product name titles
   ========================= */
body.vb-theme h1,
body.vb-theme h2,
body.vb-theme h3,
body.vb-theme h4,
body.vb-theme .section-title{
  color: var(--vb-head) !important;
}

/* Product card titles in your HTML are `.pname` (not h3) */
body.vb-theme .product-card .pname{
  color: #ffffff !important;
}

/* =========================
   CARDS / SURFACES
   - card, product-card, panel, etc.
   ========================= */
body.vb-theme .card,
body.vb-theme .product-card,
body.vb-theme .urun-card,
body.vb-theme .grid-card,
body.vb-theme .panel,
body.vb-theme .section-card{
  background: var(--vb-surface) !important;
  color: var(--vb-text) !important;
  border: 1px solid var(--vb-border) !important;
  box-shadow: var(--vb-shadow) !important;
  background-image: none !important; /* kills gradients if any */
}


/* Card inner text */
body.vb-theme .card p,
body.vb-theme .product-card p,
body.vb-theme .urun-card p,
body.vb-theme .grid-card p,
body.vb-theme .card .desc,
body.vb-theme .product-card .desc,
body.vb-theme .urun-card .desc{
  color: var(--vb-muted) !important;
}

/* =========================
   ACCENT LINKS
   ========================= */
body.vb-theme a{
  color: var(--vb-accent);
}
body.vb-theme a:hover{
  color: var(--vb-accent);
  filter: brightness(1.05);
}

/* =========================
   BUTTONS (general catch)
   ========================= */
body.vb-theme a.btn,
body.vb-theme button.btn,
body.vb-theme .btn,
body.vb-theme .btn-primary,
body.vb-theme .cta,
body.vb-theme .cta-btn{
  background: var(--vb-btn-bg) !important;
  color: var(--vb-btn-text) !important;
  border: 1px solid var(--vb-btn-border) !important;
  box-shadow: none !important;
}

body.vb-theme a.btn:hover,
body.vb-theme button.btn:hover,
body.vb-theme .btn:hover,
body.vb-theme .btn-primary:hover,
body.vb-theme .cta:hover,
body.vb-theme .cta-btn:hover{
  background: var(--vb-btn-hover-bg) !important;
}

body.vb-theme .btn:focus-visible,
body.vb-theme a.btn:focus-visible,
body.vb-theme button.btn:focus-visible{
  outline: 3px solid rgba(30,202,211,.35);
  outline-offset: 2px;
}

/* =========================
   FOOTER (fix disappearing footer)
   ========================= */
body.vb-theme .footer{
  background: var(--vb-footer-bg) !important;
  color: var(--vb-footer-text) !important;
  border-top: 1px solid var(--vb-border) !important;
}

body.vb-theme .footer .small{
  color: var(--vb-footer-muted) !important;
}

body.vb-theme .footer a{
  color: var(--vb-accent) !important;
}

/* Sticky footer layout */
html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* footer main içindeyken en alta iter */
main > footer.footer{
  margin-top: auto;
}


/* =========================
   OPTIONAL: Brand buttons/classes
   If your original CSS has brand-specific gradients/colors,
   you can normalize them here:
   ========================= */
body.vb-theme .btn-mom,
body.vb-theme .btn-edu,
body.vb-theme .btn-bart,
body.vb-theme .btn-quant,
body.vb-theme .btn-snap,
body.vb-theme .btn-vpoint{
  background: var(--vb-btn-bg) !important;
  color: var(--vb-btn-text) !important;
  border: 1px solid var(--vb-btn-border) !important;
  box-shadow: none !important;
}

/* Also neutralize brand card variants if needed */
body.vb-theme .product-card.momento,
body.vb-theme .product-card.edu,
body.vb-theme .product-card.bartes,
body.vb-theme .product-card.quant,
body.vb-theme .product-card.snapkart,
body.vb-theme .product-card.vpoint{
  background: var(--vb-surface) !important;
  background-image: none !important;
}



/* =========================
   About section — text system (scoped)
   ========================= */
body.vb-theme .about-copy{
  /* Bu section'a özel metin token’ları (tek yerden yönet) */
  --sec-text:  var(--vb-text);
  --sec-muted: var(--vb-muted);
  --sec-head:  var(--vb-head);
  --sec-link:  var(--vb-accent);

  --sec-line:  1.7;
  --sec-p-size: 16px;
  --sec-h2-size: 22px;
}

/* Section baz rengi */
body.vb-theme .about-copy{
  color: var(--sec-text);
}

/* Başlıklar */
body.vb-theme .about-copy h2{
  color: var(--sec-head);
  margin: 0 0 10px;
  font-size: var(--sec-h2-size);
}

/* Paragraflar (tüm metin ayarı burada) */
body.vb-theme .about-copy p{
  color: var(--sec-muted);
  line-height: var(--sec-line);
  margin: 0;
  font-size: var(--sec-p-size);
}

/* Link ve kalın metinler */
body.vb-theme .about-copy a{ color: var(--sec-link); }
body.vb-theme .about-copy strong{ color: var(--sec-text); }

/* Panel arası boşluk (inline margin-top yerine) */
body.vb-theme .about-copy .panel + .panel{
  margin-top: 14px;
}


/* Hakkımızda sayfası - panel başlık renkleri */
body.vb-theme .about-copy .panel h2{
  color: #ffffff !important; /* istediğin renk */
}



/* =========================
   Veribilgi — Enterprise Blue Theme (scoped override)
   Page scope: .vb-urun-sayfa
   ========================= */

body.vb-theme.vb-urun-sayfa{
  /* Theme tokens (burayı değiştirerek tüm sayfayı yönetirsin) */
  --vb-bg:     #0B1A2A;                 /* page background */
  --vb-card:   #0F2438;                 /* cards/panels */
  --vb-head:   rgba(0, 0, 0, 0.92);   /* headings */
  --vb-text:   rgba(255,255,255,.86);   /* normal text */
  --vb-muted:  rgba(255,255,255,.80);   /* muted text (senin istediğin) */
  --vb-accent: #278a90;                 /* accent */
  --vb-border: rgba(255,255,255,.12);
  --vb-shadow: 0 12px 30px rgba(0,0,0,.35);

  background: var(--vb-bg);
  color: var(--vb-text);
}

/* Genel metin yönetimi (özellikle <section class="section"> içinde) */
body.vb-theme.vb-edusis-mobil .section{
  color: var(--vb-text);
}
body.vb-theme.vb-edusis-mobil .section p,
body.vb-theme.vb-edusis-mobil .section li,
body.vb-theme.vb-edusis-mobil .section .small{
  color: var(--vb-muted);
}

/* Headings */
body.vb-theme.vb-edusis-mobil h1,
body.vb-theme.vb-edusis-mobil h2,
body.vb-theme.vb-edusis-mobil h3{
  color: var(--vb-head);
}

/* Cards / Panels */
body.vb-theme.vb-edusis-mobil .card,
body.vb-theme.vb-edusis-mobil .product-card,
body.vb-theme.vb-edusis-mobil .urun-card,
body.vb-theme.vb-edusis-mobil .grid-card,
body.vb-theme.vb-edusis-mobil .panel,
body.vb-theme.vb-edusis-mobil .section-card{
  background: var(--vb-card);
  border: 1px solid var(--vb-border);
  box-shadow: var(--vb-shadow);
}

/* Buttons */
body.vb-theme.vb-edusis-mobil a.btn,
body.vb-theme.vb-edusis-mobil button.btn,
body.vb-theme.vb-edusis-mobil .btn,
body.vb-theme.vb-edusis-mobil .btn-primary,
body.vb-theme.vb-edusis-mobil .cta,
body.vb-theme.vb-edusis-mobil .cta-btn{
  background: transparent;
  color: var(--vb-accent);
  border: 1px solid var(--vb-accent);
  box-shadow: none;
}
body.vb-theme.vb-edusis-mobil a.btn:hover,
body.vb-theme.vb-edusis-mobil .btn:hover{
  background: rgba(30,202,211,.08);
}

/* Footer okunurluğu */
body.vb-theme.vb-edusis-mobil .footer,
body.vb-theme.vb-edusis-mobil .footer a{
  color: var(--vb-muted);
}
body.vb-theme.vb-edusis-mobil .footer a:hover{
  color: var(--vb-head);
}

body.vb-theme.vb-urun-sayfa .panel .muted{
  color: rgba(255,255,255,.80) !important;
}




.header .brand .logo-mark::after{
  content: "";
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  background: url("assets/img/veribilgi-logo.png") center / contain no-repeat;
}


/* Logo kutusu: sağ/sol genişlet */
.header .brand .logo-mark{
  width: 58px !important;   /* ← sağ-sol genişlik (46px → 58px gibi) */
  height: 34px !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

/* Görsel: alanı doldur */
.header .brand .logo-mark .logo-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  object-fit: contain;   /* kutuyu doldurur (kırpma olabilir) */
  /* object-fit: contain; */ /* kırpma olmasın, tamamen görünsün (boşluk kalabilir) */

  position: relative;
  z-index: 1;
}


.header .brand .logo-mark::before{
  left: -10px !important;   /* ← sola daha fazla taş */
  right: -10px !important;  /* → sağa daha fazla taş */
  top: -1px;
  bottom: -1px;
  z-index: 0;
}

.header .brand .logo-mark .logo-img{
  border-radius: 10px;
}




@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .h1{font-size:42px}
  .nav{display:none}
  details.nav-mobile{display:block}
  .products{grid-template-columns:1fr}
  .products.row2{grid-template-columns:repeat(3,1fr); width:100%; margin:0}
.usecases{grid-template-columns:1fr 1fr}
  .product-hero .inner{grid-template-columns:1fr}
  .checkgrid{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
}
@media (max-width:520px){
  .container{width:min(1160px, calc(100% - 26px))}
  .h1{font-size:38px}
  .brand-sub{display:none} 
  .usecases{grid-template-columns:1fr}
}

/* ===========================
   nav-mobile (UPDATED)
   =========================== */
details.nav-mobile{display:none}
details.nav-mobile summary{
  list-style:none; cursor:pointer;
  padding:10px 12px; border-radius:12px;
  border:1px solid #278a90;
  background:#0F2438; font-weight:900;
  color: #278a90;
}
details.nav-mobile summary::-webkit-details-marker{display:none}
details.nav-mobile .panel{
  background: rgba(14,18,28,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.40);
  color: rgba(240,248,255,.94);
}

details.nav-mobile a{
  color: rgba(240,248,255,.94);
  background: rgba(255, 255, 255, 0);
}
details.nav-mobile a:hover{
  background: rgba(255,255,255,.10);
}



/* Tarayıcı marker'ını gizle */
details.nav-mobile summary::-webkit-details-marker{display:none}

/* Dış çerçeve (frame) */
details.nav-mobile summary::before{
  content:"";
  position:absolute;
  inset:-3px;                 /* dışarı taşan frame */
  border-radius:14px;         /* summary’den az büyük */
  border:1px solid rgba(15,26,42,.10);
  pointer-events:none;
}

/* Ok ikonu */
details.nav-mobile summary::after{
  content:"▾";
  margin-left:8px;
  font-size:12px;
  opacity:.75;
  transform: translateY(-1px);
}

/* Açıkken stil */
details.nav-mobile[open] summary{
  background: var(--navBtnBgOpen, #0F2438);
  border-color: var(--navBtnBorderOpen, rgba(15,26,42,.22));
}
details.nav-mobile[open] summary::after{ content:"▴"; opacity:.9; }
details.nav-mobile[open] summary::before{
  border-color: rgba(120,180,255,.40); /* hafif “aktif” çerçeve */
}

/* Panel: mobilde navbarın DIŞINA açılacak (absolute) */
details.nav-mobile .panel{
  position:absolute;
  top: calc(100% + 10px);
  right:0;

  margin-top:0;              /* artık gerek yok */
  padding:10px;
  border-radius:14px;

   background: rgba(14,18,28,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.40);
  color: rgba(240,248,255,.94);

  z-index: 9999;             /* hero vs üstünde kalsın */
  min-width: 220px;
}

details.nav-mobile a{
  display:block;
  padding:9px 10px;
  border-radius:12px;
  font-weight:700;
  color: rgba(240,248,255,.94);
/*  background: rgba(255,255,255,.06);  */
  text-decoration:none;
}
details.nav-mobile a:hover{ background: rgba(15,26,42,.06); }

/* ===========================
   Mobile breakpoint
   =========================== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .h1{font-size:42px}
  .nav{display:none}
  details.nav-mobile{display:block}
  .products{grid-template-columns:1fr}
  .products.row2{grid-template-columns:repeat(3,1fr); width:100%; margin:0}
  .usecases{grid-template-columns:1fr 1fr}
  .product-hero .inner{grid-template-columns:1fr}
  .checkgrid{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}

  /* Panel “dışarı” açılırken kesilmesin:
     Eğer header/inner'da overflow:hidden varsa dropdown kırpılır. */
  .header, .header .header-inner{ overflow: visible; }

  /* eduSIS ürün sayfası: Alt Çözümler kartları mobilde alt alta */
  body.vb-urun-sayfa .section .products{
    grid-template-columns: 1fr !important; /* inline grid-template-columns'ı ezer */
    gap: 12px !important;
  }

  /* Kart içi boşluklar biraz daha “mobil” */
  body.vb-urun-sayfa .section .product-card{
    padding: 14px !important;
  }

  /* Butonları alt alta, tam genişlik (parmak hedefi büyük olsun) */
  body.vb-urun-sayfa .section .product-card .actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.vb-urun-sayfa .section .product-card .actions .btn{
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Başlık/etiket okunurluğu (isteğe bağlı) */
  body.vb-urun-sayfa .section .product-card .pname{ font-size: 18px; }
  body.vb-urun-sayfa .section .product-card .ptag{ opacity: .9; }

  /* 1) Feature grid: tüm öğeler alt alta (tek kolon) */
  body.vb-urun-sayfa .section .feature-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* 2) Her item: ikon üstte, metin altta (daha temiz mobil görünüm) */
  body.vb-urun-sayfa .section .fitem{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* 3) Metin bloğu tam genişlik */
  body.vb-urun-sayfa .section .ftext{
    width: 100%;
  }

  /* 4) Tipografi biraz sıkı ve okunur */
  body.vb-urun-sayfa .section .ftitle{
    font-size: 16px;
    line-height: 1.2;
  }
  body.vb-urun-sayfa .section .fdesc{
    font-size: 14px;
    line-height: 1.6;
  }
}


/*. ÜRÜN HERO-ART ALANLARI SLIDER  .*/

/* Hero slider container */
.hero-slider{
  position: relative;
  height: 340px;          /* mevcut hero yüksekliğin */
  overflow: hidden;
  border-radius: 18px;
}

/* Slide'lar üst üste (fade) */
.hero-slider .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}

.hero-slider .hero-slide.is-active{
  opacity: 1;
}

/* Frame tabanı: görselden çıkarılan renk buraya gelecek */
.hero-slider .hero-frame{
  position: relative;
  overflow: hidden;                 /* blur taşmasın */
  background: var(--hero-bg, transparent);
}


/* Ön plan: kırpmadan göster, oranı koru */
.hero-slider .hero-frame > img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;              /* tam görünsün, kenar boşluğu blur ile dolacak */
}



/* Oklar */
.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
}

.hero-arrow.prev{ left: 10px; }
.hero-arrow.next{ right: 10px; }


/* Pseudo katmanların kesin görünmesi için */
.hero-slider .hero-frame.hero-slide{
  position: absolute;     /* slide kuralınla uyumlu */
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;     /* stacking karmaşasını keser */
}

/* Blur katman en altta */
.hero-slider .hero-frame.hero-slide::before{
  z-index: 0;
  pointer-events: none;
}

/* Overlay onun üstünde */
.hero-slider .hero-frame.hero-slide::after{
  z-index: 1;
  pointer-events: none;
}

/* Görsel en üstte */
.hero-slider .hero-frame.hero-slide > img{
  z-index: 2;
  background: transparent !important; /* Sebep-2’ye de ilaç */
}




/* =========================
   PRODUCT HERO SLIDER (FINAL)
   - bg: aynı görselin blur'u (boşlukları doldurur)
   - fg: oran bozulmadan contain
   - fg kenarları: yumuşak geçiş (feather)
   - fg ile bg birleşimi: kenarlarda hafif blur padding hissi
   - metin: sol-alt
   ========================= */

.product-hero--cover{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  min-height: clamp(340px, 42vw, 560px);
}

/* Slider katmanı */
.product-hero--cover .hero-slider--cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;

  /* fallback zemin */
  background: radial-gradient(900px 520px at 20% 20%,
              rgba(30,60,120,.35),
              rgba(8,10,18,1) 60%);

              
}

/* Slide’lar üst üste */
.product-hero--cover .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease;
  isolation: isolate; /* z-index temiz */
}

.product-hero--cover .hero-slide.is-active{ opacity: 1; }

/* 1) Blur arka plan: aynı görsel cover+blur (boşlukları doldurur) */
.product-hero--cover .hero-slide::before{
  content:"";
  position:absolute;
  inset:-18%;
  background-image: var(--slide-img);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.02);
  opacity:.55;
  transform: scale(1.08);
  z-index:0;
  pointer-events:none;
}

/* Media sarmalı: sağa yaslı */
.product-hero--cover .hero-media{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: auto;
  max-width: 100%;

  display: flex;
  align-items: center;

  z-index: 2; /* bg üstünde */

}

/* Görsel dikine (portrait) ise: slider içinde ortala */
.product-hero--cover .hero-slide.is-portrait .hero-media{
  left: 0;
  right: 0;
  width: 100%;
  justify-content: center;  /* sağa yaslamayı iptal, ortala */
}

/* Portrait görsel: merkezde, oran bozulmadan */
.product-hero--cover .hero-slide.is-portrait .hero-media > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Portrait’ta soldaki ekstra birleşim bandı görüntüyü bozmasın */
.product-hero--cover .hero-slide.is-portrait .hero-media::after{
  display: none;
}


/* 2) Görsel: oran bozulmaz, taşmaz */
.product-hero--cover .hero-media > img{
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;

  --fade-left: 70px;

  --edge: 54px; /* yumuşama kalınlığı */

  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--edge),
    #000 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 var(--edge),
    #000 100%);

  /* İstersen üst/altı da hafif yumuşat (dikdörtgen) */
  --edge-y: 18px;
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0, #000 var(--edge), #000 100%),
    linear-gradient(to bottom,
      transparent 0, #000 var(--edge-y),
      #000 calc(100% - var(--edge-y)), transparent 100%);
  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(to right,
      transparent 0, #000 var(--edge), #000 100%),
    linear-gradient(to bottom,
      transparent 0, #000 var(--edge-y),
      #000 calc(100% - var(--edge-y)), transparent 100%);
  mask-composite: intersect;
  --fade-left: 70px;
  --fade-y: 18px;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade-y),
                    #000 calc(100% - var(--fade-y)), transparent 100%);
  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fade-y),
                    #000 calc(100% - var(--fade-y)), transparent 100%);
  mask-composite: intersect;
  
}


/* 3) Görsel ile slider kenarı arasında “ince blur boşluk” etkisi
   - Görselin dört kenarında küçük bir halo/blur tampon hissi verir.
   - backdrop-filter burada arka planı blur'layarak “karışım” yaratır.
*/
.product-hero--cover .hero-media::before{
  content:"";
  position:absolute;
  inset: 8px;              /* <-- tampon kalınlığı: büyüt/küçült */
  border-radius: 22px;

  /* çok hafif bir aydınlatma + cam etkisi */
  background: rgba(255,255,255,.02);

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  /* görselin üstüne binmesin: altta kalsın */
  z-index: 0;
  pointer-events: none;
}

/* Görsel, bu halo'nun üstünde */
.product-hero--cover .hero-media > img{ position: relative; z-index: 1; }

/* 4) Görselin sol birleşim çizgisinde ekstra “yumuşak geçiş şeridi”
   - Bu, özellikle solda blur alanla birleşimi daha silky yapar.
*/
.product-hero--cover .hero-media::after{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: -1px;

  width: clamp(70px, 7vw, 120px); /* bandı biraz incelt */
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.12) 45%,
    rgba(0,0,0,0) 100%
  );

  /* BLUR'U KAPAT */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  pointer-events: none;
}


/* Metin: sol-alt */
.product-hero--cover .hero-content{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  padding: 18px;
  width: min(680px, calc(100% - 36px));
}

/* Metin paneli: saydama yakın */
.product-hero--cover .hero-content > div{
  padding: 18px 18px 16px;
  border-radius: 18px;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);

  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

/* Oklar */
.product-hero--cover .hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
}

.product-hero--cover .hero-arrow.prev{ left: 12px; }
.product-hero--cover .hero-arrow.next{ right: 12px; }

@media (max-width: 820px){

  /* HERO: mobilde alt alta */
  .product-hero--cover{
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Slider artık akış içinde */
  .product-hero--cover .hero-slider--cover{
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(220px, 55vw, 320px);
    border-radius: 26px 26px 0 0;
  }
  .product-hero--cover .hero-slider--cover.has-portrait{
    height: clamp(320px, 88vw, 540px);
  }
  /* Geçişte hafif kararma/açılma overlay’i */
.product-hero--cover .hero-slider--cover::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7; /* oklar(6) üstü istersen 5 yap */
  pointer-events: none;

  background: rgba(0,0,0,0);
  opacity: 0;
  transition: opacity .42s ease;
}

/* Tetiklenince kısa süre kararır */
.product-hero--cover .hero-slider--cover.is-dimming::after{
  opacity: 1;
  background: rgba(0,0,0,.18); /* kararma şiddeti */
}


  /* Metin: slider’ın altında ayrı alan */
  .product-hero--cover .hero-content{
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 5;

    width: 100%;
    padding: 12px;
  }

  /* Metin paneli (font-size’a dokunmuyor) */
  .product-hero--cover .hero-content > div{
    border-radius: 0 0 26px 26px;
    background: rgba(15,36,56,.68);
    border: 1px solid rgba(255,255,255,.12);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Görseli ortala */
  .product-hero--cover .hero-media{
    left: 0;
    right: 0;
    width: 100%;
    justify-content: center;
  }

  /* Görsel: contain + center + iki yanda saydam geçiş */
  .product-hero--cover .hero-media > img{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;
    object-position: center;

    /* Blur’un iki yanda görünmesi için kenar erimesi */
    --fade-side: 56px;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade-side),
      #000 calc(100% - var(--fade-side)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade-side),
      #000 calc(100% - var(--fade-side)),
      transparent 100%
    );
  }

  /* Mobilde ekstra sol birleşim bandını kapat (double blur olmasın) */
  .product-hero--cover .hero-media::after{
    display: none;
  }

  /* Mobilde halo/tampon blur çok geliyorsa biraz incelt */
  .product-hero--cover .hero-media::before{
    inset: 8px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* URUN SAYFASI BASLIK IKONU
/* Başlık + yuvarlak ikon */
.product-hero--cover .hero-title{
  display: inline-flex;
  align-items: center;
  gap: .45em;
}

/* İkon boyutu fontu aşmasın: 1em */
.product-hero--cover .hero-title__icon{
  width: 1em;
  height: 1em;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;

  /* Görsel transparansa sahipse daha temiz dursun diye */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}



/* --- Ken Burns: portrait -> zoom IN, landscape -> zoom OUT --- */
@keyframes heroZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@keyframes heroZoomOut {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Sadece aktif slide’da çalışsın */
.product-hero--cover .hero-slide.is-active .hero-media > img{
  will-change: transform;
  transform-origin: center center;
}

/* Portrait: yavaşça zoom in */
.product-hero--cover .hero-slide.is-active.is-portrait .hero-media > img{
  animation: heroZoomIn 6.8s ease-in-out both;
}

/* Landscape: yavaşça zoom out */
.product-hero--cover .hero-slide.is-active.is-landscape .hero-media > img{
  animation: heroZoomOut 6.8s ease-in-out both;
}

/* Hareket azaltma tercihi varsa animasyon yok */
@media (prefers-reduced-motion: reduce){
  .product-hero--cover .hero-slide.is-active .hero-media > img{
    animation: none !important;
    transform: none !important;
  }
}



/* ===== Ürün Dokümanı (vb-urun-sayfa) — İndirilebilir içerikler ===== */

/* Tipografi (sayfaya özel) */
.vb-urun-sayfa{
  --dl-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Buton rengi (kolay değiştir) */
  --dl-btn-bg: rgba(63, 157, 255, .18);
  --dl-btn-bg-hover: rgba(63, 157, 255, .28);
  --dl-btn-border: rgba(63, 157, 255, .55);
  --dl-btn-text: rgba(255,255,255,.96);

  /* Kart hover parıltısı */
  --dl-glow-a: rgba(120, 210, 255, .22);
  --dl-glow-b: rgba(255, 170, 110, .14);
}

.vb-urun-sayfa .panel,
.vb-urun-sayfa .panel h1,
.vb-urun-sayfa .panel h2,
.vb-urun-sayfa .panel p{
  font-family: var(--dl-font);
}

/* Grid */
.vb-urun-sayfa .download-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 260px)); /* max genişlik sabit */
  gap: 14px;
  justify-content: start; /* soldan diz */
}

/* Kart */
.vb-urun-sayfa .download-card{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

/* Hover parıltı katmanı (içerik üstte kalsın) */
.vb-urun-sayfa .download-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 18% 0%, var(--dl-glow-a), transparent 60%),
    radial-gradient(520px 220px at 82% 110%, var(--dl-glow-b), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.vb-urun-sayfa .download-card > *{
  position: relative;
  z-index: 1;
}

.vb-urun-sayfa .download-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 75px rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.075);
}

.vb-urun-sayfa .download-card:hover::before{
  opacity: 1;
}

/* ===== PDF Önizleme (thumbnail) ===== */
.vb-urun-sayfa .download-preview{
  display: block;
  text-decoration: none;
  color: inherit;

  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);

  aspect-ratio: 210 / 297; /* A4 benzeri */
  position: relative;
}

/* köşede küçük etiket */
.vb-urun-sayfa .download-preview::after{
  content: "ÖNİZLEME";
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;

  padding: 4px 8px;
  border-radius: 999px;

  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  pointer-events: none;
}

.vb-urun-sayfa .download-preview img{
  width: 100%;
  height: 100%;
  display: block;

  /* Kart alanını tamamen doldursun (kenar kırpma olabilir) */
  object-fit: cover;
  object-position: top center;

  background: transparent;
}

/* Hover hissi (kart hover’ına uyumlu) */
.vb-urun-sayfa .download-card:hover .download-preview{
  transform: translateY(-1px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.20);
}

/* Başlık + açıklama */
.vb-urun-sayfa .download-title{
  display:flex;
  align-items:flex-start;
  gap:10px;

  font-weight: 800;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.25px;

  color: rgba(255,255,255,.98);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.vb-urun-sayfa .download-title__text{
  flex: 1;
}

.vb-urun-sayfa .download-desc{
  margin: 8px 0 14px;
  color: rgba(255,255,255,.84);
  line-height: 1.65;
}

/* Küçük PDF etiketi */
.vb-urun-sayfa .download-pill{
  flex:0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;

  padding: 4px 9px;
  border-radius: 999px;

  background: rgba(63,157,255,.18);
  border: 1px solid rgba(63,157,255,.55);
  color: rgba(255,255,255,.92);
}

/* Buton alanı kartın en altında kalsın */
.vb-urun-sayfa .download-actions{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}

/* PDF İndir butonu */
.vb-urun-sayfa .download-btn{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  text-align: center;

  background: var(--dl-btn-bg) !important;
  border: 1px solid var(--dl-btn-border) !important;
  color: var(--dl-btn-text) !important;

  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.vb-urun-sayfa .download-btn:hover{
  background: var(--dl-btn-bg-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
  filter: saturate(1.06);
}

@media (max-width: 520px){
  .vb-urun-sayfa .download-card{ padding: 14px; }
  .vb-urun-sayfa .download-preview{ margin-bottom: 10px; }
}

/* Tek kart varsa dar görünmesin */
.vb-urun-sayfa .download-grid > .download-card:only-child{
  max-width: 320px;
  width: 100%;
  justify-self: start;
}

/* ===== Dokümanlar - tek kart link (tüm alan tıklanır) ===== */
#dokumanlar .docs--single{ margin-top: 14px; }

#dokumanlar .doc--hub-link{
  display: block;
  text-decoration: none;
  color: inherit;

  position: relative;
  overflow: hidden;

  padding: 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.085);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

#dokumanlar .doc--hub-link::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(520px 220px at 82% 110%, rgba(255,255,255,.10), transparent 60%);
  opacity: .35;
  transition: opacity .18s ease;
  pointer-events: none;
}

#dokumanlar .doc--hub-link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

#dokumanlar .doc--hub-link:hover::before{ opacity: .55; }

#dokumanlar .doc__head{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

#dokumanlar .doc__title{
  margin: 0;
  flex: 1;
  font-weight: 850;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.25px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#dokumanlar .doc__pill{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
}

#dokumanlar .doc__desc{
  margin: 10px 0 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.65;
}

#dokumanlar .doc__footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

#dokumanlar .doc__arrow{
  opacity: .9;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}

#dokumanlar .doc--hub-link:hover .doc__arrow{
  transform: translateX(3px);
  opacity: 1;
}

#dokumanlar .doc--hub-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* ===== PDKS Tanım Alanı (Genel Özellikler üstü) ===== */
.vb-urun-sayfa .pdks-intro-card{
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 18px;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);

  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);

  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.vb-urun-sayfa .pdks-intro-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(120, 210, 255, .18), transparent 60%),
    radial-gradient(520px 220px at 82% 110%, rgba(255, 170, 110, .12), transparent 60%);
  opacity: .60;
  pointer-events: none;
}

.vb-urun-sayfa .pdks-intro-card > *{
  position: relative;
  z-index: 1;
}

.vb-urun-sayfa .pdks-intro-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.vb-urun-sayfa .pdks-intro-title{
  margin: 0;
  font-weight: 850;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.25px;
  color: rgba(255,255,255,.98);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.vb-urun-sayfa .pdks-intro-pill{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(63,157,255,.18);
  border: 1px solid rgba(63,157,255,.55);
  color: rgba(255,255,255,.92);

  white-space: nowrap;
  margin-top: 2px;
}

.vb-urun-sayfa .pdks-intro-text{
  margin: 10px 0 0;
  color: rgba(255,255,255,.86);
  line-height: 1.75;
  max-width: 980px;
}

.vb-urun-sayfa .pdks-intro-text + .pdks-intro-text{
  margin-top: 10px;
}

@media (max-width: 680px){
  .vb-urun-sayfa .pdks-intro-card{ padding: 14px; }
  .vb-urun-sayfa .pdks-intro-head{ flex-direction: column; gap: 8px; }
  .vb-urun-sayfa .pdks-intro-title{ font-size: 18px; }
  .vb-urun-sayfa .pdks-intro-pill{ align-self: flex-start; }
}

/* =========================
   BLOG / HABER KARTLARI + MODAL
   (blog.html -> body.vb-blog)
   ========================= */

/* Modal açıkken scroll kilidi */
html.vb-modal-open,
html.vb-modal-open body{
  overflow: hidden;
}

/* Başlık paneli */
.vb-blog .vb-news-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}

/* Grid */
.vb-blog .vb-news-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .vb-blog .vb-news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .vb-blog .vb-news-grid{ grid-template-columns: 1fr; }
}

/* Kart */
.vb-blog .vb-news-card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  cursor: pointer;

  display:flex;
  flex-direction: column;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.vb-blog .vb-news-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 75px rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.075);
}

/* Klavye ile seçim net olsun */
.vb-blog .vb-news-card:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* Kart görseli */
.vb-blog .vb-news-card__media{
  position: relative;
  height: 160px;
  background:
    radial-gradient(520px 220px at 18% 0%, rgba(120,210,255,.22), transparent 60%),
    radial-gradient(520px 220px at 82% 110%, rgba(255,170,110,.14), transparent 60%),
    rgba(0,0,0,.22);
}

/* Görsel varsa: hafif blur “cover” zemin + net fg */
.vb-blog .vb-news-card__media::before{
  content:"";
  position:absolute;
  inset:-12%;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  filter: blur(12px) saturate(1.05);
  opacity: .55;
  transform: scale(1.06);
  pointer-events:none;
}

.vb-blog .vb-news-card__mediaInner{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.vb-blog .vb-news-card__mediaInner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Kart body */
.vb-blog .vb-news-card__body{
  padding: 14px 14px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.vb-blog .vb-news-card__meta{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #0e3559;
}

.vb-blog .vb-news-card__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: -0.2px;
  color: black;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.vb-blog .vb-news-card__excerpt{
  margin: 0;
  color: #0e3559;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vb-blog .vb-news-card__footer{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);

  display:flex;
  align-items:center;
  justify-content: space-between;

  color: rgba(255,255,255,.92);
  font-weight: 800;
}

.vb-blog .vb-news-card__arrow{
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
}

.vb-blog .vb-news-card:hover .vb-news-card__arrow{
  transform: translateX(3px);
  opacity: 1;
}

/* =========================
   MODAL
   ========================= */
.vb-blog .vb-news-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.vb-blog .vb-news-modal.is-open{
  display: block;
}

.vb-blog .vb-news-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.vb-blog .vb-news-dialog{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,22,.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);

  box-shadow: 0 26px 85px rgba(0,0,0,.45);
}

.vb-blog .vb-news-dialog__media{
    height: auto;
  max-height: 52vh;                 /* ekranda taşmayı engeller */
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px;      
}

.vb-blog .vb-news-dialog__media img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52vh;

  object-fit: contain;              /* asıl kritik satır */
  display: block;
}

.vb-blog .vb-news-dialog__content{
  padding: 16px;
}

.vb-blog .vb-news-dialog__meta{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #ffffff;
}

.vb-blog .vb-news-dialog__title{
  margin: 8px 0 10px;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.vb-blog .vb-news-dialog__body{
  color: rgba(255,255,255,.86);
  line-height: 1.75;
}

.vb-blog .vb-news-dialog__body p{ margin: 0 0 10px; }
.vb-blog .vb-news-dialog__body ul,
.vb-blog .vb-news-dialog__body ol{
  margin: 10px 0 12px 18px;
}

/* Kapat butonu */
.vb-blog .vb-news-close{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;

  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);

  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

/* Yan oklar */
.vb-blog .vb-news-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  cursor: pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 28px;
  line-height: 1;
}

.vb-blog .vb-news-nav--prev{ left: 10px; }
.vb-blog .vb-news-nav--next{ right: 10px; }

@media (max-width: 720px){
  .vb-blog .vb-news-nav{ display:none; } /* mobilde alan dar: sadece swipe/klavye kullan */
}

/* Blog kartı: "Devamını oku" rengi */
body.vb-theme.vb-blog .vb-news-card__footer{
  color: #0f3454;
}

body.vb-theme.vb-blog .vb-news-card__footer .vb-news-card__arrow{
  color: #0f3454;
}

/* Modal: haber başlığı rengi */
body.vb-theme.vb-blog .vb-news-dialog__title,
body.vb-theme.vb-blog #newsModalTitle{
  color: #e9f5ff !important;
}




/* =========================
   HERO-SCRIPT (MOBIL FIX)
   - metin paneli yukarı taşmasın
   - hero daha uzun olsun
   - overlay kesin alt köşeye kilitlensin
   ========================= */

/* Tablet ve altı: hero biraz daha uzun */
@media (max-width: 820px){
  .hero.hero--net .hero-cover--aligned,
  .hero.hero--net .hero-cover--bleed{
    min-height: clamp(380px, 70vw, 540px) !important;
    height:     clamp(380px, 70vw, 540px) !important;
    position: relative !important;
    overflow: hidden;
  }
}

/* Telefon: daha da uzun + overlay sabit */
@media (max-width: 560px){
  .hero.hero--net .hero-cover--aligned,
  .hero.hero--net .hero-cover--bleed{
    min-height: clamp(420px, 105vw, 600px) !important;
    height:     clamp(420px, 105vw, 600px) !important;
    position: relative !important;
    overflow: hidden;
  }

  /* Canvas kesin arka katmanda kalsın */
  .hero.hero--net .net-canvas{
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  /* Metin: alt kenara kilitle, genişliği güvenli yap */
  .hero.hero--net .hero-overlay{
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;

    width: auto !important;
    padding: 0 !important;
    z-index: 6 !important;
  }

  /* Panel iç boşlukları mobilde sıkılaştır */
  .hero.hero--net .hero-panel{
    padding: 14px 14px 12px !important;
    border-radius: 16px;
  }

  /* Butonlar taşmasın: mobilde alt alta */
  .hero.hero--net .cta-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero.hero--net .cta-row .btn{
    width: 100%;
    justify-content: center;
  }
}


/* SADECE: <section class="section section-dark" id="urunler"> */
section.section.section-dark#urunler{
  padding-bottom: 25px; /* ihtiyacına göre */
}