/* BİÇİM MÜHENDİSLİK — ortak stil (anasayfa + iç sayfalar). Tailwind CDN + token sözlüğünden SONRA bağlanır;
   kademe sırası tek dosya sürümüyle aynı. Değiştirince _araclar/bicim-ic-sayfalar.py çalıştır (?v= sürümü yenilenir). */
/* ===== Tasarım değişkenleri — token sözlüğünün CSS karşılığı ===== */
:root{
  --ink:#102530; --slate:#566A74; --mist:#F4F7F8; --line:#E3E8EB; --surface:#f5fafd; --on-surface:#171c1f;
  --orange:#F26921; --primary:#a33e00; --blue:#2675B0; --red:#CF2527; --green:#2C843C; --koyu-metin:#B5C6CD;
  --imza-zemin:#0B1A22;               /* footer'ın en koyu tonu (petrol %30 siyah karışım) — imza barı */
  --f-baslik:"Hubot Sans","Arial Black","Segoe UI",system-ui,sans-serif;
  --f-govde:"Mona Sans","Segoe UI",system-ui,sans-serif;
  --f-rakam:"Mona Sans","Segoe UI",system-ui,sans-serif;   /* düz sıfır — Hubot'unki çizgili */
  --f-mono:"Sometype Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Logonun dört çizgisi — degradeler logodan ölçüldü (image.png) */
  --amber:#F7921E;
  --g-turuncu:linear-gradient(90deg,#F7921E,#EE6121);
  --g-kirmizi:linear-gradient(90deg,#E85522,#D02626);
  --g-mavi:linear-gradient(90deg,#2473AD,#196B5D);
  --g-yesil:linear-gradient(90deg,#257E38,#55B547);
  --cent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --hdr:80px; --serit-h:40px;
  --gut:clamp(16px,2.6vw,32px);
  --sec-pad:clamp(72px,9vw,120px);
  /* Yazı sistemi: koşan metin satır aralığı · bölüm başlığı alt boşluğu · büyük harf etiket aralığı */
  --lh-metin:1.6; --bas-alt:clamp(40px,5vw,64px); --ls-etiket:.12em;
  color-scheme:only light;
}
/* Çapa payı TEK kaynaktan: kaydırma kabı (html). Odakla kaydırma da bu payı gözetir. */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 8px);-webkit-text-size-adjust:100%}
@media (min-width:1024px){html{scrollbar-gutter:stable}}
body{margin:0;overflow-x:clip;background:#fff;color:var(--on-surface);font-family:var(--f-govde);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
section[id],[id^="hizmet-"]{scroll-margin-top:0}   /* pay html'de; ikisi birlikte toplanırdı */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.tab{font-variant-numeric:tabular-nums}   /* yalnız mono bağlamda: Mona Sans'ın tabular rakamı çizgili sıfır + ayaklı 1 */
.kap{max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-pad)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Odak ve atlama bağlantısı */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.koyu :focus-visible,.serit :focus-visible,footer :focus-visible{outline-color:#fff}
.atla{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 16px;border-radius:4px;font:600 14px/1.2 var(--f-govde);transition:top .2s var(--ease)}
.atla:focus{top:12px}

/* İkonlar — gömülü sprite; renk currentColor'a bağlı */
.ikon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ikon--dolu{fill:currentColor;stroke:none}

/* ================================================================
   İMZA MOTİFİ — ÖLÇÜ ÇİZGİSİ. Tek kural; boy/yön değişkenle.
   ::before = ölçü çizgisi + iki uzatma çizgisi, ::after = 45° eğik çentikler
   ================================================================ */
.olcu{--ok1:var(--orange);--ok2:var(--green);--ok-boy:11px;--olcu-zemin:#fff;position:relative;display:flex;align-items:center;justify-content:center;min-height:16px;color:var(--slate)}
.olcu::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat,
  linear-gradient(currentColor,currentColor) right center/1px 100% no-repeat}
.olcu::after{content:"";position:absolute;inset:0 calc(var(--ok-boy) / -2);pointer-events:none;
  background:linear-gradient(90deg,var(--ok1) 50%,var(--ok2) 50%);
  -webkit-mask:var(--cent) left center/var(--ok-boy) var(--ok-boy) no-repeat,var(--cent) right center/var(--ok-boy) var(--ok-boy) no-repeat;
          mask:var(--cent) left center/var(--ok-boy) var(--ok-boy) no-repeat,var(--cent) right center/var(--ok-boy) var(--ok-boy) no-repeat}
.olcu>span{position:relative;z-index:1;padding:0 .8em;background:var(--olcu-zemin);font:500 11px/1.5 var(--f-mono);letter-spacing:.12em;color:var(--slate);white-space:nowrap}
.olcu--mikro{display:inline-flex;flex:none;width:28px;min-height:10px;--ok-boy:8px}
.olcu--dikey{flex-direction:column;width:16px;min-height:0}
.olcu--dikey::before{background:
  linear-gradient(currentColor,currentColor) center top/1px 100% no-repeat,
  linear-gradient(currentColor,currentColor) center top/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) center bottom/100% 1px no-repeat}
.olcu--dikey::after{inset:calc(var(--ok-boy) / -2) 0;background:linear-gradient(180deg,var(--ok1) 50%,var(--ok2) 50%);-webkit-mask-position:center top,center bottom;mask-position:center top,center bottom}
.olcu--dikey>span{writing-mode:vertical-rl;transform:rotate(180deg);padding:.8em 0}
.koyu .olcu,footer .olcu{--olcu-zemin:var(--ink);color:rgba(255,255,255,.5)}
.koyu .olcu>span,footer .olcu>span{color:var(--koyu-metin)}
.mist .olcu{--olcu-zemin:var(--mist)}
/* Kalemle çizim: çizgi ve kancalar kendini çizer (clip-path); etiket <span> hiç kırpılmaz, çizgi onun
   maskeli zemininin altından geçer. Sol kanca önce, sağ kanca en son. Gizleme yalnız html.js altında,
   reveal açılana dek. Çizili hâl inset(0): none ↔ inset() geçişi kesikli olurdu (animasyonsuz).
   Ölçeğe göre zamanlama: --ciz-sure · --ciz-egri · --ciz-gec (mikro burada; makro/orta/hero bloklarında). */
.olcu::before,.olcu::after{clip-path:inset(0);transition:clip-path var(--ciz-sure,.6s) var(--ciz-egri,var(--ease)) var(--ciz-gec,0s)}
.js .reveal:not(.gorunur) .olcu::before,.js .reveal:not(.gorunur) .olcu::after{clip-path:inset(0 100% 0 0)}
.js .reveal:not(.gorunur) .olcu--dikey::before,.js .reveal:not(.gorunur) .olcu--dikey::after{clip-path:inset(0 0 100% 0)}
.kas .olcu--mikro{--ciz-sure:.45s;--ciz-gec:calc(var(--d,0ms) + 80ms)}
@media (prefers-reduced-motion:reduce){.olcu::before,.olcu::after{clip-path:none!important;transition:none!important}}
@media (forced-colors:active),print{.olcu::before,.olcu::after{clip-path:none!important}}   /* CanvasText kenar yedeği ve basılı çizgi hep tam */

/* Bölüm etiketi (eyebrow) — mono, mikro ölçü çizgisiyle. Etiket iki satıra kırılırsa mikro
   çizgi İLK satırda kalır: flex-start + 3px = 16px satırın ortası (tek satırda yeri aynı). */
.kas{display:flex;align-items:flex-start;gap:12px;font:500 12px/16px var(--f-mono);letter-spacing:.12em;color:var(--slate);margin:0}
.kas .olcu--mikro{margin-top:3px}
.koyu .kas{color:var(--koyu-metin)}
.h2{font:700 clamp(30px,4vw,44px)/1.12 var(--f-baslik);letter-spacing:-.01em;color:var(--ink);margin:14px 0 0}
.koyu .h2{color:#fff}
/* Bölüm girişi — yedi bölümün TEK ölçüsü: 17/28, satır boyu ~34em (≤75 karakter) */
.lead{font:400 17px/28px var(--f-govde);color:var(--slate);margin:16px 0 0;max-width:34em}
.koyu .lead{color:var(--koyu-metin)}
.nw{white-space:nowrap}
/* Optik sol kenar: iri başlık glifinin yan boşluğu (~1,5-2px) eyebrow çentiğinin hizasına
   çekilir. Bu kuraldan SONRA yazılan her margin kısaltmasının sol değeri -.035em olmalı;
   hero başlığında -.04em (ilk glifleri M / T / Ş — ölçüldü: M +0,8 · T ve Ş −0,6 px). */
.h2{margin-left:-.035em}.hero__baslik{margin-left:-.04em}

/* Düğmeler — 44px dokunma hedefi. Hover / basma / odak durumları DURUMLAR bloğunda. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:4px;font:600 15px/1.2 var(--f-govde);text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn--turuncu{background:var(--orange);color:var(--ink)}
/* Çizgi düğme: mürekkep dolgu soldan sağa büyür (background-size); kenarlık ve boy sabit */
.btn--cizgi{border:1px solid var(--ink);color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) left/0 100% no-repeat transparent;transition:background-size .45s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.koyu .btn--cizgi{border-color:rgba(255,255,255,.4);color:#fff;background-image:linear-gradient(#fff,#fff)}
.btn .ikon{transition:transform .3s var(--ease)}
.bag-cizgi{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.2 var(--f-govde);color:var(--ink);text-decoration:none;position:relative}
.bag-cizgi::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--orange);transform:scaleX(.35);transform-origin:left;transition:transform .4s var(--ease)}
.bag-cizgi:focus-visible::after{transform:scaleX(1)}
.bag-cizgi .ikon{transition:transform .3s var(--ease)}
.koyu .bag-cizgi{color:#fff}

/* ================= ÜST ŞERİT — koyu künye bandı ================= */
.serit{background:var(--ink);color:var(--koyu-metin);height:var(--serit-h);font:500 11px/1.2 var(--f-mono);letter-spacing:.08em}
.serit .kap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.serit__grup{display:flex;align-items:center;gap:14px;min-width:0}
.serit__ayrac{width:1px;height:14px;background:rgba(255,255,255,.16);flex:none}
.serit a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--serit-h);white-space:nowrap;transition:color .2s}
@media (max-width:639px){:root{--serit-h:44px}}
.serit .ikon{width:14px;height:14px}

/* ================= HEADER ================= */
.baslik{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.baslik.is-yapisik{box-shadow:0 8px 24px -18px rgba(16,37,48,.5)}
.baslik .kap{height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.marka{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.marka img{width:auto;height:44px;flex:none}
.marka__ad{font:700 20px/1.2 var(--f-baslik);letter-spacing:-.01em;white-space:nowrap}
/* Nav: bağlantıların kendi ::after'ı yalnız hover ÖNİZLEMESİ (mürekkep, sağdan söner).
   "Buradasınız" TEK kayan turuncu çizgidir (.nav::after); baslik() içindeki iz() onu aktif
   bağlantının x/genişliğine taşır. Aktif bağlantı kalınlaşmaz → yatay kayma yok (Δ0). */
.nav{display:none;position:relative;height:100%;align-items:stretch;gap:clamp(18px,2vw,30px)}
.nav::after{content:"";position:absolute;left:0;bottom:-1px;width:1px;height:2px;background:var(--orange);transform-origin:0 0;transform:translateX(var(--iz-x,0px)) scaleX(var(--iz-w,0));transition:transform .5s var(--ease);pointer-events:none}
.nav a{position:relative;display:flex;align-items:center;font:500 14px/20px var(--f-govde);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
/* Odak: 80px'lik bağlantının ortasında 44px halka (::before) — şeride ve alt çizgiye değmez */
.nav a::before{content:"";position:absolute;inset:18px -8px;border-radius:4px;box-shadow:0 0 0 2px var(--orange);opacity:0;pointer-events:none}
.nav a:focus-visible{outline:none}
.nav a:focus-visible::before{opacity:1}
.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.baslik__eylem{display:flex;align-items:center;gap:12px}
.baslik__tel{display:none;align-items:center;gap:8px;min-height:44px;padding:0 6px;font:500 14px/1.2 var(--f-mono);letter-spacing:.04em;color:var(--ink);text-decoration:none;white-space:nowrap}
.menu-dugme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.menu-dugme .ikon{width:22px;height:22px}
/* Telefonda yapışık header'da arama düğmesi: yeri baştan ayrılmış (görünürlük değişir,
   yerleşim değişmez). JS'siz sayfada hep görünür; 360px altında logoya yer kalmadığı için yok. */
.baslik .baslik__ara{display:none}
@media (max-width:639px){
  .baslik .baslik__ara{display:inline-flex;transition:opacity .25s var(--ease),visibility 0s}
  .js .baslik:not(.is-yapisik) .baslik__ara{opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s linear .25s}
}
@media (max-width:359px){.baslik .baslik__ara{display:none}}
@media (min-width:1024px){.nav{display:flex}.menu-dugme{display:none}}
@media (min-width:1280px){.baslik__tel{display:inline-flex}}
@media (max-width:639px){
  .baslik .kap{height:64px}
  .marka img{height:38px}
  .marka__ad{font-size:17px}
  .baslik__teklif{display:none}
}

/* Mobil menü — tam ekran panel (kendi kapat düğmesiyle) */
.mobil-menu{position:fixed;inset:0;z-index:90;background:#fff;display:flex;flex-direction:column;height:100vh;height:100svh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);visibility:hidden;opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.mobil-menu[data-acik="evet"]{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
/* Üst bar header'ın kutusunun aynısı: içerik 64/80px + 1px alt çizgi (content-box) → logo ve
   kapat düğmesi, yapışık header'daki logo ve hamburgerle birebir üst üste düşer. */
.mobil-menu__ust{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;height:64px;padding-inline:var(--gut);border-bottom:1px solid var(--line);flex:none}
@media (min-width:640px){.mobil-menu__ust{height:80px}}
.mobil-menu nav{padding:8px var(--gut) 24px;display:flex;flex-direction:column}
.mobil-menu nav a{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font:700 22px/1.2 var(--f-baslik);letter-spacing:-.01em;color:var(--ink);text-decoration:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media (max-height:700px){.mobil-menu nav a{min-height:48px}}
/* Açılış: satırlar 30ms arayla yerine oturur (yalnız JS'li sayfada gizlenir) */
.js .mobil-menu nav a{opacity:0;transform:translateY(8px)}
.js .mobil-menu[data-acik="evet"] nav a{opacity:1;transform:none}
.mobil-menu[data-acik="evet"] nav a:nth-child(1){transition-delay:0ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(2){transition-delay:30ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(3){transition-delay:60ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(4){transition-delay:90ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(5){transition-delay:120ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(6){transition-delay:150ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(7){transition-delay:180ms}
.mobil-menu[data-acik="evet"] nav a:nth-child(8){transition-delay:210ms}
.mobil-menu nav a .no{font:500 11px/1.2 var(--f-mono);letter-spacing:.12em;color:var(--slate)}
/* "Buradasınız": hizmet satırlarındaki 56px renk sekmesinin eşi; yalnız renk ve transform değişir */
.mobil-menu nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.mobil-menu nav a[aria-current="true"]::after{transform:scaleX(1)}
.mobil-menu nav a[aria-current="true"] .no{color:var(--primary)}
.mobil-menu__kunye{margin-top:auto;background:var(--ink);color:var(--koyu-metin);padding:24px var(--gut) calc(24px + env(safe-area-inset-bottom));display:grid;gap:4px;font:500 12px/1.5 var(--f-mono);letter-spacing:.06em}
.mobil-menu__kunye a{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px}
.mobil-menu__satir{display:flex;align-items:center;gap:10px;min-height:44px}   /* dört satırın metni gut+26'da */
.mobil-menu__kunye .ikon{width:16px;height:16px}

/* ================= HERO SLIDER — pafta düzeni =================
   Masaüstü (≥1024) hero gerçek bir PAFTA: metin sayfa ızgarasının sol hattında (logo hizası),
   görsel 3. izden ekran kenarına taşar; görselin 28px içinde ince pafta çerçevesi
   (.hero__katman::before), çerçevenin yüksekliği dikey ölçüyle ölçülendirilir, antet
   çerçevenin SAĞ ALT köşesinde = sayfanın sağ hattı (header "Teklif Alın" sağ kenarı).
   Tablet dikey: aynı pafta 20px içeride. Telefon: görsel üstte, antet görselin alt kenarında
   tek satır başlık şeridi, CTA bloğu üç slaytta aynı y'de.
   Slaytlar grid-area:1/1 ile istiflenir → geçişte yükseklik zıplamaz. */
.hero{position:relative;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;
  --hero-kolon:var(--gut) minmax(0,1fr) var(--gut);
  --hero-satir:clamp(270px,76vw,500px) auto}
.hero__sahne{display:grid}
.hero__slayt,.hero__katman{grid-area:1/1;display:grid;grid-template-columns:var(--hero-kolon);grid-template-rows:var(--hero-satir)}
.hero__slayt{opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.hero__slayt[data-aktif="evet"]{z-index:1;opacity:1;visibility:visible;transition:opacity .9s var(--ease),visibility 0s}
/* El değiştirme: giden slayt (data-onceki) gelenin ALTINDA tam opak kalır, .9s sonunda tek
   karede kalkar → iki görsel yarı saydam üst üste binmez, araya --mist "süt" perdesi girmez. */
.hero__slayt[data-onceki]{transition:opacity 0s linear .9s,visibility 0s linear .9s}
.hero__slayt[data-onceki] .hero__olcu{opacity:0;transition:opacity .2s}
.hero__gorsel{grid-column:1/-1;grid-row:1;position:relative;background:var(--mist);overflow:hidden}
.hero__gorsel picture,.hero__gorsel img{position:absolute;inset:0;width:100%;height:100%}
.hero__gorsel img{object-fit:cover;transform:scale(1.045);transition:transform 7s linear}
.hero__slayt[data-aktif="evet"] .hero__gorsel img{transform:scale(1)}
.hero__metin{grid-column:2;grid-row:2;padding:28px 0 44px;align-self:start}
/* Metnin üç hâli: dinlenen gizli (geçişsiz) · giden hızlı çıkış (.2s, yukarı) · gelen giriş
   (.22s gecikme + 60ms kademe). Gizli ve giden kuralı eş özgüllükte → giden SONRA yazılır. */
.js .hero__slayt:not([data-aktif="evet"]) .hero__metin>*{opacity:0;transform:translateY(14px);transition:none}
.js .hero__slayt[data-onceki] .hero__metin>*{opacity:0;transform:translateY(-6px);transition:opacity .2s cubic-bezier(.4,0,1,1),transform .2s cubic-bezier(.4,0,1,1)}
.hero__slayt[data-aktif="evet"] .hero__metin>*{transition:opacity .7s var(--ease) .22s,transform .7s var(--ease) .22s}
.hero__slayt[data-aktif="evet"] .hero__metin>:nth-child(2){transition-delay:.28s}
.hero__slayt[data-aktif="evet"] .hero__metin>:nth-child(3){transition-delay:.34s}
.hero__slayt[data-aktif="evet"] .hero__metin>:nth-child(4){transition-delay:.4s}
.hero__baslik{font:800 clamp(36px,5.2vw,56px)/1.08 var(--f-baslik);letter-spacing:-.01em;color:var(--ink);margin:18px 0 20px -.04em;max-width:15ch}   /* sol: optik kenar */
.hero__baslik em{font-style:normal;color:var(--primary)}
.hero__metin p.hero__ozet{font:400 clamp(16px,1.4vw,18px)/1.6 var(--f-govde);color:var(--slate);max-width:520px;margin:0 0 32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__olcu{display:none}
.hero__katman{pointer-events:none;z-index:3}
.antet{grid-column:2;grid-row:1;align-self:end;justify-self:start;margin-bottom:12px;pointer-events:auto;position:relative;background:#fff;border:1px solid var(--ink);font:500 11px/1.2 var(--f-mono);letter-spacing:var(--ls-etiket);color:var(--ink)}
.js .antet{display:block}
html:not(.js) .antet{display:none}
.antet__ust{display:flex;border-bottom:1px solid var(--ink)}
.antet__hucre{display:flex;flex-direction:column;gap:4px;padding:8px 12px}   /* /1.2 satırların yarım aralığı (+~1px) aralık ve dolgudan düşüldü → antet boyu ve glif boşlukları eskisiyle aynı (±1px) */
.antet__hucre+.antet__hucre{border-left:1px solid var(--ink)}
.antet__hucre--genis{flex:1;min-width:0}
.antet__etiket{font-size:9.5px;color:var(--slate);letter-spacing:var(--ls-etiket)}
.antet__deger{font-size:12px;white-space:nowrap}
#heroKonu{align-self:flex-start}   /* kutu mono metni sarar → harf harf açılış karakter adımına oturur */
.antet__alt{display:flex}
.antet__alt button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);border:0;border-left:1px solid var(--line);font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;cursor:pointer;transition:background-color .2s,color .2s}
.antet__alt button:first-child{border-left:0}
.antet__alt button[hidden]{display:none}   /* otomatik geçiş yoksa (hareket azaltma) duraklat hücresi gerçekten kalkar; inline-flex [hidden]'ı eziyordu */
.antet__alt button[aria-current="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 -3px 0 var(--katman-d,var(--orange))}
.antet__alt .ikon{width:18px;height:18px}
.antet__ilerleme{position:absolute;left:-1px;right:-1px;bottom:-3px;height:3px;background:var(--katman,var(--g-turuncu));transform-origin:left;transform:scaleX(0);animation:ilerle 6.5s linear forwards;animation-play-state:paused}
@keyframes ilerle{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* KATMAN RENGİ: pafta hangi işin paftasıysa antet o işin logo rengini taşır (turuncu proje ·
   kırmızı kabul · mavi abonelik — hizmet fihristiyle aynı eşleme). İlerleme çizgisi ve etkin
   hücrenin 3px alt çubuğu; hareket azaltmada çizgi gizlenir, çubuk kalıcı gösterge olur. */
.hero:has(.hero__slayt:nth-of-type(2)[data-aktif="evet"]) .antet{--katman:var(--g-kirmizi);--katman-d:var(--red)}
.hero:has(.hero__slayt:nth-of-type(3)[data-aktif="evet"]) .antet{--katman:var(--g-mavi);--katman-d:var(--blue)}
/* PAFTA|KONU ayracı 01|02 hücre sınırına oturur (2 × 44px) */
@media (min-width:640px){.antet__hucre:first-child{flex:0 0 88px}}

/* Telefon: antet görselin alt kenarında TEK SATIR başlık şeridi (PAFTA · KONU · ‹ › ⏸; numaralı
   hücreler ≥640'ta, kaydırma her yerde). Slayt ızgaraları ortak sahne boyuna gerildiği için
   margin-top:auto CTA bloğunu üç slaytta aynı y'ye çiviler. .js .antet öneki şart: .js .antet{display:block}'u yener. */
@media (max-width:639px){
  .hero{--hero-satir:clamp(220px,60vw,320px) auto}
  .hero__metin{padding:22px 0 36px;align-self:stretch;display:flex;flex-direction:column}
  .hero__baslik{margin:14px 0 14px -.04em}
  .hero__metin p.hero__ozet{margin-bottom:24px}
  .hero__cta{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .hero__cta .btn{width:100%}
  .js .antet{display:flex;justify-self:stretch;margin-bottom:0}
  .antet__ust{flex:1;min-width:0;border-bottom:0}
  .antet__hucre{padding-block:7px}   /* satır boyunu 44px düğme belirler → şerit 46px */
  .antet__alt{border-left:1px solid var(--ink)}
  .antet__alt [data-git]{display:none}
}
@media (max-width:379px){.js .antet{justify-self:start}.antet__hucre--genis{display:none}}   /* KONU aria-hidden, eyebrow'u tekrarlar */
@media (max-width:639px) and (max-height:700px){.hero{--hero-satir:clamp(170px,46vw,240px) auto}.hero__baslik{font-size:32px}}

/* Tablet dikey + yatay telefon: bölünmüş hero — metin solda logo hizasında, görsel sağ kenara taşar.
   Telefon kurallarından SONRA: sorgular çakıştığında bunlar kazanır. */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px),(max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .hero{--hero-kolon:var(--gut) minmax(0,1.05fr) minmax(0,1fr)}
  .hero__gorsel{grid-column:3;grid-row:1;overflow:visible}
  .hero__gorsel picture{overflow:hidden}
  .hero__metin{grid-column:2;grid-row:1;align-self:start}
  .js .antet{grid-column:3;grid-row:1}
}
/* Tablet dikey: masaüstü paftasının 20px içeriden eşi (çerçeve + dikey ölçü + sağ alt antet) */
@media (min-width:768px) and (max-width:1023px) and (min-height:521px){
  .hero{--hero-satir:minmax(clamp(560px,calc(100svh - var(--hdr) - var(--serit-h)),720px),auto)}
  .hero__metin{padding:72px 32px 64px 0}
  .hero__katman::before{content:"";grid-column:3;grid-row:1;margin:20px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 0 0 2px rgba(16,37,48,.22)}
  .js .antet{align-self:end;justify-self:end;margin:0 20px 20px 0}
  .hero__olcu{display:flex;position:absolute;left:-26px;top:20px;bottom:20px;z-index:2}
  .hero__slayt:nth-of-type(2) .hero__gorsel img{object-position:35% 55%!important}   /* dikey kırpımda köşkün panjurları kadraja girer (satır içi stili ezer) */
}
/* Yatay telefon: ilk ekranda eyebrow + başlığın tamamı. Header (ve menü üst barı) 56px; antet
   tek satır; çerçeve ve ölçü yok. --hdr canlı ölçüldüğü için çapalar kendiliğinden uyar. */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .baslik .kap,.mobil-menu__ust{height:56px}
  .marka img{height:34px}
  .hero{--hero-satir:minmax(calc(100svh - var(--hdr)),auto)}
  .hero__baslik{font-size:clamp(26px,3.6vw,34px)}
  .hero__metin{padding:16px 24px 20px 0}
  .js .antet{display:flex;align-self:end;justify-self:start;margin:0 0 12px 12px}
  .antet__ust{border-bottom:0}
  .antet__hucre{padding-block:7px}
  .antet__hucre--genis{flex:0 0 128px}   /* en uzun konu "GEÇİCİ KABUL" 99px + dolgu: şerit boyu slayttan slayta sabit → ‹ › ⏸ parmağın altında kaymaz */
  .antet__alt{border-left:1px solid var(--ink)}
  .antet__alt [data-git]{display:none}
}
/* Dar yatay telefon (667 · 736 · 740…): görsel izi 351px'lik şeridi taşıyamaz → KONU düşer (telefondaki <380 kuralının eşi) */
@media (max-width:789px) and (max-height:520px) and (orientation:landscape){.antet__hucre--genis{display:none}}

/* Masaüstü: 568 + 648 = 1216 = .kap içerik genişliği → 2. iz sayfanın sol hattında, 3. iz sağ
   hattında (1440'ta 112 · 1328) biter; görsel 3. izden 4. izi geçip ekran kenarına taşar.
   Metin ÜSTE çivili: eyebrow her slaytta aynı y'de, yalnız CTA'nın y'si metin boyuna uyar. */
@media (min-width:1024px){
  .hero{--hero-h:clamp(600px,calc(100svh - var(--hdr) - var(--serit-h)),860px);
        --hero-kolon:minmax(var(--gut),1fr) minmax(0,568px) minmax(0,648px) minmax(var(--gut),1fr);
        --hero-satir:minmax(var(--hero-h),auto)}
  .hero__gorsel{grid-column:3/5;grid-row:1;overflow:visible}
  .hero__gorsel picture{overflow:hidden}
  .hero__metin{grid-column:2;grid-row:1;align-self:start;padding:calc(72px + (var(--hero-h) - 600px) / 2) clamp(40px,5vw,72px) 96px 0}
  .hero__olcu{display:flex;position:absolute;left:-34px;top:28px;bottom:28px;z-index:2}   /* çerçevenin yüksekliğini ölçer */
  /* Pafta çerçevesi — yeni DOM yok: beyaz kıl çizgi + içinde mürekkep türevi gölge çizgi */
  .hero__katman::before{content:"";grid-column:3;grid-row:1;margin:28px 0 28px 28px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 0 0 2px rgba(16,37,48,.22)}
  .antet{grid-column:3;grid-row:1;justify-self:end;margin:0 0 28px 0}   /* sağ kenar = çerçeve = sayfanın sağ hattı; alt kenar = çerçevenin alt çizgisi */
}
@media (min-width:1024px) and (max-height:520px) and (orientation:landscape){
  .hero{--hero-satir:minmax(420px,auto)}
}
/* El değiştirmede kalemle çizim: gelen slaytın dikey pafta ölçüsü yukarıdan aşağı (.9 s; tek uzun darbe →
   yumuşak kalkış ve iniş: --ease'le 724px'in %85'i ilk .25 s'de "fırlıyordu"), eyebrow'un mikro ölçüsü soldan
   sağa çizilir. 1. slayt ilk boyamadan etkin → yüklemede hareket yok. Pasif slaytta kırpma, giden ölçünün
   .2 s'lik sönüşü bitince tek karede kapanır → geri dönülen slayt da hep baştan çizer. */
.hero__olcu{--ciz-sure:.9s;--ciz-gec:.25s;--ciz-egri:cubic-bezier(.4,0,.2,1)}
.hero__slayt .kas .olcu--mikro{--ciz-gec:.3s}
.js .hero__slayt:not([data-aktif="evet"]) .hero__olcu::before,.js .hero__slayt:not([data-aktif="evet"]) .hero__olcu::after{clip-path:inset(0 0 100% 0);transition:clip-path 0s linear .2s}
.js .hero__slayt:not([data-aktif="evet"]) .kas .olcu::before,.js .hero__slayt:not([data-aktif="evet"]) .kas .olcu::after{clip-path:inset(0 100% 0 0);transition:clip-path 0s linear .2s}

/* ================= RAKAMLAR ================= */
/* Zincir ölçü: her sütun yalnız kendi SOL ucunu çizer (uzatma + çentik) ve segmenti sütun
   aralığını da kapsar → çizgi kesintisiz akar. Satırın son segmenti sağ ucu da çizer
   (mobilde 2. ve 4. sütun, masaüstünde yalnız 4.). */
.rakamlar{--rg:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rg);row-gap:40px}
.rakam{display:flex;flex-direction:column;gap:6px;min-width:0}
.olcu--zincir{--ok2:transparent;margin:0 calc(-1 * var(--rg)) 18px 0}
.olcu--zincir::before{background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat}
.rakam:nth-child(2n) .olcu--zincir{--ok2:var(--green);margin-right:0}
.rakam:nth-child(2n) .olcu--zincir::before{background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat,
  linear-gradient(currentColor,currentColor) right center/1px 100% no-repeat}
/* Telefonda 1. satırın kapanış çentiği nötr: renk dizisi turuncu · kırmızı | mavi · yeşil · yeşil okunur (yalnız renk) */
.rakam:nth-child(2) .olcu--zincir{--ok2:currentColor}
@media (min-width:768px){
  .rakamlar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rakam:nth-child(2) .olcu--zincir{--ok2:transparent;margin-right:calc(-1 * var(--rg))}
  .rakam:nth-child(2) .olcu--zincir::before{background:
    linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat}
}
/* Orantılı rakam: tabular "1" geniş kutuda ortalanıp rakamı etiketten içeri itiyordu.
   Sayaç sırasında genişlik JS ile son değere sabitlenir (kayma yok). */
.rakam__deger{font:800 clamp(34px,3.6vw,40px)/1.1 var(--f-rakam);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums proportional-nums;margin-left:-.05em /* optik hiza: iri rakamların glif yan boşluğu (ölçüldü ~2px) */}
.rakam__deger sup{font-size:.5em;color:var(--orange);top:-.75em;margin-left:2px}
.rakam__etiket{font:500 14px/20px var(--f-govde);color:var(--slate)}
/* Zincir TEK kalem darbesi: segmentler sırayla soldan sağa (ilki hızlanarak başlar, sonuncusu yavaşlayarak
   biter, aradakiler sabit hız; toplam 1,2 s). Sütun yalnız opaklıkla açılır → çizilirken zincir dikeyde
   kırılmaz; çentik · rakam · etiket x'i kilitli kalır. */
#rakamlar .olcu--zincir{--ciz-sure:.3s;--ciz-egri:linear}
#rakamlar .rakam:nth-child(1) .olcu--zincir{--ciz-egri:cubic-bezier(.4,0,1,1)}
#rakamlar .rakam:nth-child(2) .olcu--zincir{--ciz-gec:.3s}
#rakamlar .rakam:nth-child(3) .olcu--zincir{--ciz-gec:.6s}
#rakamlar .rakam:nth-child(4) .olcu--zincir{--ciz-gec:.9s;--ciz-egri:cubic-bezier(0,0,.2,1)}
.js #rakamlar .rakam.reveal{transform:none}

/* ================= HAKKIMIZDA =================
   Fotoğraf hero'nun aynası: hero sağa taşar, bu şerit SOLA. Masaüstünde sütun bölümün üst ve
   alt çizgisine kadar uzar (rakam bandının alt çizgisi · hizmetlerin üst çizgisi), sol kenarı
   ekran kenarına taşar. 100cqw = bölümün genişliği; 100vw Windows'ta kaydırma çubuğu kadar
   taşardı. Görsel absolute: 720px'lik kaynak satır boyunu belirlemez, satırı metin belirler.
   KURULUŞ levhası şeridin ANTETİ: sağ ve alt mürekkep kenarı şeridin kenarlarında. */
#hakkimizda{container-type:inline-size}
@media (min-width:1024px){
  #hakkimizda .hakkimizda-sutun{align-self:stretch;margin-block:calc(-1 * var(--sec-pad));margin-left:calc(-1 * max(var(--gut), (100cqw - 1216px) / 2))}
  #hakkimizda .hakkimizda-gorsel{height:100%;border:0}
  #hakkimizda .hakkimizda-gorsel img{position:absolute;inset:0;width:100%;height:100%}
}
/* Telefon / tablet: görsel bölümün tepesinde kenardan kenara; levha içerik hattında (W − gut) */
@media (max-width:1023px){
  #hakkimizda .hakkimizda-sutun{margin:calc(-1 * var(--sec-pad)) calc(-1 * var(--gut)) 0}
  #hakkimizda .hakkimizda-gorsel{border:0}
}
.kuruluS{position:absolute;right:var(--gut);bottom:0;z-index:2;background:#fff;border:1px solid var(--ink);display:grid;grid-template-columns:auto auto;align-items:stretch}
.kuruluS>div{padding:14px 18px}
@media (min-width:1024px){.kuruluS{right:0}}
.kuruluS>div+div{border-left:1px solid var(--ink)}   /* ayraç levhanın tam boyunda (hücreler gerilir) */
.kuruluS .etk{display:block;font:500 9.5px/1.2 var(--f-mono);letter-spacing:var(--ls-etiket);color:var(--slate);margin-bottom:8px}
.kuruluS .yil{font:800 40px/1.1 var(--f-rakam);color:var(--ink);font-variant-numeric:lining-nums proportional-nums}
/* Metin tek span: <br> flex öğesine bölünmez. Alt dolgu 14 + 2px: "bu yana"nın taban çizgisi
   "2010"unkine oturur (44px ve 18,9px satır kutularının taban farkı, ölçüldü 2,1px). */
.kuruluS .acik{font:500 14px/1.35 var(--f-govde);color:var(--slate);display:flex;align-items:flex-end;padding-bottom:16px}
/* Madde listesi: ikon yerine 24px mürekkep çubuk — logonun dört rengi anlam ve sıra için ayrıldı.
   ≥640 iki sütun: ikinci sütun rakam bandının 4. çentiğinde (1440'ta x = 1042). */
.tikli{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tikli li{display:block;position:relative;padding-top:14px;font:400 16px/1.5 var(--f-govde);color:var(--ink);text-wrap:pretty}   /* iki sütunda tek kelimelik son satır kalmaz */
.tikli li::before{content:"";position:absolute;left:0;top:0;width:24px;height:2px;background:var(--ink)}
@media (min-width:640px){.tikli{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}}

/* ================= HİZMETLER — tipografik fihrist (ikon kartı yok) ================= */
.fihrist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.hizmet{--renk:var(--orange);position:relative;display:grid;grid-template-columns:1fr;gap:14px;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.hizmet::before{content:"";position:absolute;left:0;top:-2px;z-index:1;width:56px;height:3px;border-radius:0 2px 2px 0;background:var(--renk-g,var(--renk))}   /* sekme üst çizginin üstünde kalır */
/* Satırın üst çizgisi hover/odakta hizmet rengiyle soldan sağa ÇİZİLİR (clip-path): başlık
   tıklanamaz olduğu için altı çizilmez; kutu, dolgu ve konum değişmez. Hover eşi DURUMLAR'da. */
.hizmet::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--renk);clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease);pointer-events:none}
.hizmet:focus-within::after{clip-path:inset(0)}
.hizmet__no{font:800 34px/1.2 var(--f-rakam);margin:-.1em 0;color:var(--renk);font-variant-numeric:lining-nums proportional-nums;letter-spacing:-.02em}   /* 1.2 satır − 2×.1em = eski 1em kutu: glif yerinde */
.hizmet__ad{font:700 clamp(22px,2.2vw,26px)/1.2 var(--f-baslik);letter-spacing:-.01em;color:var(--ink);margin:0}
.hizmet__ozet{font:400 16px/1.6 var(--f-govde);color:var(--slate);margin:10px 0 0;max-width:46ch}
.kapsam{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px 24px}
.kapsam li{position:relative;padding-left:20px;font:400 15px/1.45 var(--f-govde);color:var(--ink)}
.kapsam li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--renk)}
.hizmet__eylem{align-self:start}
.hizmet__eylem .ikon{margin-right:-3px}   /* optik sağ kenar: okun yan boşluğu hatta taşar */
@media (max-width:1023px){.hizmet__eylem{justify-self:start}}   /* bağlantı içeriği kadar (~94px): %35 alt çizgi yalnız onun altında */
@media (min-width:640px){.kapsam{grid-template-columns:1fr 1fr}}
/* Masaüstü: satırın dört öğesi TEK taban çizgisinde (no · başlığın ilk satırı · ilk kapsam · bağlantı) */
@media (min-width:1024px){
  .hizmet{grid-template-columns:72px minmax(0,4fr) minmax(0,6fr) 128px;gap:0 36px;padding:40px 0 42px;align-items:baseline}
  .hizmet__no{font-size:40px}
  .hizmet__eylem{justify-self:end;align-self:baseline}
}
@media (min-width:1024px) and (max-width:1279px){.kapsam{grid-template-columns:minmax(0,1fr)}}   /* 397px'lik tek sütun: madde kırılmaz */
/* ≥1280 sayfanın 12 sütunlu paftası: no 1 · başlık 2–5 · kapsam 6–11 (alt sütunlar 6 ve 9) ·
   bağlantı 12 (sağ hat). Giriş notu 9–12: 1440'ta 112 · 215,3 · 628,7 · 938,7 · 1328. */
@media (min-width:1280px){
  .hizmet{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .hizmet__no{grid-column:1}
  .hizmet>div{grid-column:2/6}
  .kapsam{grid-column:6/12}
  .hizmet__eylem{grid-column:12;justify-self:end;white-space:nowrap}
  #hizmetler .hizmet-giris__not{flex:0 0 calc((100% - 11 * 24px) / 12 * 4 + 3 * 24px);max-width:none}
}

/* ================= SÜREÇ — zincir ölçü ================= */
.adimlar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.adim{position:relative;padding:0 0 36px 72px}
.adim:last-child{padding-bottom:0}
.adim__dugum{position:absolute;left:0;top:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ink);background:#fff;border-radius:4px;font:800 18px/1.2 var(--f-rakam);color:var(--ink);font-variant-numeric:lining-nums proportional-nums;z-index:1}
.adim:first-child .adim__dugum{background:var(--orange);border-color:var(--orange)}
.adim h3{font:700 20px/1.3 var(--f-baslik);color:var(--ink);margin:10px 0 8px}
.adim p{font:400 15px/var(--lh-metin) var(--f-govde);color:var(--slate);margin:0}
/* ÇIKTI satırı asılı girintili: kırılan değer "ÇIKTI"nın değil değerin altına iner */
.adim__cikti{margin-top:12px!important;font:500 11px/1.4 var(--f-mono)!important;letter-spacing:var(--ls-etiket);color:var(--ink)!important;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:6px}
.adim__cikti b{font-weight:500;color:var(--primary)}
.adim__olcu{display:none}
/* Telefon: zincir ölçü DİKEY — düğüm merkezinde (x = 24), bir düğümün 8px altından sonrakinin
   8px üstüne; üst kanca turuncu, alt kanca yeşil (.olcu--dikey'in eşi). Etiketi ÇIKTI satırı
   taşır. 4. adımda ölçü yok (el değiştiren belge yok). Düz gri bağlayıcı kaldırıldı. */
@media (max-width:767px){
  .adim__olcu{display:flex;flex-direction:column;position:absolute;left:16px;top:56px;bottom:8px;width:16px;min-height:0}
  .adim__olcu::before{background:
    linear-gradient(currentColor,currentColor) center top/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) center top/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center bottom/100% 1px no-repeat}
  .adim__olcu::after{inset:calc(var(--ok-boy) / -2) 0;background:linear-gradient(180deg,var(--ok1) 50%,var(--ok2) 50%);-webkit-mask-position:center top,center bottom;mask-position:center top,center bottom}
  .adim__olcu>span{display:none}
}
/* ≥768: adımlar ortak satırlarda (subgrid: başlık · metin · çıktı) — dört paragraf aynı y'de.
   24px aralık = rakam bandının çentikleri (1440'ta 112 · 422 · 732 · 1042); zincir iki düğümden
   de 12px açıkta biter. */
@media (min-width:768px){
  .adimlar{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:0 24px}
  .adim{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:68px 0 0}
  .adim h3{margin-top:0}
  .adim__olcu{display:flex;position:absolute;top:16px;left:60px;right:-12px}
}
/* Tablet: 2 × 2 — satır çiftleri hizalı; 2 → 3 satır atladığı için o zincir yok, etiketler sığar */
@media (min-width:768px) and (max-width:1023px){
  .adimlar{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto)}
  .adim:nth-child(n+3){margin-top:40px}
  .adim:nth-child(2) .adim__olcu{display:none}
}
@supports not (grid-template-rows:subgrid){@media (min-width:768px){.adim h3{min-height:2.6em}}}
@media (min-width:1024px){.adim:not(:last-child) .adim__cikti{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
/* Belge el değiştirmeleri sırayla çizilir: 1 → 2 → 3, adımlar açılırken. Telefonda ölçü dikey → kırpma
   yukarıdan aşağı (üst kanca turuncu önce, alt kanca yeşil en son). */
.adim__olcu{--ciz-sure:.4s;--ciz-gec:.25s}
.adim:nth-child(2) .adim__olcu{--ciz-gec:.65s}
.adim:nth-child(3) .adim__olcu{--ciz-gec:1.05s}
@media (max-width:767px){.js .reveal:not(.gorunur) .adim__olcu::before,.js .reveal:not(.gorunur) .adim__olcu::after{clip-path:inset(0 0 100% 0)}}

/* ================= KABUL DOSYASI — koyu pafta ================= */
.koyu{background:var(--ink);color:var(--koyu-metin)}
.pafta{position:relative;border:1px solid rgba(255,255,255,.22)}
/* Kırmızı katman sekmesi: dosya 02 numaralı hizmetin (geçici kabul) paftası — .hizmet::before
   ile aynı geometri (56 × 3, kenar çizgisini 1px aşar) */
.pafta::before{content:"";position:absolute;left:-1px;top:-2px;width:56px;height:3px;border-radius:0 2px 2px 0;background:var(--g-kirmizi)}
.pafta__bas,.pafta__satir{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0}
.pafta__bas{border-bottom:1px solid rgba(255,255,255,.22);font:500 10px/1.2 var(--f-mono);letter-spacing:var(--ls-etiket);color:var(--koyu-metin)}
.pafta__bas>span{padding:12px 16px}
.pafta__bas>span+span{border-left:1px solid rgba(255,255,255,.12)}
.pafta ol{list-style:none;margin:0;padding:0}
/* K kodu başlığın taban çizgisinde; taban çizgisi aşağıda olan içerik hücresi üstte kalır → sol çizgisi satır boyu */
.pafta__satir{align-items:baseline;border-bottom:1px solid rgba(255,255,255,.1);transition:background-color .25s var(--ease)}
.pafta__no{padding:18px 16px;white-space:nowrap;font:500 12px/1.4 var(--f-mono);letter-spacing:var(--ls-etiket);color:var(--orange);font-variant-numeric:tabular-nums}
.pafta__icerik{padding:16px 16px 18px;border-left:1px solid rgba(255,255,255,.12)}
.pafta__icerik strong{display:block;font:700 17px/1.35 var(--f-baslik);color:#fff}
.pafta__icerik>span{display:block;font:400 14px/1.5 var(--f-govde);color:var(--koyu-metin);margin-top:3px}   /* yalnız açıklama: başlıktaki .nw etkilenmez */
.pafta__antet{display:grid;grid-template-columns:1fr;font:500 10px/1.3 var(--f-mono);letter-spacing:.12em}
.pafta__antet>div{padding:12px 16px;display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.12)}
/* Üç antet değeri tek taban çizgisinde: ikon satır kutusunu büyütmez (13px − 2px kenar payı) */
.pafta__antet b{font-weight:500;color:#fff;display:inline-flex;align-items:center;gap:6px}
.pafta__antet .ikon{width:13px;height:13px;margin-block:-1px;vertical-align:0;color:#55B547}
@media (min-width:640px){
  .pafta__bas,.pafta__satir{grid-template-columns:76px minmax(0,1fr)}
  .pafta__antet{grid-template-columns:repeat(3,1fr)}
  .pafta__antet>div{flex-direction:column;justify-content:flex-start}
  .pafta__antet>div+div{border-left:1px solid rgba(255,255,255,.12)}
}
/* Masaüstü: iki sütun aynı üst ve alt çizgiyle çerçevelenir — paftanın 1px üst kenarı eyebrow'un
   mikro ölçü çizgisinde (y 7,5–8,5; tek çizgi okunur), CTA tabanı pafta tabanında. Mono notun
   28px alt boşluğu en küçük aralık olarak kalır. */
@media (min-width:1024px){
  #kabul-dosyasi .kabul-sol{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}
  #kabul-dosyasi .kabul-sol>.btn{margin-top:auto}
  #kabul-dosyasi .pafta{margin-top:7.5px}
}
/* Doğrulama (JS: dogrula()) — kalem doğrulanana dek K kodu mono notun grisinde (#8499A2, mürekkep
   zeminde ≈5:1) bekler, doğrulanınca turuncuya döner; son kalemden sonra DURUM tiki kendini çizer.
   Dash değerleri <use> gölge ağacına miras geçer (tik yolu ≈19,8 birim < 21). Yalnız renk ve dash
   ofseti değişir → kutular aynı. JS'siz, hareket azaltmada ve baskıda son hâl: hepsi turuncu, tik çizili. */
.pafta__no{transition:color .3s var(--ease)}
.js .pafta__satir:not(.dogrulandi) .pafta__no{color:#8499A2}
.pafta__antet .ikon{stroke-dasharray:21;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease)}
.js .pafta:not(.pafta--tamam) .pafta__antet .ikon{stroke-dashoffset:21}
@media (prefers-reduced-motion:reduce){
  .pafta__no{transition:none}
  .pafta__antet .ikon{stroke-dashoffset:0!important}
}
/* Zorlanmış renklerde gri/turuncu farkı tek sistem rengine düşer: bekleyen kalem GrayText kalır,
   doğrulanan CanvasText'e döner → sıra yine okunur; tik currentColor ile çizildiği için görünür. */
@media (forced-colors:active){.js .pafta__satir:not(.dogrulandi) .pafta__no{color:GrayText}}
@media print{.pafta__no,.pafta__antet .ikon{transition:none}.pafta__antet .ikon{stroke-dashoffset:0!important}}   /* ekrandan baskıya geçiş de geçişsiz: kâğıtta yarım tik / gri kod kalmaz */

/* ================= PROJELER — arşiv temas baskısı (contact sheet) =================
   Süzgeç antet gibi TEK çerçeveli bölmeli denetim (etkin hücre mürekkep). Kartlar sayfanın 12
   sütunlu paftasında: ≥1280 ilk iki GÖRÜNÜR kart büyük (6 + 6), kalanlar küçük (3 + 3 + 3 + 3) —
   1440'ta 112 · 732 / 112 · 422 · 732 · 1042; 768–1279 ikişer. Kartın beş satırı (görsel · tür ·
   başlık · yer · KAPSAM) subgrid ile satırdaki kartlarda ortak → aynı y'de. Telefonda ilk kart
   tam, kalanlar 112px küçük resimli sıkı satır. Her kural :not([hidden]) ile → gizli kart hep
   display:none. :nth-child(of S) yoksa eşit 4'lü ızgaraya düşer; süzgeç 1–2 kart bırakırsa büyürler. */
.suzgec{display:inline-flex;gap:0;border:1px solid var(--ink)}
.suzgec button{min-height:44px;padding:0 18px;border:0;border-left:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);font:500 14px/1.2 var(--f-govde);cursor:pointer;transition:background-color .2s,color .2s}
.suzgec button:first-child{border-left:0}
.suzgec button[aria-pressed="true"]{background:var(--ink);color:#fff}
.suzgec button:focus-visible{outline-offset:-4px}   /* halka hücrenin İÇİNDE, komşu hücreye ve çerçeveye taşmaz */
@media (max-width:639px){.suzgec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.suzgec button{padding:0 4px}}   /* 320'de de tek satır */
.proje[hidden]{display:none}
#projeler .proje-izgara{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.proje__gorsel{aspect-ratio:4/3;border-radius:0;overflow:hidden;background:var(--mist);border:1px solid rgba(16,37,48,.14)}   /* çizim yüzeyi: kare + mürekkep türevi çizgi */
.proje__gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.proje__tur{display:block;margin-top:16px;font:500 11px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--slate)}
.proje h3{font:700 20px/1.3 var(--f-baslik);color:var(--ink);margin:6px 0 0}
.proje__yer{display:flex;align-items:center;gap:6px;margin-top:6px;font:400 14px/1.4 var(--f-govde);color:var(--slate)}
.proje__yer .ikon{width:16px;height:16px;margin-left:-2.5px}   /* optik sol kenar: iğnenin yan boşluğu hatta taşar */
/* KAPSAM asılı girintili: kırılan değer "KAPSAM"ın değil değerin altına iner; değerler &nbsp; ile
   bağlı → satır yalnız "·"dan SONRA kırılır */
.proje__kapsam{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font:500 11px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--ink)}
.proje__kapsam b{font-weight:500;color:var(--primary)}
/* Telefon sıkı satırı: küçük resim dört satıra yayılır; artan boyunu boş 4. satır (1fr) yutar →
   tek satırlı başlıkta da tür · başlık · yer sıkı kalır (auto satırlar gerilmez). Son satırın alt
   dolgusu ızgaradan düşülür → bölüm her yerde olduğu gibi kendi dolgusunda biter. */
@media (max-width:767px){
  #projeler .proje-izgara{margin-bottom:-20px}
  #projeler .proje:not([hidden]){padding-bottom:28px}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]){display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:16px;grid-template-areas:"g t" "g h" "g y" "g ." "k k";align-items:start;padding-block:20px;border-top:1px solid var(--line)}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]) .proje__gorsel{grid-area:g}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]) .proje__tur{grid-area:t;margin-top:0}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]) h3{grid-area:h;font-size:17px;margin-top:4px}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]) .proje__yer{grid-area:y;margin-top:4px}
  #projeler .proje:not([hidden]) ~ .proje:not([hidden]) .proje__kapsam{grid-area:k;margin-top:10px;padding-top:10px}
}
@media (min-width:768px){
  #projeler .proje-izgara{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:-48px}   /* son satırın 48px'i bölüm dolgusuna eklenmesin */
  #projeler .proje:not([hidden]){grid-column:span 6;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding-bottom:48px}
}
@media (min-width:1280px){
  #projeler .proje:not([hidden]){grid-column:span 3}
  #projeler .proje:nth-child(-n+2 of .proje:not([hidden])){grid-column:span 6}
}

/* ================= FOTOĞRAF REÇETESİ — tek çekim gibi =================
   Karışık kaynaklı (yapay zekâ + Wikimedia) görseller tek ışıkta okunsun: doygunluk görsel
   başına --doy ile eşitlenir, üstüne %14 opak mürekkep "color" katmanı gökyüzünü ve nötrleri
   petrol-griye çeker; turuncu yelekler turuncu kalır. Tane yok, yeni renk yok (yalnız --ink
   türevi, ≤.18 — ASTAN'ın duotone'undan ayrı dursun). Hero'daki Ken Burns transform'u
   ayrı bir özellik olduğu için filter'la çakışmaz. */
.hero__gorsel picture,.hakkimizda-gorsel,.proje__gorsel{isolation:isolate}
.proje__gorsel{position:relative}
.hero__gorsel img,.hakkimizda-gorsel img,.proje__gorsel img{filter:saturate(var(--doy,.88)) contrast(1.05)}
.hero__gorsel picture::after,.hakkimizda-gorsel::after,.proje__gorsel::after{content:"";position:absolute;inset:0;background:var(--ink);mix-blend-mode:color;opacity:.14;pointer-events:none}
/* Görsel başına doygunluk (ölçülmüş ortalama HSV doygunluğuna göre; varsayılan .88) */
img[src*="proje-ofis"]{--doy:.5}
img[src*="proje-hastane"]{--doy:.55}
img[src*="proje-konut"]{--doy:.62}
img[src*="hakkimizda-ekip"]{--doy:.7}
img[src*="proje-otel"]{--doy:.75}
img[src*="hero-kabul"]{--doy:.8}

/* ================= SSS =================
   5/7 omurgası: giriş 1–5. sütunda (≥1024 yapışkan, header'ın 32px altında), akordeon 6. sütun
   hattında (1440'ta 628,7). Akordeonun mürekkep üst çizgisi eyebrow'un mikro ölçü çizgisiyle
   AYNI y'de (7,5–8,5; kabul paftasıyla aynı kural); "+" sağ içerik hattında biter. */
.sss details{border-bottom:1px solid var(--line)}
.sss details:first-child{border-top:1px solid var(--ink)}
.sss summary{position:relative;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;font:700 clamp(17px,1.6vw,19px)/1.35 var(--f-baslik);color:var(--ink)}
.sss summary::-webkit-details-marker{display:none}
.sss summary .ikon{width:22px;height:22px;flex:none;margin-right:-4px;color:var(--primary);transition:transform .35s var(--ease)}   /* optik sağ kenar: "+"nın yan boşluğu hatta taşar */
.sss details[open] summary .ikon{transform:rotate(45deg)}
.sss .cevap{padding:0 0 22px;max-width:32em;font:400 16px/var(--lh-metin) var(--f-govde);color:var(--slate)}   /* ≤ 76 karakter satır: Mona Sans dar (ı, i, l) → 36em'de 81 karakter ölçüldü; 32em'de en uzun 73 */
@media (min-width:1024px){
  #sss .sss-bas{position:sticky;top:calc(var(--hdr) + 32px);align-self:start}
  #sss .sss{margin-top:7.5px}
}
/* Açılış/kapanış: cevap kutusu (::details-content) 0 ↔ auto yüksekliği .45 s'de akar
   (interpolate-size), metin .3 s'de belirir; kapanışta content-visibility süre boyunca görünür
   kalır (allow-discrete). Tanımayan tarayıcı eski anlık açılışı korur. Genel .01ms kuralı
   ::details-content'e ulaşmaz → hareket azaltma burada ayrıca kapatılır. */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .sss{interpolate-size:allow-keywords}
  .sss details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .45s var(--ease),opacity .3s var(--ease),content-visibility .45s allow-discrete}
  .sss details[open]::details-content{block-size:auto;opacity:1}
  @media (prefers-reduced-motion:reduce){.sss details::details-content{transition:none}}
}
/* Baskı: kapalı soruların cevabı da kâğıda geçer, "+" basılmaz (::details-content'i tanımayan
   tarayıcıda cevapları baski() açar). transition:none → baskıdan hemen önce başlamış bir açılış
   kâğıtta yarım yükseklikte donmaz. */
@media print{
  .sss details::details-content{content-visibility:visible;block-size:auto;opacity:1;transition:none}
  .sss summary .ikon{display:none}
}

/* ================= TEKLİF BANDI =================
   Logo bandı sayfayı KAPATAN ölçü: ≥768 renk sınırları rakam bandının çentiklerinde (1440'ta
   422 · 732 · 1042; 768'de 208 · 396 · 584) → sayfa aynı dört renkle açılır ve kapanır. Telefonda
   dört eşit çeyrek. Sıra logodaki akış: turuncu → kırmızı → mavi → yeşil. */
.logo-bant{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:4px}
.logo-bant>i{display:block}
@media (min-width:768px){.logo-bant{--ic:calc(min(100%, 1280px) - 2 * var(--gut));--kol:calc((var(--ic) - 72px) / 4 + 24px);grid-template-columns:calc((100% - var(--ic)) / 2 + var(--kol)) var(--kol) var(--kol) minmax(0,1fr)}}
/* Bant BİR KEZ, soldan sağa dört kalem darbesiyle çizilir (logonun sırası). Tetik bant ekrandayken gelir:
   #teklif'in kendi reveal'ları açıldığında bant henüz ekranın altında kalıyordu (ölçüldü: 1440×900'de
   y 938, 390×844'te y 1016) → sonraki bölümün (#iletisim) ilk reveal'ı açılınca (bant ekran boyunun
   %69-79'unda; 360-1440 ölçüldü). #iletisim'de en az bir .reveal kalmalı. :has() yoksa kural düşer →
   bant baştan çizili. */
.logo-bant>i{clip-path:inset(0);transition:clip-path .25s linear}
.logo-bant>i:nth-child(2){transition-delay:.25s}
.logo-bant>i:nth-child(3){transition-delay:.5s}
.logo-bant>i:nth-child(4){transition-delay:.75s}
.js #teklif:not(:has(~ #iletisim .reveal.gorunur)) .logo-bant>i{clip-path:inset(0 100% 0 0)}
@media (prefers-reduced-motion:reduce){.logo-bant>i{clip-path:none!important;transition:none!important}}
@media (forced-colors:active),print{.logo-bant>i{clip-path:none!important}}

/* ================= İLETİŞİM + FORM =================
   Hero'nun aynası: hero görseli sağa taşar, burada FORM tam boy sis paneli olarak sağa taşar.
   ≥1024 panelin sol kenarı 6. sütun hattında (1440'ta 628,7), üstü logo bandının altında, altı
   footer'ın üstünde; içerik sayfanın sağ hattında (1328) biter. 100cqw = bölümün genişliği (100vw
   Windows'ta kaydırma çubuğu kadar taşardı). DOM sırası giriş → form → künye → plan: sekme sırası
   görsel sırayla aynı, CSS order yok. <1024 form kenardan kenara sis bandı, alanlar h2 hizasında. */
#iletisim{container-type:inline-size}
#iletisim .iletisim-izgara{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px}
@media (max-width:1023px){#iletisim .form-kart{margin-inline:calc(-1 * var(--gut));border:0;border-radius:0;padding:32px var(--gut) 36px}}
@media (min-width:640px) and (max-width:1023px){
  #iletisim .iletisim-izgara{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;grid-template-areas:"giris giris" "form form" "kunye plan"}
  #iletisim .iletisim-giris{grid-area:giris}
  #iletisim .iletisim-form{grid-area:form}
  #iletisim .kunye{grid-area:kunye}
  #iletisim .vaziyet{grid-area:plan;align-self:start}
}
@media (min-width:1024px){
  #iletisim .iletisim-izgara{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;grid-template-rows:auto auto 1fr}
  #iletisim .iletisim-giris{grid-column:1/6;grid-row:1}
  #iletisim .kunye{grid-column:1/6;grid-row:2}
  #iletisim .vaziyet{grid-column:1/6;grid-row:3;align-self:end}   /* planın tabanı formun tabanında */
  #iletisim .iletisim-form{grid-column:6/13;grid-row:1/4;align-self:stretch;background:var(--mist);
    margin-block:calc(-1 * var(--sec-pad));margin-right:calc(-1 * max(var(--gut), (100cqw - 1216px) / 2));
    padding:var(--sec-pad) max(var(--gut), (100cqw - 1216px) / 2) var(--sec-pad) clamp(32px,3.4vw,48px)}
  #iletisim .form-kart{background:none;border:0;border-radius:0;padding:0}   /* form üste yaslı; textarea gerilmez */
}
.kunye{display:grid;gap:18px;margin:0}
.kunye>div{min-height:44px;padding-left:0;display:flex;flex-direction:column;justify-content:center}   /* ikon karesi yok: dt/dd içerik hattında */
.kunye dt{font:400 13px/1.3 var(--f-govde);color:var(--slate)}
.kunye dd{margin:2px 0 0;font:500 16px/1.4 var(--f-govde);color:var(--ink)}
.kunye dd a{color:inherit;text-decoration:none;display:inline-flex;min-height:44px;margin-block:-8px;align-items:center}
.kunye address{font-style:normal}
.vaziyet{border:1px solid rgba(16,37,48,.14);border-radius:0;overflow:hidden;background:var(--mist)}   /* çizim yüzeyi: kare */
.vaziyet svg{display:block;width:100%;height:auto}
@media (max-width:1279px){.vaziyet svg text{font-size:12px}}   /* küçük ölçekte etiketler ≥ 8 px (360'ta 8,2) */
.vaziyet__alt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 16px;background:#fff;border-top:1px solid var(--line);font:500 11px/1.4 var(--f-mono);letter-spacing:var(--ls-etiket);color:var(--slate)}
.vaziyet__alt a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none;font-weight:500}
.form-kart{background:var(--mist);border:1px solid var(--line);border-radius:8px;padding:clamp(22px,3.4vw,40px)}
.alan label,.alan__etiket{display:block;font:500 14px/1.3 var(--f-govde);color:var(--ink);margin-bottom:7px}
.alan label .ops{font-weight:400;color:var(--slate)}
.alan input,.alan select,.alan textarea{width:100%;min-height:48px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 14px;font:400 16px/1.4 var(--f-govde);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.alan textarea{min-height:140px;padding:12px 14px;resize:vertical}
.alan select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23102530' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/12px no-repeat}
.alan select:invalid{color:var(--slate)}
.alan input::placeholder,.alan textarea::placeholder{color:#8a97a0}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,105,33,.18)}
.alan [aria-invalid="true"]{border-color:var(--red)}
/* Alan durumları — kutu, dolgu ve metin hiç oynamaz (yalnız renk ve box-shadow):
   hatalı + odak = KIRMIZI halka (0,3,0 özgüllük turuncu odağı yener) · geçerli = 3px yeşil iç
   çubuk · odaktaki alanın etiketi metin turuncusu */
.alan [aria-invalid="true"]:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(207,37,39,.16)}
.alan [aria-invalid="false"]{box-shadow:inset 3px 0 0 var(--green)}
.alan [aria-invalid="false"]:focus{box-shadow:inset 3px 0 0 var(--green),0 0 0 3px rgba(242,105,33,.18)}
.alan:focus-within>label{color:var(--primary);transition:color .2s var(--ease)}
.alan__hata{min-height:0;margin:6px 0 0;font:500 13px/1.35 var(--f-govde);color:var(--red)}
.alan__hata:empty{display:none}
.alan__hata:not(:empty){animation:hata-gir .22s var(--ease)}
@keyframes hata-gir{from{opacity:0;transform:translateY(-4px)}}
/* Varış işareti: hizmet satırından "Teklif iste" ile gelinince seçilen hizmet kutusu bir kez
   turuncu hale ile işaretlenir (kaydırma ~.5 s sürdüğü için gecikmeli söner); hizmetSec() ekler */
.alan--isaret select{animation:isaret 1.6s var(--ease) .5s both}
@keyframes isaret{0%,55%{box-shadow:inset 3px 0 0 var(--green),0 0 0 3px rgba(242,105,33,.35)}to{box-shadow:inset 3px 0 0 var(--green),0 0 0 3px rgba(242,105,33,0)}}
.onay{display:flex;gap:12px;align-items:flex-start}
.onay input{width:24px;height:24px;margin-top:-1.5px;accent-color:var(--orange);flex:none;cursor:pointer}   /* 24 × 24 (WCAG 2.5.8), 21px'lik ilk satırın ortasında */
.onay label{font:400 14px/1.5 var(--f-govde);color:var(--slate);cursor:pointer}
.onay button{font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.bal{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-durum{margin:14px 0 0;font:500 14px/1.5 var(--f-govde);color:var(--ink)}
.form-durum:empty{display:none}
.form-not{margin:12px 0 0;font:400 12px/1.5 var(--f-mono);letter-spacing:.02em;color:var(--slate)}

/* ================= FOOTER =================
   Dört sütun 12'lik paftada 3/2/3/4: 1440'ta 112 · 422 · 628,7 · 938,7 (1024'te 26,6 · 275,3 ·
   441,1 · 689,8). Altlarında ZİNCİR ÖLÇÜ aynı çentiklerde: turuncu sol uç, nötr iç çentikler,
   yeşil sağ uç (1328); etiket 1. segmentin ortasında. <1024 tek segment, iki ucuyla tam genişlik.
   ≥1024 iletişim satırları bağlantı satırlarının ritminde (36px + 2px) → taban çizgileri ortak. */
footer a{color:inherit;text-decoration:none}
.ayak__logo{align-self:flex-start}
.ayak__logo img{width:180px;height:auto}
.ayak__liste{display:flex;flex-direction:column;gap:2px;font:400 15px/1.4 var(--f-govde)}
.ayak__liste a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
@media (min-width:1024px){.ayak__liste a{min-height:36px}}
.ayak__baslik{font:500 11px/1.2 var(--f-mono);letter-spacing:var(--ls-etiket);color:#fff;margin:0 0 16px}
.ayak__kunye{display:grid;gap:12px;font:400 15px/1.45 var(--f-govde);overflow-wrap:anywhere}
.ayak__kunye>div{display:flex;gap:10px;align-items:flex-start}
.ayak__kunye .ikon{width:18px;height:18px;margin-top:1px;color:var(--koyu-metin)}
.ayak__kunye a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
@media (min-width:1024px){
  .ayak__kunye{gap:2px}
  .ayak__kunye>div{min-height:36px;align-items:center}
  .ayak__kunye a{margin-block:0;min-height:36px}
  .ayak__kunye .ikon{margin-top:0}
}
.ayak-zincir{--rg:24px;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--rg);margin-top:clamp(40px,6vw,64px)}
.ayak-zincir .olcu--zincir{margin:0;--ok1:var(--orange);--ok2:var(--green)}
.ayak-zincir .olcu--zincir::before{background:
  linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
  linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat,
  linear-gradient(currentColor,currentColor) right center/1px 100% no-repeat}
@media (max-width:1023px){.ayak-zincir .olcu--zincir:not(:first-child){display:none}}
@media (min-width:1024px){
  .ayak-zincir{grid-template-columns:repeat(12,minmax(0,1fr))}
  /* Her segment kendi SOL ucunu çizer ve sütun aralığını kapsar (rakam bandının zinciri gibi) */
  .ayak-zincir .olcu--zincir{grid-column:span 3;margin-right:calc(-1 * var(--rg));--ok1:currentColor;--ok2:transparent}
  .ayak-zincir .olcu--zincir::before{background:
    linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat}
  .ayak-zincir .olcu--zincir:first-child{--ok1:var(--orange)}
  .ayak-zincir .olcu--zincir:nth-child(2){grid-column:span 2}
  .ayak-zincir .olcu--zincir:last-child{grid-column:span 4;margin-right:0;--ok2:var(--green)}
  .ayak-zincir .olcu--zincir:last-child::before{background:
    linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) left center/1px 100% no-repeat,
    linear-gradient(currentColor,currentColor) right center/1px 100% no-repeat}
}
/* Zincir rakam bandının kalemiyle çizilir (aynı uç eğrileri, toplam 1,2 s, aynı hız ≈ 1030 px/s @1440):
   segmentler 3/2/3/4 sütun olduğu için süre boyla orantılı (.3/.2/.3/.4 s) → kalem segmentte yavaşlamaz.
   <1024 tek segment (iki uçlu): tek darbe, yumuşak başlar ve yeşil kancaya yumuşak iner. */
.ayak-zincir .olcu--zincir{--ciz-sure:.3s;--ciz-egri:linear}
.ayak-zincir .olcu--zincir:nth-child(1){--ciz-egri:cubic-bezier(.4,0,1,1)}
.ayak-zincir .olcu--zincir:nth-child(2){--ciz-sure:.2s;--ciz-gec:.3s}
.ayak-zincir .olcu--zincir:nth-child(3){--ciz-gec:.5s}
.ayak-zincir .olcu--zincir:nth-child(4){--ciz-sure:.4s;--ciz-gec:.8s;--ciz-egri:cubic-bezier(0,0,.2,1)}
@media (max-width:1023px){.ayak-zincir .olcu--zincir:first-child{--ciz-sure:.6s;--ciz-egri:cubic-bezier(.4,0,.2,1)}}
.ayak__yasal a,.ayak__yasal button{color:var(--koyu-metin);background:none;border:0;padding:0;font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
/* Telefon: üç yasal bağlantı iki temiz sütun; satır sonunda "·" kalmaz */
@media (max-width:639px){
  footer .ayak__yasal{display:grid;grid-template-columns:repeat(2,max-content);column-gap:24px}
  footer .ayak__yasal>[aria-hidden="true"]{display:none}
}
.ayak__ornek{max-width:110ch;font:400 12px/1.6 var(--f-mono);letter-spacing:.02em;color:#8499A2}
.ayak__ornek a{text-decoration:underline;text-underline-offset:2px}

/* Yüzen düğmeler (ÇABA deseni, kullanıcı isteği 11.10.2026): sol altta iletişim kümesi (WhatsApp +
   telefon), sağ altta "yukarı çık". Köşe dili sayfanınki: 4px (daire değil). Yerleri hiç değişmez;
   altlarına hero metni/anteti, teklif formu, footer'ın yasal satırı ya da imza barı girince ve
   paftanın üstüne bindikleri genişlikte aşağı kaydırırken JS data-gizli ile soldurur.
   z-index mobil menüden (90) ve header'dan (60) KÜÇÜK. */
.yuzen-iletisim,.yukari-cik{position:fixed;z-index:50;bottom:calc(16px + env(safe-area-inset-bottom))}
.yuzen-iletisim{left:calc(16px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;transition:opacity .25s var(--ease),visibility 0s}
.yukari-cik{right:calc(16px + env(safe-area-inset-right))}
.yuzen-dugme,.yukari-cik{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),background-color .2s,color .2s,opacity .25s var(--ease),visibility 0s}
.yuzen-dugme{position:relative}
.yuzen-dugme::after,.yukari-cik::after{content:"";position:absolute;inset:0 0 -2px}   /* isabet alanı 2px aşağı: kalkan düğmenin eski alt kenarı örtülür → hover alt kenarda titremez */
.yuzen-dugme .ikon,.yukari-cik .ikon{width:24px;height:24px}
.yuzen-dugme--wa .ikon{width:26px;height:26px}   /* resmî WhatsApp işareti (Simple Icons yolu, ÇABA ile aynı); Stitch’in eski çizimi ahizeyi bozuk gösteriyordu */
.yuzen-dugme--wa{background:#1DA851;color:#fff;box-shadow:0 14px 28px -14px rgba(29,168,81,.85)}   /* WhatsApp yeşili (fonksiyonel renk; beyaz ikonla 3,1:1) */
.yuzen-dugme--tel{background:var(--orange);color:var(--ink);box-shadow:0 14px 28px -14px rgba(242,105,33,.85)}
.yukari-cik{background:#fff;color:var(--ink);border:1px solid var(--ink);box-shadow:0 14px 28px -16px rgba(16,37,48,.55)}   /* mürekkep kenarlık: açık zeminde kaybolmasın (kullanıcı isteği) — antet hücreleriyle aynı 1px dil */
/* Basma: hover korumasındaki kurallardan özgül (0,3,0 > 0,2,0) → basılıyken basma kazanır; ikon düğmesi dili (.menu-dugme) */
.yuzen-iletisim .yuzen-dugme:active,.yukari-cik[data-gizli="hayir"]:active{transform:scale(.96)}
.yuzen-iletisim .yuzen-dugme--wa:active{background:#178F45}
.yuzen-iletisim .yuzen-dugme--tel:active{background:#EE6121}   /* .btn--turuncu basma tonu */
.yukari-cik[data-gizli="hayir"]:active{background:var(--ink);color:#fff}
/* Odak: sayfanın halkası + boşluğu dolduran 3px beyaz ara halka → açık zeminde birebir aynı, koyu bölümde de seçilir */
.yuzen-dugme:focus-visible,.yukari-cik:focus-visible{outline:2px solid var(--orange);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.yuzen-dugme--tel:focus-visible{outline-color:var(--ink)}   /* turuncu düğmede mürekkep halka (.btn--turuncu eşi) */
.yuzen-iletisim[data-gizli="evet"],.yukari-cik[data-gizli="evet"]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility 0s linear .25s}
#mobilMenu[data-acik="evet"] ~ .yuzen-iletisim,#mobilMenu[data-acik="evet"] ~ .yukari-cik{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .25s var(--ease),visibility 0s linear .25s}   /* menü belirirken birlikte söner */
@media (prefers-reduced-motion:reduce){
  .yuzen-iletisim,.yuzen-dugme,.yukari-cik{transition:none!important}
  .yuzen-dugme,.yukari-cik{transform:none!important}
}
@media (forced-colors:active){.yuzen-dugme,.yukari-cik{border:2px solid ButtonText}}
@media print{.yuzen-iletisim,.yukari-cik{display:none!important}}

/* Yasal metin penceresi */
.yasal{max-width:720px;width:calc(100% - 32px);max-height:calc(100svh - 48px);border:0;border-radius:8px;padding:0;color:var(--on-surface)}
/* Açılış: pencere 8px aşağıdan, %98,5 ölçekten oturur; perde aynı .25 s'de koyulaşır (@starting-style).
   Kapanış aynı yolu geri yürür: display + overlay allow-discrete pencereyi solarken üst katmanda
   tutar. overlay'i tanımayan tarayıcıda pencere üst katmandan anında düşer ve kalan .25 s'yi sayfanın
   dibinde geçirirdi → kapanış hareketi @supports arkasında, orada kapanış anlıktır. Hareket
   azaltmada ikisi de geçişsiz: genel .01ms kuralı ::backdrop'a ulaşmaz, pencereyi de ilk karede
   saydam bırakırdı (perde koyu, pencere bir kare sonra). */
.yasal{opacity:0;transform:translateY(8px) scale(.985);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.yasal[open]{opacity:1;transform:none}
@starting-style{.yasal[open]{opacity:0;transform:translateY(8px) scale(.985)}}
.yasal::backdrop{background:rgba(16,37,48,0);transition:background-color .25s var(--ease)}
.yasal[open]::backdrop{background:rgba(16,37,48,.62)}
@starting-style{.yasal[open]::backdrop{background:rgba(16,37,48,0)}}
@supports (overlay:auto){
  .yasal{transition:opacity .25s var(--ease),transform .25s var(--ease),overlay .25s allow-discrete,display .25s allow-discrete}
  .yasal::backdrop{transition:background-color .25s var(--ease),overlay .25s allow-discrete,display .25s allow-discrete}
}
@media (prefers-reduced-motion:reduce){.yasal,.yasal::backdrop{transition:none}}
.yasal .menu-dugme{display:inline-flex}   /* kapat düğmesi header'ın ≥1024 ".menu-dugme{display:none}" kuralından muaf (masaüstünde yoktu) */
.yasal__ust{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 24px;background:#fff;border-bottom:1px solid var(--line)}
.yasal__ic{padding:8px 24px 28px}
.yasal h3{font:700 19px/1.3 var(--f-baslik);color:var(--ink);margin:22px 0 8px;scroll-margin-top:80px}
.yasal p{font:400 15px/var(--lh-metin) var(--f-govde);color:var(--slate);margin:0 0 10px}

/* Scroll-reveal — gizleme yalnız html.js altında (KURAL R1) */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.gorunur{opacity:1;transform:none}
.js .reveal--yerinde{transform:none}   /* yalnız opaklık: taşan / tam boy bloklar yerinden oynamaz */

/* ================= DURUMLAR — hover · basma · odak =================
   Hover yalnız gerçek fare/iz yüzeyinde (hover:hover + pointer:fine): dokunmatikte dokunulan
   öğede renk "yapışıp" kalmaz. :focus-visible eşleri korumanın DIŞINDA durur. Hiçbir durum
   kutunun boyunu, dolgusunu ya da konumunu değiştirmez (yalnız renk, opaklık, transform). */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.btn{white-space:nowrap}   /* en uzun etiket "Kabul dosyası için teklif alın" 272px → 320'de sığar */
.btn--cizgi:focus-visible{background-size:100% 100%;color:#fff}
.koyu .btn--cizgi:focus-visible{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn--turuncu:hover{background:#F7921E}
  .btn--cizgi:hover{background-size:100% 100%;color:#fff}
  .koyu .btn--cizgi:hover{color:var(--ink)}
  .btn:hover .ikon--ok{transform:translateX(3px)}
  .bag-cizgi:hover::after{transform:scaleX(1)}
  .bag-cizgi:hover .ikon{transform:translateX(3px)}
  .serit a:hover{color:var(--orange)}
  .nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .baslik__tel:hover{color:var(--primary)}
  .menu-dugme:hover{border-color:var(--ink)}
  .antet__alt button:not([aria-current="true"]):hover{background:var(--mist)}
  .hizmet:hover::after{clip-path:inset(0)}   /* satırın üst çizgisi hizmet rengiyle çizilir */
  .hizmet:hover .hizmet__eylem::after{transform:scaleX(1)}
  .hizmet:hover .hizmet__eylem .ikon{transform:translateX(3px)}
  .pafta__satir:hover{background:rgba(255,255,255,.04)}
  .suzgec button:not([aria-pressed="true"]):hover{background:var(--mist)}
  .sss summary:hover{color:var(--primary)}
  .kunye dd a:hover{color:var(--primary)}
  .vaziyet__alt a:hover{color:var(--primary)}
  /* odaktaki (turuncu) ve hatalı (kırmızı) alanın çizgisini hover ezmez */
  .alan input:not(:focus):not([aria-invalid="true"]):hover,.alan select:not(:focus):not([aria-invalid="true"]):hover,.alan textarea:not(:focus):not([aria-invalid="true"]):hover{border-color:#c9d2d8}
  .onay button:hover{color:var(--primary)}
  .ayak__liste a:hover{color:var(--orange)}
  .ayak__kunye a:hover{color:var(--orange)}
  .ayak__yasal a:hover,.ayak__yasal button:hover{color:var(--orange)}
  .yuzen-dugme:hover,.yukari-cik:hover{transform:translateY(-2px)}
  .yuzen-dugme--wa:hover{background:#178F45}
  .yuzen-dugme--tel:hover{background:var(--amber)}
  .yukari-cik:hover{background:var(--ink);color:#fff}
}
/* Basma — hover'dan SONRA: basılıyken basma rengi kazanır */
.btn:active{transform:translateY(1px)}
.suzgec button:not([aria-pressed="true"]):active{background:var(--line)}   /* bölmeli denetimde hücre kaymaz (antet hücresinin eşi) */
.js .mobil-menu[data-acik="evet"] nav a.btn:active{transform:translateY(1px)}
.btn--turuncu:active{background:#EE6121}   /* --g-turuncu degradesinin koyu durağı */
.menu-dugme{transition:border-color .2s var(--ease),transform .2s var(--ease)}
.menu-dugme:active{transform:scale(.96)}
.antet__alt button:not([aria-current="true"]):active{background:var(--line)}
/* Bileşene özel odak halkaları (nav halkası HEADER bloğunda) */
.antet__alt button:focus-visible{outline-offset:-5px}   /* halka 44px hücrenin İÇİNDE, komşu mürekkep hücreye taşmaz */
.btn--turuncu:focus-visible{outline-color:var(--ink)}
.koyu .btn--turuncu:focus-visible{outline-color:#fff}
/* SSS halkası ::after ile: dikeyde ayraç çizgilerinin 2px İÇİNDE, yatayda içerik hattının 8px
   DIŞINDA → hatta taşan "+" (margin-right:-4px) halkanın içinde kalır, halka onu kesmez */
.sss summary:focus-visible{outline:none}
.sss summary:focus-visible::after{content:"";position:absolute;inset:2px -8px;border:2px solid var(--orange);border-radius:4px;pointer-events:none}

/* Hareket azaltma — eklenen her efekt geri alınır */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero__gorsel img{transform:none!important}
  .hero__slayt[data-onceki]{transition:none}   /* el değiştirme anında; antet harflemesini JS atlar */
  .antet__ilerleme{animation:none!important;transform:scaleX(0)}
  .mobil-menu nav a{opacity:1!important;transform:none!important}
  .alan__hata:not(:empty){animation:none}
  .alan.alan--isaret select{animation:none;box-shadow:inset 3px 0 0 var(--green),0 0 0 3px rgba(242,105,33,.35)}   /* varış halesi ~2 s durağan (JS 2,2 s sonra kaldırır) */
}

/* Zorlanmış renkler (Windows yüksek karşıtlık) */
@media (forced-colors:active){
  .olcu::before,.olcu::after{background:none;-webkit-mask:none;mask:none;border-top:1px solid CanvasText}
  .olcu--dikey::before{border-top:0;border-left:1px solid CanvasText}
  .hizmet::before,.antet__ilerleme{background:CanvasText}
  .hizmet::after,.pafta::before{background:CanvasText}   /* satır üst çizgisi · kabul paftasının kırmızı sekmesi */
  .tikli li::before{background:none;border-top:2px solid CanvasText}
  .btn,.antet{border:1px solid ButtonText}
  .suzgec{border-color:ButtonText}
  .suzgec button+button{border-left-color:ButtonText}
  .suzgec button[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}   /* mürekkep dolgunun yerini sistem vurgusu alır */
  .logo-bant>i{background:CanvasText!important}   /* dört renk degradesi → tek düz çizgi (satır içi stili ezer) */
  .hero__katman::before{box-shadow:none;border:1px solid CanvasText}   /* pafta çerçevesi */
  .antet__alt button[aria-current="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;box-shadow:none}   /* katman çubuğunun yerini sistem vurgusu alır */
  .btn--cizgi,.koyu .btn--cizgi{background-image:none}
  .nav::after,.nav a::after,.mobil-menu nav a:not(.btn)::after{background:CanvasText}
  .nav a:focus-visible{outline:2px solid Highlight}
  .sss summary:focus-visible::after{border-color:Highlight}
  .hero__gorsel picture::after,.hakkimizda-gorsel::after,.proje__gorsel::after{display:none}
  .marka img{forced-color-adjust:none}
}
/* Telefondaki dikey süreç ölçüsü: çizgi düğüm merkezinde (16 + 7,5 = 23,5…24,5) */
@media (forced-colors:active) and (max-width:767px){.adim__olcu::before{border-top:0;border-left:1px solid CanvasText;left:7.5px}}

/* Baskı — ihale/tanıtım dosyasına basılabilir */
@media print{
  @page{margin:14mm}
  .serit,.baslik nav,.menu-dugme,.baslik__ara,.mobil-menu,.antet,.hero__katman,.yuzen-iletisim,.yukari-cik,.suzgec,[data-imza-bari],.atla,form,.hero__gorsel{display:none!important}
  .hero__gorsel img,.hakkimizda-gorsel img,.proje__gorsel img{filter:none!important}
  #hakkimizda .hakkimizda-sutun{margin:0!important}   /* taşan şerit kâğıtta sütununa döner */
  #hakkimizda .hakkimizda-gorsel img{position:static;height:auto;max-height:120mm}   /* 3:4 kaynak tam sayfayı kaplamasın (eski baskı boyu ~460px) */
  #iletisim .iletisim-form{display:none!important}   /* form zaten gizli: boş sis paneli kalmasın */
  #iletisim .iletisim-izgara{display:block}
  #iletisim .iletisim-izgara>*+*{margin-top:24px!important}   /* blok düzende ızgara aralığının eşi (planın satır içi margin:0'ını ezer) */
  .vaziyet__alt{display:block}
  .vaziyet__alt a{display:inline;padding:0 0 0 12px;overflow-wrap:anywhere}   /* basılan uzun harita adresi çerçevede kırılır, kesilmez */
  .bag-cizgi::after{position:static;height:auto;background:none!important;transform:none!important}   /* basılan tel: adresi 2px'lik alt çizgi kutusuna sıkışmaz */
  .hero__gorsel picture::after,.hakkimizda-gorsel::after,.proje__gorsel::after{display:none!important}
  .baslik{position:static;box-shadow:none}
  .hero__slayt{opacity:1!important;visibility:visible!important;position:static;display:block!important;break-inside:avoid}
  .hero__metin{padding:12px 0!important}
  .koyu,footer{background:#fff!important;color:#000!important}
  .koyu *,footer *{color:#000!important;border-color:#999!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .proje,.hizmet,.pafta__satir,.adim,details{break-inside:avoid}
  details>.cevap{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
  a[href^="tel:"]::after{content:" " attr(href);font-size:10px}
}


/* ================= ANASAYFA ↔ İÇ SAYFA ORTAK =================
   İç sayfaların bileşenleri assets/css/ic.css'te (yalnız iç sayfalarda yüklenir). */
/* Hizmet başlığı bağlantı (fihrist): alt çizgi katman renginde, kutu oynamaz */
.hizmet__bag{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .25s var(--ease)}
.hizmet__bag:focus-visible{text-decoration-color:var(--renk)}
@media (hover:hover) and (pointer:fine){.hizmet__bag:hover{text-decoration-color:var(--renk)}}
/* Bulunulan sayfa — mobil menüde "buradasınız" sekmesi (anasayfada scrollspy "true", iç sayfada "page") */
.mobil-menu nav a[aria-current="page"]::after{transform:scaleX(1)}
.mobil-menu nav a[aria-current="page"] .no{color:var(--primary)}
/* İç sayfada menü göstergesi fontlar oturana dek geçişsiz yerleşir (açılışta soldan kaymaz) */
.nav.iz-anlik::after{transition:none}
button.bag-cizgi{background:none;border:0;padding:0;cursor:pointer}
/* Proje kartı → proje detay sayfası: başlıktaki bağlantı kartın tamamını kaplar (tek sekme durağı, kart
   içinde başka bağlantı yok). Hover yalnız görsel ölçeği + başlık alt çizgisi; kutu oynamaz. */
.proje{position:relative}
.proje__bag{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .25s var(--ease)}
.proje__bag::after{content:"";position:absolute;inset:0;z-index:2}
.proje__bag:focus-visible{outline:none;text-decoration-color:currentColor}
.proje:has(.proje__bag:focus-visible){outline:2px solid var(--orange);outline-offset:6px}
.proje__gorsel img{transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .proje:hover .proje__bag{text-decoration-color:currentColor}
  .proje:hover .proje__gorsel img{transform:scale(1.04)}
}