/* ==============================================================
   VELTRON MAKİNE  ·  style.css  v4.0
   --------------------------------------------------------------
   1.  Tokens              8.  Projeler          15. Aksiyon çubuğu
   2.  Reset & Base        9.  Süreç             16. Yardımcı UI
   3.  Yerleşim           10.  İstatistik        17. Animasyon
   4.  Butonlar           11.  CTA               18. Erişilebilirlik
   5.  Header / Nav       12.  Footer            19. DUYARLI DÜZEN
   6.  Hero               13.  İletişim sayfası
   7.  Hakkımızda         14.  Hizmet kartları
   --------------------------------------------------------------
   v4 değişiklikleri:
   • Akışkan (fluid) içerik kutusu + akışkan tipografi ölçeği
   • Hero scrim hafifletildi; kaynakçı ve kıvılcımlar görünür
     hale geldi, metin okunabilirliği text-shadow ile korundu
   • Blueprint ızgara dokusu + altın köşe aksanı
   • Mobilde sabit "Ara / Teklif Al" aksiyon çubuğu
   • Kırılma noktaları 1600/1240/1100/860/680/560/400 olarak
     yeniden düzenlendi; menü 1100px'te panele geçiyor
     (eskiden 1024 - 1025..1180 arası daralma vardı)
   • env(safe-area-inset-*) desteği, dvh, forced-colors
   ============================================================== */


/* ==============================================================
   1. TOKENS
   ============================================================== */

:root{
    /* --- Marka renkleri (logodaki altın) --- */
    --gold:        #F5B400;
    --gold-light:  #FFCB47;
    --gold-deep:   #C68F00;
    --gold-soft:   rgba(245,180,0,.10);
    --gold-line:   rgba(245,180,0,.30);

    /* --- Koyu yüzeyler --- */
    --bg:          #050810;
    --bg-1:        #09101D;
    --bg-2:        #0D1626;
    --card:        #121E31;
    --card-2:      #17253C;

    /* --- Metin --- */
    --white:       #FFFFFF;
    --text:        #E4EAF6;
    --muted:       #94A2BC;
    /* Kontrast denetimi (WCAG AA, 4.5:1):
       eski #6C7A94 -> kart zeminde (#121E31) yalnizca 3.86:1 idi
       ve Lighthouse "color-contrast" hatasi veriyordu.
       #7A88A0 -> 4.66:1 (en dusuk zemin), gorsel hiyerarsi de
       duruyor: muted-dim 4.66 < muted 6.49 */
    --muted-dim:   #7A88A0;

    /* --- Çizgi & gölge --- */
    --line:        rgba(255,255,255,.08);
    --line-soft:   rgba(255,255,255,.05);
    --shadow:      0 24px 60px -18px rgba(0,0,0,.75);
    --shadow-gold: 0 18px 40px -16px rgba(245,180,0,.45);
    --text-shade:  0 2px 22px rgba(5,8,16,.80), 0 1px 3px rgba(5,8,16,.65);

    /* --- Ölçü --- */
    --radius:      18px;
    --radius-sm:   12px;
    --radius-lg:   26px;

    /* Akışkan içerik kutusu. Kenar boşluğu akışkan: telefonda
       18px, tablette ~36px, masaüstünde 40px sabitlenir. */
    --gutter:      clamp(1.15rem, 3.6vw, 2.5rem);
    --container:   1280px;
    --header-h:    78px;
    --section-y:   clamp(64px, 8vw, 116px);

    /* --- Hareket --- */
    --ease:        cubic-bezier(.22,.61,.36,1);
    --t-fast:      .18s var(--ease);
    --t:           .32s var(--ease);
    --t-slow:       .6s var(--ease);
}

/* Ekran genişliğine göre içerik kutusu biraz büyür */
@media (min-width:1560px){
    :root{ --container:1360px; --header-h:84px; }
}


/* ==============================================================
   2. RESET & BASE
   ============================================================== */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    font-family:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:16px;
    line-height:1.7;
    background:var(--bg);
    color:var(--text);
    /* Yatay taşmayı gizlemek yerine kaynağında engelliyoruz
       (aşağıdaki .container/.grid kuralları). Yine de güvenlik
       ağı olarak kalıyor. */
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; }

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

/* <picture> sarmalayicisi kendi kutusunu uretmez; icindeki gorsel
   dogrudan .about__media / .project__media icinde konumlanir.
   (Hero'da picture kendisi konumlanmis bir kutu, o yuzden burada
    kapsam disi birakildi.) */
.about__media picture,
.project__media picture{ display:contents; }

a{ color:inherit; text-decoration:none; }

ul,ol{ list-style:none; }

button,input,textarea,select{
    font:inherit; color:inherit; background:none;
    border:none; outline:none;
}
button{ cursor:pointer; }

/* Dokunma hedefleri en az 44px (WCAG 2.5.5) */
button,a[href]{ -webkit-tap-highlight-color:transparent; }

h1,h2,h3,h4{ line-height:1.12; font-weight:800; letter-spacing:-.02em; overflow-wrap:break-word; }
p{ overflow-wrap:break-word; }

::selection{ background:var(--gold); color:#0A0A0A; }

:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--gold-deep); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }


/* ==============================================================
   3. YERLEŞİM & YARDIMCILAR
   ============================================================== */

.container{
    width:min(var(--container), calc(100% - var(--gutter) * 2));
    margin-inline:auto;
}

.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(52px,6vw,80px); }

/* --- NOT: content-visibility:auto KULLANILMADI --------------------
   Denendi, geri alindi. Ekran disi bolumlerin ilk boyamada
   cizilmemesi kazanc vaat ediyordu, ama iki gercek sorun yaratti:

     1) Icerik "atlanmis" (skipped) alt agaclar stil ve yerlesim
        hesabini atliyor. Butonlar kendi kurallarini kaybedip
        tarayici varsayilanina donuyordu:
          .btn--primary  ->  gri sistem butonu
          a              ->  mavi varsayilan baglanti rengi
        Lighthouse da bu yuzden "color-contrast" hatasi verdi
        (Erisilebilirlik 100 -> 96).

     2) Atlanmis alt agaclarda getComputedStyle guvenilir degil;
        bu da otomatik testleri yaniltiyor.

   Kazanc zaten spekulatifti; asil agirlik kazanci AVIF + yazi tipi
   + onbellekleme ile saglandi. Dogru tercih: kullanmamak.
   -------------------------------------------------------------- */

/* Sabit header, bağlantıyla gidilen bölümün üstünü kapatmasın */
section[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

.visually-hidden{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
    position:fixed; top:8px; left:8px; z-index:2000;
    padding:12px 20px; border-radius:10px;
    background:var(--gold); color:#0A0A0A;
    font-weight:700; font-size:14px;
    transform:translateY(-160%);
    transition:transform var(--t);
}
.skip-link:focus{ transform:translateY(0); }

/* --- Blueprint ızgara dokusu (mühendislik teması) --- */
.blueprint{
    position:absolute; inset:0; z-index:-3; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.040) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.040) 1px, transparent 1px);
    background-size:clamp(48px,7vw,76px) clamp(48px,7vw,76px);
    -webkit-mask-image:radial-gradient(115% 85% at 30% 40%, #000 0%, transparent 74%);
    mask-image:radial-gradient(115% 85% at 30% 40%, #000 0%, transparent 74%);
}

/* --- Bölüm başlığı --- */
.section-head{
    max-width:720px; margin:0 auto clamp(40px,4.6vw,64px);
    text-align:center;
}
.section-head--left{ margin-inline:0; text-align:left; }

.section-head h2{
    font-size:clamp(28px,3.9vw,50px);
    margin-bottom:18px;
}
.section-head p{
    color:var(--muted);
    font-size:clamp(15px,1.35vw,18px);
    max-width:660px;
    margin-inline:auto;
}
.section-head--left p{ margin-inline:0; }

.eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    padding:8px 16px; margin-bottom:22px;
    border:1px solid var(--gold-line);
    border-radius:999px;
    background:var(--gold-soft);
    color:var(--gold);
    font-size:12px; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 12px var(--gold);
    flex:none;
}

.hl{ color:var(--gold); }

/* --- Metinler --- */
.lede{ font-size:clamp(16px,1.5vw,19px); color:var(--text); }
.muted{ color:var(--muted); }

.link-gold{
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px;                     /* dokunma hedefi */
    color:var(--gold); font-weight:600;
    transition:gap var(--t);
}
.link-gold:hover{ gap:14px; }
.link-gold svg{ width:16px; height:16px; flex:none; }


/* ==============================================================
   4. BUTONLAR
   ============================================================== */

.btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:52px; padding:15px clamp(20px,2.4vw,32px);
    border-radius:var(--radius-sm);
    font-size:clamp(14.5px,1.1vw,15.5px); font-weight:700; letter-spacing:.01em;
    text-align:center;
    white-space:nowrap; cursor:pointer;
    border:1px solid transparent;
    transition:transform var(--t), background var(--t),
               border-color var(--t), box-shadow var(--t), color var(--t);
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn--primary{
    background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
    color:#12100A;
    box-shadow:var(--shadow-gold);
}
.btn--primary:hover{ box-shadow:0 22px 48px -14px rgba(245,180,0,.62); }

.btn--ghost{
    border-color:rgba(255,255,255,.18);
    color:var(--white);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.34);
}

.btn--block{ width:100%; }
.btn[disabled],.btn[aria-busy="true"]{
    opacity:.6; pointer-events:none; transform:none;
}


/* ==============================================================
   5. HEADER / NAV
   ============================================================== */

.header{
    position:fixed; inset:0 0 auto 0; z-index:1000;
    /* iPhone çentik / dinamik ada güvenli alan */
    padding-top:env(safe-area-inset-top);
    height:calc(var(--header-h) + env(safe-area-inset-top));
    background:rgba(5,8,16,.72);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid transparent;
    transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
.header.is-stuck{
    background:rgba(5,8,16,.94);
    border-bottom-color:var(--line-soft);
    box-shadow:0 12px 40px -20px rgba(0,0,0,.9);
}

.header__inner{
    height:var(--header-h);
    display:flex; align-items:center; gap:clamp(12px,1.6vw,20px);
}
/* Mobilde panel sağdan açılır; marka ve düğme onun üstünde kalmalı */
.brand,
.nav-toggle{ position:relative; z-index:4; }

/* --- Marka --- */
.brand{
    display:flex; align-items:center; gap:clamp(8px,1.1vw,12px);
    min-height:44px;                 /* dokunma hedefi */
    margin-right:auto; flex:none;
}
.brand img{
    width:clamp(40px,3.4vw,48px); height:auto; flex:none;
    filter:drop-shadow(0 3px 10px rgba(245,180,0,.28));
}
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
    font-size:clamp(18px,1.5vw,20px); font-weight:800; letter-spacing:.06em;
    color:var(--white);
}
.brand__name em{ font-style:normal; color:var(--gold); }
.brand__sub{
    font-size:9.5px; font-weight:600; letter-spacing:.17em;
    color:var(--muted-dim); text-transform:uppercase;
    margin-top:4px;
}

/* --- Menü --- */
.nav{ display:flex; align-items:center; min-width:0; }
.nav ul{ display:flex; align-items:center; gap:2px; }

.nav a{
    position:relative; display:block;
    padding:12px clamp(10px,1.15vw,16px); border-radius:9px;
    font-size:clamp(13.5px,1.05vw,14.5px); font-weight:600; color:var(--text);
    white-space:nowrap;
    transition:color var(--t-fast), background var(--t-fast);
}
.nav a::after{
    content:""; position:absolute;
    left:clamp(10px,1.15vw,16px); right:clamp(10px,1.15vw,16px);
    bottom:5px; height:2px;
    background:var(--gold); border-radius:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--t);
}
.nav a:hover{ color:var(--white); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--gold); }
.nav a.is-active::after{ transform:scaleX(1); }

/* --- Dil seçici --- */
.lang{ position:relative; flex:none; }

/* Masaüstünde sadece header'daki seçici görünür,
   menü panelindeki kopya gizlenir (mobilde açılır). */
.nav > .lang{ display:none; }
.lang__btn{
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px; padding:9px 14px; border-radius:9px;
    border:1px solid var(--line);
    font-size:13.5px; font-weight:600; color:var(--text);
    transition:border-color var(--t-fast), background var(--t-fast);
}
.lang__btn:hover{ border-color:var(--gold-line); background:var(--gold-soft); }
.lang__btn svg{
    width:12px; height:12px; opacity:.6; flex:none;
    transition:transform var(--t);
}
.lang.is-open .lang__btn svg{ transform:rotate(180deg); }
.lang.is-open .lang__btn{ border-color:var(--gold-line); }

.lang__menu{
    position:absolute; top:calc(100% + 12px); right:0;
    min-width:212px; padding:7px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.lang.is-open .lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }

.lang__menu li+li{ margin-top:2px; }
.lang__menu button{
    width:100%; min-height:44px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 14px; border-radius:8px;
    font-size:14px; font-weight:600; color:var(--text);
    text-align:left;
    transition:background var(--t-fast), color var(--t-fast);
}
.lang__menu button:hover:not(:disabled){ background:var(--gold-soft); color:var(--gold); }
.lang__menu button:disabled{ color:var(--muted-dim); cursor:not-allowed; }
.lang__menu .is-current{ color:var(--gold); background:var(--gold-soft); }

.soon{
    font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:3px 7px; border-radius:5px;
    background:rgba(255,255,255,.07); color:var(--muted-dim);
}

/* --- Mobil menü düğmesi --- */
.nav-toggle{
    display:none; flex:none;
    width:44px; height:44px; border-radius:10px;
    border:1px solid var(--line);
    place-items:center;
    transition:border-color var(--t-fast);
}
.nav-toggle:hover{ border-color:var(--gold-line); }
.nav-toggle__bars{ position:relative; width:20px; height:14px; }
.nav-toggle__bars span{
    position:absolute; left:0; width:100%; height:2px; border-radius:2px;
    background:var(--white);
    transition:transform var(--t), opacity var(--t-fast), top var(--t);
}
.nav-toggle__bars span:nth-child(1){ top:0; }
.nav-toggle__bars span:nth-child(2){ top:6px; }
.nav-toggle__bars span:nth-child(3){ top:12px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* --- Mobil perde --- */
.nav-backdrop{
    position:fixed; inset:0; z-index:-1;
    background:rgba(3,5,10,.72);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden;
    transition:opacity var(--t), visibility var(--t);
}
.nav-backdrop.is-visible{ opacity:1; visibility:visible; }


/* ==============================================================
   6. HERO
   ============================================================== */

.hero{
    position:relative;
    isolation:isolate;
    display:flex; align-items:center;
    min-height:100vh;
    min-height:100svh;
    min-height:min(100svh, 940px);
    padding-top:calc(var(--header-h) + clamp(36px,6vw,64px));
    padding-bottom:clamp(56px,7vw,84px);
    overflow:hidden;
}

.hero__media{
    position:absolute; inset:0; z-index:-4; display:block;
}
.hero__media img{
    width:100%; height:100%;
    object-fit:cover;
    /* Konu (kaynakçı) sağda kalsın; metin sütunu solda */
    object-position:62% 44%;
}

/* v4: scrim artık fotoğrafı yutmuyor.
   Solda metin okunabilirliği, ortada ve sağda fotoğraf görünür. */
.hero__scrim{
    position:absolute; inset:0; z-index:-2;
    background:
        /* 1) Metin sütununa yerel karartma (sert sol -> yumuşak sağ) */
        linear-gradient(90deg,
            rgba(5,8,16,.94) 0%,
            rgba(5,8,16,.88) 26%,
            rgba(5,8,16,.66) 44%,
            rgba(5,8,16,.30) 60%,
            rgba(5,8,16,.12) 76%,
            rgba(5,8,16,.20) 100%),
        /* 2) Üst kenar: sabit header altında okunabilirlik */
        linear-gradient(to bottom, rgba(5,8,16,.70), rgba(5,8,16,.14) 20%, transparent 38%),
        /* 3) Alt kenar: sonraki bölüme yumuşak geçiş */
        linear-gradient(to top, var(--bg) 1%, rgba(5,8,16,.40) 24%, transparent 52%);
}

/* altın ışık */
.hero__glow{
    position:absolute; z-index:-1; pointer-events:none;
    width:620px; height:620px; border-radius:50%;
    top:-180px; right:-140px;
    background:radial-gradient(circle,rgba(245,180,0,.20),transparent 68%);
    filter:blur(50px);
    animation:float 9s ease-in-out infinite;
}
.hero__glow--2{
    width:440px; height:440px;
    top:auto; bottom:-160px; right:auto; left:-120px;
    background:radial-gradient(circle,rgba(245,180,0,.10),transparent 70%);
    animation-delay:-4s;
}

.hero__inner{
    position:relative;
    max-width:min(700px, 100%);
}

/* Fotoğraf üstündeki metin: gölge ile garantili kontrast.
   Ağır scrim yerine hafif scrim + gölge = görsel korunur. */
.hero h1{
    font-size:clamp(34px,6.2vw,78px);
    font-weight:900;
    letter-spacing:-.035em;
    margin-bottom:clamp(18px,2.2vw,26px);
    text-shadow:var(--text-shade);
}

.hero__lede{
    font-size:clamp(15.5px,1.7vw,20px);
    color:var(--text);
    max-width:min(560px,100%);
    margin-bottom:clamp(28px,3.4vw,40px);
    line-height:1.8;
    text-shadow:var(--text-shade);
}

.hero__actions{
    display:flex; flex-wrap:wrap; gap:14px;
    margin-bottom:clamp(34px,4.5vw,54px);
}

/* --- Hero içi küçük gerçekler --- */
.hero__facts{
    display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,52px);
    padding-top:clamp(22px,2.4vw,30px);
    border-top:1px solid rgba(255,255,255,.16);
}
.hero__fact strong{
    display:block;
    font-size:clamp(24px,3.1vw,38px); font-weight:800;
    color:var(--gold); line-height:1;
    margin-bottom:7px;
    text-shadow:var(--text-shade);
}
.hero__fact span{
    display:block;
    font-size:clamp(11px,1vw,12.5px); font-weight:600; letter-spacing:.07em;
    color:var(--text); text-transform:uppercase;
    text-shadow:var(--text-shade);
}

/* --- Yetenek rozetleri (gerçek hizmetler, uydurma veri yok) --- */
.hero__chips{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:clamp(22px,2.6vw,30px);
}
.hero__chip{
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 13px; border-radius:999px;
    background:rgba(5,8,16,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--line);
    font-size:clamp(11px,1vw,12.5px); font-weight:600;
    letter-spacing:.04em; color:var(--text);
}
.hero__chip::before{
    content:""; width:5px; height:5px; flex:none;
    border-radius:1px; background:var(--gold);
    transform:rotate(45deg);
}

/* --- Kaydırma ipucu --- */
.scroll-hint{
    position:absolute; left:50%; bottom:clamp(16px,2.4vw,26px);
    z-index:1;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:9px;
    font-size:10px; font-weight:600; letter-spacing:.2em;
    color:rgba(255,255,255,.55); text-transform:uppercase;
    pointer-events:none;
}
.scroll-hint i{
    width:1px; height:44px;
    background:linear-gradient(to bottom,var(--gold),transparent);
    animation:drop 2.1s ease-in-out infinite;
}


/* ==============================================================
   7. HAKKIMIZDA
   ============================================================== */

.about{ background:var(--bg-1); position:relative; overflow:hidden; }

.about__grid{
    display:grid;
    /* Metin biraz geniş, görsel ondan biraz fazlası */
    grid-template-columns:1fr 1.18fr;
    gap:clamp(36px,4.5vw,58px); align-items:center;
}

.about h2{
    font-size:clamp(25px,3.1vw,40px);
    margin-bottom:20px;
}
.about p{ color:var(--muted); font-size:clamp(15px,1.2vw,16.5px); }
.about p + p{ margin-top:14px; }

.feature-list{
    margin:26px 0 30px;
    display:grid; gap:13px;
}
.feature-list li{
    display:flex; align-items:flex-start; gap:13px;
    font-size:clamp(14.5px,1.1vw,15.5px); color:var(--text);
}
.feature-list svg{
    width:22px; height:22px; flex:none; margin-top:1px;
    padding:4px; border-radius:6px;
    background:var(--gold-soft); color:var(--gold);
}

/* Görsel: diğer görsellerle aynı 16:9 oranında */
.about__media{ position:relative; isolation:isolate; }
.about__media img{
    width:100%; aspect-ratio:16/9; object-fit:cover;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.about__media::before{
    content:""; position:absolute; z-index:-1;
    inset:-13px 24px 24px -13px;
    border:1px solid var(--gold-line);
    border-radius:var(--radius-lg);
}
.about__badge{
    position:absolute; left:-20px; bottom:clamp(20px,2.4vw,26px);
    display:flex; align-items:center; gap:13px;
    padding:13px 18px; border-radius:var(--radius);
    background:rgba(5,8,16,.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--gold-line);
    box-shadow:var(--shadow);
}
.about__badge strong{
    font-size:clamp(23px,2.2vw,27px); font-weight:800; color:var(--gold); line-height:1;
}
.about__badge span{
    font-size:10.5px; font-weight:600; letter-spacing:.05em;
    color:var(--muted); text-transform:uppercase; line-height:1.45;
}


/* ==============================================================
   8. HİZMETLER
   ============================================================== */

.services{ background:var(--bg); position:relative; overflow:hidden; }

.services__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(16px,1.8vw,22px);
}

.service{
    position:relative; overflow:hidden;
    padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,30px) clamp(24px,2.4vw,32px);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    transition:transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
/* Altta büyüyen altın çizgi - "üretim hattı" detayı */
.service::after{
    content:""; position:absolute; left:0; right:0; bottom:0; z-index:2;
    height:3px;
    background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
    transform:scaleX(0); transform-origin:left;
    transition:transform .5s var(--ease);
}
.service::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:radial-gradient(520px 300px at var(--mx,50%) var(--my,0%),var(--gold-soft),transparent 70%);
    opacity:0; transition:opacity var(--t); pointer-events:none;
}
/* kart içeriği parıltının üstünde kalsın */
.service__icon,
.service__num,
.service h3,
.service p,
.service__tags{ position:relative; z-index:1; }
.service:hover{
    transform:translateY(-8px);
    border-color:var(--gold-line);
    background:var(--card-2);
    box-shadow:var(--shadow);
}
.service:hover::before{ opacity:1; }
.service:hover::after{ transform:scaleX(1); }

.service__icon{
    width:clamp(46px,3.4vw,52px); height:clamp(46px,3.4vw,52px);
    margin-bottom:clamp(18px,1.8vw,22px);
    display:grid; place-items:center;
    border-radius:14px;
    background:var(--gold-soft);
    border:1px solid var(--gold-line);
    color:var(--gold);
    transition:background var(--t), color var(--t);
}
.service__icon svg{ width:clamp(22px,1.8vw,25px); height:clamp(22px,1.8vw,25px); }
.service:hover .service__icon{ background:var(--gold); color:#12100A; }

.service__num{
    position:absolute; top:clamp(22px,2.2vw,26px); right:clamp(24px,2.4vw,28px);
    font-size:13px; font-weight:800; letter-spacing:.1em;
    color:rgba(255,255,255,.10);
}
.service h3{ font-size:clamp(18px,1.4vw,20px); margin-bottom:12px; }
.service p{ font-size:clamp(14.5px,1.1vw,15px); color:var(--muted); line-height:1.8; }

.service__tags{
    display:flex; flex-wrap:wrap; gap:7px;
    margin-top:20px;
}
.service__tags li{
    padding:5px 11px; border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--line-soft);
    font-size:11.5px; font-weight:600; color:var(--muted);
}


/* ==============================================================
   9. PROJELER
   ============================================================== */

.projects{ background:var(--bg-1); }

.projects__grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(18px,2.2vw,26px);
}

.project{
    position:relative; display:flex; flex-direction:column;
    border-radius:var(--radius-lg); overflow:hidden;
    background:var(--card);
    border:1px solid var(--line);
    transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.project:hover{
    transform:translateY(-8px);
    border-color:var(--gold-line);
    box-shadow:var(--shadow);
}

.project__media{ position:relative; overflow:hidden; }
.project__media img{
    width:100%; aspect-ratio:16/9; object-fit:cover;
    transition:transform .7s var(--ease);
}
.project:hover .project__media img{ transform:scale(1.06); }
.project__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to top,rgba(9,16,29,.96) 4%,rgba(9,16,29,.25) 52%,transparent);
}

.project__tag{
    position:absolute; z-index:2;
    top:clamp(14px,1.6vw,18px); left:clamp(14px,1.6vw,18px);
    padding:7px 14px; border-radius:999px;
    background:rgba(9,16,29,.80);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--gold-line);
    font-size:11.5px; font-weight:700; letter-spacing:.09em;
    color:var(--gold); text-transform:uppercase;
}

.project__body{
    position:relative; z-index:2;
    margin-top:-58px;
    padding:0 clamp(20px,2.2vw,28px) clamp(22px,2.2vw,28px);
}
.project__body h3{ font-size:clamp(19px,1.7vw,23px); margin-bottom:10px; }
.project__body p{ font-size:clamp(14.5px,1.1vw,15px); color:var(--muted); }
.project__body .link-gold{ margin-top:14px; font-size:14px; }

.projects__foot{ margin-top:clamp(30px,3.4vw,40px); text-align:center; }


/* ==============================================================
   10. SÜREÇ
   ============================================================== */

.process{ background:var(--bg); position:relative; overflow:hidden; }

.process__list{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(16px,1.8vw,20px);
    counter-reset:step;
}

.step{
    position:relative;
    padding:clamp(26px,2.4vw,30px) clamp(20px,1.8vw,24px) clamp(24px,2.2vw,28px);
    border-top:2px solid var(--line);
    transition:border-color var(--t);
}
.step:hover{ border-top-color:var(--gold); }

/* Masaüstünde adımları birleştiren ince teknik çizgi */
.process__list::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold-line) 18%,var(--gold-line) 82%,transparent);
    pointer-events:none;
}

.step__num{
    display:inline-grid; place-items:center;
    width:clamp(42px,3.2vw,46px); height:clamp(42px,3.2vw,46px);
    margin-bottom:clamp(16px,1.6vw,20px);
    border-radius:12px;
    background:var(--gold-soft); border:1px solid var(--gold-line);
    color:var(--gold);
    font-size:15px; font-weight:800;
}
.step h3{ font-size:clamp(17px,1.3vw,18px); margin-bottom:10px; }
.step p{ font-size:clamp(14px,1.05vw,14.5px); color:var(--muted); line-height:1.75; }


/* ==============================================================
   11. İSTATİSTİK
   ============================================================== */

.stats{
    position:relative; overflow:hidden;
    background:
        radial-gradient(900px 380px at 50% 0%,rgba(245,180,0,.09),transparent 70%),
        var(--bg-1);
    border-block:1px solid var(--line-soft);
    padding-block:clamp(52px,6.5vw,88px);
}
.stats__grid{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(18px,2.6vw,40px);
}
.stat{ text-align:center; position:relative; }

/* Ayırıcı çizgi: sadece 4 sütun düzeninde geçerli.
   2 sütuna düşünce her çift sütunun solunda kalır. */
.stat + .stat::before{
    content:""; position:absolute;
    left:calc(-1 * clamp(9px,1.4vw,20px));
    top:12%; bottom:12%; width:1px;
    background:var(--line);
}
.stat strong{
    display:block;
    font-size:clamp(32px,4.4vw,56px); font-weight:800;
    line-height:1; letter-spacing:-.03em;
    background:linear-gradient(160deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
    display:block; margin-top:12px;
    font-size:clamp(11.5px,1vw,12.5px); font-weight:600; letter-spacing:.09em;
    color:var(--muted); text-transform:uppercase;
}


/* ==============================================================
   12. CTA
   ============================================================== */

.cta{
    position:relative; overflow:hidden;
    background:linear-gradient(140deg,#101D31,#0A1220);
    text-align:center;
    padding-block:clamp(60px,7.5vw,104px);
}
.cta::before{
    content:""; position:absolute;
    width:660px; height:660px; border-radius:50%;
    top:-300px; right:-200px;
    background:radial-gradient(circle,rgba(245,180,0,.16),transparent 68%);
    filter:blur(50px);
}
.cta__inner{ position:relative; z-index:1; max-width:min(740px,100%); margin-inline:auto; }
.cta h2{ font-size:clamp(25px,3.7vw,46px); margin-bottom:18px; }
.cta p{ color:var(--muted); font-size:clamp(14.5px,1.4vw,18px); margin-bottom:clamp(26px,3vw,34px); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }


/* ==============================================================
   13. FOOTER
   ============================================================== */

.footer{
    background:#04070E;
    border-top:1px solid var(--line-soft);
    padding-block:clamp(48px,5.5vw,76px) 26px;
    /* Alttaki sabit aksiyon çubuğu içeriği kapatmasın */
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
}
.footer__grid{
    display:grid;
    grid-template-columns:1.7fr 1fr 1fr 1.3fr;
    gap:clamp(28px,3.6vw,54px);
    padding-bottom:clamp(34px,4vw,44px);
}

.footer__brand{
    display:flex; align-items:center; gap:11px;
    margin-bottom:20px;
}
.footer__brand img{ width:clamp(38px,3.2vw,44px); height:auto; }
.footer__brand strong{
    font-size:19px; font-weight:800; letter-spacing:.06em; color:var(--white);
}
.footer__brand strong em{ font-style:normal; color:var(--gold); }
.footer__about{
    font-size:14.5px; color:var(--muted); line-height:1.85;
    max-width:340px; margin-bottom:22px;
}

.footer__title{
    font-size:12.5px; font-weight:700; letter-spacing:.15em;
    color:var(--white); text-transform:uppercase;
    margin-bottom:20px;
}
.footer__list{ display:grid; gap:4px; }
.footer__list a,
.footer__list span{
    display:inline-flex; align-items:flex-start; gap:9px;
    min-height:44px; padding-block:9px;   /* dokunma hedefi (44px) */
    font-size:14.5px; color:var(--muted);
    transition:color var(--t-fast), transform var(--t-fast);
}
.footer__list a:hover{ color:var(--gold); transform:translateX(4px); }
.footer__list svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--gold); }

.footer__bottom{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:14px;
    padding-top:24px; border-top:1px solid var(--line-soft);
    font-size:13.5px; color:var(--muted-dim);
}
.footer__bottom a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-inline:4px;   /* dokunma hedefi */
}
.footer__bottom a:hover{ color:var(--gold); }


/* ==============================================================
   14. İLETİŞİM SAYFASI
   ============================================================== */

.page-hero{
    position:relative; overflow:hidden; isolation:isolate;
    padding-top:calc(var(--header-h) + env(safe-area-inset-top) + clamp(52px,7.5vw,92px));
    padding-bottom:clamp(52px,7.5vw,92px);
    text-align:center;
}
.page-hero__media{ position:absolute; inset:0; z-index:-4; display:block; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.page-hero::after{
    content:""; position:absolute; inset:0; z-index:-2;
    background:
        linear-gradient(to bottom,rgba(5,8,16,.90),rgba(5,8,16,.72) 45%,var(--bg)),
        radial-gradient(760px 340px at 50% 110%,rgba(245,180,0,.14),transparent 70%);
}
.page-hero h1{
    font-size:clamp(28px,5vw,60px);
    margin-bottom:20px;
    text-shadow:var(--text-shade);
}
.page-hero p{
    max-width:620px; margin-inline:auto;
    color:var(--text); font-size:clamp(15px,1.4vw,18px);
    text-shadow:var(--text-shade);
}

.breadcrumb{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:600; letter-spacing:.1em;
    color:var(--muted); text-transform:uppercase;
    margin-bottom:20px;
}
.breadcrumb a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-block:12px;   /* dokunma hedefi */
    color:var(--gold);
}
.breadcrumb a:hover{ text-decoration:underline; }

/* --- İletişim kartları --- */
.contact-info{ background:var(--bg); }
.contact-info__grid{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:clamp(14px,1.6vw,18px);
}
.info{
    padding:clamp(24px,2.6vw,30px) clamp(20px,2.2vw,26px);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    transition:transform var(--t), border-color var(--t), background var(--t);
}
.info:hover{ transform:translateY(-6px); border-color:var(--gold-line); background:var(--card-2); }

.info__icon{
    width:46px; height:46px; margin-bottom:18px;
    display:grid; place-items:center; border-radius:12px;
    background:var(--gold-soft); border:1px solid var(--gold-line);
    color:var(--gold);
}
.info__icon svg{ width:22px; height:22px; }
/* Başlık seviyesi: iletisim sayfasında kartlar h2, form içi h3.
   İkisini de kapsasın ki HTML seviyesi değişse de stil bozulmasın. */
.info h2,
.info h3{
    font-size:12.5px; font-weight:700; letter-spacing:.13em;
    color:var(--muted); text-transform:uppercase;
    margin-bottom:10px;
}
.info p,
.info a{
    font-size:clamp(15px,1.2vw,16px); color:var(--white);
    font-weight:600; line-height:1.6;
    overflow-wrap:anywhere;
}
/* Telefon ve e-posta kartlardaki ana eylem: dokunma hedefi */
.info a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-block:6px;
}
.info a:hover{ color:var(--gold); }
.info small{ display:block; margin-top:6px; font-size:13px; font-weight:500; color:var(--muted-dim); }

/* --- Form + harita --- */
.contact-body{ background:var(--bg-1); }
.contact-body__grid{
    display:grid; grid-template-columns:1.15fr .85fr;
    gap:clamp(18px,2.2vw,26px);
    align-items:start;
}

.panel{
    padding:clamp(24px,3.2vw,44px);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
}
.panel h2{ font-size:clamp(21px,2.4vw,30px); margin-bottom:10px; }
.panel > p{ font-size:15px; color:var(--muted); margin-bottom:clamp(22px,2.6vw,30px); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{
    font-size:12.5px; font-weight:700; letter-spacing:.06em;
    color:var(--muted); text-transform:uppercase;
}
.field label .req{ color:var(--gold); }
.field input,
.field textarea,
.field select{
    width:100%;
    min-height:52px; padding:14px 16px;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    color:var(--white); font-size:16px;       /* 16px: iOS'ta otomatik zoom olmasın */
    transition:border-color var(--t-fast), background var(--t-fast);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--muted-dim); }
.field input:focus,
.field textarea:focus,
.field select:focus{
    border-color:var(--gold);
    background:#0B1524;
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.65; }
.field select{ cursor:pointer; }
.field select option{ background:var(--card); color:var(--white); }

.field--error input,
.field--error textarea,
.field--error select{ border-color:#FF6B6B; }
.field__error{ font-size:12.5px; font-weight:600; color:#FF8A8A; }

/* Bot koruması alanı: ekrandan ve erişilebilirlik ağacından kaldırılır.
   Botlar bunu görünce doldurur, sunucu isteği yok sayar. */
.hp-field{
    position:absolute !important;
    left:-9999px !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap; border:0;
    opacity:0; pointer-events:none;
}

.check{
    display:flex; align-items:flex-start; gap:11px;
    min-height:44px; padding-block:6px;
    font-size:13.5px; color:var(--muted); line-height:1.6;
    cursor:pointer;
}
.check input{
    width:20px; height:20px; flex:none; margin-top:1px;
    accent-color:var(--gold);
    cursor:pointer;
}
.check a{ color:var(--gold); text-decoration:underline; }

.form-note{
    font-size:13px; color:var(--muted-dim);
    line-height:1.6; margin-top:14px;
}

.form-status{
    display:none; align-items:flex-start; gap:11px;
    padding:14px 17px; border-radius:var(--radius-sm);
    font-size:14.5px; font-weight:600; line-height:1.6;
    margin-bottom:22px;
}
.form-status.is-visible{ display:flex; }
.form-status--ok{ background:rgba(46,204,113,.10); border:1px solid rgba(46,204,113,.34); color:#6EE7A0; }
.form-status--err{ background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.34); color:#FF9B9B; }
.form-status svg{ width:20px; height:20px; flex:none; margin-top:1px; }

.btn-spinner{
    width:17px; height:17px; flex:none;
    border:2px solid rgba(18,16,10,.28);
    border-top-color:#12100A;
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --- Harita + "Haritada Bizi Bulun" --- */
.map-frame{
    position:relative;
    aspect-ratio:4/3;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--bg-2);
}
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

.map-cta{ margin-top:14px; }
.map-cta .btn{ gap:10px; }
.map-cta__note{
    margin-top:10px;
    font-size:12.5px; line-height:1.6; color:var(--muted-dim);
    text-align:center;
}
.map-cta__note strong{ color:var(--gold); font-weight:700; }

.side-note{
    margin-top:clamp(20px,2.2vw,26px);
    padding:clamp(20px,2.2vw,24px);
    border-radius:var(--radius);
    background:var(--bg-2);
    border:1px solid var(--line);
    border-left:3px solid var(--gold);
}
.side-note h3{ font-size:16px; margin-bottom:12px; }
.side-note ul{ display:grid; gap:9px; }
.side-note li{
    display:flex; gap:10px; font-size:14.5px; color:var(--muted); line-height:1.6;
}
.side-note li::before{
    content:""; width:6px; height:6px; flex:none; margin-top:8px;
    border-radius:50%; background:var(--gold);
}


/* ==============================================================
   15. MOBİL AKSİYON ÇUBUĞU  (yeni)
   --------------------------------------------------------------
   Endüstriyel B2B sitesinde "Ara" ve "Teklif Al" eylemleri mobilde
   her zaman erişilebilir olmalı. Çubuk footer görünür olduğunda
   otomatik gizlenir (bkz. app.js / mobileActionBar).
   ============================================================== */

.actionbar{
    position:fixed; z-index:950;
    left:0; right:0; bottom:0;
    display:none;
    gap:10px;
    padding:10px max(var(--gutter),12px) calc(10px + env(safe-area-inset-bottom));
    background:rgba(5,8,16,.90);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid var(--line);
    box-shadow:0 -12px 34px -18px rgba(0,0,0,.9);
    transform:translateY(0);
    transition:transform var(--t), visibility var(--t);
}
.actionbar.is-hidden{ transform:translateY(115%); visibility:hidden; }

/* Telefon numarası yokken "Bizi Ara" gizlenir; kalan tek düğme
   tüm genişliği kaplar (config.js -> phoneDisplay boşsa uygulanır). */
.actionbar--single .actionbar__btn--primary{ flex:1 1 100%; }

/* Gizlenen telefon alanları: [hidden] yerleşimi de kaldırmalı
   (özellikle .info kartlarında display:grid/flex olabilir). */
[hidden]{ display:none !important; }

.actionbar__btn{
    flex:1 1 0;
    min-height:50px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:var(--radius-sm);
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.04);
    color:var(--white);
    font-size:14.5px; font-weight:700;
    transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.actionbar__btn svg{ width:18px; height:18px; flex:none; }
.actionbar__btn:active{ transform:scale(.97); }
.actionbar__btn--primary{
    flex:1.35 1 0;
    background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
    border-color:transparent;
    color:#12100A;
    box-shadow:var(--shadow-gold);
}


/* ==============================================================
   16. YARDIMCI UI
   ============================================================== */

/* --- Yukarı çık --- */
.to-top{
    position:fixed; z-index:900;
    right:clamp(14px,1.6vw,22px);
    bottom:calc(clamp(14px,1.6vw,22px) + env(safe-area-inset-bottom));
    width:48px; height:48px; border-radius:14px;
    display:grid; place-items:center;
    background:var(--gold); color:#12100A;
    box-shadow:var(--shadow-gold);
    opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold-light); transform:translateY(-3px); }
.to-top svg{ width:20px; height:20px; }

/* --- İlerleme çubuğu --- */
.progress{
    position:fixed; top:0; left:0; z-index:1100;
    height:3px; width:0;
    background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));
    transition:width .1s linear;
}


/* ==============================================================
   17. ANİMASYON
   ============================================================== */

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(26px); }
}
@keyframes drop{
    0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
    40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
    100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* --- Giriş animasyonu (data-reveal) --- */
[data-reveal]{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay:var(--delay,0ms);
}
[data-reveal].is-revealed{ opacity:1; transform:none; }

.skeleton{
    background:var(--card-2);
    border-radius:var(--radius);
    min-height:200px;
}


/* ==============================================================
   18. ERİŞİLEBİLİRLİK
   ============================================================== */

@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
    [data-reveal]{ opacity:1; transform:none; }
    .hero__glow{ animation:none; }
    .scroll-hint{ display:none; }
}

/* Windows Yüksek Karşıtlık modu */
@media (forced-colors:active){
    .btn,.service,.project,.info,.panel,.lang__btn,.nav-toggle{ border:1px solid CanvasText; }
    .service::after,.stat strong{ forced-color-adjust:none; }
    .hero__scrim,.page-hero::after{ background:Canvas; }
    .actionbar{ background:Canvas; border-top:1px solid CanvasText; }
}


/* ==============================================================
   19. DUYARLI DÜZEN
   --------------------------------------------------------------
   Kırılma noktaları (max-width, azalan sırada):
     1100px  menü panele geçer, ızgaralar 2 sütuna düşer
      860px  hizmet/süreç tek sütun, projeler tek sütun
      680px  form tek sütun
      560px  istatistik tek sütun
      400px  en küçük telefonlar
   Ek koşullar:
     landscape + max-height 560px  (telefon yatay)
   ============================================================== */

/* ---- 1100px: menü paneli + 2 sütun ---- */
@media (max-width:1100px){
    :root{ --header-h:70px; }

    /* ÖNEMLİ: Header'daki backdrop-filter, header'ı "containing block"
       yapıyor ve position:fixed çocukların (mobil menü paneli)
       referans noktası viewport yerine header oluyor — panel kırpılıyor.
       Bu yüzden mobilde bulanıklık kaldırılır, header opak kalır. */
    .header{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:rgba(5,8,16,.96);
    }

    .nav-toggle{ display:grid; }

    /* Mobil panel
       Not: z-index pozitif olmalı. Header, backdrop-filter ile kendi
       yığın bağlamını (stacking context) oluşturur; negatif z-index'li
       bir çocuk, header'ın arka planının ALTINDA kalır ve panel görünmez. */
    .nav{
        position:fixed; z-index:3;
        top:0; right:0; bottom:0;
        width:min(360px,88vw);
        flex-direction:column; align-items:stretch; justify-content:flex-start;
        gap:0;
        padding:calc(var(--header-h) + env(safe-area-inset-top) + 18px) 22px
                calc(30px + env(safe-area-inset-bottom));
        background:var(--bg-1);
        border-left:1px solid var(--gold-line);
        box-shadow:-30px 0 70px -20px rgba(0,0,0,.95);
        transform:translateX(100%);
        visibility:hidden;
        transition:transform .34s var(--ease), visibility .34s;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .nav.is-open{ transform:translateX(0); visibility:visible; }
    .nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
    .nav a{
        min-height:52px;
        padding:15px 16px; border-radius:11px;
        font-size:16px;
    }
    .nav a::after{ display:none; }
    .nav a.is-active{
        background:var(--gold-soft);
        box-shadow:inset 3px 0 0 var(--gold);
    }

    /* Dil seçici: mobil panelde açılır menü yerine düz liste.
       Header'daki masaüstü kopyası gizlenir. */
    .header__inner > .lang{ display:none; }

    .nav > .lang{
        display:block; position:static;
        margin-top:20px; padding-top:18px;
        border-top:1px solid var(--line);
    }
    .nav > .lang .lang__btn{ display:none; }
    .nav > .lang .lang__menu{
        position:static; min-width:0; padding:0;
        background:transparent; border:none; box-shadow:none;
        opacity:1; visibility:visible; transform:none;
    }
    .nav > .lang .lang__menu button{
        padding:11px 14px;
        color:var(--muted); font-weight:600;
    }
    .nav > .lang .lang__menu button:disabled{ color:var(--muted-dim); }
    .nav > .lang .lang__menu .is-current{ background:transparent; color:var(--gold); }

    /* Panel açıkken arka plan kaymasın */
    .actionbar{ display:flex; }

    .about__grid{ grid-template-columns:1fr; }
    .about__copy{ max-width:680px; }
    .about__media{ max-width:660px; }

    .services__grid{ grid-template-columns:1fr 1fr; }
    .projects__grid{ grid-template-columns:1fr 1fr; }
    .contact-info__grid{ grid-template-columns:1fr 1fr; }
    .contact-body__grid{ grid-template-columns:1fr; }
    .footer__grid{ grid-template-columns:1fr 1fr; }
    .process__list{ grid-template-columns:1fr 1fr; }
    .stats__grid{ grid-template-columns:1fr 1fr; }
    /* 2 sütunda ayırıcı sadece 2. ve 4. kutuda */
    .stat:nth-child(odd)::before{ display:none; }

    /* Aksiyon çubuğu "yukarı çık" düğmesini örtmesin */
    .to-top{ bottom:calc(80px + env(safe-area-inset-bottom)); }
}

/* ---- 860px: tek sütun ---- */
@media (max-width:860px){
    .hero__inner{ max-width:100%; }

    .services__grid{ grid-template-columns:1fr; }
    .projects__grid{ grid-template-columns:1fr; }

    /* Süreç dikey zaman çizelgesine döner */
    .process__list{ grid-template-columns:1fr; gap:0; }
    .process__list::before{ display:none; }
    .step{
        padding:24px 0 24px 4px;
        border-top:none;
        border-left:2px solid var(--line);
    }
    .step:hover{ border-left-color:var(--gold); }
    .step__num{ margin-bottom:14px; }
    .step h3{ font-size:17px; }

    .about__media::before{ inset:-11px 16px 16px -11px; }
    .about__badge{ left:auto; right:16px; bottom:16px; }
}

/* ---- 680px: form tek sütun, sıkı tipografi ---- */
@media (max-width:680px){
    :root{ --section-y:clamp(56px,10vw,80px); }

    .hero{
        min-height:auto;
        padding-top:calc(var(--header-h) + env(safe-area-inset-top) + clamp(28px,7vw,40px));
        padding-bottom:clamp(48px,9vw,60px);
    }
    /* Telefonda metin fotoğrafın üstünde; karartma yeterli ama
       fotoğrafın alt yarısı (kıvılcımlar) görünür kalmalı. */
    .hero__scrim{
        background:
            linear-gradient(to bottom,
                rgba(5,8,16,.92) 0%,
                rgba(5,8,16,.86) 38%,
                rgba(5,8,16,.52) 72%,
                rgba(5,8,16,.30) 100%),
            linear-gradient(to top, var(--bg) 1%, rgba(5,8,16,.42) 22%, transparent 48%);
    }
    .hero__media img{ object-position:58% 50%; }
    .hero__actions{ margin-bottom:34px; }
    .hero__actions .btn{ flex:1 1 100%; }
    .scroll-hint{ display:none; }
    .hero__glow{ width:400px; height:400px; right:-160px; top:-120px; }

    .form-grid{ grid-template-columns:1fr; }

    .footer__grid{ grid-template-columns:1fr; gap:34px; }
    .footer__bottom{ justify-content:center; text-align:center; }

    .project__body{ margin-top:-46px; padding:0 22px 24px; }
    .project__body h3{ font-size:20px; }
}

/* ---- 560px: istatistik tek sütun ---- */
@media (max-width:560px){
    .stats__grid{ grid-template-columns:1fr; gap:30px; }
    .stat::before{ display:none !important; }

    .hero__facts{ gap:20px 28px; }
    .hero__chips{ gap:6px; }

    .contact-info__grid{ grid-template-columns:1fr; }
    .info{ padding:22px 20px; }

    .about__media::before{ display:none; }
    .about__badge{ position:static; margin-top:16px; }

    .cta__actions .btn{ flex:1 1 100%; }
    .to-top{ width:44px; height:44px; }

    .map-frame{ aspect-ratio:1/1; }
}

/* ---- 400px ve altı: en küçük telefonlar ---- */
@media (max-width:400px){
    :root{ --header-h:62px; --gutter:1rem; }

    .brand__sub{ display:none; }
    .brand__name{ font-size:17px; }

    .btn{ min-height:50px; font-size:14px; }
    .hero__actions .btn{ flex:1 1 100%; }
    .actionbar__btn{ font-size:13.5px; min-height:48px; }
    .service__tags li{ font-size:11px; }

    .nav{ width:min(340px,92vw); }
}

/* ---- Telefon yatay: kısa ekran ---- */
@media (orientation:landscape) and (max-height:560px){
    .hero{
        min-height:auto;
        padding-top:calc(var(--header-h) + 20px);
        padding-bottom:34px;
    }
    .hero h1{ font-size:clamp(28px,5.2vw,42px); }
    .hero__lede{ margin-bottom:22px; font-size:15px; }
    .hero__actions{ margin-bottom:24px; }
    .hero__facts{ padding-top:16px; }
    .hero__chips{ display:none; }
    .scroll-hint{ display:none; }
    .page-hero{ padding-top:calc(var(--header-h) + 40px); padding-bottom:44px; }
}

/* ---- Dikey modda çok geniş ekranlar (telefon) ---- */
@media (max-width:560px) and (orientation:portrait){
    .stats__grid{ grid-template-columns:1fr 1fr; }
    .stat::before{ display:none !important; }
    .stat:nth-child(2n)::before{ display:block !important; }
}


/* --- Yazdırma --- */
@media print{
    .header,.to-top,.progress,.nav-backdrop,.scroll-hint,.actionbar{ display:none !important; }
    body{ background:#fff; color:#000; }
    .section{ padding-block:20px; }
    [data-reveal]{ opacity:1 !important; transform:none !important; }
}