/* ===========================================================
   DEV STUDIO TEMA KATMANI  (style.css üzerine biner)
   Mustafa Aydemir — "kod yazan birinin sitesi" görünümü
   =========================================================== */
:root{
    --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ds-bg:#0b0e13;
    --ds-bg2:#10141b;
    --ds-line:#1e2530;
    --ds-mut:#8b94a3;
    --code-blue:#58a6ff; --code-pink:#ff7b72; --code-pur:#d2a8ff;
    --code-str:#a5d6ff; --code-com:#6e7681; --code-num:#79c0ff;
}

/* --- mono bölüm etiketleri ( // label ) --- */
.section-label{ font-family:var(--mono); letter-spacing:.5px; text-transform:none; }
.section-label::before{ content:"// "; color:var(--ds-mut); }

/* ===================== HERO (Dev Studio) ===================== */
.devhero{ position:relative; min-height:auto; padding:140px 0 90px; background:
    radial-gradient(900px 500px at 88% -10%, rgba(255,184,0,.10), transparent 60%),
    var(--ds-bg); overflow:hidden; }
.devhero::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(var(--ds-line) 1px,transparent 1px),linear-gradient(90deg,var(--ds-line) 1px,transparent 1px);
    background-size:40px 40px; opacity:.30;
    -webkit-mask-image:radial-gradient(760px 460px at 68% 34%,#000,transparent 76%);
            mask-image:radial-gradient(760px 460px at 68% 34%,#000,transparent 76%); }
.devhero .container{ position:relative; z-index:2; }
.devhero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.devhero-kick{ font-family:var(--mono); color:var(--primary); font-size:14px; margin-bottom:18px; }
.devhero-kick span{ color:var(--ds-mut); }
.devhero h1{ font-size:clamp(34px,4.4vw,56px); line-height:1.06; font-weight:900; letter-spacing:-1.5px; margin:0; }
.devhero h1 span{ background:linear-gradient(120deg,#FFB800,#FFE401); -webkit-background-clip:text; background-clip:text; color:transparent; }
.devhero > .container .devhero-text > p{ margin-top:18px; color:var(--ds-mut); font-size:18px; line-height:1.6; max-width:520px; }
.devhero .hero-buttons{ margin-top:28px; }
.devhero-chips{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.devchip{ font-family:var(--mono); font-size:12.5px; color:var(--ds-mut); border:1px solid var(--ds-line);
    background:#11151c; padding:8px 13px; border-radius:8px; }
.devchip b{ color:var(--primary); font-weight:500; }
a.devchip{ text-decoration:none; transition:border-color .2s, color .2s; }
a.devchip:hover{ border-color:var(--primary); color:#e6e9ef; }
.devhero-stats{ margin-top:34px; display:flex; gap:30px; }
.devhero-stats .stat h3{ font-family:var(--mono); color:var(--primary); font-size:30px; font-weight:700; margin:0; }
.devhero-stats .stat p{ color:var(--ds-mut); font-size:13px; margin-top:2px; }

/* --- kod editörü penceresi --- */
.code-window{ background:#0d1117; border:1px solid var(--ds-line); border-radius:14px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.5); }
.code-window .cw-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:#11151c; border-bottom:1px solid var(--ds-line); }
.code-window .cw-bar i{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.cw-dot1{ background:#ff5f56; } .cw-dot2{ background:#ffbd2e; } .cw-dot3{ background:#27c93f; }
.code-window .cw-tab{ margin-left:14px; font-family:var(--mono); font-size:12.5px; color:var(--ds-mut); }
.code-window .cw-tab b{ color:#e6e9ef; font-weight:500; }
.code-window pre{ margin:0; font-family:var(--mono); font-size:13.5px; line-height:1.85; padding:20px 20px 24px;
    white-space:pre; overflow-x:auto; color:#e6e9ef; }
.code-window .ln{ color:#3a434f; margin-right:18px; user-select:none; }
.cw-k{color:var(--code-pink)} .cw-t{color:var(--code-pur)} .cw-s{color:var(--code-str)}
.cw-c{color:var(--code-com)} .cw-f{color:var(--code-blue)} .cw-n{color:var(--code-num)}

/* ===================== EFEKTLER / HAREKET ===================== */
/* Okuma ilerleme çubuğu */
#ds-progress{ position:fixed; top:0; left:0; height:3px; width:0;
    background:linear-gradient(90deg,#FFB800,#FFE401); z-index:9999; box-shadow:0 0 10px rgba(255,184,0,.5); }

/* Kod editörü satırlarının sırayla belirmesi */
.code-window pre .ds-line{ display:block; opacity:0; transform:translateY(5px);
    animation:dsLineIn .4s ease forwards; }
@keyframes dsLineIn{ to{ opacity:1; transform:none; } }

/* Aurora animasyonlu arka plan (hero) */
.devhero{ --mx:72%; --my:28%; }
.devhero::after{ content:""; position:absolute; inset:-25% -12% -10% -12%; z-index:0; pointer-events:none;
    background:
        radial-gradient(38% 48% at 22% 28%, rgba(255,184,0,.20), transparent 62%),
        radial-gradient(34% 44% at 82% 18%, rgba(88,166,255,.14), transparent 62%),
        radial-gradient(42% 52% at 62% 82%, rgba(255,228,1,.12), transparent 62%);
    filter:blur(44px); animation:dsAurora 16s ease-in-out infinite alternate; }
@keyframes dsAurora{
    0%  { transform:translate3d(0,0,0) scale(1); }
    50% { transform:translate3d(-4%,2.5%,0) scale(1.1) rotate(2deg); }
    100%{ transform:translate3d(3.5%,-2%,0) scale(1.05) rotate(-2deg); }
}
.devhero::before{ z-index:1; }   /* ızgara, aurora'nın üstünde */
/* İmleç takip eden parıltı */
.devhero .cursor-glow{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
    background:radial-gradient(260px 260px at var(--mx) var(--my), rgba(255,228,1,.12), transparent 70%);
    transition:background .08s linear; }
.devhero .container{ z-index:2; }

/* Teknoloji şeridi öğeleri */
.tech-item{ color:var(--ds-mut); }
.tech-item i{ color:var(--primary); }

/* Rakamlarla biz — sayaç bölümü */
.counters-section{ background:#0d1117; border-top:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); }
.counter-item{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--ds-line); border-radius:16px; padding:28px 20px; }
.counter-icon i{ color:var(--primary); }
.counter-number{ font-family:var(--mono); color:#fff; }

/* Yanıp sönen terminal imleci */
@keyframes dsBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.code-window pre span[style*="--primary"]{ animation:dsBlink 1s step-end infinite; }

/* Buton hover mikro-etki */
.btn-primary{ transition:transform .18s ease, box-shadow .18s ease; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,184,0,.3); }

@media (prefers-reduced-motion: reduce){
    .devhero{ animation:none; }
    .code-window pre .ds-line{ animation:none; opacity:1; transform:none; }
}

/* ===================== GLOBAL BİLEŞENLER (tüm site) ===================== */

/* Navbar — cam/blur + hairline */
.navbar{ background:rgba(11,14,19,.72) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--ds-line); }
.navbar.scrolled{ background:rgba(11,14,19,.9) !important; }
.nav-links a{ font-weight:500; }

/* İç sayfa hero'ları — koyu + ince ızgara, mono breadcrumb */
.page-hero{ position:relative; background:
    radial-gradient(700px 360px at 85% -30%, rgba(255,184,0,.08), transparent 60%), var(--ds-bg); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(var(--ds-line) 1px,transparent 1px),linear-gradient(90deg,var(--ds-line) 1px,transparent 1px);
    background-size:40px 40px; opacity:.22;
    -webkit-mask-image:radial-gradient(640px 320px at 60% 0%,#000,transparent 80%);
            mask-image:radial-gradient(640px 320px at 60% 0%,#000,transparent 80%); }
.page-hero .container{ position:relative; z-index:2; }
.breadcrumb{ font-family:var(--mono); font-size:12.5px; }

/* Bölüm zeminleri — GitHub-dark tutarlılığı */
.bg-dark{ background:var(--ds-bg); }
.bg-dark-2{ background:#0d1117; border-top:1px solid rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.03); }
.bg-dark-3{ background:var(--ds-bg2); }

/* Kartlar — koyu panel + hairline + hover kalkış (hizmet & genel) */
.service-card{ background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    border:1px solid var(--ds-line); border-radius:16px; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.service-card:hover{ transform:translateY(-5px); border-color:rgba(255,228,1,.35);
    box-shadow:0 18px 50px rgba(0,0,0,.45); }
.service-icon{ background:linear-gradient(135deg,#FFB800,#FFE401) !important; box-shadow:0 8px 22px rgba(255,184,0,.22);
    border-radius:14px; }
.service-icon i{ color:#0b0e13 !important; }
.service-icon img{ filter:none; }

/* Öne çıkanlar / özellik satırları */
.about-feature{ font-family:inherit; }
.about-feature i{ color:var(--primary); }

/* Butonlar */
.btn-outline{ border:1px solid var(--ds-line); background:#12161d; color:#e6e9ef; }
.btn-outline:hover{ border-color:var(--primary); background:#161b23; }

/* Referans filtre butonları */
.ref-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.ref-filter{ font-family:var(--mono); font-size:13px; color:var(--ds-mut); background:#11151c;
    border:1px solid var(--ds-line); padding:9px 17px; border-radius:999px; cursor:pointer; transition:all .2s ease; }
.ref-filter:hover{ color:#e6e9ef; border-color:var(--primary); }
.ref-filter.active{ color:#0b0e13; background:linear-gradient(135deg,#FFB800,#FFE401); border-color:transparent; font-weight:700; }

/* Portföy / referans kartları — "repo" hissi */
.portfolio-card{ background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--ds-line); border-radius:16px; overflow:hidden;
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.portfolio-card:hover{ transform:translateY(-5px); border-color:rgba(255,228,1,.35); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.portfolio-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.3px; }

/* Fiyat / kampanya kartları */
.pricing-card, .campaign-card{ border:1px solid var(--ds-line); border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); }

/* CTA banner — solid sarı yerine koyu panel + sarı aksan */
.cta-banner .container{ position:relative; background:
    radial-gradient(600px 300px at 80% 0%, rgba(255,184,0,.12), transparent 60%), var(--ds-bg2);
    border:1px solid var(--ds-line); border-radius:22px; padding:56px 40px; overflow:hidden; }
.cta-banner .container::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(var(--ds-line) 1px,transparent 1px),linear-gradient(90deg,var(--ds-line) 1px,transparent 1px);
    background-size:38px 38px; opacity:.2;
    -webkit-mask-image:radial-gradient(500px 220px at 75% 10%,#000,transparent 80%); mask-image:radial-gradient(500px 220px at 75% 10%,#000,transparent 80%); }
.cta-banner .container > *{ position:relative; z-index:1; }

/* Teknoloji şeridi */
.tech-section{ background:var(--ds-bg); border-top:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); }
.tech-section .section-label{ color:var(--ds-mut); }

/* Çalışma süreci adımları (hizmet detay) */
.ds-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.ds-step{ position:relative; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    border:1px solid var(--ds-line); border-radius:14px; padding:22px 22px 20px; }
.ds-step .ds-num{ font-family:var(--mono); font-size:13px; color:var(--primary); border:1px solid var(--ds-line);
    border-radius:7px; padding:3px 9px; display:inline-block; margin-bottom:12px; background:#11151c; }
.ds-step h3{ font-size:18px; color:#fff; margin:0 0 8px; }
.ds-step p{ color:var(--ds-mut); font-size:14px; line-height:1.6; margin:0; }
@media(max-width:700px){ .ds-steps{ grid-template-columns:1fr; } }

/* Footer — koyu + hairline + mono başlıklar */
.site-footer{ background:var(--ds-bg); border-top:1px solid var(--ds-line); }
.footer-col h4{ font-family:var(--mono); font-size:13px; letter-spacing:.5px; color:#e6e9ef; }
.footer-social a{ border:1px solid var(--ds-line); border-radius:8px; }
.footer-social a:hover{ border-color:var(--primary); }

/* --- responsive --- */
@media(max-width:900px){
    .devhero{ padding:120px 0 64px; }
    .devhero-grid{ grid-template-columns:1fr; gap:32px; }
    .devhero-editor{ order:2; }
    .code-window pre{ font-size:12px; }
    .devhero-stats{ gap:22px; }
    .cta-banner .container{ padding:40px 24px; }
}