:root{
  --chip-bg: rgba(255,255,255,.82);
  --chip-text: rgba(7,11,20,.92);
  --chip-border: rgba(7,11,20,.12);
  --bg0:#050913; --bg2:#091A2D;

  --t0:#FFFFFF;
  --t1:#F3F7FF;
  --t2:rgba(243,247,255,.88);
  --t3:rgba(243,247,255,.72);
  --t4:rgba(243,247,255,.58);

  --b1:rgba(243,247,255,.16);

  --p:#7C5CFF; /* primary purple */
  --g:#2DD4BF; /* teal */
  --c:#60A5FA; /* blue */

  --radius:18px;
  --radius2:26px;

  --max: 1320px;
  --container-pad: clamp(16px, 2.2vw, 32px);

  --shadow:0 18px 50px rgba(0,0,0,.45);

  /* Backward-compatible aliases used across the template */
  --bg: var(--bg0);
  --surface: rgba(243,247,255,.06);
  --muted: rgba(243,247,255,.04);
  --text: var(--t0);
  --text-2: var(--t2);
  --text-3: var(--t3);
  --primary: var(--p);
  --primary-2: var(--c);
  --border: var(--b1);
  --container: var(--max);
}


*{box-sizing:border-box}

/* Prevent oversized inline SVGs (default 300x150) */
main svg{width:20px;height:20px;display:block;flex:0 0 auto;}
main .k svg, main .icon svg{width:20px;height:20px;}


html,body{
  overflow-x:hidden;height:100%}

/* === Mobile & overflow hardening (v4.0) === */
html, body{max-width:100%; overflow-x:hidden;}
img, svg, video, canvas{max-width:100%; height:auto;}
iframe{max-width:100%;}
/* Prevent flex/grid overflow */
*, *::before, *::after{min-width:0;}
/* Tables/code blocks */
table{max-width:100%;}
.table-wrap, .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* Long words/URLs */
p, li, a, .lead, .muted{overflow-wrap:anywhere; word-break:break-word;}


body{
  overflow-x:hidden;
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
        radial-gradient(1200px 620px at 20% -10%, rgba(124,92,255,.38), transparent 62%),
        radial-gradient(900px 540px at 90% 0%, rgba(45,212,191,.20), transparent 58%),
        radial-gradient(1000px 640px at 60% 120%, rgba(96,165,250,.18), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg2));
  background-attachment: fixed;
  color: var(--text-2);
  line-height: 1.6;
}
img{max-width:100%; height:auto; display:block}
a{color: inherit; text-decoration:none}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--container-pad)}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 12px; background: var(--surface); border:1px solid var(--border); border-radius:10px; z-index:9999}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(5,9,19,.62);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.brand{display:flex; align-items:center; gap:10px; flex: 0 0 auto; min-width: 0}
.brand img{width:56px; height:56px; object-fit:contain}
.brand .name{font-weight:800; letter-spacing:.2px; color:var(--text)}
.brand .tag{font-size:12px; color:var(--text-3); margin-top:-2px}

.menu{
  display:flex; align-items:center; gap:14px;
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:center;
}
.menu a{
  font-weight:600; color:var(--text-2);
  padding:10px 10px; border-radius:12px;
}
.menu a:hover{background: rgba(124,92,255,.08); color:var(--text)}
.menu .active{color:var(--primary); background: rgba(124,92,255,.10)}

.dropdown{position:relative}
.dropdown{position:relative}
.dropdown .dropdown-toggle{
  all: unset;
  display:inline-flex; align-items:center; gap:6px;
  font: inherit;
  font-weight:700;
  color:var(--text-2);
  cursor:pointer;
  padding:10px 10px; border-radius:12px;
}
.dropdown .dropdown-toggle:hover{background: rgba(124,92,255,.08); color:var(--text)}

/* Hard reset: prevent browser default button box (some environments show it as a select-like box) */
.menu .dropdown .dropdown-toggle{
  all: unset;
  font: inherit;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  color: var(--text-2);
  font-weight:700;
  padding:10px 10px;
  margin:0;
  border-radius:12px;
}
.menu .dropdown .dropdown-toggle:hover{background: rgba(124,92,255,.08); color:var(--text)}
.menu .dropdown .dropdown-toggle:focus-visible{
  outline: 3px solid rgba(124,92,255,.25);
  outline-offset: 4px;
  border-radius: 10px;
}
/* Menü linkleri ile aynı hover hissi */
.menu a, .dropdown .dropdown-toggle{
  position:relative;
}
.menu a::after, .dropdown .dropdown-toggle::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:transparent;
  border-radius:2px;
  transition:background .2s ease;
}
.menu a:hover::after, .dropdown .dropdown-toggle:hover::after{
  background:rgba(124,92,255,.55);
}
.menu a.active::after{
  background:rgba(124,92,255,1);
}
.dropdown-panel{
  position:absolute; top:34px; left:0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
}
.dropdown-panel a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color: var(--text-2);
  font-weight:600;
}
.dropdown-panel a:hover{background: rgba(124,92,255,.08); color:var(--text)}
.dropdown.open .dropdown-panel{display:block}

.cta{
  display:flex; align-items:center; gap:10px;
  flex: 0 0 auto;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight:800;
  cursor:pointer;
  transition: .15s ease;
  white-space:nowrap;
}
.btn.primary{background:var(--primary); color:#fff; box-shadow: 0 12px 30px rgba(124,92,255,.20)}
.btn.primary:hover{background:var(--primary-2)}
.btn.ghost{background: transparent; border-color: var(--border); color: var(--text)}
.btn.ghost:hover{border-color: rgba(124,92,255,.35); background: rgba(124,92,255,.06)}

.mobile-toggle{
  display:none;
  width:48px;
  height:44px;
  padding:0;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  color: var(--text);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mobile-toggle svg{width:22px;height:22px;display:block;}
.mobile-toggle:active{transform: translateY(1px);}


.mobile-drawer{display:none}
.mobile-sub{display:none}

.hero{
  padding:64px 0 22px;
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(167,139,250,.18), transparent 55%);
}
.hero-grid{
  display:grid; grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items:stretch;
}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--text-3);
  font-weight:700;
  font-size: 12px;
}
.h1{
  margin:14px 0 10px;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
}
.lead{
  font-size: 18px;
  color: var(--text-2);
  margin: 0 0 18px;
}
.hero-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.badges{display:flex; flex-wrap:nowrap;
  white-space:nowrap; gap:10px; margin-top:14px}
.badge{
  font-weight:800;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: rgba(255,255,255,.8);
}

.section{padding:56px 0}
.section.muted{background: var(--muted)}
.h2{
  margin:0 0 10px;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
}
.p{margin:0; color: var(--text-2)}
.grid-3{
  margin-top: 20px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
  padding: 18px;
}
/* Anchor cards */
a.card{display:block; color:inherit; text-decoration:none}
a.card:focus{outline:2px solid rgba(59,130,246,.6); outline-offset:3px}

.card h3{margin:0 0 6px; color:var(--text); font-size:18px}
.card p{margin:0; color:var(--text-3)}
.list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.list li{
  padding: 10px 12px;
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 650;
  line-height: 1.25;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}
.split-stretch{align-items:stretch}
.split-stretch > *{height:100%;min-width:0}

/* Dark list variant (matches Ajans pages) */
.list.list-dark li{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  padding: 11px 12px 11px 34px;
}
.list.list-dark li::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  position:absolute;
  left:14px; top: 18px;
  background: var(--p);
  box-shadow: 0 0 0 6px rgba(124,92,255,.18);
}
.list.list-dark li{ position:relative; }

.panel{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
}
.panel h3{margin:0 0 8px; color:var(--text)}
.panel p{margin:0; color: var(--text-3)}
.faq details{
  border:1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer; font-weight:800; color:var(--text)}
.faq p{margin:10px 0 0; color:var(--text-3)}

.footer{
  padding: 34px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.small{color: var(--text-3); font-size: 13px}
.footer a:hover{color: var(--primary)}

.notice{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(124,92,255,.35);
  background: rgba(124,92,255,.06);
  color: var(--text-2);
  font-weight: 650;
}

/* Mobile */
@media (max-width: 1100px){
  .hero-grid{grid-template-columns: 1fr}
  .h1{font-size: 40px}
  .grid-3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .menu, .cta{display:none}
  .mobile-toggle{display:inline-flex}
  .mobile-drawer{
    display:none;
    padding: 10px 0 18px;
    border-top: 1px solid var(--border);
  }
  .mobile-drawer.open{display:block}
  .mobile-drawer a, .mobile-drawer button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px 10px;
    border-radius: 14px;
    border:1px solid var(--border);
    background: var(--surface);
    margin-top: 10px;
    font-weight: 800;
    cursor:pointer;
  }
  .mobile-sub{display:none; padding-left: 10px}
  .mobile-sub.open{display:block}
  .mobile-sub a{margin-top: 8px; font-weight: 700}

  /* Header/mobile menu spacing + prevent horizontal overflow */
  .nav{flex-wrap:wrap; white-space:normal;}
  .brand{max-width: calc(100% - 54px);}
  .brand .tag{display:none;}
  .menu{display:none;}
  .mobile-toggle{display:inline-flex; align-items:center; justify-content:center; gap:0;}
  .mobile-toggle svg{width:22px; height:22px;}
  .mobile-drawer{width:100%;}

}

/* === Added for page parity with odiosoft.com product pages === */
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 1100px){
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
}

/* HOME hero feature cards: keep readable proportions.
   In split hero layouts the copy column narrows; force a 2-column grid (then 1-col on small screens). */
.hero-split .features-4{
  grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
  gap:16px;
}
@media (max-width: 620px){
  .hero-split .features-4{ grid-template-columns:1fr !important; }
}

/* Fallback if features-4 is used outside the hero */
.features-4{ grid-template-columns:repeat(2,minmax(220px,1fr)); }
@media (min-width: 1500px){ .features-4{ grid-template-columns:repeat(4,minmax(220px,1fr)); } }
@media (max-width: 700px){ .features-4{ grid-template-columns:1fr; } }

.card.mini{display:flex;gap:14px;align-items:flex-start}
.card.mini .kpi{font-size:24px;line-height:1.2;margin:0}
/* KPI card (Reklam Yönetimi) */
.card.kpi-card{
  padding:22px;
  text-align:left;
  display:flex;
  flex-direction:column;
}
.card.kpi-card .kpi-list{flex:1;align-content:stretch; grid-auto-rows:1fr}
.card.kpi-card .mini-note{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.kpi-head{margin-bottom:14px}
.kpi-title{font-weight:900;color:var(--text);font-size:18px}
.kpi-sub{color:var(--text-2);margin-top:6px;font-size:14px}

.kpi-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 520px){ .kpi-list{grid-template-columns:1fr} }

.kpi-list li{
  height:100%;
  display:flex;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.10);
}
.kpi-list .ic{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.18);
  flex:0 0 34px;
}
.kpi-list .ttl{font-weight:800;color:var(--text);font-size:13px}
.kpi-list .val{font-weight:900;color:var(--text);font-size:17px;line-height:1.1;margin-top:2px}
.kpi-list .desc{color:var(--text-2);font-size:12px;line-height:1.25;margin-top:6px;}
.kpi-list li > div{min-width:0}


.section-head{margin-bottom:18px}
.section-head h2{margin:0 0 8px}
.section-head p{margin:0;color:var(--text-2)}

.note{margin-top:14px;color:var(--text-3);font-size:14px}

.list.cols{columns:2;column-gap:18px}
@media (max-width: 1100px){ .list.cols{columns:1} }

.price .badge{display:inline-flex}
.price.highlight{border:1px solid rgba(124,92,255,.35);box-shadow:0 18px 50px rgba(124,92,255,.14)}

.timeline{display:grid;gap:14px}
.timeline .step{display:flex;gap:14px;align-items:flex-start}
.timeline .num{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(124,92,255,.12);color:var(--primary);
  font-weight:800
}
.tags{display:flex;flex-wrap:nowrap;
  white-space:nowrap;gap:8px;margin-top:10px}
.tags span{
  font-size:12px;padding:6px 10px;border-radius:999px;
  background:rgba(15,23,42,.06);border:1px solid var(--border);color:var(--text-2)
}



.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(124,92,255,.10);
  border:1px solid rgba(124,92,255,.18);
  color: var(--text);
  font-weight:700;
  font-size:13px;
}
.actions{display:flex;flex-wrap:nowrap;
  white-space:nowrap;gap:10px;margin-top:14px}
.btn.secondary{
  background: transparent;
  border-color: rgba(15,23,42,.16);
  color: var(--text);
}
.btn.secondary:hover{border-color: rgba(15,23,42,.28);transform: translateY(-1px)}



/* Prevent overflow on small screens */
pre, code{max-width:100%; overflow:auto}
.table-wrap{overflow:auto; max-width:100%}
table{max-width:100%; border-collapse:collapse}


/* ---- Dark theme patches ---- */
.header .menu a{ color: var(--text-2); }
.header .menu a:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.header .actions .btn{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text); }
.header .actions .btn.primary{ background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(167,139,250,.92)); border: 0; color: rgba(0,0,0,.85); }
.footer{ background: transparent; border-top: 1px solid var(--border); }
.footer a{ color: var(--text-2); }


/* Odio landing (Chat Bot page) */
.odio-landing, .odio-landing * { box-sizing: border-box; }
    .odio-landing {
      --bg: #050913;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.10);
      --text: rgba(255,255,255,.95);
      --muted: rgba(255,255,255,.80);
      --muted2: rgba(255,255,255,.68);
      --line: rgba(255,255,255,.14);
      --brand: #2DD4BF;
      --brand2: #7C5CFF;
      --ok: #34d399;
      --warn: #fbbf24;
      --shadow: 0 20px 70px rgba(0,0,0,.45);
      --r-lg: 22px;
      --r-md: 16px;
      --r-sm: 12px;
      --max: 1160px;

      color: var(--text);
      background: radial-gradient(1200px 600px at 15% 0%, rgba(110,231,255,.16), transparent 60%),
                  radial-gradient(900px 500px at 90% 10%, rgba(167,139,250,.16), transparent 55%),
                  linear-gradient(180deg, #060a13, #050814 45%, #040614);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    .odio-landing a { color: inherit; text-decoration: none; }
    .odio-landing img { max-width: 100%; height: auto; display: block; }
    .odio-landing button { font: inherit; }
    .odio-landing :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 10px; }

    .odio-wrap {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    /* NAV (clipping fix) */
    .odio-nav{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(5,8,20,.62);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.14);
      overflow: visible; /* önemli: glow kesilmesin */
    }
    .odio-nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 16px 0;          /* daha yüksek header */
      gap: 14px;
    }

    .odio-brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 190px;
    }

    /* ===== LOGO (görseldekine en yakın neon-orbital) ===== */
    .odio-logo{
      width: 56px;
      height: 56px;
      border-radius: 999px;
      position: relative;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      isolation: isolate;
      overflow: visible;
      transform: translateZ(0);
    }

    /* dış glow */
    .odio-logo::before{
      content:"";
      position:absolute;
      inset:-16px;
      border-radius:999px;
      background:
        radial-gradient(circle at 32% 28%, rgba(110,231,255,.65), transparent 52%),
        radial-gradient(circle at 72% 72%, rgba(167,139,250,.58), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(110,231,255,.20), transparent 62%);
      filter: blur(10px);
      opacity: .95;
      z-index: 0;
      pointer-events:none;
    }

    /* neon ring (conic + mask) */
    .odio-logo .ring{
      position:absolute;
      inset:-2px;
      border-radius:999px;
      background: conic-gradient(from 210deg,
        rgba(110,231,255,.98),
        rgba(167,139,250,.96),
        rgba(110,231,255,.92)
      );
      box-shadow:
        0 18px 36px rgba(0,0,0,.45),
        0 0 0 7px rgba(110,231,255,.08);
      z-index: 1;
      pointer-events:none;

      -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
      mask: radial-gradient(circle, transparent 58%, #000 60%);

      animation: odioSpin 8s linear infinite;
    }

    /* iç disk */
    .odio-logo .core{
      position:absolute;
      inset: 10px;
      border-radius:999px;
      background:
        radial-gradient(circle at 35% 30%, rgba(110,231,255,.22), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(167,139,250,.20), transparent 58%),
        rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 26px rgba(0,0,0,.38);
      z-index: 2;
      pointer-events:none;
    }

    /* orbital çizgi */
    .odio-logo .orbit{
      position:absolute;
      inset:-10px;
      border-radius:999px;
      border: 1px solid rgba(255,255,255,.10);
      opacity: .50;
      transform: rotate(18deg);
      z-index: 0;
      pointer-events:none;
    }
    .odio-logo .orbit::before{
      content:"";
      position:absolute;
      width: 7px; height: 7px;
      border-radius:999px;
      background: rgba(110,231,255,.95);
      box-shadow: 0 0 0 5px rgba(110,231,255,.16);
      top: 9px; left: 54%;
      transform: translateX(-50%);
    }

    /* merkez logo */
    .odio-logo img{
      width: 72%;
      height: 72%;
      object-fit: contain;
      position: relative;
      z-index: 3;
      filter: drop-shadow(0 14px 18px rgba(0,0,0,.45));
    }

    @keyframes odioSpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }

    .odio-brand b { font-size: 14px; letter-spacing: .2px; }
    .odio-brand span { display:block; font-size: 12px; color: var(--muted2); margin-top: 1px; }

    .odio-links {
      display: none;
      gap: 18px;
      align-items: center;
      color: var(--muted);
      font-size: 14px;
    }
    .odio-links a { padding: 8px 10px; border-radius: 12px; }
    .odio-links a:hover { background: rgba(255,255,255,.06); color: var(--text); }

    .odio-actions { display: flex; align-items: center; gap: 10px; }

    .odio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.07);
      color: var(--text);
      cursor: pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      white-space: nowrap;
    }
    .odio-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.10); }
    .odio-btn.primary {
      border-color: rgba(110,231,255,.45);
      background: linear-gradient(135deg, rgba(110,231,255,.24), rgba(167,139,250,.20));
    }
    .odio-btn.primary:hover { border-color: rgba(110,231,255,.65); }

    .odio-burger {
      width: 42px; height: 42px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.07);
      cursor: pointer;
      color: var(--text);
    }

    .odio-mobile {
      display: none;
      padding: 8px 0 16px;
    }
    .odio-mobile a {
      display: block;
      padding: 12px 12px;
      border-radius: 14px;
      color: var(--muted);
      border: 1px solid transparent;
    }
    .odio-mobile a:hover {
      color: var(--text);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.12);
    }
    .odio-mobile .row { display: grid; gap: 10px; margin-top: 10px; }

    @media (min-width: 900px) {
      .odio-links { display: flex; }
      .odio-burger { display: none; }
      .odio-mobile { display: none !important; }
    }

    /* HERO */
    .odio-hero { padding: 54px 0 22px; }
    .odio-hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      align-items: start;
    }
    .odio-kicker {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      color: var(--muted);
      font-size: 13px;
      width: fit-content;
    }
    .odio-kicker i {
      width: 8px; height: 8px; border-radius: 999px;
      background: var(--ok);
      box-shadow: 0 0 0 4px rgba(52,211,153,.16);
      display: inline-block;
    }
    .odio-h1 {
      font-size: clamp(28px, 4.2vw, 44px);
      line-height: 1.12;
      margin: 14px 0 12px;
      letter-spacing: -0.6px;
      color: var(--text);
    }
    .odio-lead {
      color: var(--muted);
      font-size: 16px;
      margin: 0 0 18px;
      max-width: 64ch;
    }
    .odio-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .odio-badges { display: grid; gap: 10px; margin-top: 18px; }
    .odio-badge {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 12px;
      padding: 14px 14px;
      border-radius: var(--r-md);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
    }
    .odio-badge .icon {
      width: 44px; height: 44px;
      border-radius: 16px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      display: grid;
      place-items: center;
      color: var(--brand);
      font-weight: 700;
    }
    .odio-badge b { display:block; font-size: 14px; margin-top: 2px; color: var(--text); }
    .odio-badge span { display:block; color: var(--muted2); font-size: 13px; margin-top: 2px; }

    .odio-hero-card {
      border-radius: var(--r-lg);
      border: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      box-shadow: 0 20px 70px rgba(0,0,0,.45);
      overflow: hidden;
    }
    .odio-hero-card .top {
      padding: 18px 18px 14px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px;
    }
    .odio-pill {
      font-size: 12px;
      color: var(--muted);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      white-space: nowrap;
    }
    .odio-hero-card .body { padding: 18px; }
    .odio-mock {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(2,6,23,.62);
      overflow: hidden;
    }
    .odio-mock .bar {
      height: 40px;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
    }
    .dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.22); }
    .odio-mock .content { padding: 14px; display: grid; gap: 10px; }
    .bubble {
      max-width: 92%;
      width: fit-content;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: var(--text);
      font-size: 13px;
    }
    .bubble.me { margin-left: auto; background: rgba(110,231,255,.12); border-color: rgba(110,231,255,.26); }
    .bubble.ai { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.26); }

    @media (min-width: 980px) {
      .odio-hero { padding: 72px 0 28px; }
      .odio-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: center; }
      .odio-badges { grid-template-columns: 1fr 1fr; }
    }

    /* Sections */
    .odio-section { padding: 42px 0; }
    .odio-section h2 {
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.15;
      margin: 0 0 10px;
      letter-spacing: -0.4px;
      color: var(--text);
    }
    .odio-sub { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
    .odio-note { margin-top: 12px; color: var(--muted2); font-size: 12px; }

    .odio-grid-3 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 820px) {
      .odio-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    }

    .odio-card {
      border-radius: var(--r-lg);
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      padding: 16px;
      box-shadow: 0 16px 45px rgba(0,0,0,.24);
      min-width: 0;
    }
    .odio-card b { display:block; font-size: 15px; margin-bottom: 6px; color: var(--text); }
    .odio-card p { margin: 0; color: var(--muted); font-size: 14px; }

    /* Lists / Check items */
    .odio-list {
      margin: 0; padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .odio-li {
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: var(--muted);
      display: flex;
      gap: 10px;
      align-items: flex-start;
      min-width: 0;
    }
    .odio-li i {
      width: 18px; height: 18px;
      border-radius: 6px;
      background: rgba(52,211,153,.22);
      border: 1px solid rgba(52,211,153,.34);
      margin-top: 2px;
      flex: 0 0 auto;
      box-shadow: 0 0 0 3px rgba(52,211,153,.10);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }
    .odio-li i::before{
      content: "✓";
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
      color: rgba(255,255,255,.95);
      text-shadow: 0 2px 10px rgba(0,0,0,.35);
      transform: translateY(-.5px);
    }

    /* Pricing */
    .pricing {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 16px;
    }
    @media (min-width: 980px) {
      .pricing { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
    }
    .price-card {
      border-radius: var(--r-lg);
      border: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      padding: 18px;
      min-width: 0;
    }
    .price-card.reco {
      border-color: rgba(110,231,255,.40);
      box-shadow: 0 22px 60px rgba(0,0,0,.36);
      position: relative;
      overflow: hidden;
    }
    .price-card.reco:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(900px 300px at 20% 0%, rgba(110,231,255,.20), transparent 55%),
                  radial-gradient(900px 300px at 85% 30%, rgba(167,139,250,.18), transparent 58%);
      pointer-events:none;
    }
    .price-card > * { position: relative; }
    .price-top {
      display:flex; align-items:center; justify-content: space-between; gap: 12px;
      margin-bottom: 8px;
    }
    .price-top b { font-size: 16px; color: var(--text); }
    .tag {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      color: var(--muted);
      white-space: nowrap;
    }
    .price-desc { color: var(--muted); margin: 0 0 12px; font-size: 14px; }
    .price-ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; }
    .price-ul li { min-width: 0; }

    /* FAQ */
    .faq { display: grid; gap: 10px; margin-top: 14px; }
    details.faq-item {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      padding: 10px 14px;
    }
    details.faq-item > summary {
      cursor: pointer;
      list-style: none;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 6px 0;
    }
    details.faq-item > summary::-webkit-details-marker { display: none; }
    .chev {
      width: 28px; height: 28px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      transition: transform .12s ease;
      color: var(--text);
    }
    details[open] .chev { transform: rotate(180deg); }
    .faq-p { margin: 10px 0 6px; color: var(--muted); font-size: 14px; }

    /* DEMO CTA */
    .demo-cta{
      border-radius: var(--r-lg);
      border: 1px solid rgba(255,255,255,.16);
      background:
        radial-gradient(900px 320px at 18% 0%, rgba(110,231,255,.16), transparent 55%),
        radial-gradient(900px 320px at 85% 20%, rgba(167,139,250,.14), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      box-shadow: 0 26px 80px rgba(0,0,0,.42);
      overflow: hidden;
    }
    .demo-cta-inner{
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 22px;
    }
    @media (min-width: 980px){
      .demo-cta-inner{
        grid-template-columns: 1.1fr .9fr;
        gap: 18px;
        padding: 24px;
        align-items: stretch;
      }
    }
    .demo-left h2{ margin: 0 0 8px; }
    .demo-left p{ margin: 0; color: rgba(255,255,255,.84) !important; }
    .demo-points{ margin-top: 14px; display: grid; gap: 10px; }
    .demo-right{
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(2,6,23,.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    .demo-right .mini{
      display: grid;
      gap: 8px;
      color: rgba(255,255,255,.80);
      font-size: 13px;
    }
    .demo-steps{
      margin: 0; padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .demo-step{
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.82);
    }
    .demo-step .n{
      width: 22px; height: 22px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(110,231,255,.16);
      border: 1px solid rgba(110,231,255,.24);
      color: rgba(255,255,255,.92);
      font-weight: 800;
      font-size: 12px;
    }
    .demo-cta-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }
    .demo-trust{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .trust-pill{
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.07);
      color: rgba(255,255,255,.78);
    }

    /* Footer */
    .odio-footer {
      padding: 34px 0 46px;
      border-top: 1px solid rgba(255,255,255,.12);
      color: var(--muted2);
      font-size: 13px;
    }
    .footer-grid { display: grid; gap: 12px; align-items: center; }
    @media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr auto; } }

    .anchor { scroll-margin-top: 90px; }

    /* READABILITY PATCH */
    .odio-landing h1,
    .odio-landing h2,
    .odio-landing h3,
    .odio-landing h4,
    .odio-landing h5,
    .odio-landing h6,
    .odio-landing strong,
    .odio-landing b,
    .odio-landing summary {
      color: rgba(255,255,255,.96) !important;
    }
    .odio-landing .odio-h1 {
      color: rgba(255,255,255,.98) !important;
      text-shadow: 0 2px 18px rgba(0,0,0,.35);
    }
    .odio-landing .odio-card b,
    .odio-landing .price-top b,
    .odio-landing .odio-badge b { color: rgba(255,255,255,.96) !important; }
    .odio-landing .odio-sub,
    .odio-landing .odio-lead,
    .odio-landing .price-desc,
    .odio-landing .faq-p,
    .odio-landing .odio-card p { color: rgba(255,255,255,.82) !important; }

/* remove secondary header row */
.page-nav,.secondary-nav,.breadcrumbs{display:none!important;}

/* mobile drawer is active (do not disable it globally) */

main img, main video, main iframe{max-width:100%;height:auto;}



/* Home enhancements */
.hero-split{padding:64px 0 28px}
.hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:stretch}
.hero-copy .lead strong{color:var(--text)}
.hero-visual{position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between}
.mockup{
  border-radius: var(--radius2);
  background: rgba(243,247,255,.04);
  border: 1px solid rgba(243,247,255,.14);
  padding: 14px;
  box-shadow: var(--shadow);
  width:100%;
}
.mockup img{width:100%; height:auto}
.hero-split .mockup{flex:1}

.stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}

/* Home hero: use 2 cards and make them match the left mini-cards visually */
.stats-home{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-home .card.mini{padding:12px 14px}
.stats-home .card.mini .kpi{font-size:22px}
.stats-home .card.mini h3{font-size:16px}
.stats-home .card.mini p{font-size:12.5px}

/* Home hero: make the visual block feel like a single cohesive area (no bottom void) */
.hero-split .hero-visual{height:100%}
.hero-split .mockup{flex:1}

/* Home hero stat cards: match the left-side mini card visuals */
.hero-split .stats .card.mini{padding:12px 14px}
.hero-split .stats .card.mini .kpi{font-size:22px}
.hero-split .stats .card.mini h3{font-size:16px; margin:0 0 4px 0}
.hero-split .stats .card.mini p{margin:0; font-size:13px}
.stat{
  border-radius: 16px;
  border: 1px solid rgba(243,247,255,.14);
  background: rgba(243,247,255,.05);
  padding: 12px 14px;
}
.stat .num{font-weight:900; color: var(--text); letter-spacing:-.02em}
.stat .lbl{font-size: 12px; color: var(--text-3); margin-top:2px}

.logos{
  display:flex; flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  opacity:.98;
}
.logos span{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243,247,255,.14);
  background: rgba(243,247,255,.04);
  color: var(--text-2);
  font-size: 12px;
}

.link-card{display:block}
.link-card:hover{transform: translateY(-2px)}
.link-card h3{margin-bottom:6px}

.faq details{
  border-radius: 16px;
  border: 1px solid rgba(243,247,255,.14);
  background: rgba(243,247,255,.04);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.faq summary{
  cursor:pointer;
  font-weight:800;
  color: var(--text);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:10px 0 0; color: var(--text-2)}

.cta.big{padding: 22px; border-radius: var(--radius2)}
.cta-actions{display:flex; gap:10px; align-items:center}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; }
  .stats{grid-template-columns: 1fr; }
}


/* HOME: fix overflow + readability in feature/product blocks */
.grid.three > .card{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.grid.features-4 > .card.mini{
  padding:14px;
}
.card.mini h3{margin:0 0 4px 0; font-size:16px; line-height:1.15;}
.card.mini p{margin:0; color:var(--text-2); font-size:13px; line-height:1.35;}
.card.mini .kpi{font-size:22px;}

/* Make product badges look like true pills (not full-width bars) */
.card .badge{
  display:inline-flex !important;
  align-self:flex-start;
  width:auto;
  max-width:100%;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(124,92,255,.12);
  border: 1px solid rgba(124,92,255,.22);
  color: var(--text);
}

/* Clean lists inside product cards: remove default bullets/indent and improve spacing */
.list ul{
  list-style:none;
  padding:0;
  margin:14px 0 0 0;
}
.list li{
  position:relative;
  padding-left:34px;
}
.list li::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(124,92,255,.75);
}

/* Keep CTA button aligned and prevent layout jumps */
.grid.three > .card .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* Defensive: prevent any media from causing horizontal overflow */
main img, main svg, main video, main iframe{
  max-width:100%;
  height:auto;
}



/* === Odio Soft Site Pro UI/UX Patch (v13.1) === */
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
:focus-visible{outline:2px solid rgba(124,92,255,.85); outline-offset:3px; border-radius:10px}

/* Safer wrapping (prevents horizontal drift on long strings) */
p, h1, h2, h3, h4, h5, h6, a, li, .pill, .chip, .tag{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Responsive embeds */
iframe, video{max-width:100%}

/* Subtle micro-interactions */
.btn, .card, .tile, .kpi, .dropdown-panel, .menu a{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease;
}
.card:hover, .tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,.38);
}

/* Scroll-reveal (added by JS) */
.reveal{
  opacity:0;
  transform: translateY(12px);
  filter: saturate(.98);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:none;
  filter:none;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.card,.tile{transition:none}
}

/* Floating WhatsApp CTA */
.floating-wa{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background: rgba(7,11,20,.72);
  border:1px solid rgba(243,247,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
}
.floating-wa .dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--g);
  box-shadow: 0 0 0 6px rgba(45,212,191,.16);
}
.floating-wa .txt{display:flex; flex-direction:column; line-height:1.15}
.floating-wa .txt b{font-size:13px}
.floating-wa .txt span{font-size:12px; color: var(--text-3)}
.floating-wa:hover{transform: translateY(-2px)}
@media (max-width: 520px){
  .floating-wa{right:12px; bottom:12px; padding:10px 12px}
  .floating-wa .txt span{display:none}
}
/* === End Patch === */



/* === Product Ecosystem cards: better balance + dark chips + working CTA (v13.4) === */
#urunler .grid.three{align-items:stretch;}
#urunler .grid.three > .card{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
#urunler .grid.three > .card .list{
  margin-top: 14px;
}
#urunler .grid.three > .card .list ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
#urunler .grid.three > .card .list li{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(243,247,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#urunler .grid.three > .card .btn{
  margin-top:auto;
  align-self:flex-start;
  position:relative;
  z-index:3;
  pointer-events:auto;
}



/* === Dijital Pazarlama: Ajans yaklaşımı (premium) === */
.agency-system{
  /* make feature chips dark-glass instead of white */
  --chip-bg: rgba(255,255,255,.08);
  --chip-text: var(--text);
  --chip-border: rgba(255,255,255,.14);
}
.agency-system .grid{
  margin-top: 18px;
}
.agency-system .card{
  position: relative;
  overflow: hidden;
  padding: 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agency-system .card::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(124,92,255,.0), rgba(124,92,255,.65), rgba(0,209,255,.45), rgba(124,92,255,.0));
  opacity: .95;
}
.agency-system .card h3{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.agency-system .card h3::before{
  content:"";
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.agency-system .card:nth-child(1) h3::before{ content:"🎯"; }
.agency-system .card:nth-child(2) h3::before{ content:"📈"; }
.agency-system .card:nth-child(3) h3::before{ content:"🧲"; }
.agency-system .card:nth-child(4) h3::before{ content:"🔎"; }
.agency-system .card:nth-child(5) h3::before{ content:"🧪"; }
.agency-system .card:nth-child(6) h3::before{ content:"🎬"; }

.agency-system .card p{ color: var(--text-2); line-height: 1.55; }
.agency-system .list li{
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  font-weight: 650;
}
.agency-system .mini-cta{
  margin-top: auto;
  padding-top: 10px;
}
.agency-system .mini-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-decoration: none;
}
.agency-system .mini-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

/* balance columns for this block */
@media (max-width: 1024px){
  .agency-system .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agency-system .card{ min-height: 240px; }
}
@media (max-width: 640px){
  .agency-system .grid{ grid-template-columns: 1fr; }
  .agency-system .card{ min-height: auto; }
}


/* ===== Dijital Pazarlama sayfası (v2) — richer sections ===== */
.agency-v2 .split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 18px;
}
.agency-v2 .eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.agency-v2 .lead{ font-size: 16px; line-height: 1.7; }

.agency-v2 .accent{
  background: linear-gradient(90deg, rgba(110,231,183,.95), rgba(96,165,250,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agency-v2 .kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0 12px;
}
.agency-v2 .kpi{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.agency-v2 .kpi-title{ font-size: 12px; opacity:.8; margin-bottom: 4px; }
.agency-v2 .kpi-val{ font-weight: 700; }

.agency-v2 .visual-card{
  position: relative;
  overflow:hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
  min-height: 360px;
}
.agency-v2 .visual-top{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.agency-v2 .badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 700;
}
.agency-v2 .pipeline{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0 14px;
}
.agency-v2 .pipe-step{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.agency-v2 .pipe-step span{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 800;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.agency-v2 .mini-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.agency-v2 .mini{
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  gap: 10px;
  align-items:center;
}
.agency-v2 .mini-ico{ font-size: 18px; }
.agency-v2 .mini-t{ font-weight: 800; }
.agency-v2 .mini-s{ font-size: 12px; opacity:.8; }

.agency-v2 .bg-orb{
  position:absolute;
  right:-80px;
  bottom:-80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(110,231,183,.25), rgba(0,0,0,0));
  filter: blur(2px);
  pointer-events:none;
}

.agency-v2 .service-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}
.agency-v2 .svc{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
  display:flex;
  flex-direction: column;
  min-height: 260px;
}
.agency-v2 .svc-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 18px;
  margin-bottom: 10px;
}
.agency-v2 .svc h3{ margin: 0 0 6px; }
.agency-v2 .chips{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agency-v2 .chips li{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  line-height: 1.3;
}
.agency-v2 .link-btn{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration:none;
}
.agency-v2 .link-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }

.process-rich{
  position: relative;
}
.process-rich .steps{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}
.process-rich .step{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
}
.process-rich .step-no{
  width: 42px;
  height: 30px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.process-rich .callout{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
}
.process-rich .callout-box{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-items: stretch;
}
.process-rich .metric{
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.process-rich .metric strong{ font-size: 20px; }

.measurement-v2 .two-col{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.measurement-v2 .panel{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
}
.measurement-v2 .checklist{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap: 10px;
}
.measurement-v2 .checklist li{
  padding-left: 26px;
  position: relative;
}
.measurement-v2 .checklist li:before{
  content: "✓";
  position:absolute;
  left:0;
  top:0;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
}
.measurement-v2 .note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.ideal-v2 .segments{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.ideal-v2 .seg{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
}
.ideal-v2 .seg-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 18px;
  margin-bottom: 10px;
}
.ideal-v2 .mini-list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap: 8px;
}
.ideal-v2 .mini-list li{
  padding-left: 22px;
  position: relative;
  font-size: 13px;
}
.ideal-v2 .mini-list li:before{
  content:"•";
  position:absolute;
  left:8px;
  top:0;
  opacity:.8;
}
.ideal-v2 .trust-strip{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  padding: 14px;
}
.ideal-v2 .trust-item{
  border-radius: 14px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.09);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.faq-v2 .faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.faq-v2 details{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
}
.faq-v2 summary{
  cursor: pointer;
  font-weight: 800;
}
.faq-v2 details[open]{ background: rgba(255,255,255,.06); }

.final-cta .cta-panel{
  border-radius: 20px;
  padding: 18px;
  background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.25), rgba(255,255,255,.04)),
              radial-gradient(circle at 80% 40%, rgba(110,231,183,.18), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  overflow:hidden;
}
.final-cta .cta-points{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 10px;
}
.final-cta .cta-points li{
  padding-left: 26px;
  position: relative;
}
.final-cta .cta-points li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}
.final-cta .cta-side{
  display:grid;
  gap: 12px;
  align-content: center;
}
.final-cta .cta-bubble{
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
}
.final-cta .cta-bubble.alt{
  background: rgba(255,255,255,.05);
}
.final-cta .b-title{ font-weight: 900; margin-bottom: 8px; }
.final-cta .b-item{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 6px 0;
}
.final-cta .b-item span{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
}

@media (max-width: 1100px){
  .agency-v2 .split{ grid-template-columns: 1fr; }
  .agency-v2 .kpi-row{ grid-template-columns: 1fr; }
  .agency-v2 .service-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process-rich .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process-rich .callout{ grid-template-columns: 1fr; }
  .measurement-v2 .two-col{ grid-template-columns: 1fr; }
  .ideal-v2 .segments{ grid-template-columns: 1fr; }
  .ideal-v2 .trust-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faq-v2 .faq-grid{ grid-template-columns: 1fr; }
  .final-cta .cta-panel{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .agency-v2 .service-grid{ grid-template-columns: 1fr; }
  .ideal-v2 .trust-strip{ grid-template-columns: 1fr; }
}



/* Timeline (Süreç) - cleaner look */
.timeline.steps{display:grid;gap:12px}
.timeline.steps .step{
  position:relative;
  padding:16px 16px 16px 58px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(15,23,42,.08);
}
.timeline.steps .num{
  position:absolute;
  left:16px; top:16px;
  width:32px; height:32px;
  border-radius:999px;
  display:grid; place-items:center;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.22);
  color:var(--primary);
  font-weight:900;
}
.timeline.steps h3{margin:0 0 6px}
.timeline.steps p{margin:0;color:var(--text-2)}

/* 30 day plan */
.plan-grid{gap:16px}
.plan-card{position:relative; overflow:hidden}
.plan-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.plan-top .badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.22);
  color:var(--text);
  font-weight:800;
  font-size:12px;
}
.plan-card h3{margin:0}



/* === Agency pages: richer channel + CTA panel (reklam-yonetimi) === */
.channels .channels-head{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.channel-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.channel-item{
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  min-width:0;
}
.channel-item:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.14)}
.ch-ic{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
  font-size: 16px;
}
.ch-title{font-weight: 850; color: var(--text); line-height: 1.1}

.cta-panel{
  margin-top: 16px;
  border-radius: 20px;
  padding: 18px;
  background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.22), rgba(255,255,255,.04)),
              radial-gradient(circle at 80% 40%, rgba(167,139,250,.18), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  overflow:hidden;
}
.cta-panel h3{margin:0 0 6px 0}
.cta-panel .cta-actions{justify-content:flex-end; flex-wrap:wrap}

@media (max-width: 900px){
  .channel-grid{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:1fr}
  .cta-panel .cta-actions{justify-content:flex-start}
}

/* ====== Reklam Yönetimi: Süreç (14 günde sistem kurulum) ====== */
.process{margin-top:18px}
.process-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.process-card{
  position:relative;
  border-radius:18px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  min-height:170px;
}
.process-card::before{
  content:"";
  position:absolute;
  left:14px;
  top:12px;
  width:46px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(167,139,250,.9), rgba(96,165,250,.9));
  opacity:.65;
}
.process-num{
  position:absolute;
  right:14px;
  top:14px;
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:13px;
  color:var(--text);
  background:rgba(167,139,250,.14);
  border:1px solid rgba(167,139,250,.22);
}
.process-card h3{margin:14px 0 8px 0; font-size:16px; line-height:1.25}
.process-card p{margin:0; color:rgba(255,255,255,.78); line-height:1.55}

@media (max-width: 1100px){
  .process-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 720px){
  .process-grid{grid-template-columns:1fr;}
  .process-card{min-height:auto}
}

.section{margin:60px 0;} .section.tight{margin:40px 0;}

/* E-ticaret sayfası: daha sıkı ritim */


body[data-page="e-ticaret-danismanligi"] .section{padding:44px 0;}
body[data-page="e-ticaret-danismanligi"] .split{gap:28px;}
body[data-page="e-ticaret-danismanligi"] .service-grid{gap:16px;}
body[data-page="e-ticaret-danismanligi"] .stats{gap:14px;}
body[data-page="e-ticaret-danismanligi"] .pricing-grid{gap:16px;}
body[data-page="e-ticaret-danismanligi"] .faq{gap:12px;}


/* --- Dropdown visibility & readability fix (v25.4) --- */
.site-header, header, .navbar, .nav, .topbar { position: relative; z-index: 2000; }

/* Common dropdown menu containers */
.nav .dropdown-menu,
.navbar .dropdown-menu,
.site-nav .dropdown-menu,
.nav .dropdown-content,
.navbar .dropdown-content,
.site-nav .dropdown-content,
.nav .menu-dropdown,
.navbar .menu-dropdown,
.site-nav .menu-dropdown,
.dropdown .dropdown-menu,
.dropdown .dropdown-content {
  z-index: 2500 !important;
  background: rgba(10, 14, 25, 0.94) !important;  /* less transparent */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
}

/* Items: improve contrast and hover */
.nav .dropdown-menu a,
.navbar .dropdown-menu a,
.site-nav .dropdown-menu a,
.nav .dropdown-content a,
.navbar .dropdown-content a,
.site-nav .dropdown-content a,
.nav .menu-dropdown a,
.navbar .menu-dropdown a,
.site-nav .menu-dropdown a,
.dropdown .dropdown-menu a,
.dropdown .dropdown-content a {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.nav .dropdown-menu a:hover,
.navbar .dropdown-menu a:hover,
.site-nav .dropdown-menu a:hover,
.nav .dropdown-content a:hover,
.navbar .dropdown-content a:hover,
.site-nav .dropdown-content a:hover,
.nav .menu-dropdown a:hover,
.navbar .menu-dropdown a:hover,
.site-nav .menu-dropdown a:hover,
.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-content a:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* Keep dropdown separated from header line */
.nav .dropdown-menu,
.navbar .dropdown-menu,
.site-nav .dropdown-menu,
.nav .dropdown-content,
.navbar .dropdown-content,
.site-nav .dropdown-content,
.nav .menu-dropdown,
.navbar .menu-dropdown,
.site-nav .menu-dropdown,
.dropdown .dropdown-menu,
.dropdown .dropdown-content {
  margin-top: 10px !important;
}


/* Dim background slightly when a dropdown is open */
body.dropdown-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.28);
  pointer-events: none;
  z-index: 1800;
}



/* =========================
   Agency-v2 global polish (v25.5)
   Applies consistent layout across all pages
   ========================= */
body.agency-v2{
  background: radial-gradient(1200px 600px at 15% 10%, rgba(98,67,255,0.22), transparent 60%),
              radial-gradient(900px 500px at 85% 20%, rgba(42,216,255,0.14), transparent 55%),
              radial-gradient(1100px 650px at 50% 100%, rgba(120,80,255,0.10), transparent 55%),
              linear-gradient(180deg, #070B14 0%, #050815 55%, #040614 100%);
}

/* Typography rhythm */
body.agency-v2 h1{ letter-spacing:-0.02em; line-height:1.10; }
body.agency-v2 h2{ letter-spacing:-0.015em; line-height:1.18; }
body.agency-v2 p{ line-height:1.6; }

/* Sections: reduce random whitespace and keep consistent cadence */
body.agency-v2 .section{ padding: 56px 0; }
body.agency-v2 .section.tight{ padding: 40px 0; }
body.agency-v2 .section-head{ margin-bottom: 18px; }
body.agency-v2 .section-head p{ margin-top: 8px; opacity: .88; }

/* Cards baseline */
body.agency-v2 .card,
body.agency-v2 .glass,
body.agency-v2 .panel,
body.agency-v2 .kpi-card,
body.agency-v2 .pricing-card,
body.agency-v2 .feature-card,
body.agency-v2 .service-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

/* List items dark */
body.agency-v2 .list-dark li,
body.agency-v2 .kpi-list li{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Buttons more consistent */
body.agency-v2 .btn{ border-radius: 14px; }
body.agency-v2 .btn.ghost{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); }
body.agency-v2 .btn.primary{ box-shadow: 0 18px 50px rgba(98,67,255,0.25); }

/* Footer */
.site-footer{
  margin-top: 40px;
  padding-top: 48px;
  background: radial-gradient(1000px 420px at 20% 10%, rgba(98,67,255,0.20), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.02) 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.site-footer .footer-inner{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 1fr;
  gap: 26px;
  align-items: start;
}
.site-footer .footer-logo{ font-weight: 800; font-size: 20px; letter-spacing:-0.01em; }
.site-footer .footer-desc{ margin-top: 10px; opacity: .86; }
.site-footer .footer-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.site-footer .badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px; opacity: .92;
}
.site-footer .footer-cols{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.site-footer .footer-col h4{
  margin: 0 0 10px 0; font-size: 14px; opacity: .92;
}
.site-footer .footer-col a{
  display:block; padding: 8px 0;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}
.site-footer .footer-col a:hover{ color: rgba(255,255,255,0.98); }
.site-footer .footer-cta-card{
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(98,67,255,0.22), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.14);
}
.site-footer .footer-cta-card h4{ margin:0 0 8px 0; }
.site-footer .footer-cta-actions{ display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }
.site-footer .footer-mini{ margin-top: 12px; font-size: 12px; opacity: .80; }
.site-footer .footer-bottom{
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 14px 0;
}
.site-footer .footer-bottom-inner{
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  display:flex; align-items:center; justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.site-footer .footer-links{ display:flex; gap: 14px; flex-wrap: wrap; }
.site-footer .footer-links a{ color: rgba(255,255,255,0.78); text-decoration:none; }
.site-footer .footer-links a:hover{ color: rgba(255,255,255,0.96); }

@media (max-width: 980px){
  .site-footer .footer-inner{ grid-template-columns: 1fr; }
  .site-footer .footer-cols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .site-footer .footer-cols{ grid-template-columns: 1fr; }
}


/* Spacing normalization (v25.5) */
.section{margin:0;}



/* --- E-ticaret page spacing calibration (v25.6) --- */
body.page-ecom .section{ padding: 50px 0; }
body.page-ecom .section.tight{ padding: 36px 0; }
body.page-ecom .grid, body.page-ecom .cards, body.page-ecom .service-grid{ gap: 16px; }
body.page-ecom .kpi-list{ gap: 12px; }
body.page-ecom .cta-panel{ margin-top: 18px; }
body.page-ecom .process-grid{ gap: 14px; }
@media (max-width: 720px){
  body.page-ecom .section{ padding: 40px 0; }
}



/* --- Agency template helpers (v25.6) --- */
.container{ width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.hero-split .split{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap: 22px; align-items: start; }
.hero-actions, .cta-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); font-size: 12px; }
.lead{ font-size: 16px; opacity: .90; max-width: 62ch; }
.service-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.service-card h3{ margin: 10px 0 8px 0; }
.service-card .list-dark{ margin-top: 10px; }
.list-dark{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.list-dark li{ padding: 10px 12px; border-radius: 14px; }
.process-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.process-card{ position: relative; padding: 16px; border-radius: 18px; }
.process-num{ width: 28px; height: 28px; border-radius: 999px; display:flex; align-items:center; justify-content:center; background: rgba(98,67,255,0.25); border:1px solid rgba(98,67,255,0.35); margin-bottom: 10px; font-weight: 800; }
.faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-item{ padding: 12px 14px; border-radius: 16px; }
.faq-item summary{ cursor:pointer; font-weight: 700; }
.faq-body{ padding-top: 10px; opacity: .90; }
.cta-panel{ display:flex; align-items:center; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 18px; }
@media (max-width: 980px){
  .hero-split .split{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faq-grid{ grid-template-columns: 1fr; }
  .cta-panel{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px){
  .process-grid{ grid-template-columns: 1fr; }
}


/* =========================
   Header/Footer full-width (auto) + footer subpages (v26.1)
   ========================= */
.header .container{
  max-width: none; /* full width */
}

/* Footer: full width containers (auto) */
.site-footer .footer-inner,
.site-footer .footer-bottom-inner{
  width: 100%;
  max-width: none;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Footer columns: allow better wrapping on smaller screens */
@media (max-width: 980px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .site-footer .footer-cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .site-footer .footer-cols{
    grid-template-columns: 1fr;
  }
}


@media (max-width: 520px){
  .container{padding-left: 16px; padding-right: 16px;}
  .h1{font-size: 32px; line-height:1.15;}
  .lead{font-size: 16px;}
  .btn{width:100%; justify-content:center;}
  .hero .actions, .actions{flex-wrap:wrap;}
  .nav{gap:10px;}
  .brand img{width:38px; height:38px;}
}


/* Mobile hardening: avoid overflow in grid-3 cards */
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
}

/* PR page KPI card readability */
.kpi-card{word-break:normal;overflow-wrap:break-word}
.kpi-card .ttl,.kpi-card .val{word-break:normal;overflow-wrap:anywhere}


/* === HERO SLIDER (Homepage) === */
.container-fluid{width:100%; padding:0 var(--container-pad); margin:0 auto}

.hero-slider{padding:32px 0 18px}
.hero-slider .carousel{position:relative; width:100%; overflow:hidden; border-radius:28px}
.hero-slider .carousel-track{display:flex; width:100%; transition:transform .55s ease}
.hero-slider .carousel-slide{flex:0 0 100%; padding:18px 0}
.hero-slider .slide-split{display:grid; grid-template-columns: .92fr 1.08fr; gap:10px; align-items:center}
.hero-slider .slide-copy{
  padding:24px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  min-height:520px;
}
/* Force the slider pill to size to content (prevents full-width “bar” look) */
.hero-slider .slide-copy .pill{
  margin:0;
  display:inline-flex;
  width:fit-content;
}
.hero-slider .slide-subtitle{margin-top:4px; line-height:1.45;}
.hero-slider .slide-desc{margin-top:6px; line-height:1.6;}
.hero-slider .slide-title{font-size:clamp(34px, 4.5vw, 56px); line-height:1.05; margin:0}
.hero-slider .slide-subtitle{margin-top:4px; line-height:1.45;}
.hero-slider .slide-desc{margin-top:6px; line-height:1.6;}
.hero-slider .cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px}
.hero-slider .slide-visual{display:flex; flex-direction:column; gap:12px; justify-content:center; min-width:0}
.hero-slider .mockup{border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.18); padding:10px}
.hero-slider .mockup img{width:100%; height:auto; display:block}

.hero-slider .mockup{position:relative}
.hero-slider .mockup-overlay{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  padding:14px 14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(8,12,22,.72), rgba(8,12,22,.48));
  backdrop-filter: blur(10px);
}
.hero-slider .ov-title{font-size:14px; font-weight:700; letter-spacing:.2px; color:rgba(255,255,255,.92); margin:0 0 10px}
.hero-slider .ov-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.hero-slider .ov-card{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  min-width:0;
}
.hero-slider .ov-card strong{display:block; font-size:13px; font-weight:700; margin-bottom:4px}
.hero-slider .ov-card span{display:block; font-size:12px; color:rgba(255,255,255,.76); line-height:1.25; overflow-wrap:anywhere}
@media (max-width: 900px){
  .hero-slider .mockup-overlay{left:12px; right:12px; bottom:12px; padding:12px}
  .hero-slider .ov-grid{gap:8px}
}
@media (max-width: 520px){
  .hero-slider .ov-grid{grid-template-columns:1fr}
}
.hero-slider .slide-badges{display:flex; flex-wrap:wrap; gap:8px}
.hero-slider .badge{display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); font-size:13px; color:rgba(255,255,255,.82)}

.hero-slider .carousel-nav{
  position:absolute;
  /* Move arrows to bottom so they don't overlap left copy */
  top:auto;
  bottom:18px;
  transform:none;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:30px;
  line-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:7;
}
.hero-slider .carousel-nav:hover{background:rgba(0,0,0,.38)}
.hero-slider .carousel-nav.prev{left:18px}
.hero-slider .carousel-nav.next{right:18px}

.hero-slider .carousel-dots{position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:8px; z-index:6}
.hero-slider .dot-btn{width:9px; height:9px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); cursor:pointer; padding:0}
.hero-slider .dot-btn.is-active{background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.92)}

@media (max-width: 980px){
  .hero-slider .slide-split{grid-template-columns:1fr; gap:14px}
  .hero-slider .slide-copy{padding:12px 4px; justify-content:flex-start; gap:10px}
  .hero-slider .carousel-nav{display:none}
  .hero-slider .carousel{border-radius:22px}
}

@media (max-width: 520px){
  .hero-slider{padding:18px 0 10px}
  .hero-slider .carousel-slide{padding:10px 0}
  .hero-slider .slide-title{font-size:clamp(28px, 8vw, 40px)}
}


/* Slider mockup head overlay */
.mockup{position:relative;}
.mockup-head{position:absolute;left:22px;top:18px;z-index:3;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.mockup-head .mh-title{font-weight:800;font-size:14px;line-height:1.1;color:#eaf0ff;letter-spacing:.2px;text-shadow:0 6px 20px rgba(0,0,0,.55);}
.mockup-head .mh-meta{font-size:12px;line-height:1.2;color:rgba(234,240,255,.78);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:6px 10px;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
/* subtle accent per theme */
.mockup-overlay[class*="theme-"]::before{content:"";position:absolute;right:22px;top:22px;width:56px;height:56px;border-radius:50%;filter:blur(0);opacity:.45;background:radial-gradient(circle at 30% 30%, rgba(123,97,255,.85), rgba(0,0,0,0));}
.mockup-overlay.theme-map::before{background:radial-gradient(circle at 30% 30%, rgba(0,214,167,.75), rgba(0,0,0,0));}
.mockup-overlay.theme-omni::before{background:radial-gradient(circle at 30% 30%, rgba(105,180,255,.75), rgba(0,0,0,0));}
.mockup-overlay.theme-dev::before{background:radial-gradient(circle at 30% 30%, rgba(255,199,0,.6), rgba(0,0,0,0));}
.mockup-overlay.theme-growth::before{background:radial-gradient(circle at 30% 30%, rgba(255,122,207,.65), rgba(0,0,0,0));}
.mockup-overlay.theme-ads::before{background:radial-gradient(circle at 30% 30%, rgba(255,99,99,.6), rgba(0,0,0,0));}
.mockup-overlay.theme-web::before{background:radial-gradient(circle at 30% 30%, rgba(131,255,142,.55), rgba(0,0,0,0));}
.mockup-overlay.theme-commerce::before{background:radial-gradient(circle at 30% 30%, rgba(0,200,255,.6), rgba(0,0,0,0));}
.mockup-overlay.theme-influencer::before{background:radial-gradient(circle at 30% 30%, rgba(255,170,0,.6), rgba(0,0,0,0));}
.mockup-overlay.theme-pr::before{background:radial-gradient(circle at 30% 30%, rgba(170,150,255,.65), rgba(0,0,0,0));}
@media (max-width: 900px){
  .mockup-head{left:16px;top:14px;}
  .mockup-head .mh-title{font-size:13px;}
  .mockup-head .mh-meta{font-size:11px;padding:5px 9px;}
}


/* Slider left column spacing (mobile override) */
@media (max-width: 900px){
  .hero-slider .slide-split{grid-template-columns: 1fr; gap:14px;}
  .hero-slider .slide-copy{min-height:auto; padding:18px 10px;}
}



/* HOME HERO SLIDER – MOBILE FRIENDLY */
.hero-slider .mockup-overlay{ pointer-events:none; }

@media (max-width: 980px){
  .hero-slider .slide-copy{
    min-height:auto;
    padding:16px 12px;
    gap:12px;
  }
  .hero-slider .slide-desc{ line-height:1.75; }
  .hero-slider .slide-split{ gap:12px; }
  .hero-slider .slide-visual{ gap:10px; }
  .hero-slider .mockup{ padding:8px; }
  .hero-slider .mockup-head{ left:16px; top:14px; }
  /* On small screens, keep the overlay readable and avoid covering the mockup */
  .hero-slider .mockup-overlay{
    position:static;
    margin:10px 0 0;
    left:auto; right:auto; bottom:auto;
  }
  /* give room for dots (arrows are hidden at this breakpoint in base CSS) */
  .hero-slider .carousel-slide{ padding-bottom:14px; }
}

@media (max-width: 520px){
  .hero-slider .slide-copy{ padding:14px 10px; }
  .hero-slider .cta-row{ gap:8px; }
  .hero-slider .carousel-dots{
    position:static;
    margin-top:12px;
    padding:0 0 8px;
  }
}



/* Odio page side sizing */
.sayfa-odio .hero-grid{grid-template-columns:2fr 1fr; gap:18px;}
.sayfa-odio .hero-grid .side{max-width:420px; justify-self:end; width:100%;}
@media (max-width: 980px){.sayfa-odio .hero-grid{grid-template-columns:1fr;}.sayfa-odio .hero-grid .side{max-width:none; justify-self:stretch;}}



/* --- Header brand tuning (v34+) --- */
.header .brand img{width:56px; height:56px;}
.header .brand .name{font-size:18px; line-height:1.05;}
.header .brand .tag{font-size:11px; margin-top:2px;}
.header .brand > div{display:flex; flex-direction:column; line-height:1.1; min-width:0;}
@media (max-width: 700px){
  .header .brand img{width:42px; height:42px;}
  .header .brand .name{font-size:16px;}
  .header .brand .tag{font-size:10px;}
}


/* brand logo mobile */
@media (max-width: 980px){
  .brand img{width:44px; height:44px;}
}


/* --- v39: enlarge header brand logo slightly --- */
.header .brand img{height:64px;width:auto;display:block}
@media (max-width: 900px){
  .header .brand img{height:48px}
}


/* === Mobile fix: Ürün Ekosistemi (Odio sayfası) === */
@media (max-width: 768px){
  #urunler .two-col{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Mobile'de yatay taşmayı engelle */
  #urunler .two-col > *{ min-width:0; }
  #urunler .card{
    padding: 16px;
    border-radius: 18px;
    max-width: 100%;
    min-width: 0;
  }
  #urunler h2{ font-size: 22px; line-height: 1.2; }
  #urunler h3{ font-size: 16px; line-height: 1.25; }
  #urunler p{ font-size: 14px; line-height: 1.55; }

  /* Uzun metinlerde kırılma: kart ve list item'lar taşıp sayfayı kaydırmasın */
  #urunler h3,
  #urunler p,
  #urunler .list li{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #urunler .list{
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }
  #urunler .list li{
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(243,247,255,.92);
    position: relative;
    padding: 10px 12px 10px 34px; /* soldaki nokta için boşluk */
    border-radius: 14px;
    max-width: 100%;
    min-width: 0;
  }
}

/* === Mobile fix: ürün kartlarında taşmayı önle === */
@media (max-width: 520px){
  #urunler .badge{ max-width: 100%; }
}


/* === About page agency bullets: desktop single row, mobile wrap === */
@media (min-width: 992px){
  .odio-kim-page .agency-bullets{
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
}



/* === FIX: Agency bullets layout (no overlap) === */
.odio-kim-page .agency-bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.odio-kim-page .agency-bullets .pill{ flex:0 0 auto; }

@media (min-width: 992px){
  .odio-kim-page .agency-bullets{
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  /* hide scrollbar but keep scroll */
  .odio-kim-page .agency-bullets::-webkit-scrollbar{ height:0; }
  .odio-kim-page .agency-bullets{ scrollbar-width: none; }
}


/* === Çözümlerimiz (yazilim -> cozumlerimiz) sayfası iyileştirmeleri === */
.solutions-hero .solutions-bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
@media (min-width: 992px){
  .solutions-hero .solutions-bullets{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
  .solutions-hero .solutions-bullets::-webkit-scrollbar{ display:none; }
}
.list.compact{ margin-top:12px; }
.list.compact li{ margin:8px 0; }
.mini-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(124,92,255,.10), rgba(0,0,0,0));
}
@media (max-width: 768px){
  .solutions-hero .hero-grid{ gap:16px; }
  .solutions-hero .hero-card{ margin-top:10px; }
}



/* === Çözümlerimiz (cozumlerimiz.html) güçlendirme === */
.mini-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:16px;
}
.mini-title{
  font-weight:700;
  margin-bottom:6px;
}
.mini-desc{
  opacity:.88;
  font-size:13px;
  line-height:1.35;
}
@media (max-width: 900px){
  .mini-grid{ grid-template-columns: 1fr; }
  .mini-desc{ font-size:14px; }
}

/* Desktop: çözümler hero bullets tek satır, çakışma yok */
@media (min-width: 992px){
  .solutions-hero .solutions-bullets{
    flex-wrap:nowrap;
    gap:12px;
  }
  .solutions-hero .solutions-bullets .pill{
    flex:0 0 auto;
    white-space:nowrap;
  }
}


/* === Solutions menu: clickable parent link + separate toggle (v13.3) === */
.dropdown{display:inline-flex; align-items:center; gap:4px;}
.dropdown .dropdown-link{
  display:inline-flex; align-items:center;
  font: inherit;
  font-weight:700;
  color:var(--text-2);
  text-decoration:none;
  padding:10px 10px;
  border-radius:12px;
}
.dropdown .dropdown-link:hover{background: rgba(124,92,255,.08); color:var(--text)}
.dropdown .dropdown-toggle{padding:10px 8px; min-width:auto;}
/* keep panel alignment */
.dropdown .dropdown-panel{left:0;}
/* Mobile drawer: clickable parent + caret toggle */
.mobile-sub-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mobile-sub-head .mobile-sub-link{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none;
  font-weight:700;
}
.mobile-sub-head button[data-mobile-sub-toggle]{flex:0 0 auto; padding:10px 14px; border-radius:14px;}

/* Mobile drawer: prevent the parent link from collapsing into a thin column
   (causes letters to stack vertically like in the screenshot). We keep the
   same markup but move the caret button to an absolute position so the link
   can stay full-width. */
@media (max-width: 1100px){
  .mobile-sub-head{
    position: relative;
    margin-top: 10px;
  }
  .mobile-sub-head .mobile-sub-link{
    width: 100% !important;
    min-width: 0;
    padding-right: 56px; /* leave room for the caret */
    white-space: normal;
    word-break: normal;
  }
  .mobile-sub-head button[data-mobile-sub-toggle]{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: auto;
    margin-top: 0;
  }
}



/* === Çözümlerimiz: Top Slider (90% width) === */
.solutions-top-slider .solutions-slider-wrap{
  width: min(90vw, 1200px);
  margin: 0 auto;
}
.solutions-top-slider .carousel{
  border-radius: 22px;
  overflow: hidden;
}
.solutions-top-slider .slide-split{
  align-items: stretch;
}
.solutions-top-slider .media-card{
  height: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  display:flex;
  align-items:center;
}
.solutions-top-slider .media-kpis{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width:100%;
}
.solutions-top-slider .kpi{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
}
.solutions-top-slider .kpi-label{
  font-size: 12px;
  opacity: .78;
}
.solutions-top-slider .kpi-val{
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 900px){
  .solutions-top-slider .solutions-slider-wrap{ width: min(92vw, 980px); }
  .solutions-top-slider .slide-split{ grid-template-columns: 1fr; }
  .solutions-top-slider .slide-media{ display:none; }
}



/* Çözümlerimiz süreç kartları */
.solutions-process .card-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 10px;
}
@media (max-width: 768px){
  .solutions-process .cards.three{ grid-template-columns: 1fr; }
}



/* === Solutions Page Width Fix === */
.solutions-page .container{width:90%;max-width:1200px;margin-left:auto;margin-right:auto;}
@media (max-width: 768px){
  .solutions-page .container{width:100%;}
}


/* === Mobile Drawer Offcanvas Fix (v55.2) ===
   Purpose: prevent layout "kayma" (content shift) on mobile menu open.
   Keeps existing markup + JS (open class) intact. */
html.no-scroll, html.no-scroll body{
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none;
}

/* Backdrop injected by JS */
.mobile-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 998;
}
.mobile-backdrop.open{
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1100px){
  /* Keep header height stable; drawer becomes offcanvas */
  .mobile-drawer{
    display: block; /* override display:none so transform works */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 360px);
    padding: 14px 14px 18px;
    background: rgba(16,18,24,.98);
    border-left: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    transform: translateX(104%);
    transition: transform .22s ease;
    z-index: 999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-drawer.open{
    transform: translateX(0);
  }

  /* Make drawer items not create horizontal overflow */
  .mobile-drawer a, .mobile-drawer button{
    max-width: 100%;
  }
}

/* Safety: prevent accidental horizontal scroll on small screens */
@media (max-width: 1100px){
  body{ overflow-x: hidden; }
}