:root{
  --bg:#0b0b10;
  --card:#131321;
  --text:#f3f4f6;
  --muted:#a9adc1;
  --brand:#c86bff;
  --brand-2:#ff4d6d;
  --ring:0 0 0 8px color-mix(in srgb, var(--brand) 20%, transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% 0%, #151529 0%, var(--bg) 45%, #08080d 100%);
  color:var(--text);
  line-height:1.65;
}

/* Links */
a{color:var(--brand); text-decoration:none; transition: color .25s ease, opacity .25s ease}
a:hover{color:var(--brand-2)}
/* Do not recolor buttons on hover */
a.btn, .btn { color:#fff !important }
a.btn:hover, .btn:hover { color:#fff !important }

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{position:sticky; top:0; z-index:40; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg) 70%, #1a1a2b); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo-badge{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:white;font-size:14px}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:var(--muted);font-weight:700;font-size:14px;padding:8px 10px;border-radius:10px}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.05)}
/* Ensure nav Contact button is white text */
.menu .btn{color:#fff !important}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff !important;border:none;border-radius:14px;padding:12px 18px;font-weight:800;text-decoration:none;
  box-shadow: 0 8px 18px rgba(200,107,255,.18), 0 6px 16px rgba(255,77,109,.14);
  transform: translateZ(0);
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.2), 0 10px 22px rgba(255,77,109,.22)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-weight:700;color:var(--muted)}
.small{font-size:12px}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:24px}
@media (max-width: 860px){
  .menu{display:none;position:absolute;inset:60px 20px auto 20px;flex-direction:column;background:var(--card);padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.06)}
  .menu.show{display:flex}
  .hamburger{display:block}
}

.hero{padding:84px 0 36px; position:relative; overflow:hidden}
.hero h1{font-size:clamp(32px,4.5vw,56px);line-height:1.1;margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:820px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.badge{padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:var(--muted);font-weight:700;font-size:12px}
.glow{position:absolute; inset:auto -10% -20% -10%; height:280px;background: radial-gradient(60% 120% at 50% 50%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%); filter: blur(40px); opacity:.6; pointer-events:none}

.section{padding:56px 0}
.section h2{font-size:clamp(22px,3.2vw,34px);margin:0 0 10px}
.section p.lead{color:var(--muted);margin:0 0 26px}

.grid{display:grid; gap:18px; grid-template-columns: repeat(12, 1fr)}
.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:18px; box-shadow: 0 10px 24px rgba(0,0,0,.25)}
.card:hover{transform:translateY(-2px); transition: .2s ease; box-shadow: 0 14px 26px rgba(0,0,0,.35)}
.project{display:flex;flex-direction:column;gap:12px}
.project img{width:100%;height:180px;object-fit:cover;border-radius:12px}
.tag{font-size:11px;color:#d1c7ff}
.kpis{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-weight:700}
.kpi{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}

.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 900px){.cols-3,.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width: 620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.contact{display:grid; gap:18px; grid-template-columns:1.2fr .8fr}
@media (max-width: 860px){.contact{grid-template-columns:1fr}}
.input, textarea{width:100%; padding:14px 16px; background:#0e0e18; border:1px solid rgba(255,255,255,.08); border-radius:12px; color:var(--text); font:inherit}
textarea{min-height:140px; resize:vertical}
.input:focus, textarea:focus{outline:none; box-shadow:var(--ring); border-color:color-mix(in srgb, var(--brand) 45%, rgba(255,255,255,.2))}

.footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.06); color:var(--muted)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}
/* Footer links stacked */
.footer .jobs a{display:block;margin:6px 0;padding:4px 0}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(5,5,10,.7); display:none; align-items:center; justify-content:center; z-index:60; padding:20px}
.modal.show{display:flex}
.modal-card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:20px; max-width:880px; width:100%; overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-body{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:18px}
.modal-body img{width:100%;height:280px;object-fit:cover;border-radius:14px}
.modal-close{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer}
@media (max-width: 780px){.modal-body{grid-template-columns:1fr} .modal-body img{height:200px}}


/* --- v5 Enhancements --- */

/* Animated gradient text for hero keyword */
.hero .animated-gradient{
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 100%;
  animation: glowText 8s linear infinite;
}
@keyframes glowText{0%{background-position:0 0}100%{background-position:-200% 0}}

/* Micro-interactions */
.card:hover{transform:translateY(-4px) scale(1.01)}

/* Gradient underline for links (except buttons) */
a:not(.btn):hover{
  background-image: linear-gradient(to right, var(--brand), var(--brand-2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

/* Button subtle animated sheen */
.btn{
  background-size: 200% 100%;
  background-position: 0 0;
  transition: background-position .5s ease, filter .2s ease;
}
.btn:hover{ background-position: 100% 0; filter: brightness(1.08) }
.btn:disabled{opacity:.7; cursor:not-allowed}

/* Mobile spacing improvements */
@media (max-width: 540px){
  .btn{padding:14px 20px}
}

/* Header shadow on scroll helper (added class via JS) */
.nav.is-scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.35) }


/* --- v7 Modal & Media Tweaks --- */
.modal-card{
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header{ position: sticky; top: 0; background: var(--card); z-index: 1 }
.modal-body{
  overflow: auto;
  /* leave grid as-is; just make scrollable when tall */
}
.modal-body img{ height: 220px } /* keep thumbnails compact */
.modal-body video{
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 780px){
  .modal-body img{ height: 180px }
  .modal-body video{ max-height: 220px }
}


/* --- v8 Footer Mobile Simplification --- */
@media (max-width: 600px){
  .footer .container.grid.cols-3 > :not(:first-child){ display:none !important; }
  .footer{ padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}


/* --- v9 Mobile Gutters & Spacing --- */
@media (max-width: 860px){
  .container{ padding-left: 18px; padding-right: 18px; }
  .section{ padding-top: 42px; padding-bottom: 42px; }
  .hero{ padding-top: 72px; padding-bottom: 30px; }
  .card{ margin-left: 2px; margin-right: 2px; }
  /* ensure nav inner has same gutters */
  .nav .nav-inner{ padding-left: 18px; padding-right: 18px; }
  /* safe-area for iOS */
  body{ padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}
@media (max-width: 520px){
  .container{ padding-left: 16px; padding-right: 16px; }
  .nav .nav-inner{ padding-left: 16px; padding-right: 16px; }
}


/* --- v10 Tablet Padding, Menu Blur + Dim, Swipe Carousel --- */

/* Tablet padding extends from 600px–1024px */
@media (min-width: 601px) and (max-width: 1024px){
  .container{ padding-left: 32px; padding-right: 32px; }
  .section{ padding-left: 32px; padding-right: 32px; }
  .nav .nav-inner{ padding-left: 32px; padding-right: 32px; }
}

/* Mobile menu overlay with dim + blur background */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,20,0.55);
  backdrop-filter:blur(6px);
  display:none;
  z-index:50;
}
.menu-overlay.show{display:block;animation:fadeIn .25s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Swipe carousel for cards (mobile) */
.swipe-container{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
}
.swipe-container::-webkit-scrollbar{display:none}
.swipe-container .card{
  min-width:80%;
  flex:0 0 auto;
  scroll-snap-align:start;
}
@media(min-width:860px){
  .swipe-container{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
}


/* --- v11 Tweaks --- */
/* 1025–1136px gutter boost (big tablet / small desktop) */
@media (min-width:1025px) and (max-width:1136px){
  .container{ padding-left:40px; padding-right:40px; }
  .nav .nav-inner{ padding-left:40px; padding-right:40px; }
}

/* Tablet footer simplified like mobile */
@media (min-width:601px) and (max-width:1024px){
  .footer .container.grid.cols-3 > :not(:first-child){ display:none !important; }
}

/* Ensure mobile dropdown menu appears above overlay */
.menu{ position:relative; z-index:61; }
.menu.show{ z-index: 61; }
.menu-overlay{ z-index: 50; } /* overlay below the dropdown but above page */

/* Fine-tune carousel cards to avoid edge clipping */
.swipe-container .card{ margin-right: 6px; }


/* --- v12 Menu Fixes --- */
/* Mobile menu panel look */
@media (max-width: 860px){
  .menu{
    display:none;
    position:absolute;
    top:64px; right:20px; left:auto; bottom:auto;
    flex-direction:column;
    background:var(--card);
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 36px rgba(0,0,0,.45);
    width:min(220px, 80vw);
  }
  .menu.show{display:flex}
  .menu a{padding:10px 12px}
  .menu .btn{margin-top:8px}
  .hamburger{display:block}
}

/* Desktop layout must always be horizontal and visible */
@media (min-width: 861px){
  .menu{
    display:flex !important;
    position:static;
    background:transparent;
    padding:0;
    border:none;
    box-shadow:none;
    width:auto;
  }
  .menu a{background:transparent}
  .menu-overlay{display:none !important}
  .hamburger{display:none}
}


/* --- v13 Enhancements --- */

/* Reduce motion for sensitive users */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* Use dynamic viewport height on mobile */
:root{ --vh: 100dvh }
.hero{ min-height: calc(var(--vh) * 0.45) }

/* Hamburger animation */
.hamburger{transition:transform .25s ease}
.hamburger.open{transform:rotate(90deg)}

/* Menu fade/slide animation */
@media (max-width: 860px){
  .menu{opacity:0; transform:translateY(-6px); transition: opacity .22s ease, transform .22s ease}
  .menu.show{opacity:1; transform:none}
}

/* Active link highlight */
.menu a.active{ color: #fff; background: rgba(255,255,255,.08) }

/* Carousel dots */
.dots{ display:flex; gap:8px; justify-content:center; margin-top:10px }
.dots button{ width:8px; height:8px; border-radius:999px; border:none; background:#46465a; opacity:.6 }
.dots button.active{ opacity:1; background:linear-gradient(135deg,var(--brand),var(--brand-2)) }
.dots button:focus{ outline:2px solid rgba(255,255,255,.2) }

/* Favorites (heart) */
.fav-btn{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); color:#fff; padding:6px 8px; border-radius:12px; font-size:12px }
.fav-btn.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)) }

/* Tablet 2-column project layout on projeler.html */
@media (min-width: 700px) and (max-width: 1024px){
  .grid.cols-3{ grid-template-columns: 1fr 1fr }
}

/* Skeleton loading for infinite items */
.skeleton{ position:relative; overflow:hidden }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.02) 100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }