/* ===================== Temalar & Değişkenler ===================== */
/* Varsayılan: DARK */
:root{
  /* Nötr yüzeyler */
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5eef8;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.22);
  --max:1200px;
  --head-bg: rgba(11,18,32,.7);
  color-scheme: dark;

  /* Marka (logo vb. sabit) */
  --brand:#0ea5e9;
  --brand2:#06b6d4;

  /* ===== Varsayılan PALET: Electric Sky ===== */
  --accent:#38bdf8;          /* sky-400 */
  --accent-2:#a78bfa;        /* violet-400 */
  --accent-heat:#22d3ee;     /* hover/active */
  --accent-contrast:#001018; /* CTA metni */
  --glow-1: color-mix(in oklch, var(--accent) 70%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 65%, white);

  --ok:#22c55e;
}

/* Light Tema */
:root[data-theme="light"]{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(2,6,23,.10);
  --head-bg: rgba(255,255,255,.7);
  color-scheme: light;

  /* Sky palet light uyarlaması */
  --accent:#0ea5e9;          /* sky-500 */
  --accent-2:#8b5cf6;        /* violet-500 */
  --accent-heat:#22d3ee;
  --accent-contrast:#071018;
  --glow-1: color-mix(in oklch, var(--accent) 55%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 50%, white);

  --ok:#16a34a;
}

/* ===================== Alternatif PALETLER ===================== */
/* 1) SKY (varsayılan) */
:root[data-palette="sky"]{
  --accent:#38bdf8; --accent-2:#a78bfa; --accent-heat:#22d3ee; --accent-contrast:#001018;
  --glow-1: color-mix(in oklch, var(--accent) 70%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 65%, white);
}
:root[data-theme="light"][data-palette="sky"]{
  --accent:#0ea5e9; --accent-2:#8b5cf6; --accent-heat:#22d3ee; --accent-contrast:#071018;
  --glow-1: color-mix(in oklch, var(--accent) 55%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 50%, white);
}

/* 2) CORAL (sıcak, satış odaklı) */
:root[data-palette="coral"]{
  --accent:#fb7185;          /* rose-400 */
  --accent-2:#f59e0b;        /* amber-500 */
  --accent-heat:#fda4af;     /* rose-300 */
  --accent-contrast:#140307;
  --glow-1: color-mix(in oklch, var(--accent) 70%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 60%, white);
}
:root[data-theme="light"][data-palette="coral"]{
  --accent:#f43f5e;          /* rose-500 */
  --accent-2:#f59e0b;        /* amber-500 */
  --accent-heat:#fb7185;
  --accent-contrast:#180407;
  --glow-1: color-mix(in oklch, var(--accent) 50%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 45%, white);
}

/* 3) LIME (enerjik, genç) */
:root[data-palette="lime"]{
  --accent:#84cc16;          /* lime-500 */
  --accent-2:#22c55e;        /* green-500 */
  --accent-heat:#a3e635;     /* lime-400 */
  --accent-contrast:#0a1406;
  --glow-1: color-mix(in oklch, var(--accent) 70%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 60%, white);
}
:root[data-theme="light"][data-palette="lime"]{
  --accent:#65a30d;          /* lime-600 (light’ta biraz koyulaştır) */
  --accent-2:#16a34a;        /* green-600 */
  --accent-heat:#84cc16;
  --accent-contrast:#0b1407;
  --glow-1: color-mix(in oklch, var(--accent) 50%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 45%, white);
}

/* 4) MAGENTA (lüks/yaratıcı) */
:root[data-palette="magenta"]{
  --accent:#e879f9;          /* fuchsia-400 */
  --accent-2:#818cf8;        /* indigo-400 */
  --accent-heat:#d8b4fe;     /* violet-300 */
  --accent-contrast:#160418;
  --glow-1: color-mix(in oklch, var(--accent) 70%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 60%, white);
}
:root[data-theme="light"][data-palette="magenta"]{
  --accent:#c026d3;          /* fuchsia-600 */
  --accent-2:#4f46e5;        /* indigo-600 */
  --accent-heat:#a78bfa;
  --accent-contrast:#110414;
  --glow-1: color-mix(in oklch, var(--accent) 50%, white);
  --glow-2: color-mix(in oklch, var(--accent-2) 45%, white);
}

/* ===================== Reset / Base ===================== */
*{box-sizing:border-box}
*:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.wrap{max-width:var(--max); margin:auto; padding:0 16px}

/* Başlık boyutları */
h1{font-size:clamp(28px,5vw,44px); line-height:1.2}
h2{font-size:clamp(22px,3.2vw,32px); line-height:1.25}
h3{font-size:20px; line-height:1.3}
h4{font-size:18px; line-height:1.35}
h5{font-size:16px; line-height:1.4}
h6{font-size:14px; line-height:1.4}

/* UA özgüllüğü */
:where(article,aside,nav,section) h1{font-size:clamp(28px,5vw,44px)}
:where(article,aside,nav,section) h2{font-size:clamp(22px,3.2vw,32px)}
:where(article,aside,nav,section) h3{font-size:20px}
:where(article,aside,nav,section) h4{font-size:18px}
:where(article,aside,nav,section) h5{font-size:16px}
:where(article,aside,nav,section) h6{font-size:14px}

/* ===================== Header ===================== */
.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--head-bg); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
  overflow:visible;
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; gap:10px; align-items:center; font-weight:700}
.brand-logo{width:auto; height:50px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2,var(--brand2)))}

.menu{display:flex; gap:18px; align-items:center}
.menu > a:not(.cta), .menu .parent-link{position:relative}
.menu > a:not(.cta)::after, .menu .parent-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .3s ease;
}
.menu > a:not(.cta):hover::after,
.menu > a:not(.cta):focus-visible::after,
.menu > a:not(.cta).active::after,
.menu .parent-link:hover::after,
.menu .parent-link:focus-visible::after,
.menu .parent-link.active::after{width:100%}

.menu a:hover,
.menu a:focus-visible{color:var(--text)}
.menu a.active{color:var(--text); font-weight:600}

.cta{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  padding:10px 14px; border-radius:12px; color:#001018; font-weight:700
}
.cta:hover{transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,.3)}

.mobile-toggle{display:none; background:transparent; border:0; color:var(--text); font-size:20px}

/* Dropdown */
.has-sub{position:relative; display:flex; align-items:center; gap:6px}
.has-sub > .parent-link{display:inline-flex; align-items:center}
.sub-toggle{
  border:0; background:transparent; color:var(--muted);
  font-size:14px; line-height:1; cursor:pointer; padding:6px; border-radius:8px;
  transition:color .2s, transform .2s;
}
.sub-toggle:focus-visible{outline:2px solid var(--accent)}
.has-sub:hover .sub-toggle{color:var(--text)}
.submenu{
  position:absolute; top:100%; left:0; min-width:240px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:41;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.submenu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.submenu a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--muted);
  transition:background .2s, color .2s;
}
.submenu a:hover, .submenu a:focus-visible{background:rgba(255,255,255,.06); color:var(--text)}
@media (min-width:861px){
  .has-sub.open-intent .submenu,
  .has-sub:focus-within .submenu{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .has-sub .sub-toggle{pointer-events:none}
}
@media (max-width:860px){
  .menu{display:none}
  .mobile-toggle{display:block}
  .menu.open{
    display:flex; flex-direction:column; gap:12px; position:absolute; left:0; right:0; top:64px;
    background:var(--card); padding:16px; border-bottom:1px solid var(--border)
  }
  .submenu{
    position:static; box-shadow:none; border:0; padding:6px 8px;
    opacity:1; visibility:visible; transform:none; transition:none; display:none;
  }
  .has-sub.open > .submenu{display:block}
  .has-sub.open > .sub-toggle{transform:rotate(180deg); color:var(--text)}
}

/* ===================== Sections ===================== */
section{padding:56px 0; border-top:1px solid var(--border)}
.hero{
  padding:72px 0;
  /* Palete göre dinamik glow */
  background:
    radial-gradient(1200px 420px at 15% -10%, color-mix(in oklch, var(--glow-1) 35%, transparent) 0%, transparent 65%),
    radial-gradient(1000px 420px at 85% -5%, color-mix(in oklch, var(--glow-2) 30%, transparent) 0%, transparent 65%);
}
.hero h1{font-size:clamp(28px,5vw,44px); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); font-size:clamp(15px,2.2vw,18px); max-width:720px}
.page-hero h1{margin:0 0 12px}
.page-hero p{color:var(--muted)}

.btns{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid var(--border);
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-contrast);
  border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent) 45%, transparent),
    0 10px 30px color-mix(in oklch, var(--accent) 25%, black),
    0 2px 10px color-mix(in oklch, var(--accent-2) 20%, black);
  transform: translateY(0);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  filter: saturate(1.15);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--accent-heat) 55%, transparent),
    0 14px 36px color-mix(in oklch, var(--accent-heat) 30%, black),
    0 4px 14px color-mix(in oklch, var(--accent-2) 28%, black);
  transform: translateY(-1px);
}
.btn-primary:active{ transform: translateY(0); filter: saturate(1.25); }
.btn-ghost{border:1px solid rgb(0 90 255 / .6); color:var(--text)}

/* ===== Grid & Cards ===== */
.grid{display:grid; gap:16px}
.two{grid-template-columns:repeat(2,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.grid > *{min-width:0}
@media (max-width:860px){
  .two,.three,.four{grid-template-columns:1fr}
}

.card{background:var(--card); padding:18px; border:1px solid var(--border); border-radius:16px}
.muted{color:var(--muted)}

/* KPI */
.kpis{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px}
.kpi{
  flex:1 1 180px;
  background:color-mix(in oklch, var(--accent) 12%, transparent);
  border:1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  padding:14px; border-radius:14px
}
.kpi b{font-size:20px; color:var(--accent)}

/* Skills & Pricing */
.skills{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding-left:16px}
.pricing{padding-left:16px}

/* FAQ */
.faq details{background:var(--card); padding:14px; border-radius:14px; border:1px solid var(--border)}
.faq summary{cursor:pointer; font-weight:600}
.faq details + details{margin-top:10px}

/* Sayfa min boy */
.page{min-height:60vh}

/* ========== Arama & Formlar: temaya bağlı renkler ========== */
.search{
  width:100%; max-width:520px; padding:12px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}
.search::placeholder{color:var(--muted)}

#contactForm input,
#contactForm select,
#contactForm textarea{
  width:100%; margin:6px 0 14px; padding:12px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}
#contactForm ::placeholder{color:var(--muted)}
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus{
  outline:2px solid var(--accent);
  border-color:transparent;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
}
#contactForm .form-msg{margin-top:8px; color:var(--muted)}

/* Post kapak */
.post-cover{margin:0 0 16px; border-radius:16px; overflow:hidden; border:1px solid var(--border)}
.post-cover img{display:block; width:100%; height:auto}

/* ===== Homepage Gallery ===== */
.home-gallery{padding:40px 0}
.hg-wrap{position:relative; display:block}
.slide{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  aspect-ratio:16/9;
  display:none;
}
.slide.is-active{display:block}
.slide img{width:100%; height:100%; object-fit:cover; display:block}

.hg-prev,.hg-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:rgba(0,0,0,.35); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.hg-prev{left:8px} .hg-next{right:8px}
.hg-dots{position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center}
.hg-dots .dot{
  width:8px; height:8px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background:transparent
}
.hg-dots .dot.is-on{background:#fff}

/* Desktop 2 sütun, mobil slider */
@media (min-width:861px){
  .hg-wrap{display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
  .slide{display:block !important; min-width:0}
  .hg-prev,.hg-next,.hg-dots{display:none !important}
}

/* ===================== Footer ===================== */
.site-foot{padding:40px 0; border-top:1px solid var(--border)}
.foot{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.foot small{color:var(--muted)}
.social a{color:var(--muted); margin-left:10px}

/* ===================== Utility / Animations ===================== */
::selection{ background: color-mix(in oklch, var(--accent) 35%, white); color: var(--accent-contrast); }
.fade{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.fade.in{opacity:1; transform:none}
.sr-only{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .menu > a:not(.cta)::after,
  .menu .parent-link::after,
  .sub-toggle,
  .fade{transition:none}
}
/* ===================== PALET BOOST PACK ===================== */
/* 0) Türev değişkenler (accent'ten üretim) */
:root{
  --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-softer: color-mix(in oklch, var(--accent) 10%, transparent);
  --accent-strong: color-mix(in oklch, var(--accent) 28%, transparent);
  --accent-2-soft: color-mix(in oklch, var(--accent-2) 14%, transparent);
  --shadow-accent: 0 10px 30px color-mix(in oklch, var(--accent) 22%, black);
}

/* Bold modu: doygunluk + %10 */
[data-tone="bold"]{
  --accent: color-mix(in oklch, var(--accent) 90%, white);
  --accent-2: color-mix(in oklch, var(--accent-2) 90%, white);
}

/* 1) Sayfa arka planına palet dokunuşu (çok hafif parıltı) */
html, body{
  background:
    radial-gradient(1100px 420px at 12% -8%, var(--accent-softer), transparent 65%),
    radial-gradient(950px 420px at 88% -6%, var(--accent-2-soft), transparent 65%),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
}

/* Light’ta parıltıyı biraz kıs */
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 420px at 15% -10%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 65%),
    radial-gradient(1000px 420px at 90% -10%, color-mix(in oklch, var(--accent-2) 5%, transparent), transparent 65%),
    var(--bg);
}

/* 2) Marka ile paleti senkron et (opsiyonel) */
:root[data-brand-sync="1"]{
  --brand: var(--accent);
  --brand2: var(--accent-2);
}

/* 3) Başlıklara degrade metin (hero ve sayfa başlıkları) */
.hero h1,
.page-hero h1{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 4) Menü aktif / hover kapsülleri belirginleşsin */
.menu a.active,
.menu > a:not(.cta):hover,
.menu .parent-link:hover{
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  border-radius: 10px;
  padding: 6px 8px;
}

/* 5) Kartlarda gradient-kenar ve hafif iç parıltı */
.card{
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent) 6%, var(--card)), var(--card)) padding-box,
    linear-gradient(140deg, var(--accent), var(--accent-2)) border-box;
  border: 1px solid transparent; /* gradient border için */
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 8px 24px rgba(0,0,0,.10),
    inset 0 1px 0 color-mix(in oklch, var(--accent) 16%, transparent);
}

/* 6) Linkleri palete bağla (site genelinde) */
a:not(.btn):not(.cta){
  color: color-mix(in oklch, var(--accent) 80%, var(--text));
  text-underline-offset: 2px;
}
a:not(.btn):not(.cta):hover{
  text-decoration: underline;
}

/* 7) “Badge / etiket” görünümü (küçük vurgu alanları için) */
.badge, .tag{
  display:inline-block; padding:6px 10px; border-radius:1000px;
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  color: var(--text); font-weight:600; font-size: 12px;
}

/* 8) Ghost butonlar palete yaklaştırılsın */
.btn-ghost{
  border:1px solid color-mix(in oklch, var(--accent) 40%, var(--border));
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.btn-ghost:hover{
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  box-shadow: var(--shadow-accent);
}

/* 9) Form alanları: focus’ta neon halka + hafif zemin tint */
:where(input,select,textarea,.search):focus-visible{
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent);
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 6%, var(--card)), var(--card));
  border-color: transparent;
}

/* 10) KPI kutuları: palete göre daha gövdeli */
.kpi{
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 18%, transparent),
    color-mix(in oklch, var(--accent) 6%, transparent)
  );
  border:1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--accent) 30%, transparent);
}
.kpi b{ color: var(--accent); }

/* 11) Post kapak görsellerine palet tinti (okunabilirliği artırır) */
.post-cover{ position:relative; overflow:hidden; }
.post-cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--accent) 18%, transparent));
}

/* 12) Alt bilgi linkleri ve sosyal ikonlar palete yaklaşsın */
.site-foot .social a,
.site-foot small a{ color: color-mix(in oklch, var(--accent) 75%, var(--muted)); }

/* 13) Scrollbar (destekleyen tarayıcılar) */
*{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--accent) 55%, #7a7a7a) transparent;
}
::-webkit-scrollbar{ height: 10px; width: 10px }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}
::-webkit-scrollbar-track{ background: transparent }

/* 14) Bölüm vurgusu için yardımcı sınıf */
.section-accent{
  background:
    radial-gradient(900px 360px at 10% 10%, var(--accent-softer), transparent 60%),
    radial-gradient(900px 360px at 90% 0%, var(--accent-2-soft), transparent 60%),
    var(--bg);
  border-top:1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-bottom:1px solid color-mix(in oklch, var(--accent) 35%, transparent);
}
.section-accent .card{
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent) 8%, var(--card)), var(--card)) padding-box,
    linear-gradient(140deg, var(--accent), var(--accent-2)) border-box;
}

/* 15) Menü altı ayraç – ince gradient çizgi */
.site-head{
  box-shadow: 0 1px 0 color-mix(in oklch, var(--accent) 35%, var(--border));
}