/* =========================================================
   KOALABS — Ana sayfa tasarım sistemi
   ColorForge ile aynı palet/tipografi — marka tutarlılığı için.
   ========================================================= */
:root{
  --bg-0: #0a0c11;
  --bg-1: #10131b;
  --bg-2: #161a24;
  --bg-3: #1d2230;
  --line: #262c3b;
  --line-soft: #1c2130;
  --text-0: #f2f3f7;
  --text-1: #b6bbca;
  --text-2: #767c8f;
  --violet: #8b6bff;
  --violet-soft: #6a54c9;
  --cyan: #2fd7d0;
  --amber: #ff9a4d;
  --grad-paint: linear-gradient(120deg, var(--violet) 0%, var(--cyan) 100%);
  --grad-paint-soft: linear-gradient(120deg, rgba(139,107,255,.16) 0%, rgba(47,215,208,.16) 100%);
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -20px rgba(0,0,0,.6);
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(139,107,255,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(47,215,208,.10), transparent 55%),
    var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--violet);color:#0a0c11;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px;}

.container{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3,.display{font-family:var(--font-display);letter-spacing:-0.01em;}
.mono{font-family:var(--font-mono);}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);}
.muted{color:var(--text-1);}
.muted-2{color:var(--text-2);}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(10,12,17,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:19px;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--grad-paint);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-size:14px;color:var(--text-1);transition:color .15s;}
.nav-links a:hover{color:var(--text-0);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:11px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--grad-paint);color:#0a0c14;box-shadow:0 8px 24px -8px rgba(139,107,255,.55);}
.btn-primary:hover{box-shadow:0 10px 28px -6px rgba(139,107,255,.7);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text-0);}
.btn-ghost:hover{border-color:var(--violet-soft);background:rgba(139,107,255,.06);}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:9px;}

/* ---------- Hero ---------- */
.hero{padding:100px 0 70px;position:relative;overflow:hidden;text-align:center;}
.hero h1{font-size:56px;line-height:1.05;margin:20px 0 20px;font-weight:600;}
.hero h1 .grad{background:var(--grad-paint);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:18px;color:var(--text-1);max-width:560px;margin:0 auto 34px;line-height:1.6;}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Sections ---------- */
.section{padding:80px 0;}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:32px;margin:10px 0 12px;font-weight:600;}
.section-head p{color:var(--text-1);font-size:15.5px;line-height:1.6;}

/* ---------- Product card (ColorForge tanıtımı) ---------- */
.product-card{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line-soft);border-radius:24px;padding:44px;
  box-shadow:var(--shadow-1);
}
.product-card .status-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:100px;border:1px solid rgba(47,215,208,.3);background:rgba(47,215,208,.08);color:var(--cyan);margin-bottom:16px;}
.product-card h3{font-size:26px;margin:0 0 12px;font-weight:600;}
.product-card p{color:var(--text-1);font-size:15px;line-height:1.65;margin-bottom:24px;}
.product-visual{aspect-ratio:1/1;border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line-soft);background:var(--bg-1);}
.product-visual .half{position:absolute;inset:0;}
.product-visual .before{clip-path:polygon(0 0, 55% 0, 45% 100%, 0 100%);background:radial-gradient(circle at 30% 30%, #23283a, #14161d 70%);}
.product-visual .after{clip-path:polygon(55% 0, 100% 0, 100% 100%, 45% 100%);background:radial-gradient(circle at 70% 40%, rgba(139,107,255,.35), transparent 55%),radial-gradient(circle at 40% 75%, rgba(47,215,208,.30), transparent 55%),#14161d;}
.product-visual .seamline{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--grad-paint);transform:translateX(-50%) skewX(-6deg);box-shadow:0 0 24px 2px rgba(139,107,255,.6);}
.feature-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;}
.feature-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-1);}
.feature-list li svg{flex-shrink:0;color:var(--cyan);}

/* ---------- Yakında / vizyon kartları ---------- */
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vision-card{padding:26px 24px;border-radius:16px;border:1px solid var(--line-soft);background:var(--bg-1);}
.vision-card .icon{width:36px;height:36px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--violet);}
.vision-card h3{font-size:15.5px;margin:0 0 8px;font-weight:600;}
.vision-card p{font-size:13.5px;color:var(--text-1);line-height:1.6;margin:0;}
.placeholder-note{margin-top:10px;font-size:12px;color:var(--text-2);font-style:italic;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line-soft);padding:36px 0;margin-top:40px;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footer p{color:var(--text-2);font-size:13px;margin:0;}

/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.service-card{padding:26px 22px;border-radius:16px;border:1px solid var(--line-soft);background:var(--bg-1);transition:border-color .15s, transform .15s;}
.service-card:hover{border-color:var(--violet-soft);}
.service-card .icon{width:38px;height:38px;border-radius:10px;background:var(--grad-paint-soft);border:1px solid rgba(139,107,255,.3);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--violet);}
.service-card h3{font-size:15.5px;margin:0 0 8px;font-weight:600;}
.service-card p{font-size:13.5px;color:var(--text-1);line-height:1.6;margin:0;}

/* ---------- Wholesale banner ---------- */
.wholesale-banner{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--grad-paint-soft);border:1px solid rgba(139,107,255,.3);border-radius:20px;padding:32px 36px;
}
.wholesale-banner h3{font-size:22px;margin:0 0 8px;font-weight:600;}
.wholesale-banner p{color:var(--text-1);font-size:14.5px;margin:0;max-width:480px;line-height:1.6;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.contact-card{
  display:flex;flex-direction:column;gap:14px;padding:28px 24px;border-radius:18px;
  border:1px solid var(--line-soft);background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  text-align:left;transition:border-color .15s, transform .15s;
}
.contact-card:hover{border-color:var(--violet-soft);transform:translateY(-2px);}
.contact-card .icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;}
.contact-card.phone .icon{background:rgba(47,215,208,.12);border:1px solid rgba(47,215,208,.3);color:var(--cyan);}
.contact-card.whatsapp .icon{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);color:#4ade80;}
.contact-card.instagram .icon{background:rgba(255,154,77,.12);border:1px solid rgba(255,154,77,.3);color:var(--amber);}
.contact-card h3{font-size:15px;margin:0;font-weight:600;}
.contact-card .value{font-family:var(--font-mono);font-size:14.5px;color:var(--text-0);}
.contact-card p{font-size:13px;color:var(--text-2);margin:0;line-height:1.5;}

@media (max-width: 900px){
  .hero h1{font-size:40px;}
  .product-card{grid-template-columns:1fr;}
  .product-visual{order:-1;}
  .vision-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .services-grid{grid-template-columns:1fr;}
}