/* =========================================================
   CANERARTS — style.css
   Tailwind (CDN) taban katmanının üzerine özel stiller.
   Renk sistemi: Obsidian siyah + Neon Cyan (#00e5ff) + Altın (#ffd700)
========================================================= */

:root{
  --black:#000000;
  --obsidian:#050607;
  --ink:#EDEFF2;
  --mute:#9AA3AF;
  --faint:#5B6472;
  --cyan:#00e5ff;
  --gold:#ffd700;
  --wa:#25D366;
  --glass-bg:rgba(255,255,255,0.045);
  --glass-border:rgba(255,255,255,0.09);
}

*{ box-sizing:border-box; }

html{
  background:var(--obsidian); /* JS/WebGL yüklenmeden önceki geçici fallback */
}
body{
  margin:0; padding:0;
  background:transparent; /* #bg-3d katmanı arkada görünsün diye */
  color:var(--ink);
  overflow-x:hidden;
  scroll-behavior:smooth; /* Lenis JS aktif olunca native yerine devreye girer */
}
body{ font-family:'Inter', sans-serif; }
h1,h2,h3,.font-display{ font-family:'Sora', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }
::selection{ background:var(--gold); color:#000; }
.gold{ color:var(--gold); }
.cyan{ color:var(--cyan); }

/* ---------------------------------------------------------
   GPU HIZLANDIRMA — kasmayı önlemek için animasyonlu elemanlar
--------------------------------------------------------- */
.gpu,
.reveal,
.card,
.p-card,
#logo-3d,
.wa-btn{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------------------------------------------------------
   GLASSMORPHISM
--------------------------------------------------------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 16px;
}

/* ---------------------------------------------------------
   SABİT 3D ARKAPLAN KATMANI
   Tüm sayfanın arkasında sabit duran, hafif opaklıklı
   parçacık/wireframe alanı. İçerik her zaman önünde kalır.
--------------------------------------------------------- */
#bg-3d{
  position:fixed; inset:0; z-index:-1;
  width:100vw!important; height:100vh!important;
  display:block; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(0,229,255,0.05), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(255,215,0,0.045), transparent 55%),
    var(--obsidian);
}

/* ---------------------------------------------------------
   SCROLL İLERLEME ÇUBUĞU
--------------------------------------------------------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--cyan));
  z-index:100; pointer-events:none;
  box-shadow:0 0 12px rgba(0,229,255,0.5);
}

/* ---------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------- */
header{
  position:fixed; top:0; inset-inline:0; z-index:50;
  transition: background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.08);
}
.nav-wrap{
  max-width:1200px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-text{ font-family:'Sora',sans-serif; font-weight:700; letter-spacing:.1em; color:#fff; }
nav a{ color:var(--mute); text-decoration:none; font-size:13px; margin-left:28px; transition:color .3s; }
nav a:hover{ color:var(--cyan); }

.btn-outline{
  border:1px solid rgba(255,255,255,0.15); color:var(--ink);
  padding:10px 20px; border-radius:8px; text-decoration:none; font-size:13px;
  transition:border-color .3s, color .3s;
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }

.btn-solid{
  background:linear-gradient(120deg, var(--gold), #e8b923);
  color:#000; padding:12px 26px; border-radius:8px; text-decoration:none;
  font-weight:600; font-size:14px; display:inline-block;
  transition:transform .3s, box-shadow .3s;
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(255,215,0,0.5); }

/* ---------------------------------------------------------
   LAYOUT
--------------------------------------------------------- */
main{ max-width:1200px; margin:0 auto; padding:0 28px; }
section{ padding:140px 0; position:relative; }
#hero{ min-height:100vh; display:flex; align-items:center; padding-top:120px; }

.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; width:100%; }
.eyebrow{ color:var(--cyan); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; }

h1{ font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.08; font-weight:700; margin:0 0 22px; }
.line{ overflow:hidden; display:block; }
.line span{ display:inline-block; transform:translateY(110%); }

.hero-sub{ color:var(--mute); font-size:1.15rem; max-width:520px; line-height:1.7; margin-bottom:36px; }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:46px; }
.stack-row{ display:flex; gap:24px; flex-wrap:wrap; color:var(--faint); font-size:12px; }

/* ---------------------------------------------------------
   3D LOGO CANVAS
--------------------------------------------------------- */
.hero3d-wrap{ position:relative; width:100%; height:440px; }
#logo-3d{ width:100%!important; height:100%!important; display:block; cursor:grab; }
#logo-3d:active{ cursor:grabbing; }
.drag-hint{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--faint); letter-spacing:.05em;
}

/* ---------------------------------------------------------
   SECTIONS — services / portfolio / contact
--------------------------------------------------------- */
.eyebrow-section{ color:var(--gold); font-size:13px; margin-bottom:12px; }
h2{ font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; margin:0 0 20px; letter-spacing:-.01em; }
.lead{ color:var(--mute); max-width:640px; line-height:1.7; margin-bottom:54px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.card{ padding:32px; transition:transform .4s ease, border-color .4s ease; }
.card:hover{ transform:translateY(-6px); border-color:rgba(255,215,0,0.35); }
.icon-box{
  width:46px; height:46px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; margin-bottom:20px;
  background:rgba(0,229,255,0.1);
}
.icon-box.icon-gold{ background:rgba(255,215,0,0.1); }
.card h3{ font-size:18px; margin:0 0 10px; }
.card p{ color:var(--mute); font-size:14px; line-height:1.6; margin:0; }

/* Portfolio cards (populated by js/main.js) */
.p-card{ overflow:hidden; cursor:pointer; padding:0; }
.p-cover{
  height:190px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:16px;
  border-bottom:1px solid var(--glass-border);
  background:#0b0d10;
}
.p-cover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.p-cover::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
}
.p-cover .tag{ position:relative; z-index:1; }

.tag{
  font-size:11px; font-family:'IBM Plex Mono',monospace; padding:5px 12px;
  border-radius:20px; border:1px solid;
}
.tag-gold{ color:var(--gold); border-color:rgba(255,215,0,0.4); background:rgba(255,215,0,0.12); }
.tag-cyan{ color:var(--cyan); border-color:rgba(0,229,255,0.4); background:rgba(0,229,255,0.12); }

.p-body{ padding:26px; }
.p-body h3{ font-size:18px; margin:0 0 10px; }
.p-body p{ color:var(--mute); font-size:13.5px; line-height:1.6; margin:0 0 18px; }
.link-more{
  color:var(--gold); font-size:13px; font-family:'IBM Plex Mono',monospace;
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s;
}
.link-more:hover{ border-color:var(--gold); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; }
.contact-item{
  display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none;
  font-family:'IBM Plex Mono',monospace; font-size:14px; margin-bottom:16px;
  border-bottom:1px solid transparent; width:fit-content;
}
.contact-item:hover{ border-color:var(--gold); color:var(--gold); }
.contact-item.static-item{ cursor:default; }
.contact-item.static-item:hover{ border-color:transparent; color:var(--ink); }

/* Bot tuzağı — ekran okuyucudan da gizli, insan kullanıcı asla görmez */
.honeypot{
  position:absolute!important; left:-9999px!important; top:-9999px!important;
  width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important;
}

form{ padding:0; overflow:hidden; }
.form-head{ padding:14px 20px; border-bottom:1px solid var(--glass-border); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--faint); }
.form-body{ padding:26px; }
label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cyan); margin-bottom:8px; }
input,textarea{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
  border-radius:8px; padding:13px 15px; color:var(--ink); font-family:'Inter',sans-serif;
  font-size:14px; margin-bottom:18px;
}
input:focus,textarea:focus{ outline:none; border-color:var(--cyan); }
textarea{ resize:none; }
button[type=submit]{
  width:100%; background:linear-gradient(120deg, var(--gold), #e8b923); color:#000;
  font-weight:600; border:none; border-radius:8px; padding:15px; font-size:14px;
  cursor:pointer; transition:transform .3s;
}
button[type=submit]:hover{ transform:translateY(-2px); }
.form-note{ font-size:12px; color:var(--faint); text-align:center; margin-top:12px; transition:color .3s; }
.form-note.success{ color:var(--cyan); }
.form-note.error{ color:#ff6b6b; }

/* Footer */
footer{ border-top:1px solid var(--glass-border); padding:36px 0; position:relative; z-index:1; }
.footer-wrap{
  max-width:1200px; margin:0 auto; padding:0 28px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--faint);
}

/* ---------------------------------------------------------
   WHATSAPP FLOATING BUTTON — sabit, dalgalanma animasyonlu
--------------------------------------------------------- */
.wa-btn{
  position:fixed; bottom:26px; right:26px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:var(--wa);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5); text-decoration:none;
  animation: waPulse 2.2s infinite;
}
@keyframes waPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ---------------------------------------------------------
   PORTFOLIO MODAL
--------------------------------------------------------- */
#modalBackdrop{
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px;
}
#modalBackdrop.open{ display:flex; }
#modalPanel{ max-width:640px; width:100%; max-height:85vh; overflow-y:auto; padding:0; position:relative; }
.modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid var(--glass-border); color:var(--ink);
  cursor:pointer; font-size:16px; z-index:2;
}
.modal-body-pad{ padding:30px; }
.modal-title{ font-family:'Sora',sans-serif; font-size:22px; margin:0; }
.modal-client{ color:var(--faint); font-size:12px; margin:6px 0 18px; }
.modal-desc{ color:var(--mute); font-size:14px; line-height:1.7; margin-bottom:16px; }
.modal-result{ padding:14px; margin-bottom:18px; border-radius:10px; }
.modal-result p{ font-size:12px; margin:0; }
.modal-tech{ display:flex; flex-wrap:wrap; gap:8px; }
.modal-tech .tag{ color:var(--ink); border-color:rgba(255,255,255,0.15); }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media(max-width:900px){
  .hero-grid,.contact-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
  nav{ display:none; }
  .hero3d-wrap{ height:300px; }
}
@media(max-width:560px){
  .grid-3{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   ERİŞİLEBİLİRLİK — hareket azaltma tercihi
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}