/* ==========================================================
   ZÜMRÜT YAZILIM — Birleşik tasarım sistemi
   Zümrüt yeşili vurgular + derin orman yeşili zemin
   Palet: #10442D koyu · #1D6948 orta · #338B64 zümrüt · #4FAF85 açık · #8FDBBF mint
   Koyu tema varsayılan; [data-theme="light"] açık tema
   ========================================================== */
:root{
  --ink:        #0a140e;   /* ana zemin */
  --ink-2:      #0e1b14;   /* bölüm zemini */
  --panel:      #11241a;   /* kart zemini */
  --panel-2:    #163122;   /* kart hover / üst katman */
  --line:       rgba(150,199,175,.14);
  --text:       #e7f1eb;
  --muted:      #9cb4a7;
  --accent:     #4faf85;   /* açık zümrüt vurgu */
  --accent-2:   #8fdbbf;   /* parlak mint — gradyan eşi */
  --accent-ink: #06281c;
  --accent-soft:rgba(79,175,133,.14);
  --accent-line:rgba(79,175,133,.26);
  --glow:       rgba(79,175,133,.30);
  --teal:       #8fdbbf;   /* ikincil ton (kod string) */
  --stroke-c:   rgba(231,241,235,.55);
  --nav-bg:     rgba(10,20,14,.72);
  --grid-line:  rgba(150,199,175,.05);
  --amb-1:      rgba(79,175,133,.07);
  --amb-2:      rgba(29,105,72,.12);   /* orta yeşil */
  --card-glass: rgba(17,36,26,.9);
  --form-bg:    #0c1a12;
  --spot:       rgba(79,175,133,.10);
  --tl-line:    rgba(79,175,133,.5);
  --shadow:     0 24px 60px rgba(0,0,0,.45);
  --shadow-lg:  0 30px 70px rgba(0,0,0,.45);
  --radius: 18px;
  --font-display:"Bricolage Grotesque", sans-serif;
  --font-body:"Inter", sans-serif;
  --font-mono:"JetBrains Mono", monospace;
}

[data-theme="light"]{
  --ink:        #f1f7f3;
  --ink-2:      #e5efe9;
  --panel:      #ffffff;
  --panel-2:    #eef5f0;
  --line:       rgba(16,68,45,.13);
  --text:       #10251b;
  --muted:      #55705f;
  --accent:     #1d6948;   /* orta yeşil — açık zeminde 6.6:1 kontrast */
  --accent-2:   #338b64;   /* ana zümrüt — gradyan eşi */
  --accent-ink: #ffffff;
  --accent-soft:rgba(29,105,72,.10);
  --accent-line:rgba(29,105,72,.28);
  --glow:       rgba(29,105,72,.22);
  --teal:       #10442d;
  --stroke-c:   rgba(16,68,45,.45);
  --nav-bg:     rgba(241,247,243,.82);
  --grid-line:  rgba(16,68,45,.055);
  --amb-1:      rgba(29,105,72,.06);
  --amb-2:      rgba(51,139,100,.07);
  --card-glass: rgba(255,255,255,.88);
  --form-bg:    #ffffff;
  --spot:       rgba(29,105,72,.07);
  --tl-line:    rgba(29,105,72,.45);
  --shadow:     0 20px 46px rgba(16,68,45,.14);
  --shadow-lg:  0 26px 60px rgba(16,68,45,.18);
}

html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip; }

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  transition:background-color .5s ease, color .5s ease;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

h1,h2,h3,h4,.display-font{ font-family:var(--font-display); letter-spacing:-.01em; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-2); }
[data-theme="light"] a:hover{ color:#10442d; }

/* Arka plan dokusu: çok hafif grid + iki ambient ışık lekesi */
.bg-scene{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 85% -10%, var(--amb-1), transparent 60%),
    radial-gradient(800px 700px at -10% 65%, var(--amb-2), transparent 60%),
    var(--ink);
  transition:background .5s ease;
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(1200px 800px at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(1200px 800px at 50% 0%, #000 0%, transparent 75%);
}

/* ==========================================================
   SCROLL İLERLEME ÇUBUĞU
   ========================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:2000;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ==========================================================
   HEADER / MENÜ
   ========================================================== */
.navbar-glass{
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, border-color .5s ease;
}
.navbar-brand{
  font-family:var(--font-mono);
  font-weight:600; font-size:1.05rem; color:var(--text) !important;
  display:inline-flex; align-items:center; padding:0;
}
.navbar-brand .brand-dot{ color:var(--accent); }

/* --- Logo (header + footer) --- */
/* zlogo.png oranı 1249x359 (~3.48:1); yükseklik "YAZILIM" alt satırı okunur kalsın diye
   eski lacivert logoya göre biraz yükseltildi. */
.brand-logo{ height:44px; width:auto; display:block; }
footer .brand-logo{ height:50px; }
@media (max-width:575px){ .brand-logo{ height:36px; } }
/* Tema-duyarlı logo: koyu tema varsayılan. Tek dosya (zlogo.png) iki temada da
   kullanılır; açık temada filtreyle koyulaştırılır. */
.logo-light{ display:none; }
.logo-dark{ display:block; }
[data-theme="light"] .logo-light{ display:block; }
[data-theme="light"] .logo-dark{ display:none; }
/* Logo gümüş gradyanlı ve koyu zemin için tasarlandı (ort. parlaklık 158/255):
   koyu temada olduğu gibi durur, açık temada beyaz zeminde kaybolmasın diye
   koyulaştırılır. Kaynak dosyaya dokunmadan iki temada da okunur kalır. */
.logo-light{ filter:brightness(.38) contrast(1.25) saturate(1.4); }
.navbar-nav .nav-link{
  color:var(--muted); font-size:.92rem; font-weight:500;
  padding:.5rem .85rem !important; border-radius:10px;
  transition:color .25s ease, background .25s ease;
}
.navbar-nav .nav-link:hover{ color:var(--text); }
.navbar-nav .nav-link.active{ color:var(--accent); background:var(--accent-soft); }
.btn-nav-cta{
  font-size:.9rem; font-weight:600;
  color:var(--accent-ink); background:var(--accent);
  border:none; border-radius:12px; padding:.55rem 1.15rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-nav-cta:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 10px 28px var(--glow); }
.navbar-toggler{ border:1px solid var(--line); color:var(--text); }
.navbar-toggler:focus{ box-shadow:0 0 0 3px var(--accent-soft); }
.navbar-toggler i{ font-size:1.35rem; color:var(--text); }

/* Tema değiştirici */
.theme-toggle{
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:1.05rem; cursor:pointer;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.theme-toggle:hover{ transform:scale(1.06); border-color:var(--accent-line); background:var(--accent-soft); }

/* Mobil offcanvas görünümlü açılır menü */
@media (max-width: 991.98px){
  .navbar-collapse{
    background:var(--panel);
    border:1px solid var(--line); border-radius:16px;
    padding:1rem; margin-top:.85rem;
    box-shadow:var(--shadow);
  }
}

/* ==========================================================
   DOT NAV (sağ kenar bölüm noktaları)
   ========================================================== */
.dot-nav{
  position:fixed; right:24px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:13px;
}
.dot-nav button{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:var(--line); border:none; cursor:pointer;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.dot-nav button:hover{ background:var(--muted); }
.dot-nav button.active{
  background:var(--accent); transform:scale(1.25);
  box-shadow:0 0 0 4px var(--accent-soft), 0 0 12px var(--glow);
}
@media (max-width: 991.98px){ .dot-nav{ display:none; } }

/* ==========================================================
   ORTAK BÖLÜM STİLLERİ
   ========================================================== */
.section{ padding:110px 0; position:relative; }
.section-alt{ background:linear-gradient(180deg, transparent, var(--ink-2) 18%, var(--ink-2) 82%, transparent); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.35rem .85rem; border-radius:100px; margin-bottom:1.1rem;
}
.section-title{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:700; margin-bottom:.75rem; }
.section-lead{ color:var(--muted); max-width:640px; }

/* GSAP reveal başlangıç durumu (JS yüklenmezse görünür kalsın) */
.reveal{ opacity:1; }
.js .reveal{ opacity:0; will-change:transform, opacity; }

/* ==========================================================
   HERO
   ========================================================== */
.hero{ padding:170px 0 130px; min-height:92vh; display:flex; align-items:center; }
.hero-title{
  font-size:clamp(2.3rem, 5vw, 3.9rem);
  font-weight:800; line-height:1.12; letter-spacing:-.02em;
}
.hero-title .stroke{
  color:transparent;
  -webkit-text-stroke:1.5px var(--stroke-c);
}
.hero-title .amber{ color:var(--accent); }
.hero-lead{ color:var(--muted); font-size:1.1rem; max-width:520px; margin:1.4rem 0 2.1rem; }

/* Terminal istemi görünümlü daktilo satırı */
.hero-type{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.95rem;
  color:var(--text); margin:1.2rem 0 0; min-height:1.8em;
}
.hero-type .ht-prompt{ color:var(--teal); font-weight:600; }
.ht-caret{
  display:inline-block; width:9px; height:1.1em;
  background:var(--accent); animation:caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink{ 50%{ opacity:0; } }

.btn-amber{
  background:var(--accent); color:var(--accent-ink);
  font-weight:600; border:none; border-radius:14px;
  padding:.85rem 1.7rem; font-size:1rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-amber:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 14px 34px var(--glow); }
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line); border-radius:14px;
  padding:.85rem 1.7rem; font-weight:600; font-size:1rem;
  transition:border-color .25s ease, background .25s ease, transform .25s ease, color .25s ease;
}
.btn-ghost:hover{ color:var(--text); border-color:var(--accent-line); background:var(--accent-soft); transform:translateY(-3px); }

.hero-meta{
  display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:2.4rem;
  color:var(--muted); font-size:.88rem; font-family:var(--font-mono);
}
.hero-meta i{ color:var(--accent); margin-right:.4rem; }

/* --- Hero sağ taraf: parallax sahnesi --- */
.hero-scene{
  position:relative; min-height:520px;
  perspective:1000px;
}
/* 3B grup — mouse ile eğilir; katmanlar translateZ ile derinlik düzlemlerine yerleşir */
.hero-3d{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.parallax-layer{ position:absolute; will-change:transform; }

/* Merkez portre — Ebru fotoğrafı (halkanın tam ortasında) */
.hero-photo{
  width:300px; height:300px;
  left:50%; top:50%;
  margin-left:-150px; margin-top:-150px;
  border-radius:50%; overflow:hidden;
  border:3px solid var(--accent-line);
  background:var(--card-glass);
  box-shadow:var(--shadow-lg), 0 0 0 10px var(--accent-soft), 0 0 60px var(--glow);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.hero-photo:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg), 0 0 0 10px var(--accent-soft), 0 0 90px var(--glow);
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
/* İçe doğru hafif gölge — foto sahneye otursun */
.hero-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 60px rgba(8,26,17,.55);
  pointer-events:none;
}

.tdot{ width:11px; height:11px; border-radius:50%; }
.tdot.r{ background:#ff5f57; } .tdot.y{ background:#febc2e; } .tdot.g{ background:#28c840; }

/* Yüzen kartlar */
.float-card{
  background:var(--card-glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:16px;
  padding:.95rem 1.15rem;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:.85rem;
  transition:border-color .3s ease, background .5s ease;
}
.float-card:hover{ border-color:var(--accent-line); }
.float-card .fc-icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.15rem;
}
.float-card .fc-num{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.1; }
.float-card .fc-label{ font-size:.75rem; color:var(--muted); }

.fc-uptime{ top:2%;  right:0%; }
.fc-perf  { bottom:6%; left:-2%; }
.fc-live  { bottom:-4%; right:8%; }
.fc-stack { top:14%; left:-6%; }

.fc-pulse{
  width:9px; height:9px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 0 rgba(143,219,191,.5);
  animation:pulseDot 2s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(143,219,191,.5); }
  70%{ box-shadow:0 0 0 12px rgba(143,219,191,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,219,191,0); }
}

/* Dekoratif halka */
.orbit-ring{
  width:560px; height:560px; left:50%; top:50%;
  margin-left:-280px; margin-top:-280px;
  border:1px dashed var(--line); border-radius:50%;
  animation:slowSpin 60s linear infinite;
}
.orbit-ring::after{
  content:""; position:absolute; top:-5px; left:50%;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 18px var(--glow);
}
@keyframes slowSpin{ to{ transform:rotate(360deg); } }

@media (max-width: 991.98px){
  .hero{ padding:130px 0 80px; min-height:auto; }
  .hero-scene{ min-height:460px; margin-top:3.5rem; transform:scale(.92); }
  .orbit-ring{ display:none; }
}
@media (max-width: 575.98px){
  .hero-scene{ min-height:430px; transform:scale(.84); transform-origin:top center; }
  .fc-stack{ left:0; } .fc-perf{ left:0; } .fc-uptime{ right:0; } .fc-live{ right:0; }
}

/* ==========================================================
   HAKKIMDA
   ========================================================== */
.about-panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem 1.5rem;
  height:100%;
  transition:transform .3s ease, border-color .3s ease, background .5s ease;
}
.about-panel:hover{ transform:translateY(-5px); border-color:var(--accent-line); }
.about-panel .num{
  font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--accent);
  line-height:1.1;
}
.about-panel .lbl{ color:var(--muted); font-size:.85rem; margin-top:.2rem; }
.about-panel i{ font-size:1.3rem; color:var(--accent); }

/* Portre kartı */
.portre-wrap{ position:relative; max-width:400px; margin:0 auto; }
.portre-wrap::before{
  content:""; position:absolute; inset:0;
  transform:translate(16px, 16px);
  border:1px dashed var(--accent-line); border-radius:var(--radius);
  pointer-events:none;
}
.portre-kart{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  box-shadow:var(--shadow-lg);
}
.portre-kart img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 40%;
  display:block; transform:scale(1.02);
  transition:transform .6s ease;
}
.portre-kart:hover img{ transform:scale(1.06); }
.portre-kart::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(8,20,14,.58) 100%);
  pointer-events:none;
}
.portre-badge{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(8,20,14,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(150,199,175,.22); border-radius:100px;
  padding:.45rem 1rem; font-size:.8rem; font-weight:600; color:#e7f1eb;
}
.portre-chip{
  position:absolute; top:-16px; right:-14px; z-index:2;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  border-radius:14px; padding:.55rem 1rem;
  box-shadow:0 14px 34px var(--glow);
}
.portre-chip small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; opacity:.85; }

/* ==========================================================
   HİZMETLER
   ========================================================== */
.service-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.6rem; height:100%;
  display:block; position:relative; overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.service-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(360px 200px at var(--mx,50%) var(--my,0%), var(--spot), transparent 65%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.service-card:hover{ transform:translateY(-7px); border-color:var(--accent-line); background:var(--panel-2); }
.service-card:hover::before{ opacity:1; }
.service-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.4rem;
  margin-bottom:1.15rem;
  transition:transform .35s ease;
}
.service-card:hover .service-icon{ transform:scale(1.08) rotate(-4deg); }
.service-card h3{ font-size:1.15rem; font-weight:700; margin-bottom:.55rem; }
.service-card p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ==========================================================
   YETENEKLER
   ========================================================== */
.skill-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.5rem; height:100%;
  display:flex; flex-direction:column;
  transition:transform .35s ease, border-color .35s ease, background .5s ease;
}
.skill-card:hover{ transform:translateY(-7px); border-color:var(--accent-line); }
.skill-card .sk-icon{
  width:50px; height:50px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.35rem;
  margin-bottom:1rem;
}
.skill-card h3{ font-size:1.08rem; font-weight:700; margin-bottom:.4rem; }
.skill-card p{ color:var(--muted); font-size:.86rem; margin-bottom:1rem; }
.skill-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.3rem; }
.skill-tags span{
  font-family:var(--font-mono); font-size:.66rem; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:.18rem .6rem;
}
.skill-meter{ margin-top:auto; }
.skill-meter-top{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.5rem;
}
.skill-meter-top span{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.skill-meter-top b{ font-family:var(--font-display); font-size:.95rem; color:var(--accent); }
.skill-bar{
  height:7px; border-radius:100px; background:var(--line); overflow:hidden;
}
.skill-fill{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 10px var(--glow);
}

/* Teknoloji çipleri şeridi */
.tech-cips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin-top:2.6rem;
}
.tech-cips span{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--line);
  border-radius:100px; padding:.45rem 1rem;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.tech-cips span:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-3px); }
.tech-cips i{ color:var(--accent); }

/* ==========================================================
   REFERANSLAR / PROJELER
   ========================================================== */
/* Kart satırında SADECE hover'lanan kart büyür; diğerleri eşit-yükseklik (stretch) uğruna
   gerilmesin diye üstten hizalıyoruz. Normal eşitlik .proj-body p'nin sabit yüksekliğiyle korunur. */
.row:has(.project-card){ align-items:flex-start; }
.project-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; height:100%;
  display:flex; flex-direction:column;
  transition:border-color .35s ease, box-shadow .35s ease, background .5s ease;
}
.project-card:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-lg); }

/* CSS ile mini tarayıcı mock'u — her iki temada koyu kalır */
.proj-mock{
  background:#0c1a12; border-bottom:1px solid rgba(150,199,175,.14);
  padding:0; position:relative; overflow:hidden;
}
.proj-mock .mock-bar{
  display:flex; align-items:center; gap:.45rem;
  padding:.6rem .9rem; border-bottom:1px solid rgba(150,199,175,.14);
}
.proj-mock .mock-bar .url{
  flex:1; height:16px; border-radius:8px;
  background:rgba(150,199,175,.12);
  font-family:var(--font-mono); font-size:.6rem; color:#9cb4a7;
  display:flex; align-items:center; padding:0 .6rem;
}
.proj-mock .mock-body{ padding:1rem; display:grid; gap:.55rem; min-height:130px; }
/* Gerçek proje görseli (Gorsel doluysa mockup yerine) — tarayıcı çubuğunun altında */
.proj-mock .mock-shot{ height:172px; overflow:hidden; background:#0c1a12; }
.proj-mock .mock-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.mk{ border-radius:7px; background:rgba(150,199,175,.10); }
.mk.hero-line{ height:16px; width:62%; background:linear-gradient(90deg, rgba(79,175,133,.55), rgba(79,175,133,.15)); }
.mk.txt{ height:9px; width:88%; } .mk.txt.s{ width:64%; }
.mk-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:.25rem; }
.mk.box{ height:34px; }
.project-card:hover .mk.hero-line{ animation:shineBar 1.4s ease; }
@keyframes shineBar{
  0%{ filter:brightness(1); } 40%{ filter:brightness(1.55); } 100%{ filter:brightness(1); }
}
.proj-body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.proj-body h3{ font-size:1.1rem; font-weight:700; }
.proj-body p{
  color:var(--muted); font-size:.9rem; line-height:1.5; min-height:3em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.proj-tech{
  display:flex; flex-wrap:wrap; gap:.4rem; margin:.35rem 0 1.1rem;
}
.proj-tech span{
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:.18rem .6rem;
}
.btn-proj{
  margin-top:auto; align-self:flex-start;
  font-size:.88rem; font-weight:600; color:var(--accent);
  border:1px solid var(--accent-line); border-radius:12px;
  padding:.5rem 1.05rem; background:transparent;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn-proj:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }

/* ==========================================================
   SÜREÇ / TIMELINE — modern 3D cam kart tasarımı
   Not: .timeline / .tl-step / .tl-dot / .tl-on / --tlp sınıfları
   _Layout'taki GSAP scroll animasyonu (#surec) tarafından kullanılır;
   isimler korunmalı. 3D eğilme .tl-card'a project-card tilt'i ile gelir.
   ========================================================== */
/* WebGL arka plan sahnesi (#surecGl, three.js) — container içeriğin arkasında kalır */
#surec{ position:relative; }
#surec > .container{ position:relative; z-index:2; }
#surecGl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ----------------------------------------------------------
   ROTA — kaydırdıkça çizilen patika (Index.cshtml içindeki SVG)
   Renkler tema değişkenlerinden gelir; çizim/ilerleme _Layout'taki
   #surec ScrollTrigger'ı tarafından sürülür (strokeDashoffset).
   JS yoksa dasharray hiç kurulmaz → yol dolu görünür (güvenli fallback).
   ---------------------------------------------------------- */
.surec-rota{ position:relative; margin:-.5rem 0 -1.25rem; pointer-events:none; }
.rota-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* adım numaraları — duraklara bindirilmiş HTML etiketleri (bkz. Index.cshtml).
   SVG <text> viewBox ile birlikte küçüldüğü için bilerek HTML olarak duruyorlar. */
.rota-no{
  position:absolute; transform:translate(-50%, -50%);
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; line-height:1; color:var(--muted);
  transition:color .45s ease, text-shadow .45s ease;
}
.rota-no.ust{ margin-top:-23px; }
.rota-no.alt{ margin-top:25px; }
.rota-no.rota-on{ color:var(--accent-2); text-shadow:0 0 12px var(--glow); }

/* SVG gradyan durakları: presentation attribute yerine CSS — var() burada çözülür */
#rotaGrad .rg-1{ stop-color:var(--accent); }
#rotaGrad .rg-2{ stop-color:var(--accent-2); }
#rotaHale .rh-1{ stop-color:var(--accent); stop-opacity:.38; }
#rotaHale .rh-2{ stop-color:var(--accent); stop-opacity:0; }

/* henüz alınmamış yol */
.rota-iz{
  fill:none; stroke:var(--tl-line); stroke-width:2;
  stroke-linecap:round; stroke-dasharray:9 12; opacity:.5;
}
/* alınan yol — filtre yerine kalın/saydam ikinci çizgi (scroll'da ucuz) */
.rota-cizgi{ fill:none; stroke:url(#rotaGrad); stroke-linecap:round; }
.rota-yol{ stroke-width:3; }
.rota-hale{ stroke-width:10; opacity:.15; }

/* duraklar — kartlarla aynı hizada, adım yanınca dolar */
.rota-durak{
  fill:var(--ink); stroke:var(--tl-line); stroke-width:2;
  transition:fill .45s ease, stroke .45s ease;
}
.rota-durak.rota-on{ fill:var(--accent); stroke:var(--accent-2); }

.rota-bayrak .rb-direk{ fill:none; stroke:var(--tl-line); stroke-width:2; stroke-linecap:round; }
.rota-bayrak .rb-bez{ fill:var(--accent-2); opacity:.9; }

/* yol üstünde ilerleyen yolcu — teğete göre döner */
.rota-yolcu .ry-hale{ fill:url(#rotaHale); }
.rota-yolcu .ry-govde{ fill:url(#rotaGrad); }
.rota-yolcu .ry-ok{
  fill:none; stroke:var(--accent-ink); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

.timeline{ position:relative; --tlp:0; }
/* bağlantı çizgisi (düğüm hizası) */
.timeline::before{
  content:""; position:absolute; left:0; right:0; top:34px; height:2px;
  background:linear-gradient(90deg, transparent, var(--tl-line) 12%, var(--tl-line) 88%, transparent);
}
/* scroll'a bağlı dolan ilerleme çizgisi */
.timeline::after{
  content:""; position:absolute; left:12%; right:12%; top:34px; height:2px; z-index:1;
  transform:scaleX(var(--tlp)); transform-origin:left center;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 14px var(--glow);
}
/* z-index: GSAP reveal animasyonu .tl-step'e transform (stacking context) uygular;
   bu yüzden adımı çizginin (::after z-index:1) üstüne bu seviyede çıkarmak gerekir. */
.tl-step{ position:relative; z-index:2; padding:80px .55rem 0; }

/* çizgi üstünde parlayan numara düğümü */
.tl-dot{
  position:absolute; z-index:3; top:18px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background:var(--ink); border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-family:var(--font-mono); font-size:.74rem; font-weight:600;
  box-shadow:0 0 0 6px var(--accent-soft);
  transition:background .35s ease, color .35s ease, box-shadow .35s ease;
}
/* adım sırayla "yanar" (scroll) */
.tl-step.tl-on .tl-dot{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  box-shadow:0 0 0 6px var(--accent-soft), 0 0 26px var(--glow);
}

/* cam 3D kart */
.tl-card{
  position:relative;
  background:var(--card-glass);
  border:1px solid var(--line);
  border-radius:18px;
  padding:2.1rem 1.2rem 1.5rem;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.20);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  transform-style:preserve-3d;
  transition:border-color .35s ease, box-shadow .35s ease;
  height:100%;
}
/* Aktif/hover: kenar rengi + ışıma. Eskiden üstte 3px gradyan şerit vardı;
   3px yükseklikte 18px köşe yarıçapı 18x3 elipse eziliyor ve şeridin uçları
   kartın kavisinden taşıyordu — kaldırıldı, ilerlemeyi zaten rota anlatıyor. */
.tl-step:hover .tl-card,
.tl-step.tl-on .tl-card{ border-color:var(--accent-line); box-shadow:0 22px 48px var(--glow); }

/* ikon rozeti — 3D eğilmede öne çıkar */
.tl-ic{
  width:52px; height:52px; margin:0 auto 1rem; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  transform:translateZ(34px);
  transition:background .35s ease, color .35s ease;
}
.tl-step:hover .tl-ic{ background:var(--accent); color:var(--accent-ink); }
.tl-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:.4rem; transform:translateZ(20px); }
.tl-card p{ color:var(--muted); font-size:.86rem; margin:0; transform:translateZ(10px); }

@media (max-width: 767.98px){
  .timeline::before{
    left:16px; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:linear-gradient(180deg, transparent, var(--tl-line) 8%, var(--tl-line) 92%, transparent);
  }
  .timeline::after{
    left:16px; right:auto; top:0; bottom:0; width:2px; height:auto;
    transform:scaleY(var(--tlp)); transform-origin:top center;
    background:linear-gradient(180deg, var(--accent), var(--accent-2));
  }
  .tl-step{ padding:0 0 1.4rem 46px; }
  .tl-dot{ left:16px; top:6px; transform:translateX(-50%); }
  .tl-card{ text-align:left; padding:1.3rem 1.15rem; }
  .tl-ic{ margin:0 0 .8rem; transform:none; }
  .tl-card h3, .tl-card p{ transform:none; }
}

/* md ve üzeri: ilerlemeyi rota gösteriyor, düz çizgi + numaralı düğüm sırası
   aynı bilgiyi ikinci kez tekrar ediyordu — görsel olarak kaldırıldı.
   .tl-dot silinmiyor, yalnızca gizleniyor: adım numarası ekran okuyucuda kalsın. */
@media (min-width: 768px){
  .timeline::before, .timeline::after{ display:none; }
  .tl-step{ padding-top:.5rem; }
  .tl-dot{
    width:1px; height:1px; padding:0; margin:-1px; top:0; left:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    border:0; background:none; box-shadow:none; transform:none;
  }
  .tl-step.tl-on .tl-dot{ background:none; box-shadow:none; }
}

/* ==========================================================
   REFERANSLAR (FİRMALAR)
   ========================================================== */
.ref-firm{
  position:relative; overflow:hidden; height:100%;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.2rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .5s ease;
}
.ref-firm:hover{ transform:translateY(-6px); border-color:var(--accent-line); box-shadow:var(--shadow); }
/* logo kutusu — <img> veya baş harf monogramı taşır */
.ref-firm-logo{
  width:100%; height:112px; border-radius:14px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .3s ease;
}
.ref-firm:hover .ref-firm-logo{ transform:scale(1.04); }
/* Gerçek logo görseli varsa: açık gri "çip" zemin — renkli/koyu logolar koyu temada okunur,
   açık temada da beyaz karttan ayrışır (beyaz-üstüne-beyaz sorununu çözer). */
.ref-firm-logo:has(img){ background:#eff4f1; border-color:rgba(16,68,45,.10); padding:12px 18px; }
.ref-firm-logo img{ width:100%; height:100%; object-fit:contain; }
.ref-firm-logo span{
  color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:2.2rem;
}
/* Açık tema: kart ve çipe hafif gölgeyle derinlik (gri çip zemin zaten beyaz karttan ayrışır). */
[data-theme="light"] .ref-firm{ box-shadow:0 1px 3px rgba(16,68,45,.05); }
[data-theme="light"] .ref-firm:hover{ box-shadow:0 18px 40px rgba(16,68,45,.13); }
[data-theme="light"] .ref-firm-logo:has(img){ box-shadow:0 4px 14px rgba(16,68,45,.08); }
.ref-firm h4{ font-size:1rem; font-weight:700; margin:0; }
.ref-firm-sector{
  color:var(--muted); font-size:.78rem;
  padding:.15rem .7rem; border:1px solid var(--line); border-radius:999px;
}

/* ==========================================================
   GÜVEN ŞERİDİ
   ========================================================== */
.trust-strip{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.8rem;
  transition:background .5s ease, border-color .5s ease;
}
.trust-item{ display:flex; align-items:flex-start; gap:.9rem; }
.trust-item .tr-icon{
  width:44px; height:44px; flex:0 0 44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.2rem;
}
.trust-item h4{ font-size:.95rem; font-weight:700; margin:0 0 .15rem; }
.trust-item p{ color:var(--muted); font-size:.8rem; margin:0; line-height:1.5; }

/* ==========================================================
   İLETİŞİM
   ========================================================== */
.contact-panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:2rem;
  transition:background .5s ease, border-color .5s ease;
}
.contact-quick{
  display:flex; align-items:center; gap:1rem;
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:1.1rem 1.25rem; margin-bottom:1rem;
  transition:transform .3s ease, border-color .3s ease, background .5s ease;
}
.contact-quick:hover{ transform:translateX(6px); border-color:var(--accent-line); }
.contact-quick .cq-icon{
  width:48px; height:48px; flex:0 0 48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.3rem;
}
.contact-quick .cq-t{ font-weight:600; font-size:.95rem; color:var(--text); }
.contact-quick .cq-s{ color:var(--muted); font-size:.83rem; }

.form-control{
  background:var(--form-bg); border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:.75rem 1rem; font-size:.95rem;
  transition:background .5s ease, border-color .3s ease, color .5s ease;
}
.form-control:focus{
  background:var(--form-bg); color:var(--text);
  border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft);
}
.form-control::placeholder{ color:var(--muted); opacity:.65; }
.form-label{ font-size:.85rem; color:var(--muted); font-weight:500; }

/* ==========================================================
   FOOTER
   ========================================================== */
footer{
  border-top:1px solid var(--line);
  padding:2.2rem 0; color:var(--muted); font-size:.88rem;
  transition:border-color .5s ease;
}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); color:var(--muted); font-size:1.1rem;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-3px); }

/* ==========================================================
   PROJE DETAY — asimetrik düzen: solda gezilebilir ekran, sağda künye
   ========================================================== */
.pd-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);
  gap:1.6rem; align-items:start; margin-top:1.4rem;
}

/* Ekran penceresi: uzun ekran görüntüsü sabit yükseklikte kırpılır,
   hover'da kartlardaki imza etkileşimin yavaş sürümüyle aşağı gezinir */
.pd-ekran{
  --pd-h:clamp(380px, 56vh, 620px);
  display:block; position:relative; overflow:hidden; background:#0c1a12; cursor:zoom-in;
}
.pd-ekran img{ width:100%; height:auto; display:block; }
.pd-ekran.uzun{ height:var(--pd-h); }
.pd-ekran.uzun img{ transition:transform .6s ease; }
.pd-ekran.uzun:hover img{
  transform:translateY(calc(-100% + var(--pd-h)));
  transition:transform 7s cubic-bezier(.33,.1,.45,.9);
}
/* Alt kenar fade'i: "devamı var" ipucu — hover'da kaybolur */
.pd-ekran.uzun::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background:linear-gradient(transparent, rgba(10,20,14,.6)); pointer-events:none;
  transition:opacity .4s ease;
}
.pd-ekran.uzun:hover::after{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .pd-ekran.uzun img, .pd-ekran.uzun:hover img{ transition:none; transform:none; }
}

/* mock-bar sağında tam boy aç ikonu */
.mock-bar .mock-tam{
  margin-left:auto; color:var(--muted); font-size:.8rem; line-height:1;
  padding:.15rem .3rem; border-radius:6px; transition:color .25s ease;
}
.mock-bar .mock-tam:hover{ color:var(--accent); }

/* Künye kartı */
.pd-kunye{
  position:sticky; top:100px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; display:flex; flex-direction:column; gap:1.1rem;
}
.pd-k-baslik{
  margin:0; font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.pd-k-liste{ margin:0; display:flex; flex-direction:column; }
.pd-k-satir{ display:flex; flex-direction:column; gap:.25rem; padding:.85rem 0; border-top:1px solid var(--line); }
.pd-k-satir dt{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.pd-k-satir dd{ margin:0; font-size:.95rem; color:var(--text); }
.pd-k-butonlar{ display:flex; flex-direction:column; gap:.6rem; border-top:1px solid var(--line); padding-top:1.1rem; }
.pd-k-butonlar .btn{ width:100%; text-align:center; }

@media (max-width:980px){
  .pd-grid{ grid-template-columns:1fr; }
  .pd-kunye{ position:static; }
  .pd-ekran{ --pd-h:clamp(300px, 48vh, 440px); }
}

/* Müşteri yorumu kartı — referanslar bölümünün altında (yayında yorum varsa) */
.yorum-kart{
  position:relative; height:100%; margin:0;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.4rem 1.4rem;
  display:flex; flex-direction:column; gap:1rem; text-align:left;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.yorum-kart:hover{ transform:translateY(-6px); border-color:var(--accent-line); box-shadow:var(--shadow); }
.yorum-tirnak{ font-size:1.9rem; line-height:1; color:var(--accent); opacity:.55; }
.yorum-kart blockquote{
  margin:0; color:var(--ink, inherit); font-size:.98rem; line-height:1.65; flex:1;
}
.yorum-kart figcaption{ display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line); padding-top:.9rem; }
.yorum-kart figcaption strong{ font-size:.95rem; }
.yorum-kart figcaption span{ color:var(--muted); font-size:.85rem; }

/* Sabit WhatsApp butonu — sağ altta, to-top onun üstüne diziliyor */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.65rem; text-decoration:none;
  box-shadow:0 10px 28px rgba(37,211,102,.38);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.wa-float:hover{ color:#fff; transform:translateY(-3px) scale(1.06); box-shadow:0 16px 38px rgba(37,211,102,.5); }
.wa-float:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:waNabiz 2.4s ease-out infinite;
}
@keyframes waNabiz{
  0%{ transform:scale(1); opacity:.8; }
  70%,100%{ transform:scale(1.55); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .wa-float::after{ animation:none; display:none; }
  .wa-float, .wa-float:hover{ transform:none; }
}

/* Yukarı çık butonu */
.to-top{
  position:fixed; right:22px; bottom:88px; z-index:50;
  width:46px; height:46px; border-radius:14px;
  background:var(--accent); color:var(--accent-ink); border:none;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease;
  box-shadow:0 14px 34px var(--glow);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ==========================================================
   HİKAYE / YAKLAŞIM — ortada metin, yanlarda 3B eğik laptoplar
   ========================================================== */
.story-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--amb-2), transparent 60%),
    var(--ink);
}
.story-wrap{ position:relative; }
.story-inner{
  position:relative; z-index:2;
  max-width:640px; margin:0 auto; text-align:center;
}
.story-inner .eyebrow{ justify-content:center; }
.story-inner > p{ color:var(--muted); font-size:1rem; line-height:1.8; margin-bottom:1.2rem; }
.story-stats{ margin-top:2.4rem; }

.story-quote{
  position:relative; margin:2rem auto 0; max-width:560px;
  font-style:italic; font-size:1.05rem; line-height:1.7; color:var(--text);
  padding:0 1.6rem;
}
.story-quote .q-open,
.story-quote .q-close{ color:var(--accent); font-size:1.5rem; opacity:.7; }
.story-quote .q-open{ margin-right:.2rem; vertical-align:-2px; }
.story-quote .q-close{ margin-left:.2rem; vertical-align:-2px; }

/* --- Laptoplar --- */
.story-laptop{
  position:absolute; top:50%; width:400px; z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
}
/* JS varken GSAP devralana dek gizli başla (parlamayı önler) */
.js .story-laptop{ opacity:0; will-change:transform, opacity; }
/* Başlangıç: düz (ortalanmış). Eğim scroll'a bağlı GSAP ile gelir.
   JS yoksa aşağıdaki .no-js kuralı sabit çapraz görünüm verir. */
.story-laptop.left{ left:-70px; transform:translateY(-50%); }
.story-laptop.right{ right:-70px; transform:translateY(-50%); }
html:not(.js) .story-laptop.left{
  transform:translateY(-50%) perspective(1300px) rotateY(40deg) rotateX(10deg) rotateZ(-4deg);
}
html:not(.js) .story-laptop.right{
  transform:translateY(-50%) perspective(1300px) rotateY(-40deg) rotateX(10deg) rotateZ(4deg);
}

.laptop-screen{
  /* Oran, ekran görüntüsü görselleriyle (~1900x940, yani ~2.02:1) eşitlendi ki
     object-fit:cover yanlardan kırpmasın. Görselleri değiştirirken bu oranı da güncelle. */
  position:relative; aspect-ratio:1900/1080; overflow:hidden;
  background:#0c1a12;
  border:2px solid #234534; border-bottom:none;
  border-radius:14px 14px 4px 4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.laptop-base{
  height:15px; margin:0 -10px;
  background:linear-gradient(#27503b, #14281d);
  border-radius:2px 2px 12px 12px;
  box-shadow:0 8px 14px rgba(0,0,0,.4);
}
.laptop-base::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:80px; height:5px; margin-top:1px;
  background:#0d1f16; border-radius:0 0 6px 6px;
}

/* Ekran içi: gerçek proje görseli */
.laptop-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }

/* Büyük dizüstü ve altı: container 1140px'e düşerken laptoplar tam boyutta
   kalıp ortadaki metne binmesin diye küçült + dışa it (1201–1399 dahil).
   Not: 1920 fiziksel ekran %150 ölçeklemede ~1280 CSS-px viewport verir. */
@media (max-width:1399.98px){
  .story-laptop{ width:320px; }
  .story-laptop.left{ left:-110px; } .story-laptop.right{ right:-110px; }
}
@media (max-width:991px){
  .story-laptop{ display:none; }
}

/* ==========================================================
   HİZMETLER — BENTO IZGARASI
   ========================================================== */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.bento .service-card{ height:100%; margin:0; }
.bento-w2{ grid-column:span 2; }
@media (max-width:991px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-w2{ grid-column:span 1; }
}
@media (max-width:575px){
  .bento{ grid-template-columns:1fr; }
}

/* ==========================================================
   TEKNOLOJİ ŞERİDİ (kayan marquee)
   ========================================================== */
.tech-marquee{
  overflow:hidden; padding:1.1rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.tech-track{ display:flex; width:max-content; animation:techScroll 52s linear infinite; }
.tech-marquee:hover .tech-track{ animation-play-state:paused; }
.tech-group{ display:flex; align-items:center; gap:2.4rem; padding-right:2.4rem; }
.tech-group span{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--text); white-space:nowrap; opacity:.9;
}
.tech-group i{ color:var(--accent); font-size:.42rem; }
@keyframes techScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .tech-track{ animation:none; } }

/* ==========================================================
   ÖNCE / SONRA KARŞILAŞTIRMA SÜRGÜSÜ
   ========================================================== */
.ba-showcase{ max-width:920px; margin:0 auto 3.5rem; }
.ba-wrap{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); user-select:none;
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* "önce" katmanı: aynı görsel, soluk/eski görünüm */
.ba-before{ position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
.ba-before .ba-img{ filter:grayscale(1) brightness(.82) contrast(.9) sepia(.15); }
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; z-index:6;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:var(--accent); z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.ba-handle i{
  background:var(--accent); color:var(--accent-ink); font-size:.8rem;
  width:18px; height:34px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.ba-handle i:first-child{ border-radius:9px 0 0 9px; }
.ba-handle i:last-child{ border-radius:0 9px 9px 0; }
.ba-tag{
  position:absolute; top:12px; z-index:3; font-size:.72rem; font-weight:600;
  padding:.22rem .65rem; border-radius:999px; color:#fff;
  background:rgba(5,22,15,.58); backdrop-filter:blur(4px);
}
.ba-tag-before{ left:12px; } .ba-tag-after{ right:12px; }
.ba-hint{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:.9rem; }
.ba-hint i{ color:var(--accent); }

/* ==========================================================
   BLOG — canlı, animasyonlu yeniden tasarım
   ========================================================== */
/* blog sayfaları ilk bölümdür; sabit navbar'ın altında kalmasın */
.blog-page{ padding-top:130px; position:relative; }
.dot-sep{ margin:0 .35rem; opacity:.5; }
.blog-meta{ color:var(--muted); font-size:.8rem; display:flex; align-items:center; flex-wrap:wrap; }
.blog-meta i{ margin-right:.35rem; color:var(--accent); }

/* --- Başlık alanı + ambians ışıkları --- */
.blog-hero{ position:relative; z-index:1; }
.blog-aura{
  position:absolute; left:50%; top:-70px; width:min(760px,92vw); height:360px;
  transform:translateX(-50%); pointer-events:none; z-index:-1;
}
.blog-aura::before, .blog-aura::after{
  content:""; position:absolute; border-radius:50%; filter:blur(64px);
}
.blog-aura::before{ width:340px; height:340px; left:4%; top:0;
  background:radial-gradient(circle, var(--glow), transparent 68%); animation:blogFloat 11s ease-in-out infinite; }
.blog-aura::after{ width:300px; height:300px; right:4%; top:34px;
  background:radial-gradient(circle, var(--amb-2), transparent 68%); animation:blogFloat 13s ease-in-out infinite reverse; }
@keyframes blogFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(0,-26px) scale(1.09); } }

.blog-title-xl{
  font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; line-height:1.08; margin:.4rem 0 .8rem;
  background:linear-gradient(100deg, var(--text) 22%, var(--accent) 48%, var(--accent-2) 60%, var(--text) 82%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:blogTitleSheen 7s ease-in-out infinite;
}
@keyframes blogTitleSheen{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }

/* --- Etiket filtresi --- */
.blog-filter{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin:1.4rem auto 2.6rem; max-width:780px; }
.blog-chip{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--muted); background:var(--panel); border:1px solid var(--line);
  padding:.4rem .95rem; border-radius:100px; cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.blog-chip:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-2px); }
.blog-chip.active{
  color:var(--accent-ink); border-color:transparent;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 22px var(--glow);
}

/* --- Liste kartı --- */
.blog-grid{ position:relative; z-index:1; }
.blog-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; color:inherit; isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
/* imleç ışıltısı — JS --mx/--my besler */
.blog-card::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 60%);
  transition:opacity .35s ease; mix-blend-mode:screen;
}
.blog-card:hover{ transform:translateY(-8px); border-color:var(--accent-line); box-shadow:var(--shadow-lg); color:inherit; }
.blog-card:hover::before{ opacity:1; }

.blog-card-cover{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.blog-card-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-cover img{ transform:scale(1.06); }
.blog-card-cover > i:not(.cover-glyph){ font-size:2.6rem; color:var(--accent); opacity:.5; }

/* üretilmiş (görselsiz) kapak — desen + dev hayalet ikon + marka gradyanı */
.blog-cover-gen{
  position:relative; overflow:hidden;
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px),
    var(--cov, linear-gradient(135deg, var(--accent), var(--accent-2)));
  background-size:18px 18px, 100% 100%;
  background-position:0 0, 0 0;
  transition:background-position 1.2s ease;
}
.blog-card:hover .blog-cover-gen{ background-position:36px 36px, 0 0; }
.blog-cover-gen::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.28), transparent 46%),
    radial-gradient(90% 90% at 100% 100%, rgba(6,32,21,.5), transparent 55%);
}
.cover-glyph{
  position:absolute; right:-6px; bottom:-20px; z-index:1;
  font-size:6.6rem; line-height:1; color:#fff;
  opacity:.24; transform:rotate(-8deg); transition:transform .55s ease, opacity .55s ease;
  text-shadow:0 8px 30px rgba(0,0,0,.28);
}
.blog-card:hover .cover-glyph{ transform:rotate(-2deg) scale(1.09); opacity:.34; }
/* kapak renk çeşitleri (marka paletinde kalır) */
.cv-0{ --cov:linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cv-1{ --cov:linear-gradient(140deg, #1d6948, var(--accent)); }
.cv-2{ --cov:linear-gradient(140deg, var(--teal), var(--accent)); }
.cv-3{ --cov:linear-gradient(140deg, var(--accent-2), #1d6948); }

.blog-card-tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  background:rgba(6,32,21,.5); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  font-size:.7rem; font-weight:600; letter-spacing:.02em; padding:.28rem .7rem; border-radius:999px;
}
.blog-card-body{ padding:1.35rem 1.35rem 1.45rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.blog-card-body h2{ font-size:1.14rem; font-weight:700; line-height:1.35; margin:0; transition:color .25s ease; }
.blog-card:hover .blog-card-body h2{ color:var(--accent); }
.blog-card-body p{
  color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-more{ display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); font-size:.85rem; font-weight:600; margin-top:.2rem; }
.blog-more i{ transition:transform .3s ease; }
.blog-card:hover .blog-more i{ transform:translateX(5px); }

/* öne çıkan (en yeni) yazı — geniş yatay düzen */
.blog-feat-badge{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.28rem .7rem; border-radius:100px;
}
@media (min-width:992px){
  .blog-card.is-featured{ flex-direction:row; }
  .blog-card.is-featured .blog-card-cover{ width:52%; aspect-ratio:auto; min-height:340px; }
  .blog-card.is-featured .blog-card-body{ width:48%; justify-content:center; padding:2.4rem; gap:.8rem; }
  .blog-card.is-featured .cover-glyph{ font-size:9.5rem; }
  .blog-card.is-featured .blog-card-body h2{ font-size:1.75rem; line-height:1.25; }
  .blog-card.is-featured .blog-card-body p{ -webkit-line-clamp:4; font-size:.98rem; }
}

/* --- Detay (makale) --- */
.blog-article{ max-width:760px; position:relative; z-index:1; }
.blog-back{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.88rem; margin-bottom:1.4rem;
  transition:gap .25s ease, color .25s ease;
}
.blog-back:hover{ color:var(--accent); gap:.65rem; }
.blog-head-meta{ display:flex; align-items:center; gap:.7rem; margin:.2rem 0 1.1rem; flex-wrap:wrap; }
.blog-ava{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 16px var(--glow);
}
.blog-title{ font-size:clamp(1.9rem,4.4vw,2.7rem); font-weight:800; line-height:1.15; margin:.5rem 0 .3rem; }
.blog-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.blog-tag{
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  font-size:.75rem; padding:.24rem .75rem; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease;
}
.blog-tag:hover{ transform:translateY(-2px); box-shadow:0 6px 16px var(--glow); }
.blog-cover{ position:relative; border-radius:var(--radius); overflow:hidden; margin-bottom:1.9rem; border:1px solid var(--line); aspect-ratio:16/8; }
.blog-cover img{ width:100%; height:100%; object-fit:cover; display:block; scale:1.16; will-change:transform; }
.blog-cover.blog-cover-gen{ aspect-ratio:16/7; }
.blog-cover.blog-cover-gen .cover-glyph{ font-size:11rem; }

/* makale gövdesi tipografisi */
.blog-content{ color:var(--text); font-size:1.04rem; line-height:1.85; }
.blog-content > p:first-of-type::first-letter{
  float:left; font-family:var(--font-display); font-weight:800; font-size:3.4rem; line-height:.82;
  padding:.06em .14em 0 0; color:var(--accent);
}
.blog-content h2{ position:relative; font-size:1.42rem; font-weight:700; margin:2.1rem 0 .8rem; padding-left:.95rem; }
.blog-content h2::before{
  content:""; position:absolute; left:0; top:.16em; bottom:.16em; width:4px; border-radius:3px;
  background:linear-gradient(var(--accent), var(--accent-2));
}
.blog-content h3{ font-size:1.16rem; font-weight:700; margin:1.6rem 0 .6rem; }
.blog-content p{ margin:0 0 1.15rem; color:var(--muted); }
.blog-content ol{ margin:0 0 1.2rem; padding-left:1.3rem; color:var(--muted); }
.blog-content ul{ list-style:none; margin:0 0 1.2rem; padding-left:.2rem; color:var(--muted); }
.blog-content ul li{ position:relative; padding-left:1.5rem; margin-bottom:.55rem; }
.blog-content ul li::before{
  content:""; position:absolute; left:.2rem; top:.62em; width:.5rem; height:.5rem; border-radius:2px;
  transform:rotate(45deg); background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.blog-content ol li{ margin-bottom:.55rem; }
.blog-content blockquote{
  margin:1.6rem 0; padding:1rem 1.3rem; border-left:4px solid var(--accent);
  background:var(--accent-soft); border-radius:0 12px 12px 0; color:var(--text); font-style:italic;
}
.blog-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.blog-content strong{ color:var(--text); }
.blog-content img{ max-width:100%; border-radius:12px; margin:1.2rem 0; }

/* ===== Detay sayfaları (hizmet / proje): meta paneli + CTA kartı ===== */
.detail-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin:1.4rem 0 .2rem; padding:.85rem 1.1rem;
  border:1px solid var(--line); border-radius:14px; background:var(--accent-soft);
}
.detail-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem;
  margin:2.4rem 0 .5rem; padding:1.5rem 1.6rem;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(135deg, var(--accent-soft), transparent);
}
.detail-cta h3{ margin:0 0 .25rem; font-size:1.18rem; font-weight:700; color:var(--text); }
.detail-cta p{ margin:0; color:var(--muted); font-size:.92rem; max-width:48ch; }
.detail-cta .dc-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
/* iki butonu tek boyuta getir + ikon/yazı dikey hizası (farklı temel sınıflardan geliyorlar) */
.detail-cta .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.62rem 1.2rem; font-size:.92rem; border-radius:12px; }
.detail-meta .btn{ display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:640px){
  .detail-cta{ flex-direction:column; align-items:flex-start; }
  .detail-cta .dc-actions{ width:100%; }
  .detail-cta .dc-actions .btn{ flex:1 1 auto; }
}

/* İletişim sayfası — sosyal medya ikon satırı */
.contact-social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.contact-social a, .contact-social .sos-bos{
  width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; text-decoration:none;
  transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.contact-social a{ color:var(--accent); }
.contact-social a:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); }
.contact-social .sos-bos{ color:var(--muted); opacity:.4; cursor:default; }

/* ===== Alt sayfa başlığı (proje listesi / iletişim) — içerik "havada" durmasın ===== */
.page-hero{
  position:relative; text-align:center; overflow:hidden;
  padding:145px 0 2.6rem; margin-bottom:3rem;
  border-bottom:1px solid var(--line);
  background:radial-gradient(65% 150% at 50% -25%, var(--accent-soft), transparent 60%);
}
.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(42% 60% at 50% 0%, rgba(79,175,133,.10), transparent 70%);
}
.page-hero > .container{ position:relative; z-index:1; }
.page-crumb{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--muted); margin-bottom:1rem;
}
.page-crumb a{ color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; transition:color .2s ease; }
.page-crumb a:hover{ color:var(--accent); }
.page-crumb .sep{ opacity:.4; }
.page-crumb .cur{ color:var(--accent); }
.page-hero h1{
  font-family:var(--font-display); font-size:clamp(2rem, 4.4vw, 3.1rem);
  font-weight:800; letter-spacing:-.015em; margin:.15rem 0 .7rem; line-height:1.1;
}
.page-hero .ph-lead{ color:var(--muted); max-width:600px; margin:0 auto; font-size:1.05rem; line-height:1.6; }
@media (max-width:600px){ .page-hero{ padding-top:120px; } }

/* paylaşım */
.blog-share{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:2.2rem 0 .5rem; }
.blog-share-label{ color:var(--muted); font-size:.85rem; margin-right:.2rem; }
.blog-share a, .blog-share button{
  width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; cursor:pointer;
  transition:transform .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.blog-share a:hover, .blog-share button:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-3px); box-shadow:0 10px 24px var(--glow); }

/* makale sonu CTA — animasyonlu ışık huzmesi */
.blog-endcta{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin-top:2.6rem; padding:1.8rem 2rem;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius);
}
.blog-endcta::before{
  content:""; position:absolute; width:280px; height:280px; right:-70px; top:-130px; z-index:0;
  background:radial-gradient(circle, var(--glow), transparent 65%); animation:blogFloat 9s ease-in-out infinite;
}
.blog-endcta > *{ position:relative; z-index:1; }
.blog-endcta h3{ font-size:1.18rem; font-weight:700; margin:0 0 .3rem; }
.blog-endcta p{ color:var(--muted); font-size:.9rem; margin:0; }

/* "kopyalandı" bildirimi */
.blog-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--panel-2); color:var(--text); border:1px solid var(--accent-line);
  padding:.7rem 1.1rem; border-radius:12px; font-size:.9rem; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:1000;
}
.blog-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Detay: daraltılmış container + iki kolon; YAN BLOK SOLDA --- */
.blog-shell{ max-width:1080px; }
.blog-layout{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:2.6rem; align-items:start; }
.blog-side{ grid-column:1; grid-row:1; position:sticky; top:100px; }
.blog-main{ grid-column:2; grid-row:1; min-width:0; position:relative; z-index:1; }

/* sol ray — tek kohezif panel, bölümler ince çizgiyle ayrılır */
.blog-rail{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.rail-sec{ padding:1.2rem 1.3rem; }
.rail-sec + .rail-sec{ border-top:1px solid var(--line); }
.rail-title{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .9rem; }
.rail-title i{ color:var(--accent); font-size:.9rem; }

/* yazar mini profili */
.rail-author{ display:flex; align-items:center; gap:.8rem; }
.rail-author .blog-ava{ width:46px; height:46px; font-size:1.1rem; }
.rail-author b{ display:block; font-size:.95rem; line-height:1.2; }
.rail-author span{ font-size:.77rem; color:var(--muted); }

/* diğer yazılar — numaralı editoryal liste */
.rail-post{ position:relative; display:block; text-decoration:none; color:inherit; padding:.75rem 0 .75rem 1rem; border-top:1px solid var(--line); }
.rail-post:first-of-type{ border-top:none; padding-top:.2rem; }
.rail-post:last-of-type{ padding-bottom:.1rem; }
.rail-post::before{ content:""; position:absolute; left:0; top:.9rem; bottom:.9rem; width:2px; border-radius:2px;
  background:linear-gradient(var(--accent), var(--accent-2)); transform:scaleY(0); transform-origin:top; transition:transform .3s ease; }
.rail-post:hover::before{ transform:scaleY(1); }
.rail-num{ font-family:var(--font-mono); font-size:.7rem; color:var(--accent); opacity:.75; }
.rail-post h4{ font-size:.9rem; font-weight:600; line-height:1.32; margin:.12rem 0 .25rem; transition:color .2s ease;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rail-post:hover h4{ color:var(--accent); }
.rail-meta{ font-size:.72rem; color:var(--muted); }

/* konular */
.rail-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.rail-tag{ font-size:.72rem; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:.22rem .62rem; border-radius:999px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.rail-tag:hover{ transform:translateY(-2px); box-shadow:0 6px 16px var(--glow); }

/* ray CTA */
.rail-cta{ background:linear-gradient(160deg, var(--accent-soft), transparent 80%); }
.rail-cta p{ color:var(--muted); font-size:.82rem; line-height:1.55; margin:.1rem 0 .95rem; }
.rail-cta .btn-nav-cta{ width:100%; justify-content:center; display:flex; align-items:center; }

@media (max-width:991px){
  .blog-layout{ grid-template-columns:1fr; gap:2rem; }
  .blog-side, .blog-main{ grid-column:auto; grid-row:auto; }
  .blog-side{ position:static; }
}

@media (max-width:576px){
  .blog-title{ font-size:1.65rem; }
  .blog-endcta{ padding:1.4rem; }
  .cover-glyph{ font-size:5.4rem; }
}

/* Erişilebilirlik: hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================
   İKİ PROJE — sürükleyerek karşılaştırma (before/after mekaniği)
   Her iki katman da tam renkli (varsayılan gri filtreyi iptal et).
   ========================================================== */
.ba-twosite .ba-before .ba-img{ filter:none; }
/* ==========================================================
   PROJE KARTI — hover'da site tepeden aşağı "kayar" + alan büyür
   translateY ile TÜM görsel görünür (tam sayfa görselde baştan sona),
   hover'da yükseklik 172 -> 300px büyür. Hızlı (1.8s). Statik CSS (rebuild yok).
   ========================================================== */
/* Hover'da çerçeve 172→300px büyür + görsel aşağı kayarak ekran görüntüsünün altını gösterir.
   Satırda SADECE hover'lanan kart büyüsün diye: .row:has(.project-card){align-items:flex-start} (yukarıda). */
.proj-mock .mock-shot{ transition:height .45s ease; }
.proj-mock .mock-shot img{ width:100%; height:auto; min-height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s ease; }
.project-card:hover .proj-mock .mock-shot{ height:300px; }
.project-card:hover .proj-mock .mock-shot img{ transform:translateY(calc(-100% + 300px)); transition:transform 2.5s ease; }
@media (prefers-reduced-motion: reduce){
  .proj-mock .mock-shot{ height:172px !important; }
  .proj-mock .mock-shot img,
  .project-card:hover .proj-mock .mock-shot img{ transition:none; transform:none; }
}
/* ==========================================================
   FOOTER — çok sütunlu (marka / kurumsal / hizmetler / iletişim)
   Adres+telefon her sayfada tekrarlanır: yerel arama için NAP tutarlılığı.
   ========================================================== */
.footer-ust{ padding-bottom:1.6rem; }
.footer-ozet{
  margin:.9rem 0 0; max-width:34ch; line-height:1.6;
  color:var(--muted); font-size:.86rem;
}
.footer-baslik{
  font-family:var(--font-display); font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); margin:0 0 .85rem;
}
.footer-liste{ list-style:none; margin:0; padding:0; }
.footer-liste li{ margin-bottom:.45rem; }
.footer-liste a{
  color:var(--muted); text-decoration:none; font-size:.86rem;
  transition:color .2s ease, padding-left .2s ease;
}
.footer-liste a:hover{ color:var(--accent); padding-left:3px; }

.footer-nap{
  display:flex; flex-direction:column; gap:.5rem;
  margin:0 0 1.1rem; font-style:normal; font-size:.86rem; line-height:1.5;
}
.footer-nap .nap-ad{ color:var(--text); font-weight:600; }
.footer-nap i{ color:var(--accent); margin-right:.35rem; }
.footer-nap a{ color:var(--muted); text-decoration:none; transition:color .2s ease; }
.footer-nap a:hover{ color:var(--accent); }

.footer-alt{
  border-top:1px solid var(--line); padding-top:1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  align-items:center; justify-content:space-between;
  font-size:.82rem;
}
.footer-yerel{ color:var(--muted); opacity:.85; }

@media (max-width:991px){
  .footer-ozet{ max-width:none; }
  .footer-alt{ justify-content:flex-start; }
}


/* ==========================================================
   BLOG DETAY — "Yumuşak Yüzey" + sol ray  (yazi-*)
   Yazı, zeminden yükselmiş yuvarlak bir yüzeyin üstünde durur; ayrım
   1px çizgiyle değil ton farkı ve gölgeyle kurulur. Solda ilk tasarımdaki
   yapışkan ray (yazar / diğer yazılar / konular / teklif) korunur.
   Gövde tipografisi .blog-content üzerine .detay-govde ile eziliyor; hizmet ve
   proje detayları aynı .blog-content'i kullandığından oradaki görünüm bozulmaz.
   ========================================================== */
/* Genişlik sitenin geri kalanıyla aynı: düz bootstrap .container (xxl'de 1320px).
   Buraya max-width koymak blogu diğer sayfalardan dar gösteriyordu. */
.detay{ padding:clamp(112px, 13vh, 140px) 0 clamp(3rem, 6vw, 4.5rem); }

.detay-geri{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-bottom:1.3rem;
  color:var(--muted); font-size:.88rem; text-decoration:none;
  transition:color .25s ease, gap .25s ease;
}
.detay-geri:hover{ color:var(--accent); gap:.7rem; }

/* Ray solda, makale sağda. Makale DOM'da önce gelir (ekran okuyucu ve
   arama motoru önce içeriği görsün), yerleşimi grid sütunu belirler. */
.detay-duzen{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:clamp(1.8rem, 3vw, 2.6rem); align-items:start;
}
.detay-ana{ grid-column:2; grid-row:1; min-width:0; }
.detay-yan{ grid-column:1; grid-row:1; position:sticky; top:96px; }

/* ---- Makale yüzeyi ---- */
.detay-yuzey{
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 20%, var(--panel) 100%);
  border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.yazi-kapak{ margin:0; }
.yazi-kapak img{ width:100%; height:auto; display:block; }
.yazi-kapak.blog-cover-gen{
  aspect-ratio:16/7; display:flex; align-items:center; justify-content:center;
}

.detay-ust{ padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.5rem,3.6vw,3.4rem) 0; }
.detay-rozet{
  display:inline-block; padding:.34rem .85rem; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-size:.71rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.detay-ust h1{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 2.9vw, 2.25rem);
  font-weight:800; line-height:1.2; letter-spacing:-.012em;
  margin:1.05rem 0 0;
}
.detay-ozet{
  color:var(--muted); font-size:1.08rem; line-height:1.7;
  margin:1rem 0 0; max-width:60ch;
}
.yazi-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
  margin-top:1.5rem; font-size:.86rem; color:var(--muted);
}
.yazi-meta .blog-ava{ width:34px; height:34px; font-size:.85rem; }
.yazi-meta-ad{ color:var(--text); font-weight:600; }
.yazi-ayrac{ opacity:.45; }

/* ---- Gövde: okuma tipografisi ---- */
/* Kolon container genişliğine açıldığı için punto da büyütüldü: 20px'te satır
   ~77 karakterde kalıyor (küçük puntoda aynı genişlik 90 karaktere çıkıyordu).
   Büyük punto ayrıca uzun metinde gözü daha az yoruyor. */
.detay-govde{
  padding:clamp(1.7rem,3.2vw,2.5rem) clamp(1.5rem,3.6vw,3.4rem) clamp(1.9rem,3.4vw,2.8rem);
  font-size:1.25rem; line-height:1.78;
}
/* Gövde metni --muted ile --text arasında: gri metin (~8:1) uzun okumada soluk,
   saf --text (~14:1) koyu zeminde parlayıp gözü yoruyor. Yarı karışım ~12:1
   veriyor ve tek satırla iki temada da doğru çalışıyor. */
.detay-govde p,
.detay-govde li{
  color:var(--muted);
  color:color-mix(in srgb, var(--text) 50%, var(--muted));
}
.detay-govde p{ margin:0 0 1.35rem; }

/* Dekoratif ilk harf (drop cap) kapatıldı — sakin bir giriş için */
.detay-govde > p:first-of-type::first-letter{
  float:none; font-family:inherit; font-weight:inherit; font-size:inherit;
  line-height:inherit; padding:0; color:inherit;
}

/* Başlıklar gövdeyle orantılı büyüdü (em değil rem: gövde 1.25rem'e çıkınca
   başlıkların da yükselmesi gerekiyor, yoksa hiyerarşi düzleşiyor). */
.detay-govde h2{
  font-family:var(--font-display);
  font-size:clamp(1.45rem, 2.2vw, 1.72rem); font-weight:700; line-height:1.3;
  color:var(--text); margin:2.8rem 0 1rem; padding-left:0; scroll-margin-top:110px;
}
.detay-govde h2::before{ display:none; }   /* dikey gradyan çubuk kaldırıldı */
.detay-govde h3{
  font-size:1.24rem; font-weight:700; color:var(--text);
  margin:2rem 0 .65rem; scroll-margin-top:110px;
}
.detay-govde ul,
.detay-govde ol{ margin:0 0 1.35rem; }
.detay-govde li{ margin-bottom:.6rem; }
.detay-govde ul li::before{ top:.68em; }
.detay-govde blockquote{
  margin:1.8rem 0; padding:1.1rem 1.35rem; border-left:none;
  border-radius:14px; background:var(--accent-soft);
  font-style:normal; font-size:1.03rem; line-height:1.75;
}
.detay-govde strong{ color:var(--text); font-weight:600; }
.detay-govde img{ margin:1.5rem 0; border-radius:12px; }

/* ---- Etiketler + paylaş: yüzeyin alt şeridi ---- */
.detay-alt{
  padding:1.4rem clamp(1.5rem,3.6vw,3.4rem) 1.6rem;
  background:var(--panel-2);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.4rem; flex-wrap:wrap;
}
.yazi-etiketler{ display:flex; flex-wrap:wrap; gap:.45rem; }
/* Rozet zemini --accent-soft ile kurulsaydı, alt şerit (--panel-2) zaten açık
   olduğu için koyu temada metinle zemin birbirine yaklaşıp 4.1:1'de kalıyordu.
   Zemini sayfa zeminine (--ink) göre karıştırmak iki temada da 5:1 üstü veriyor. */
.yazi-etiketler a{
  padding:.34rem .8rem; border-radius:999px; text-decoration:none;
  background:color-mix(in srgb, var(--accent) 14%, var(--ink));
  color:var(--accent); font-size:.79rem;
  transition:color .2s ease, background .2s ease;
}
.yazi-etiketler a:hover{ background:var(--accent); color:var(--accent-ink); }
.yazi-paylas{ display:flex; align-items:center; gap:.5rem; }
.yazi-paylas a,
.yazi-paylas button{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; border:none;
  background:var(--accent-soft); color:var(--muted);
  font-size:1rem; cursor:pointer;
  transition:color .25s ease, background .25s ease;
}
.yazi-paylas a:hover,
.yazi-paylas button:hover{ color:var(--accent); background:var(--accent-line); }

/* ---- Önceki / sonraki ---- */
.yazi-gezin{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin:1.6rem 0 0;
}
.yazi-gez{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1rem 1.2rem; border-radius:16px;
  background:var(--panel); text-decoration:none; color:inherit;
  box-shadow:var(--shadow); transition:transform .25s ease;
}
.yazi-gez:hover{ transform:translateY(-2px); }
.yazi-gez-sag{ grid-column:2; text-align:right; align-items:flex-end; }
.yazi-gez-yon{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; letter-spacing:.06em; color:var(--muted);
}
.yazi-gez-yon i{ color:var(--accent); }
.yazi-gez-baslik{
  font-size:.92rem; font-weight:600; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .2s ease;
}
.yazi-gez:hover .yazi-gez-baslik{ color:var(--accent); }

/* ---- Sol ray: ilk tasarımdaki bölümler, yumuşak yüzey diliyle ----
   .blog-rail'in 1px çerçevesi burada gölgeye bırakılıyor; bölüm araları
   sert çizgi yerine çok soluk bir iç gölgeyle ayrılıyor. */
.detay-ray{
  background:var(--panel); border:none;
  border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow);
}
.detay-ray .rail-sec{ padding:1.15rem 1.25rem; }
.detay-ray .rail-sec + .rail-sec{
  border-top:none;
  box-shadow:inset 0 1px 0 var(--accent-soft);
}
.detay-ray .rail-post{ border-top:none; }
.detay-ray .rail-post + .rail-post{ box-shadow:inset 0 1px 0 var(--accent-soft); }
.detay-ray .rail-cta{ background:linear-gradient(165deg, var(--accent-soft), transparent 85%); }

/* ---- Duyarlılık ---- */
@media (max-width:991px){
  .detay-duzen{ grid-template-columns:1fr; }
  .detay-ana, .detay-yan{ grid-column:auto; grid-row:auto; }
  .detay-yan{ position:static; }
}
@media (max-width:640px){
  .detay-yuzey{ border-radius:18px; }
  .detay-govde{ font-size:1.09rem; line-height:1.8; }
  .detay-alt{ justify-content:flex-start; }
  .yazi-gezin{ grid-template-columns:1fr; }
  .yazi-gez-sag{ grid-column:1; text-align:left; align-items:flex-start; }
}

/* Dokunmatik cihazda tıklama hedefleri en az 44px olmalı — parmak fare kadar
   hassas değil. Masaüstünde düğmeler gereksiz büyümesin diye yalnızca coarse'ta. */
@media (pointer: coarse){
  .yazi-paylas a,
  .yazi-paylas button{ width:44px; height:44px; }
  /* Yalnız dolgu artırmak yetmiyor (yazı küçük olduğu için 36-39px'de kalıyordu);
     satır yüksekliğinden bağımsız olsun diye açık min-height veriliyor. */
  .yazi-etiketler a,
  .detay-ray .rail-tag{
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 1rem;
  }
}

/* Ray'daki yazı başlıkları h4 -> h3 taşındı (h1 > h2 > h3 sırası korunsun diye);
   mevcut .rail-post h4 kuralının aynısı h3 için de geçerli olmalı. */
.detay-ray .rail-post h3{
  font-size:.9rem; font-weight:600; line-height:1.32; margin:.12rem 0 .25rem;
  transition:color .2s ease;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.detay-ray .rail-post:hover h3{ color:var(--accent); }

/* ==========================================================
   HİZMET DETAY (hizmet-*) — blog detayla aynı kabuğu kullanır
   (.detay-duzen / .detay-yuzey / .detay-ray), farkı içerik önceliği:
   blog okunmak için, bu sayfa TEKLİF ALMAK için var. Bu yüzden teklif
   kutusu rayın en üstünde ve yüzeyin altında ikinci bir CTA şeridi var.
   ========================================================== */

/* ---- Başlık: ikon + metin yan yana ---- */
.hizmet-ust{ display:flex; align-items:flex-start; gap:1.15rem; }
.hizmet-ikon{
  flex:none; width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.75rem;
  margin-top:.15rem;
}
.hizmet-bas{ min-width:0; }   /* uzun başlık taşmasın */

/* ---- Yüzeyin altındaki teklif şeridi ---- */
.hizmet-alt{ flex-direction:column; align-items:stretch; gap:1.1rem; }
.hizmet-alt-metin b{ display:block; font-size:1.05rem; color:var(--text); margin-bottom:.25rem; }
.hizmet-alt-metin span{ color:var(--muted); font-size:.93rem; line-height:1.6; }
.hizmet-btnler{ display:flex; flex-wrap:wrap; gap:.6rem; }
/* İki buton farklı temel boyutlarda (.btn-nav-cta küçük, .btn-ghost büyük);
   aynı yükseklikte hizalansınlar diye eşitleniyor. */
.hizmet-btnler .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.66rem 1.25rem; font-size:.93rem;
}

/* ---- Raydaki diğer hizmetler listesi ---- */
.ray-hizmet{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem 0; text-decoration:none; color:inherit;
  transition:padding-left .22s ease;
}
.ray-hizmet + .ray-hizmet{ box-shadow:inset 0 1px 0 var(--accent-soft); }
.ray-hizmet:hover{ padding-left:.35rem; }
.ray-hizmet i{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:.95rem;
  transition:background .22s ease, color .22s ease;
}
.ray-hizmet:hover i{ background:var(--accent); color:var(--accent-ink); }
.ray-hizmet span{
  font-size:.9rem; font-weight:600; line-height:1.35;
  transition:color .2s ease;
}
.ray-hizmet:hover span{ color:var(--accent); }

/* ---- Raydaki hızlı iletişim ---- */
.ray-iletisim{ display:flex; flex-direction:column; gap:.55rem; }
.ray-iletisim a{
  display:flex; align-items:center; gap:.55rem;
  font-size:.88rem; color:var(--muted); text-decoration:none;
  transition:color .2s ease;
}
.ray-iletisim a:hover{ color:var(--accent); }
.ray-iletisim i{ color:var(--accent); font-size:1rem; }

@media (max-width:640px){
  .hizmet-ust{ gap:.9rem; }
  .hizmet-ikon{ width:52px; height:52px; font-size:1.45rem; border-radius:15px; }
  .hizmet-btnler .btn{ width:100%; }
}

/* Dokunmatik: ray bağlantıları ve teklif butonları en az 44px.
   Butonlar bootstrap'ın .btn dolgusuyla 39-43px'de kalıyordu — bunlar
   sayfanın asıl dönüşüm hedefi, parmakla ıskalanmamalı. */
@media (pointer: coarse){
  .ray-hizmet{ padding:.75rem 0; min-height:44px; }
  .ray-iletisim a{ min-height:44px; }
  .hizmet-btnler .btn,
  .hh-btnler .btn,
  .detay-ray .btn{ min-height:44px; }
}

/* ==========================================================
   HİZMET HERO VİTRİN (hh-*) — /hizmet/{slug} sayfasının tepesi
   Hizmete özel tanıtım sahnesi: solda başlık + özet + CTA, sağda
   panelden yüklenen tanıtım görseli (yoksa ikon bazlı hologram),
   üzerinde yüzen cam kartlar, altta 4 özellik çipi. Zemin; zümrüt
   parıltı + çok soluk teknik ızgara. İki temada da token'larla çalışır.
   ========================================================== */
.detay.hizmet{ padding-top:0; }

.hizmet-hero{
  position:relative; overflow:hidden;
  padding:clamp(118px, 14vh, 150px) 0 clamp(2.6rem, 4.5vw, 3.8rem);
  margin-bottom:clamp(2.2rem, 4vw, 3.2rem);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 480px at 76% 4%, var(--accent-soft), transparent 62%),
    radial-gradient(720px 460px at 6% 100%, var(--accent-soft), transparent 64%);
}
/* Teknik ızgara: köşeden yumuşayarak kaybolur, sahneye "mühendislik" dokusu verir */
.hizmet-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 95% at 72% 12%, rgba(0,0,0,.55), transparent 72%);
  mask-image:radial-gradient(80% 95% at 72% 12%, rgba(0,0,0,.55), transparent 72%);
}
.hizmet-hero .container{ position:relative; }
.hizmet-hero .detay-geri{ margin-bottom:1.9rem; }

.hh-duzen{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.2rem, 5vw, 4.5rem); align-items:center;
}

/* ---- Sol: metin ---- */
.hh-baslik{
  font-family:var(--font-display);
  font-size:clamp(2.15rem, 4.5vw, 3.25rem);
  font-weight:800; line-height:1.06; letter-spacing:-.015em;
  margin:1.1rem 0 0;
}
.hh-vurgu{
  background:linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hh-ozet{
  color:var(--muted); font-size:clamp(1rem, 1.4vw, 1.13rem); line-height:1.7;
  margin:1.15rem 0 0; max-width:52ch;
}
.hh-btnler{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }
.hh-btnler .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.68rem 1.35rem; font-size:.94rem;
}

/* ---- Sağ: vitrin (görsel / hologram + yüzen kartlar) ---- */
.hh-vitrin{ position:relative; width:100%; max-width:520px; justify-self:end; }
.hh-vitrin::before{           /* çerçevenin arkasındaki zümrüt hâle */
  content:''; position:absolute; inset:10% -8% -12% -8%; z-index:0;
  background:radial-gradient(58% 55% at 50% 58%, var(--glow), transparent 70%);
}
.hh-cerceve{
  position:relative; z-index:1; aspect-ratio:1/1;
  border-radius:26px;
}

/* Hizmet görselleri siyah zemin üzerine EKLEMELİ ışık (hologram) olarak
   üretildi ve arka planları saydamlaştırıldı. Bu yüzden koyu temada çerçeve,
   gölge ve zemin YOK: hologram doğrudan sahnede yüzer, parıltısı hero
   zeminine karışır. Buraya 1px çerçeve/gölge eklemek saydam görselin
   arkasında hayalet bir kutu çizer — eklemeyin. */
.hh-cerceve img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:inherit;
}

/* Açık temada eklemeli yeşil ışık beyaz zeminde okunmuyor (ölçüldü: parıltı
   neredeyse kayboluyor), o yüzden yalnızca orada hologramın altına koyu bir
   "ekran" sahnesi konur. Panel token'ları açık temada beyaz olduğu için
   renkler bilinçli olarak sabit. */
[data-theme="light"] .hh-cerceve:has(img){
  overflow:hidden;
  background:linear-gradient(165deg, #103021, #07160e 72%);
  box-shadow:var(--shadow-lg);
}

/* Görsel yüklenmemiş hizmet: ikon yedeği kart yüzeyinde kalır (iki temada da,
   çünkü ikon --accent renginde ve kendi zeminine ihtiyacı var). */
.hh-cerceve:has(.hh-holo){
  overflow:hidden;
  background:linear-gradient(165deg, var(--panel-2), var(--panel) 72%);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--accent-soft);
}

/* Görsel yüklenmemişse: ikon bazlı hologram (kırık görsel asla yok) */
.hh-holo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(58% 58% at 50% 46%, var(--accent-soft), transparent 72%);
}
.hh-holo i{
  font-size:clamp(3.6rem, 7vw, 5.2rem); color:var(--accent);
  filter:drop-shadow(0 0 26px var(--glow));
}
.hh-halka{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  aspect-ratio:1; border-radius:50%; border:1px solid var(--accent-line);
}
.hh-halka-1{ width:50%; }
.hh-halka-2{ width:72%; border-style:dashed; animation:hhDon 48s linear infinite; }
.hh-halka-3{ width:94%; opacity:.55; }

/* Yüzen cam kartlar — referans tasarımdaki istatistik kartlarının karşılığı */
.hh-kart{
  position:absolute; z-index:2;
  display:flex; flex-direction:column; gap:.1rem;
  padding:.85rem 1.05rem; border-radius:16px;
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--accent-soft);
  animation:hhYuz 6s ease-in-out infinite alternate;
}
.hh-kart-1{ top:7%; right:-5%; min-width:150px; }
.hh-kart-2{ bottom:8%; left:-6%; flex-direction:row; align-items:center; gap:.65rem; animation-duration:7.5s; animation-delay:-2.5s; }
.hh-kart-deger{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  line-height:1.1; color:var(--accent);
}
.hh-kart-etiket{ font-size:.74rem; color:var(--muted); line-height:1.35; }
.hh-spark{ width:100%; height:26px; margin-top:.4rem; color:var(--accent); opacity:.9; }
.hh-kart-2 i{
  flex:none; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.05rem;
}
.hh-kart-2 span{ font-size:.82rem; font-weight:600; line-height:1.35; max-width:150px; }

/* ---- Alt: 4 özellik çipi ---- */
.hh-ozellikler{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.9rem;
  margin:clamp(2.4rem, 4.5vw, 3.4rem) 0 0; padding:0; list-style:none;
}
.hh-ozellikler li{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem; border-radius:16px;
  background:color-mix(in srgb, var(--panel) 80%, transparent);
  box-shadow:var(--shadow), inset 0 1px 0 var(--accent-soft);
}
.hh-ozellikler i{
  flex:none; width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:1.05rem;
}
.hh-ozellikler span{ font-size:.88rem; font-weight:600; line-height:1.3; }

/* ---- Giriş animasyonu: yumuşak yüksel, kısa kademeli gecikme ---- */
.hh-anim{ opacity:0; animation:hhGiris .85s cubic-bezier(.16,1,.3,1) forwards; }
.hizmet-hero .detay-geri.hh-anim{ animation-delay:.02s; }
.hh-metin .detay-rozet.hh-anim{ animation-delay:.06s; }
.hh-baslik.hh-anim{ animation-delay:.13s; }
.hh-ozet.hh-anim{ animation-delay:.2s; }
.hh-btnler.hh-anim{ animation-delay:.27s; }
.hh-vitrin.hh-anim{ animation-delay:.22s; }
.hh-ozellikler.hh-anim{ animation-delay:.4s; }

@keyframes hhGiris{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes hhYuz{ from{ transform:translateY(0); } to{ transform:translateY(-9px); } }
@keyframes hhDon{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .hh-anim{ opacity:1; animation:none; }
  .hh-kart, .hh-halka-2{ animation:none; }
}

/* ---- Duyarlılık ---- */
@media (max-width:991px){
  .hh-duzen{ grid-template-columns:1fr; gap:2.6rem; }
  .hh-vitrin{ justify-self:center; max-width:460px; }
  .hh-ozellikler{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  /* Dar ekranda yüzen kart çerçeve dışına taşamaz: karo düzenine iner */
  .hh-vitrin{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:none; }
  .hh-vitrin::before{ inset:0; }
  .hh-cerceve{ grid-column:1 / -1; border-radius:20px; }
  .hh-kart{ position:static; animation:none; }
  .hh-kart-2 span{ max-width:none; }
  .hh-btnler .btn{ flex:1 1 100%; }
}

/* ==========================================================
   HERO VİTRİN HAREKETİ — hologram süzülmesi
   İstek: görsel sağa sola hareket etsin. Salınım YATAY ağırlıklı, yavaş
   (12s) ve nötr konumdan başlayıp nötrde bitiyor — böylece giriş
   animasyonu (.hh-anim) biter bitmez sıçrama olmuyor.
   Yalnızca transform anime ediliyor (compositor katmanı, layout yok).
   Kartların genliği ve periyodu farklı (7s / 9.5s karşı 12s): asla
   kilitlenmedikleri için sahne tek parça kaymak yerine derinlik
   kazanıyor. Ölçüldü: hologram ±18px, kartlar ±7px, faz sürekli kayıyor.
   ========================================================== */

/* Salınımı .hh-cerceve taşır, görsel değil: açık temada çerçevenin
   overflow:hidden'ı var, görseli kartın içinde kaydırmak kenarda
   kırpılma yaratırdı. Böylece koyu temada hologram, açık temada
   koyu "ekran" kartı hologramla birlikte süzülüyor. */
.hh-cerceve{
  --hh-suzul:18px;                     /* yatay genlik */
  animation:hhSuzul 12s ease-in-out infinite;
}
@keyframes hhSuzul{
  0%, 100%{ transform:translate3d(0, 0, 0) rotate(0deg); }
  25%     { transform:translate3d(var(--hh-suzul), -7px, 0) rotate(.45deg); }
  75%     { transform:translate3d(calc(var(--hh-suzul) * -1), 7px, 0) rotate(-.45deg); }
}

/* Arkadaki zümrüt hâle yavaşça nefes alır; süre (9s) salınımla aynı
   olmasın diye bilinçli farklı — aynı olsaydı ikisi kilitlenip mekanik
   dururdu. */
.hh-vitrin::before{
  animation:hhParilti 9s ease-in-out infinite alternate;
}
@keyframes hhParilti{
  from{ opacity:.72; transform:scale(.95); }
  to  { opacity:1;   transform:scale(1.06); }
}

/* Yüzen kartlar: eski salt dikey hhYuz yerine yatay bileşeni de olan,
   daha küçük genlikli süzülme */
.hh-kart{ animation:hhKartSuzul 7s ease-in-out infinite alternate; }
.hh-kart-2{ animation-duration:9.5s; animation-delay:-3s; }
@keyframes hhKartSuzul{
  from{ transform:translate3d(7px, 2px, 0); }
  to  { transform:translate3d(-7px, -10px, 0); }
}

@media (max-width:640px){
  /* Dar ekranda genlik küçülür: 18px burada oransal olarak çok büyük
     kalıyor ve çerçeveyi kenar boşluğunun dışına taşırma riski var. */
  .hh-cerceve{ --hh-suzul:8px; }
  /* Kartlar mobilde karo düzeninde ve sabit — yukarıdaki .hh-kart
     kuralı bu media bloğundan sonra geldiği için burada yeniden kapatılıyor. */
  .hh-kart{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .hh-cerceve,
  .hh-vitrin::before,
  .hh-kart{ animation:none; }
}