/*! Karşıyaka Su Tesisat — tema stili. Kaynak: assets/css/src/*.css
    Bu dosya ÜRETİLMİŞTİR, elle düzenlemeyin. Bkz docs/CSS-BUILD.md */

/* ===== 00-tokens.css ===== */
/* Manrope - self-host (degisken font, latin + latin-ext alt kumeleri).
   Kaynak: Google Fonts v20 - SIL Open Font License 1.1
   Not: dosyalar assets/fonts/ altinda; theme.css assets/css/ icinde uretildigi
   icin yol ../fonts/ olarak yazilir. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tema jetonlari — docs/MIMARI.md §8 ile birebir. */
:root{
  /* lacivert ailesi */
  --kst-navy-900:#0A1638;  --kst-navy-800:#0D1E5A;  --kst-navy-700:#0E2160;
  --kst-navy-600:#0E205E;  --kst-baslik:#0D1B4C;
  /* metin */
  --kst-metin:#5A6690;     --kst-metin-koyu:#44507A; --kst-metin-orta:#33406E;
  /* --kst-metin-etiket 13px/700 etiketlerde kullanildigi icin AA normal metin
     esigini tutmali: #7183AE 3.78:1 idi, #616F9B beyaz uzerinde 4.93:1. */
  --kst-metin-silik:#67729B; --kst-metin-etiket:#616F9B; --kst-metin-pasif:#9AA6C9;
  --kst-ayrac-metin:#B4BEDC;
  /* mavi */
  --kst-mavi:#1660E8;      --kst-mavi-koyu:#0E47B8;  --kst-mavi-acik:#2D74F2;
  --kst-mavi-zemin:#E8F0FE; --kst-mavi-zemin-2:#DFEBFD; --kst-mavi-zemin-3:#EAF1FB;
  --kst-mavi-yuzey:#F5F9FF; --kst-mavi-panel:#EFF5FE;
  /* turkuaz */
  --kst-turkuaz:#2FB8D8;   --kst-turkuaz-koyu:#17A2C6; --kst-turkuaz-zemin:#E1F6FB;
  --kst-turkuaz-yuzey:#F0FAFD; --kst-turkuaz-kenar:#C9E4F0; --kst-turkuaz-metin:#33607A;
  /* yüzey ve kenar */
  --kst-beyaz:#FFFFFF;     --kst-yuzey:#F4F8FD;      --kst-yuzey-2:#FAFCFF;
  --kst-kenar:#E3EAF6;     --kst-kenar-2:#E9EFF9;    --kst-kenar-3:#EEF2FA;
  --kst-kenar-4:#E7EDF8;   --kst-kenar-5:#E1E9F6;    --kst-kenar-gorsel:#DCE6F6;
  --kst-kenar-buton:#D9E4F5; --kst-kenar-rozet:#CFDEF6; --kst-kenar-kesik:#C5D6F2;
  --kst-kenar-kesik-2:#C9D6EE; --kst-kenar-hover:#BBD1F5;
  /* Yuzen panel kenari: SC 1.4.11 grafik ayirt edilebilirligi 3:1 ister;
     --kst-kenar (#E3EAF6) beyaz uzerinde 1.21:1 kaliyordu. Bu 3.35:1. */
  --kst-kenar-panel:#7E8CB0;
  /* whatsapp — beyaz metin tasiyan her yuzeyde AA (>=4.5:1) tutmasi icin
     koyultuldu: #1DA851 beyazla 3.10:1 idi, #0F7A38 5.44:1.
     Marka yesili yalnizca dekoratif (ikon/kenarlik) kullanim icin saklanir. */
  --kst-wa:#0F7A38;        --kst-wa-koyu:#0B6430;    --kst-wa-koyu-2:#0A5C2C;
  --kst-wa-parlak:#1DA851;
  /* Buton takma adlari: yesil jetonu buton disi kullanimlarda ayrisirsa
     .kst-btn--wa / .kst-sticky__btn--wa bu ikisine baglanabilir. */
  --kst-wa-buton:#0F7A38;  --kst-wa-buton-hover:#0B6430;
  --kst-wa-zemin:#F2FBF5;
  /* koyu zemin üstü */
  --kst-uzeri-metin:#B9C4E8; --kst-uzeri-silik:#8FA3D8; --kst-uzeri-topbar:#9FB3E8;
  --kst-uzeri-mavi:#9CC2FF;  --kst-uzeri-mavi-2:#7BB0FF; --kst-uzeri-mavi-3:#5EA0FF;
  --kst-uzeri-yesil:#7ADFA0; --kst-uzeri-yesil-2:#B2F2CC; --kst-uzeri-govde:#B9C9F2;
  /* ölçü */
  --kst-kap:1200px;        --kst-kap-pad:clamp(20px,4vw,40px);
  --kst-bolum-pad:clamp(64px,8vw,110px);
  --kst-bolum-pad-ic:clamp(64px,8vw,100px);
  --kst-header-y:76px;     --kst-topbar-y:38px;
  --kst-r-xs:7px; --kst-r-s:9px; --kst-r-m:11px; --kst-r-l:14px;
  --kst-r-xl:16px; --kst-r-2xl:20px; --kst-r-3xl:24px; --kst-r-pill:999px;
  /* gölge */
  --kst-g-kart:0 1px 2px rgba(13,27,76,.04);
  --kst-g-kart-h:0 18px 38px rgba(13,27,76,.10);
  --kst-g-mavi:0 8px 20px rgba(22,96,232,.25);
  --kst-g-mavi-buyuk:0 10px 26px rgba(22,96,232,.30);
  --kst-g-header:0 10px 30px rgba(13,27,76,.07);
  --kst-g-gorsel:0 24px 60px rgba(13,27,76,.10);
  --kst-g-yuzen:0 16px 36px rgba(13,27,76,.13);
  --kst-g-yuzen-koyu:0 16px 36px rgba(13,27,76,.25);
  --kst-g-panel:0 30px 70px rgba(4,10,35,.45);
  --kst-g-beyaz:0 12px 30px rgba(0,0,0,.25);
  /* gradient */
  --kst-grad-hero:linear-gradient(180deg,#F2F7FE 0%,#FAFCFF 72%,#fff 100%);
  --kst-grad-ic-hero:linear-gradient(180deg,#F3F7FE 0%,#FBFDFF 70%,#fff 100%);
  --kst-grad-koyu:radial-gradient(640px 320px at 88% 12%,rgba(22,96,232,.38),transparent 62%),
                  radial-gradient(520px 280px at 6% 95%,rgba(47,184,216,.16),transparent 60%),
                  linear-gradient(120deg,#0E205E,#0A1638 65%);
  --kst-grad-panel:radial-gradient(560px 300px at 80% 0%,rgba(22,96,232,.4),transparent 60%),
                   radial-gradient(420px 260px at 10% 100%,rgba(47,184,216,.18),transparent 60%),
                   linear-gradient(130deg,#0E205E,#0A1638 70%);
  --kst-grad-bolge:radial-gradient(700px 360px at 85% 10%,rgba(22,96,232,.30),transparent 60%),
                   radial-gradient(520px 300px at 5% 95%,rgba(47,184,216,.14),transparent 60%),
                   linear-gradient(130deg,#0E2160,#0A1638);
  --kst-gecis:all .2s ease;
  --kst-gecis-kart:all .25s ease;
}

/* Ek jetonlar — docs/TASARIM.md'de geçen ama §8 listesinde bulunmayan degerler.
   Renk sabitinin dosyalara dagilmamasi icin burada tanimlanir. */
:root{
  --kst-beyaz-hover:#F0F6FF;    /* .kst-btn--beyaz hover zemini (TASARIM 4.4) */
  --kst-beyaz-hover-2:#EAF1FF;  /* koyu bolge hero beyaz buton hover (TASARIM 8.1) */
  --kst-uzeri-govde-2:#9FB2E4;  /* hero alt yuzen kutu alt satiri (TASARIM 4.1) */
  --kst-mavi-zemin-4:#E9F0FA;   /* one cikan hizmet cerceve zemini (TASARIM 4.7) */
  --kst-kenar-kesik-3:#C9D9F4;  /* bolge surec kesikli cizgisi (TASARIM 8.3) */
  --kst-uzeri-ayrac:#3D4E8C;    /* koyu hero breadcrumb ayraci (TASARIM 8.1) */
}

/* ===== 10-base.css ===== */
/* Temel: sifirlama, tipografi, baglanti, odak halkasi, yardimcilar, keyframes.
   Bu dosyada @media YAZILMAZ (tek istisna: prefers-reduced-motion). */

/* --- sifirlama --- */
*,
*::before,
*::after{box-sizing:border-box}

body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,fieldset{margin:0}

ul[class],ol[class]{list-style:none;padding:0}

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

/* Yukaridaki display:block, tarayicinin [hidden]{display:none} kuralini ezer;
   hamburger butonundaki kapali ikon JS calisana kadar gorunur kalirdi. */
[hidden]{display:none !important}

/* <main> semantik kabuk — gorsel kurali yok, yalnizca blok akisi garanti. */
.kst-ana{display:block}

/* --- kok --- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:132px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:var(--kst-baslik);
  background:var(--kst-beyaz);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* --- baglantilar --- */
a{color:var(--kst-mavi);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--kst-mavi-koyu)}

/* --- basliklar --- */
h1,h2,h3,h4,h5,h6{
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--kst-baslik);
  text-wrap:balance;
}

p{text-wrap:pretty}

strong,b{font-weight:800}

/* --- form ogeleri font kalitimi --- */
button,input,select,textarea,optgroup{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
button{background:none;border:0;cursor:pointer}
textarea{resize:vertical}

/* --- secim --- */
::selection{background:var(--kst-mavi);color:var(--kst-beyaz)}

/* --- odak halkasi --- */
:focus-visible{outline:3px solid var(--kst-mavi);outline-offset:2px}
.kst-koyu :focus-visible,
.kst-koyu:focus-visible,
.kst-bolum--koyu :focus-visible{outline-color:var(--kst-uzeri-mavi)}

/* --- gorsel gizli, ekran okuyucuya acik --- */
.kst-gizli{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- icerige atla (yalniz odaklandiginda gorunur) --- */
.kst-atla{
  position:absolute;
  top:-120px;
  left:16px;
  z-index:200;
  display:inline-block;
  padding:12px 20px;
  font-size:15px;
  font-weight:800;
  color:var(--kst-beyaz);
  background:var(--kst-mavi);
  border-radius:0 0 var(--kst-r-s) var(--kst-r-s);
  box-shadow:var(--kst-g-mavi);
  transition:top .2s ease;
}
.kst-atla:focus,
.kst-atla:focus-visible{top:0;color:var(--kst-beyaz)}

/* --- animasyonlar --- */
@keyframes kfUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes kfFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Gorunume girince belirme.
   JS yoksa icerik daima gorunur kalir: taban kuralda opacity dusurulmez.
   IntersectionObserver .kst-gorunur ekler; kaydirma gudumlu zaman cizelgesini
   destekleyen tarayicida .kst-anim dogrudan view() ile calisir. */
.kst-gorunur{animation:kfUp .6s ease both}

@supports (animation-timeline: view()){
  .kst-anim{
    animation:kfUp .6s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 35%;
  }
}

/* --- hareket azaltma --- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  a:hover,
  a:focus-visible,
  button:hover,
  button:focus-visible{transform:none !important}
}

/* ===== 20-layout.css ===== */
/* Duzen: kapsayici, bolum iskeleti, baslik bloklari, etiket/rozet, butonlar, izgaralar.
   Bu dosyada @media YAZILMAZ. */

/* --- kapsayici --- */
.kst-kap{
  width:100%;
  max-width:var(--kst-kap);
  margin-left:auto;
  margin-right:auto;
  padding:0 var(--kst-kap-pad);
}

/* --- bolum --- */
.kst-bolum{
  position:relative;
  padding:var(--kst-bolum-pad) 0;
  background:var(--kst-beyaz);
}
.kst-bolum--yuzey{
  background:var(--kst-yuzey);
  border-top:1px solid var(--kst-kenar-2);
  border-bottom:1px solid var(--kst-kenar-2);
}
.kst-bolum--koyu{
  overflow:hidden;
  background:var(--kst-grad-koyu);
  color:var(--kst-uzeri-metin);
}
/* Ic sayfa ritmi: ana sayfadan bir tik dar bolum dolgusu (TASARIM §7-§8). */
.kst-bolum--ic{
  padding:var(--kst-bolum-pad-ic) 0;
}

/* --- bolum baslik blogu --- */
.kst-bolum__ust{max-width:640px}
.kst-bolum__ust--satir{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  max-width:none;
}
.kst-bolum__baslik{
  margin:14px 0 0;
  font-size:clamp(30px,3.4vw,44px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--kst-baslik);
}
.kst-bolum__aciklama{
  margin:16px 0 0;
  font-size:16.5px;
  line-height:1.65;
  color:var(--kst-metin);
}

/* koyu zemin uzerindeki baslik blogu */
.kst-koyu .kst-bolum__baslik,
.kst-bolum--koyu .kst-bolum__baslik{color:var(--kst-beyaz)}
.kst-koyu .kst-bolum__aciklama,
.kst-bolum--koyu .kst-bolum__aciklama{color:rgba(255,255,255,.75)}
.kst-koyu .kst-etiket,
.kst-bolum--koyu .kst-etiket{color:var(--kst-uzeri-mavi)}

/* --- bolum etiketi --- */
.kst-etiket{
  display:block;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--kst-mavi);
}

/* --- rozet --- */
.kst-rozet{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--kst-kenar-rozet);
  border-radius:var(--kst-r-pill);
  background:rgba(255,255,255,.8);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.2;
  color:var(--kst-baslik);
}
.kst-rozet svg{flex:none;color:var(--kst-mavi)}
.kst-rozet--acik{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:var(--kst-beyaz);
}
.kst-rozet--acik svg{color:var(--kst-uzeri-mavi)}

/* --- butonlar --- */
.kst-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 28px;
  border:1.5px solid transparent;
  border-radius:var(--kst-r-m);
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:var(--kst-gecis);
}
.kst-btn svg{flex:none}

/* mavi (birincil) */
.kst-btn--mavi{
  background:var(--kst-mavi);
  border-color:var(--kst-mavi);
  color:var(--kst-beyaz);
  box-shadow:var(--kst-g-mavi-buyuk);
}
.kst-btn--mavi:hover{
  background:var(--kst-mavi-koyu);
  border-color:var(--kst-mavi-koyu);
  color:var(--kst-beyaz);
  transform:translateY(-2px);
}

/* beyaz (koyu zemin uzerinde birincil) */
.kst-btn--beyaz{
  background:var(--kst-beyaz);
  border-color:var(--kst-beyaz);
  color:var(--kst-baslik);
  box-shadow:var(--kst-g-beyaz);
}
.kst-btn--beyaz svg{color:var(--kst-mavi)}
.kst-btn--beyaz:hover{
  background:var(--kst-beyaz-hover);
  border-color:var(--kst-beyaz-hover);
  color:var(--kst-baslik);
  transform:translateY(-2px);
}

/* whatsapp — zemin beyaz metin tasidigi icin AA jetonu kullanilir (5.44:1) */
.kst-btn--wa{
  background:var(--kst-wa-buton);
  border-color:var(--kst-wa-buton);
  color:var(--kst-beyaz);
}
.kst-btn--wa:hover{
  background:var(--kst-wa-buton-hover);
  border-color:var(--kst-wa-buton-hover);
  color:var(--kst-beyaz);
  transform:translateY(-2px);
}

/* cizgili (acik zemin ikincil — whatsapp vurgulu) */
.kst-btn--cizgi{
  background:var(--kst-beyaz);
  border-color:var(--kst-kenar-buton);
  color:var(--kst-baslik);
}
/* Ikon ve kenarlik metin tasimaz (esik 3:1) — marka yesili burada korunur. */
.kst-btn--cizgi svg{color:var(--kst-wa-parlak)}
.kst-btn--cizgi:hover{
  border-color:var(--kst-wa-parlak);
  background:var(--kst-wa-zemin);
  color:var(--kst-baslik);
  transform:translateY(-2px);
}

/* navy (acik zemin uzerinde koyu ikincil) */
.kst-btn--navy{
  padding:14px 24px;
  border-radius:10px;
  background:var(--kst-navy-800);
  border-color:var(--kst-navy-800);
  font-size:15px;
  color:var(--kst-beyaz);
}
.kst-btn--navy:hover{
  background:var(--kst-mavi);
  border-color:var(--kst-mavi);
  color:var(--kst-beyaz);
  transform:translateY(-2px);
}

/* hayalet (koyu zemin uzerinde ikincil) */
.kst-btn--hayalet{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);
  color:var(--kst-beyaz);
}
/* Koyu zeminde de olsa hover zemini beyaz metin tasir → AA jetonu. */
.kst-btn--hayalet:hover{
  background:var(--kst-wa-buton);
  border-color:var(--kst-wa-buton);
  color:var(--kst-beyaz);
  transform:translateY(-2px);
}

/* kucuk (header CTA ve dar alanlar) */
.kst-btn--kucuk{
  padding:13px 22px;
  border-radius:10px;
  gap:9px;
  font-size:15px;
}
.kst-btn--mavi.kst-btn--kucuk{box-shadow:var(--kst-g-mavi)}
.kst-btn--kucuk:hover{transform:translateY(-1px)}

/* tam genislik */
.kst-btn--blok{width:100%;justify-content:center}

/* --- izgara yardimcilari --- */
.kst-izgara{display:grid;gap:20px}
.kst-izgara--250{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.kst-izgara--280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.kst-izgara--290{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.kst-izgara--300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* ===== 30-chrome.css ===== */
/* Sayfa cercevesi: topbar, header, logo, nav, mobil menu, footer, sticky CTA.
   Bu dosyada @media YAZILMAZ — kirilma noktalari 90-responsive.css'te.

   Beklenen iskelet:
   <header class="kst-header">
     <div class="kst-topbar">…</div>        (sabit basligin ilk satiri, yalniz >=1080px)
     <div class="kst-kap kst-header__ic">…</div>
   </header>
   <div class="kst-mobil__panel">…</div>
*/

/* ===== topbar (yalniz >=1080px; 1080px altinda gizlenir) ===== */
.kst-topbar{
  background:var(--kst-navy-900);
}
.kst-topbar__ic{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:var(--kst-topbar-y);
  width:100%;
  max-width:var(--kst-kap);
  margin-left:auto;
  margin-right:auto;
  padding:0 var(--kst-kap-pad);
}
.kst-topbar__yer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--kst-uzeri-topbar);
}
.kst-topbar__yer svg{flex:none;color:var(--kst-uzeri-topbar)}
.kst-topbar__baglantilar{
  display:flex;
  align-items:center;
  gap:22px;
}
.kst-topbar__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:800;
  color:var(--kst-beyaz);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-topbar__link svg{flex:none}
.kst-topbar__link:hover{color:var(--kst-uzeri-mavi)}
.kst-topbar__link--wa{color:var(--kst-uzeri-yesil)}
.kst-topbar__link--wa:hover{color:var(--kst-uzeri-yesil-2)}

/* ===== header ===== */
.kst-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:90;
  background:rgba(255,255,255,0);
  border-bottom:1px solid rgba(255,255,255,0);
  box-shadow:none;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
/* ana sayfa: kaydirinca opaklasir */
.kst-header--kaydi{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--kst-kenar);
  box-shadow:var(--kst-g-header);
}
/* ic sayfalar: daima opak, golge yalniz kaydirinca */
.kst-header--ic{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--kst-kenar);
  box-shadow:none;
}
.kst-header--ic.kst-header--kaydi{
  background:rgba(255,255,255,.94);
  box-shadow:var(--kst-g-header);
}

.kst-header__ic{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--kst-header-y);
  width:100%;
  max-width:var(--kst-kap);
  margin-left:auto;
  margin-right:auto;
  padding:0 var(--kst-kap-pad);
}

/* ===== logo ===== */
/* Bulgu 1: flex:none idi; logo daralamadigi icin 320-384px'te hamburger'i
   kadrajin disina itiyordu. Artik daralabilir. */
.kst-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 1 auto;
  min-width:0;
  color:var(--kst-baslik);
  text-decoration:none;
}
.kst-logo:hover{color:var(--kst-baslik)}
/* Gorsel logo dali: dar ekranda oranini bozmadan kuculebilsin. */
.kst-logo__img{
  display:block;
  height:44px;
  width:auto;
  min-width:0;
  max-width:100%;
  object-fit:contain;
}
/* gorsel logo yoksa yazi logosu */
.kst-logo__yazi{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--kst-baslik);
  white-space:nowrap;
  min-width:0;
}
/* Bulgu 1: yalniz basliktaki logo dar ekranda olceklenir (footer logosu 20px
   kalir); >=435px'te yine 20px oldugu icin masaustu gorunumu degismez. */
.kst-logo .kst-logo__yazi{font-size:clamp(15px,4.6vw,20px)}
.kst-logo__yazi svg{flex:none;color:var(--kst-mavi)}
.kst-koyu .kst-logo__yazi{color:var(--kst-beyaz)}

/* ===== nav (1080px altinda gizlenir) ===== */
.kst-nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
}
.kst-nav__link{
  font-size:15px;
  font-weight:700;
  color:var(--kst-baslik);
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s ease;
}
.kst-nav__link:hover{color:var(--kst-mavi)}
.kst-nav__link--aktif{color:var(--kst-mavi);transition:none}

/* ===== acilir menu paneli (TASARIM 2.1) =====
   Nav 1080px altinda gizlendigi icin bu blok pratikte yalniz >=1080.02px'te
   gorunur; theme.js de matchMedia('(min-width:1080.02px)') ile ayni esigi kullanir.
   Panel `hidden` ile baslar (10-base.css: [hidden]{display:none !important}),
   JS once hidden'i kaldirir, zorlanmis yeniden duzenden SONRA .kst-panel--acik
   ekler — SSS akordeonundaki kanitlanmis desenin aynisi. */
.kst-nav__grup{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.kst-nav__ok{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex:none;
  padding:0;
  border-radius:var(--kst-r-xs);
  color:var(--kst-baslik);
  cursor:pointer;
  /* rotate BAGIMSIZ ozellik: hareket azaltmada 10-base.css `button:hover{
     transform:none !important}` kuralinin oku duzlestirmesini onler. */
  transition:color .2s ease,rotate .2s ease;
}
.kst-nav__ok svg{flex:none;width:12px;height:12px}
.kst-nav__ok:hover{color:var(--kst-mavi)}
.kst-nav__grup:hover .kst-nav__link--gruplu{color:var(--kst-mavi)}
.kst-nav__ok[aria-expanded="true"]{color:var(--kst-mavi);rotate:180deg}

.kst-panel{
  position:absolute;
  top:100%;
  /* Panel gruba gore ORTALANIR (sol/sag hizalamada 4 kolonlu bolge paneli
     1081px'te kapsayicidan tasiyordu). Ortalama negatif margin ile yapilir:
     `transform` acilis animasyonuna ayrilmistir, `translate` bagimsiz ozelligi
     ise eski tarayicida sessizce dusup paneli saga kaydirirdi. */
  left:50%;
  z-index:95;
  margin-top:10px;
  padding:18px;
  background:var(--kst-beyaz);
  border:1px solid var(--kst-kenar-panel);
  border-radius:var(--kst-r-l);
  box-shadow:var(--kst-g-kart-h);
  /* Kisa ekranda (vh<600) panel viewport'u asiyor, "Tum Hizmetler" baglantisi
     erisilemez oluyordu; header position:fixed oldugu icin sayfayi kaydirmak da
     kurtarmiyordu. Panel artik kendi icinde kayar. */
  max-height:calc(100vh - var(--kst-header-y) - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease;
}
.kst-panel--acik{opacity:1;transform:none}
.kst-panel--hizmet{
  width:min(520px,calc(100vw - 40px));
  margin-left:calc(min(520px,100vw - 40px) / -2);
}
.kst-panel--bolge{
  width:min(600px,calc(100vw - 40px));
  margin-left:calc(min(600px,100vw - 40px) / -2);
}
.kst-panel__liste{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px 8px;
}
.kst-panel__liste--iki{grid-template-columns:repeat(2,minmax(0,1fr))}
.kst-panel__liste--dort{grid-template-columns:repeat(4,minmax(0,1fr))}
.kst-panel__oge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--kst-r-s);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:var(--kst-baslik);
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}
.kst-panel__oge:hover{color:var(--kst-mavi);background:var(--kst-mavi-yuzey)}
.kst-panel__ikon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:8px;
  background:var(--kst-mavi-zemin);
  color:var(--kst-mavi);
}
.kst-panel__ikon svg{width:17px;height:17px}
/* Bolge paneli ikonsuzdur; dort kolonda daha dar bosluk kullanir. */
.kst-panel--bolge .kst-panel__oge{padding:9px 10px}
.kst-panel__tum{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:13px 12px 1px;
  border-top:1px solid var(--kst-kenar-3);
  font-size:14.5px;
  font-weight:800;
  color:var(--kst-mavi);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-panel__tum:hover{color:var(--kst-mavi-koyu)}
.kst-panel__tum svg{flex:none;width:16px;height:16px;transition:transform .2s ease}
.kst-panel__tum:hover svg{transform:translateX(3px)}

/* sag CTA grubu (1080px altinda gizlenir) */
.kst-nav__ctalar{
  display:flex;
  align-items:center;
  gap:10px;
}
.kst-nav__wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  flex:none;
  border:1.5px solid var(--kst-kenar-buton);
  border-radius:10px;
  background:var(--kst-beyaz);
  color:var(--kst-wa);
  transition:var(--kst-gecis);
}
.kst-nav__wa:hover{
  border-color:var(--kst-wa);
  background:var(--kst-wa-zemin);
  color:var(--kst-wa);
  transform:translateY(-1px);
}

/* ===== mobil header ogeleri (temelde kapali, <=1080px'te acilir) ===== */
.kst-mobil{
  display:none;
  align-items:center;
  gap:10px;
}
.kst-mobil__ara{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  border:1.5px solid var(--kst-mavi);
  border-radius:10px;
  background:var(--kst-mavi);
  color:var(--kst-beyaz);
  transition:var(--kst-gecis);
}
.kst-mobil__ara:hover{
  background:var(--kst-mavi-koyu);
  border-color:var(--kst-mavi-koyu);
  color:var(--kst-beyaz);
}
.kst-mobil__ac{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  padding:0;
  border:1.5px solid var(--kst-kenar-buton);
  border-radius:10px;
  background:var(--kst-beyaz);
  color:var(--kst-baslik);
  cursor:pointer;
  transition:var(--kst-gecis);
}
.kst-mobil__ac:hover{border-color:var(--kst-kenar-hover);color:var(--kst-mavi)}

/* ===== mobil menu paneli ===== */
.kst-mobil__panel{
  display:none;
  position:fixed;
  inset:0;
  z-index:85;
  flex-direction:column;
  padding:96px 24px 32px;
  background:var(--kst-beyaz);
  overflow:auto;
  overscroll-behavior:contain;
}
.kst-mobil__panel--acik{display:flex}
.kst-mobil__link{
  padding:16px 2px;
  border-bottom:1px solid var(--kst-kenar-3);
  font-size:19px;
  font-weight:800;
  color:var(--kst-baslik);
  text-decoration:none;
}
.kst-mobil__link:hover{color:var(--kst-mavi)}
.kst-mobil__link--aktif{color:var(--kst-mavi)}
/* --- mobil alt menu (TASARIM 2.1) --- */
.kst-mobil__grup{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--kst-kenar-3);
}
.kst-mobil__grup .kst-mobil__link{
  flex:1 1 auto;
  min-width:0;
  border-bottom:0;
}
.kst-mobil__alt-ac{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  padding:0;
  border-radius:10px;
  color:var(--kst-baslik);
  cursor:pointer;
  /* `rotate` bagimsiz ozellik — bkz .kst-nav__ok gerekcesi. */
  transition:color .2s ease,rotate .2s ease;
}
.kst-mobil__alt-ac svg{flex:none}
.kst-mobil__alt-ac:hover{color:var(--kst-mavi)}
.kst-mobil__alt-ac[aria-expanded="true"]{color:var(--kst-mavi);rotate:180deg}
.kst-mobil__alt{
  list-style:none;
  margin:0;
  padding:8px 0 12px;
  display:grid;
  gap:2px 8px;
  border-bottom:1px solid var(--kst-kenar-3);
}
.kst-mobil__alt--iki{grid-template-columns:repeat(2,minmax(0,1fr))}
.kst-mobil__alt-oge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 8px;
  border-radius:var(--kst-r-s);
  font-size:15.5px;
  font-weight:700;
  line-height:1.3;
  color:var(--kst-metin);
  text-decoration:none;
}
.kst-mobil__alt-oge:hover{color:var(--kst-mavi);background:var(--kst-mavi-yuzey)}
.kst-mobil__alt-ikon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:8px;
  background:var(--kst-mavi-zemin);
  color:var(--kst-mavi);
}
.kst-mobil__alt-ikon svg{width:17px;height:17px}
.kst-mobil__ctalar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:28px;
  /* Alt menuler acilinca Ara/WhatsApp butonlari panelin ~800px altina
     itiliyordu (olculdu: 320px'te 840px kaydirma gerekiyordu). Panel zaten
     overflow:auto oldugu icin CTA'lar alta yapisip her zaman gorunur kalir. */
  position:sticky;
  bottom:-32px;
  margin-bottom:-32px;
  padding:14px 0 calc(32px + env(safe-area-inset-bottom));
  background:var(--kst-beyaz);
  box-shadow:0 -12px 18px -12px rgba(13,27,76,.18);
}
.kst-mobil__ctalar .kst-btn{
  width:100%;
  padding:16px;
  border-radius:12px;
  font-size:16px;
  box-shadow:none;
}
.kst-mobil__not{
  margin:18px 0 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--kst-metin);
  text-align:center;
}

/* ===== footer ===== */
.kst-footer{
  background:var(--kst-navy-900);
  color:var(--kst-uzeri-metin);
  padding:clamp(56px,7vw,80px) 0 0;
}
.kst-footer__izgara{
  display:grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:44px clamp(32px,4vw,56px);
}
.kst-footer__marka{min-width:0}
.kst-footer__logo{
  display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:var(--kst-beyaz);
}
.kst-footer__logo img{display:block;height:38px;width:auto}
.kst-footer__logo .kst-logo__yazi{color:var(--kst-baslik)}
.kst-footer__ozet{
  margin:18px 0 0;
  max-width:280px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--kst-uzeri-silik);
}
.kst-footer__baslik{
  margin:0 0 18px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.kst-footer__liste{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.kst-footer__link{
  font-size:14.5px;
  font-weight:600;
  color:var(--kst-uzeri-metin);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-footer__link:hover{color:var(--kst-beyaz)}
.kst-footer__tel{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:800;
  color:var(--kst-beyaz);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-footer__tel svg{flex:none}
.kst-footer__tel:hover{color:var(--kst-uzeri-mavi)}
.kst-footer__wa{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-size:14.5px;
  font-weight:700;
  color:var(--kst-uzeri-yesil);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-footer__wa svg{flex:none}
.kst-footer__wa:hover{color:var(--kst-uzeri-yesil-2)}
.kst-footer__bolge{
  margin:18px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--kst-uzeri-silik);
}
.kst-footer__alt{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:56px;
  padding:22px 0 26px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;
  color:rgba(255,255,255,.55);
}
.kst-footer__yasal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
}
.kst-footer__yasal a{
  font-size:13.5px;
  font-weight:600;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  transition:color .2s ease;
}
.kst-footer__yasal a:hover{color:var(--kst-beyaz)}

/* ===== mobil sabit CTA (temelde kapali, <=1080px'te acilir) ===== */
.kst-sticky{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--kst-kenar);
}
.kst-sticky__btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px;
  border-radius:10px;
  font-size:15px;
  font-weight:800;
  line-height:1.1;
  color:var(--kst-beyaz);
  background:var(--kst-mavi);
  text-decoration:none;
  white-space:nowrap;
}
.kst-sticky__btn svg{flex:none}
.kst-sticky__btn:hover{color:var(--kst-beyaz)}
.kst-sticky__btn--wa{background:var(--kst-wa)}
.kst-sticky .kst-btn{flex:1;box-shadow:none}
/* sabit CTA'nin sayfa sonunu ortmemesi icin bosluk */
.kst-sticky__bosluk{display:none;height:64px}

/* ===== 40-home.css ===== */
/* 40-home.css — Ana sayfa bölümleri (TASARIM.md §4.1–4.12)
   Renkler yalnız 00-tokens.css değişkenleriyle verilir.
   Bu dosyada @media YOK (tek istisna: prefers-reduced-motion). */

/* ==========================================================================
   4.1 Hero
   ========================================================================== */

.kst-hero {
  position: relative;
  overflow: hidden;
  background: var(--kst-grad-hero);
  padding: clamp(112px, 14vw, 164px) 0 clamp(56px, 7vw, 92px);
}

/* katman 1 — ince ızgara dokusu */
.kst-hero__izgara {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 27, 76, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 76, .05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(760px 520px at 76% 34%, #000 15%, transparent 72%);
  mask-image: radial-gradient(760px 520px at 76% 34%, #000 15%, transparent 72%);
}

/* katman 2 — renkli lekeler */
.kst-hero__leke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 84% 20%, rgba(22, 96, 232, .10), transparent 65%),
    radial-gradient(520px 360px at 6% 92%, rgba(47, 184, 216, .08), transparent 60%);
}

.kst-hero__ic {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.kst-hero__sol {
  flex: 1 1 500px;
  max-width: 640px;
}

.kst-hero__rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--kst-kenar-rozet);
  background: rgba(255, 255, 255, .8);
  border-radius: var(--kst-r-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--kst-baslik);
  animation: kfUp .6s ease both;
}

.kst-hero__rozet svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--kst-mavi);
  stroke-width: 2.2;
}

.kst-hero__h1 {
  margin: 22px 0 0;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--kst-baslik);
  animation: kfUp .6s .08s ease both;
}

.kst-hero__vurgu {
  color: var(--kst-mavi);
}

.kst-hero__metin {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.65;
  color: var(--kst-metin-koyu);
  max-width: 520px;
  text-wrap: pretty;
  animation: kfUp .6s .16s ease both;
}

.kst-hero__ctalar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  animation: kfUp .6s .24s ease both;
}

.kst-hero__guven {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 30px;
  animation: kfUp .6s .32s ease both;
}

.kst-hero__guven-oge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-hero__guven-oge svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* --- sağ sütun: görsel çerçevesi ve yüzen kutular --- */

.kst-hero__figur {
  position: relative;
  flex: 1 1 400px;
  max-width: 560px;
  margin: 0 auto;
}

/* eğik arka pano (dekoratif) */
.kst-hero__figur::before {
  content: "";
  position: absolute;
  inset: 8% -4% -4% 8%;
  background: linear-gradient(135deg, rgba(22, 96, 232, .10), rgba(47, 184, 216, .08));
  border-radius: var(--kst-r-3xl);
  transform: rotate(-2.5deg);
}

.kst-hero__cerceve {
  position: relative;
  border: 1px solid var(--kst-kenar-gorsel);
  border-radius: var(--kst-r-2xl);
  background: var(--kst-mavi-zemin-3);
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  box-shadow: var(--kst-g-gorsel);
}

.kst-hero__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kst-hero__kutu {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--kst-r-l);
  padding: 14px 18px;
}

.kst-hero__kutu--ust {
  top: -18px;
  right: 6px;
  background: var(--kst-beyaz);
  border: 1px solid var(--kst-kenar);
  box-shadow: var(--kst-g-yuzen);
  animation: kfFloat 6s ease-in-out infinite;
}

.kst-hero__kutu--alt {
  bottom: -20px;
  left: 2px;
  background: var(--kst-navy-800);
  box-shadow: var(--kst-g-yuzen-koyu);
  animation: kfFloat 7s .8s ease-in-out infinite;
}

.kst-hero__kutu-ikon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kst-hero__kutu--ust .kst-hero__kutu-ikon {
  background: var(--kst-mavi-zemin);
  color: var(--kst-mavi);
}

.kst-hero__kutu--ust .kst-hero__kutu-ikon svg {
  width: 20px;
  height: 20px;
}

.kst-hero__kutu--alt .kst-hero__kutu-ikon {
  background: rgba(255, 255, 255, .12);
  color: var(--kst-uzeri-mavi-2);
}

.kst-hero__kutu--alt .kst-hero__kutu-ikon svg {
  width: 19px;
  height: 19px;
}

.kst-hero__kutu-baslik {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-hero__kutu-alt {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kst-metin);
}

.kst-hero__kutu--alt .kst-hero__kutu-baslik {
  color: var(--kst-beyaz);
}

.kst-hero__kutu--alt .kst-hero__kutu-alt {
  color: var(--kst-uzeri-topbar);
}

@media (prefers-reduced-motion: reduce) {
  .kst-hero__rozet,
  .kst-hero__h1,
  .kst-hero__metin,
  .kst-hero__ctalar,
  .kst-hero__guven,
  .kst-hero__kutu {
    animation: none;
  }
}

/* ==========================================================================
   4.2 USP şeridi
   ========================================================================== */

.kst-usp {
  background: var(--kst-navy-900);
  padding: 22px 0;
}

.kst-usp__ic {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
}

.kst-usp__oge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kst-beyaz);
}

.kst-usp__oge svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--kst-uzeri-mavi-3);
}

.kst-usp__oge--yer {
  color: var(--kst-uzeri-silik);
}

.kst-usp__oge--yer svg {
  color: var(--kst-turkuaz);
}

.kst-usp :focus-visible {
  outline-color: var(--kst-uzeri-mavi);
}

/* ==========================================================================
   4.3 Hizmetler ızgarası
   ========================================================================== */

.kst-hizmetler {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-beyaz);
}

/* Bulgu 18: cip/kart izgaralarinda minmax alt siniri min(...,100%) ile sarilir;
   boylece parca hicbir genislikte kapsayicisini asamaz (320px'te 280px'lik
   kapsayicida 290px'lik track olusuyordu). Ayni kalip dosyadaki tum
   auto-fit/auto-fill izgaralara uygulandi. */
.kst-hizmetler__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px;
  margin-top: 44px;
}

.kst-hizmetler__alt {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* "Tüm Hizmetler / Tüm Bölgeler / Tüm Yazılar" metin bağlantısı */
.kst-tum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--kst-mavi);
  transition: var(--kst-gecis);
}

.kst-tum:hover {
  color: var(--kst-mavi-koyu);
}

.kst-tum svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.kst-hkart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--kst-beyaz);
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-l);
  padding: 28px;
  box-shadow: var(--kst-g-kart);
  transition: var(--kst-gecis-kart);
  color: inherit;
  text-decoration: none;
}

.kst-hkart:hover {
  transform: translateY(-4px);
  box-shadow: var(--kst-g-kart-h);
  border-color: var(--kst-kenar-hover);
}

.kst-hkart__ikon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--kst-mavi-zemin);
  color: var(--kst-mavi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kst-hkart__ikon svg {
  width: 23px;
  height: 23px;
}

.kst-hkart__baslik {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--kst-baslik);
}

.kst-hkart__metin {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kst-metin);
  flex: 1;
}

.kst-hkart__ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--kst-mavi);
}

.kst-hkart__ok svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke-width: 2.2;
}

/* ==========================================================================
   4.4 Acil CTA
   ========================================================================== */

.kst-acil {
  background: var(--kst-grad-koyu);
  padding: clamp(56px, 7vw, 84px) 0;
}

.kst-acil__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px 60px;
  justify-content: space-between;
}

.kst-acil__sol {
  flex: 1 1 440px;
  max-width: 620px;
}

.kst-acil__baslik {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--kst-beyaz);
}

.kst-acil__metin {
  margin: 14px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .75);
  max-width: 520px;
}

.kst-acil__sag {
  flex: 0 1 auto;
}

.kst-acil__ctalar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kst-acil__ctalar .kst-btn--beyaz {
  box-shadow: var(--kst-g-beyaz);
}

.kst-acil__ctalar .kst-btn--beyaz:hover {
  background: #F0F6FF;
}

.kst-acil__tel {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

.kst-acil__tel a {
  font-size: 16px;
  font-weight: 800;
  color: var(--kst-beyaz);
}

.kst-acil__tel a:hover {
  color: var(--kst-uzeri-mavi);
}

.kst-acil :focus-visible {
  outline-color: var(--kst-uzeri-mavi);
}

/* ==========================================================================
   4.5 Neden Biz
   ========================================================================== */

.kst-neden {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-beyaz);
}

.kst-neden__ic {
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(48px, 6vw, 88px);
}

.kst-neden__sol {
  flex: 1 1 320px;
  max-width: 420px;
}

.kst-neden__sol .kst-bolum__aciklama,
.kst-neden__sol p {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--kst-metin);
}

.kst-neden__sol .kst-tum {
  margin-top: 26px;
}

.kst-neden__izgara {
  flex: 1.4 1 480px;
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 0 44px;
  align-content: start;
}

.kst-neden__oge {
  padding: 24px 0;
  border-top: 1px solid var(--kst-kenar-4);
}

.kst-neden__no {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--kst-mavi);
}

.kst-neden__baslik {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--kst-baslik);
  margin-top: 8px;
}

.kst-neden__metin {
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kst-metin);
  margin-top: 6px;
}

/* ==========================================================================
   4.6 Süreç (3 adım)
   ========================================================================== */

.kst-surec {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-yuzey);
  border-top: 1px solid var(--kst-kenar-2);
  border-bottom: 1px solid var(--kst-kenar-2);
}

.kst-surec__izgara {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 36px;
  margin-top: 48px;
}

/* adım kutusu; nokta+çizgi satırı sarmalayıcılı ya da sarmalayıcısız çalışır */
.kst-surec__adim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.kst-surec__ust {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
}

.kst-surec__nokta {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--kst-mavi);
  box-shadow: 0 0 0 5px rgba(22, 96, 232, .15);
}

.kst-surec__cizgi {
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--kst-kenar-kesik) 0 9px, transparent 9px 18px);
}

/* 3. adım turkuaz */
.kst-surec__adim:last-child .kst-surec__nokta {
  background: var(--kst-turkuaz);
  box-shadow: 0 0 0 5px rgba(47, 184, 216, .15);
}

.kst-surec__no {
  flex: 0 0 100%;
  font-size: clamp(52px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--kst-baslik);
  opacity: .09;
  line-height: 1;
  margin-top: 22px;
}

.kst-surec__baslik {
  flex: 0 0 100%;
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--kst-baslik);
  margin-top: 2px;
}

.kst-surec__metin {
  flex: 0 0 100%;
  font-size: 15px;
  line-height: 1.65;
  color: var(--kst-metin);
  margin: 10px 0 0;
  max-width: 300px;
}

/* ==========================================================================
   4.7 Öne çıkan hizmet
   ========================================================================== */

.kst-one {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-beyaz);
}

.kst-one__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px clamp(40px, 5vw, 72px);
  background: linear-gradient(135deg, var(--kst-mavi-panel), var(--kst-yuzey-2));
  border: 1px solid var(--kst-kenar);
  border-radius: 22px;
  padding: clamp(28px, 4.5vw, 60px);
}

.kst-one__sol {
  flex: 1 1 400px;
  max-width: 560px;
}

.kst-one__sol .kst-bolum__baslik,
.kst-one__sol h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}

.kst-one__sol .kst-bolum__aciklama,
.kst-one__sol p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--kst-metin);
}

.kst-one__sol .kst-btn {
  margin-top: 28px;
}

.kst-one__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.kst-one__oge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-one__oge svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.kst-one__figur {
  flex: 1 1 340px;
  border: 1px solid var(--kst-kenar-gorsel);
  border-radius: var(--kst-r-xl);
  background: var(--kst-mavi-zemin-3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(13, 27, 76, .08);
}

.kst-one__figur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   4.8 Bölge çipleri
   ========================================================================== */

.kst-cipler {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 14px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

/* Iki satira tasan uzun bolge adi olan satirda diger cipler kisa kalmasin. */
/* Bulgu 35: min-width:0 yoktu; "Bahcelievler Tesisatci" gibi uzun adlar
   min-content genisligi dayatip cipi track'in disina tasiyordu. */
.kst-cipler > li {
  display: flex;
  min-width: 0;
}

.kst-cipler > li > .kst-cip {
  flex: 1;
  min-width: 0;
}

.kst-cip {
  display: flex;
  align-items: center;
  gap: 10px;
  /* bulgu 35: uzun ad gerekirse kirilarak sarsin, track'i tasirmasin */
  overflow-wrap: anywhere;
  padding: 16px 18px;
  border: 1px solid var(--kst-kenar);
  border-radius: 12px;
  background: var(--kst-beyaz);
  font-size: 15px;
  font-weight: 800;
  color: var(--kst-baslik);
  text-decoration: none;
  transition: var(--kst-gecis);
}

.kst-cip:hover {
  border-color: var(--kst-mavi);
  background: var(--kst-mavi-yuzey);
  transform: translateY(-2px);
  color: var(--kst-baslik);
}

.kst-cip__ikon,
.kst-cip > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--kst-mavi);
  stroke-width: 2.2;
}

.kst-cip__ikon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* bağlantı olmayan "+ İzmir çevresi" çipi */
.kst-cip--pasif {
  border-style: dashed;
  border-color: var(--kst-kenar-kesik-2);
  color: var(--kst-metin);
  font-weight: 700;
  cursor: default;
}

.kst-cip--pasif:hover {
  border-color: var(--kst-kenar-kesik-2);
  background: var(--kst-beyaz);
  color: var(--kst-metin);
  transform: none;
}

/* çiplerin altındaki kesikli bilgi kutusu */
.kst-bolge-not {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  border: 1px dashed var(--kst-kenar-kesik);
  border-radius: 12px;
  padding: 16px 20px;
  background: var(--kst-yuzey-2);
}

.kst-bolge-not__metin {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-bolge-not a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--kst-mavi);
}

.kst-bolge-not a svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ==========================================================================
   4.9 Kurumsal + künye kartı
   ========================================================================== */

.kst-kurumsal {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-yuzey);
  border-top: 1px solid var(--kst-kenar-2);
  border-bottom: 1px solid var(--kst-kenar-2);
}

.kst-kurumsal__ic {
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(48px, 6vw, 88px);
  align-items: flex-start;
}

.kst-kurumsal__sol {
  flex: 1.3 1 420px;
}

.kst-kurumsal__ozet,
.kst-kurumsal__sol p {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kst-metin-koyu);
}

.kst-kurumsal__ozet + .kst-kurumsal__ozet,
.kst-kurumsal__sol p + p {
  margin-top: 14px;
}

.kst-kurumsal__rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 24px;
}

.kst-kurumsal__rozetler > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-kurumsal__rozetler svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.kst-kunye {
  flex: 1 1 320px;
  max-width: 440px;
  background: var(--kst-beyaz);
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-xl);
  padding: 8px 28px;
  box-shadow: 0 10px 30px rgba(13, 27, 76, .06);
}

.kst-kunye__satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--kst-kenar-3);
}

.kst-kunye__satir:last-child {
  border-bottom: 0;
}

.kst-kunye__etiket {
  font-size: 13px;
  font-weight: 700;
  color: var(--kst-metin-etiket);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kst-kunye__deger {
  font-size: 15px;
  font-weight: 800;
  color: var(--kst-baslik);
  text-align: right;
}

.kst-kunye__deger a {
  color: var(--kst-mavi);
}

.kst-kunye__deger a[href*="wa.me"] {
  color: var(--kst-wa);
}

.kst-kunye__deger a[href*="wa.me"]:hover {
  color: var(--kst-wa-koyu);
}

/* ==========================================================================
   4.10 Blog kartları
   ========================================================================== */

.kst-yazilar {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-beyaz);
}

.kst-yazilar__izgara {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 24px;
  margin-top: 44px;
}

.kst-ykart {
  display: flex;
  flex-direction: column;
  background: var(--kst-beyaz);
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-xl);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: var(--kst-gecis-kart);
}

.kst-ykart:hover {
  transform: translateY(-4px);
  box-shadow: var(--kst-g-kart-h);
  border-color: var(--kst-kenar-hover);
}

.kst-ykart__gorsel {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--kst-mavi-zemin-3);
  overflow: hidden;
}

.kst-ykart__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kst-ykart__rozet {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--kst-navy-800);
  color: var(--kst-beyaz);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--kst-r-xs);
}

.kst-ykart__govde {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}

.kst-ykart__meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kst-metin-silik);
}

.kst-ykart__baslik {
  display: block;
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--kst-baslik);
}

.kst-ykart__ozet {
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kst-metin);
}

/* ==========================================================================
   4.11 SSS akordeonu
   ========================================================================== */

.kst-sss {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-yuzey);
  border-top: 1px solid var(--kst-kenar-2);
  border-bottom: 1px solid var(--kst-kenar-2);
}

.kst-sss > .kst-kap {
  max-width: 820px;
}

.kst-sss__liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.kst-sss__oge {
  border: 1px solid var(--kst-kenar);
  border-radius: 13px;
  background: var(--kst-beyaz);
  overflow: hidden;
  transition: border-color .3s ease;
}

.kst-sss__soru {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-sss__isaret {
  display: inline-flex;
  flex: none;
  color: var(--kst-mavi);
  transition: transform .3s ease;
}

.kst-sss__isaret svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* Kapalı durum. Kapalı cevap erişilebilirlik ağacından `hidden` ile çıkarılır;
   özniteliği theme.js yönetir — 10-base.css'teki `[hidden]{display:none
   !important}` bu bloğu ezdiği için açılışta hidden bir kare ÖNCE kaldırılır,
   kapanışta geçiş bitince atanır; böylece 0fr→1fr animasyonu korunur.
   (Eski `.kst-sss__cevap[hidden]` kuralı !important'a karşı ölü koddu.) */
.kst-sss__cevap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.kst-sss__oge--acik {
  border-color: var(--kst-kenar-hover);
}

.kst-sss__oge--acik .kst-sss__isaret,
.kst-sss__soru[aria-expanded="true"] .kst-sss__isaret {
  transform: rotate(45deg);
}

.kst-sss__oge--acik .kst-sss__cevap,
.kst-sss__soru[aria-expanded="true"] + .kst-sss__cevap {
  grid-template-rows: 1fr;
}

.kst-sss__cevap-ic {
  overflow: hidden;
}

.kst-sss__cevap-ic p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kst-metin);
}

/* ==========================================================================
   4.12 Son CTA paneli
   ========================================================================== */

.kst-son-cta {
  padding: var(--kst-bolum-pad) 0;
  background: var(--kst-beyaz);
}

.kst-son-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--kst-r-3xl);
  text-align: center;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 5vw, 64px);
  background: var(--kst-grad-panel);
}

.kst-son-cta__baslik {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  color: var(--kst-beyaz);
}

.kst-son-cta__metin {
  margin: 16px auto 0;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

.kst-son-cta__ctalar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.kst-son-cta__ctalar .kst-btn--beyaz {
  box-shadow: var(--kst-g-beyaz);
}

.kst-son-cta__panel :focus-visible {
  outline-color: var(--kst-uzeri-mavi);
}

/* ===== 50-inner.css ===== */
/* 50-inner.css — İç sayfalar: hizmet detay, bölge detay, arşivler, breadcrumb
   (TASARIM.md §7 ve §8). Bu dosyada @media YOK. */

/* ==========================================================================
   Dar kapsayıcı yardımcıları
   ========================================================================== */

.kst-kap--dar {
  max-width: 820px;
}

.kst-kap--orta {
  max-width: 980px;
}

/* ==========================================================================
   Breadcrumb (açık ve koyu varyant)
   ========================================================================== */

.kst-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.kst-kirinti__link {
  color: var(--kst-metin);
  text-decoration: none;
  transition: var(--kst-gecis);
}

.kst-kirinti__link:hover {
  color: var(--kst-mavi);
}

.kst-kirinti__ayrac {
  color: var(--kst-ayrac-metin);
}

.kst-kirinti__aktif {
  color: var(--kst-mavi);
}

.kst-koyu .kst-kirinti__link,
.kst-ic-hero--koyu .kst-kirinti__link {
  color: var(--kst-uzeri-silik);
}

.kst-koyu .kst-kirinti__link:hover,
.kst-ic-hero--koyu .kst-kirinti__link:hover {
  color: var(--kst-beyaz);
}

.kst-koyu .kst-kirinti__ayrac,
.kst-ic-hero--koyu .kst-kirinti__ayrac {
  color: #3D4E8C;
}

.kst-koyu .kst-kirinti__aktif,
.kst-ic-hero--koyu .kst-kirinti__aktif {
  color: var(--kst-uzeri-mavi-2);
}

/* ==========================================================================
   §7.1 İç hero — açık
   ========================================================================== */

.kst-ic-hero {
  position: relative;
  overflow: hidden;
  background: var(--kst-grad-ic-hero);
  padding: clamp(140px, 16vw, 180px) 0 clamp(56px, 7vw, 88px);
}

/* ince ızgara dokusu */
.kst-ic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 27, 76, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 76, .04) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(720px 480px at 80% 20%, #000 20%, transparent 70%);
  mask-image: radial-gradient(720px 480px at 80% 20%, #000 20%, transparent 70%);
}

.kst-ic-hero__ic {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.kst-ic-hero__sol {
  flex: 1 1 480px;
  max-width: 620px;
}

.kst-ic-hero__h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--kst-baslik);
}

.kst-ic-hero__metin {
  margin: 20px 0 0;
  max-width: 520px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--kst-metin-koyu);
}

.kst-ic-hero__ctalar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.kst-ic-hero__guven {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 28px;
}

.kst-ic-hero__guven > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-ic-hero__guven svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.kst-ic-hero__figur {
  position: relative;
  flex: 1 1 380px;
  max-width: 540px;
  margin: 0 auto;
  border: 1px solid var(--kst-kenar-gorsel);
  border-radius: var(--kst-r-2xl);
  background: var(--kst-mavi-zemin-3);
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  box-shadow: var(--kst-g-gorsel);
}

.kst-ic-hero__figur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* görselsiz, ortalanmış arşiv/sayfa varyantı */
.kst-ic-hero--orta {
  text-align: center;
}

.kst-ic-hero--orta .kst-ic-hero__ic {
  justify-content: center;
}

.kst-ic-hero--orta .kst-ic-hero__sol {
  flex: 1 1 100%;
  max-width: 720px;
  margin: 0 auto;
}

.kst-ic-hero--orta .kst-kirinti,
.kst-ic-hero--orta .kst-ic-hero__ctalar,
.kst-ic-hero--orta .kst-ic-hero__guven {
  justify-content: center;
}

.kst-ic-hero--orta .kst-ic-hero__metin {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   §8.1 İç hero — koyu (bölge hero)
   ========================================================================== */

.kst-ic-hero--koyu {
  background: var(--kst-grad-bolge);
  padding: clamp(150px, 17vw, 196px) 0 clamp(64px, 8vw, 96px);
}

.kst-ic-hero--koyu::before {
  display: none;
}

.kst-ic-hero--koyu .kst-ic-hero__ic {
  gap: clamp(40px, 5vw, 80px);
}

/* KRİTİK: koyu hero başlığı kalıtıma bırakılmaz */
.kst-ic-hero--koyu h1,
.kst-ic-hero--koyu .kst-ic-hero__h1 {
  color: #fff;
}

.kst-ic-hero--koyu .kst-ic-hero__metin {
  color: var(--kst-uzeri-govde);
}

.kst-ic-hero--koyu .kst-btn--beyaz:hover {
  background: #EAF1FF;
}

.kst-ic-hero--koyu :focus-visible {
  outline-color: var(--kst-uzeri-mavi);
}

/* bölge bilgi kartı */
.kst-bolge-bilgi {
  flex: 1 1 340px;
  max-width: 440px;
  background: var(--kst-beyaz);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--kst-g-panel);
}

.kst-bolge-bilgi__baslik {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kst-mavi);
}

.kst-bolge-bilgi__satir {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--kst-kenar-3);
}

.kst-bolge-bilgi__satir > *:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--kst-metin);
}

.kst-bolge-bilgi__satir > *:last-child {
  font-size: 14px;
  font-weight: 800;
  color: var(--kst-baslik);
  text-align: right;
}

.kst-bolge-bilgi__satir a {
  color: var(--kst-mavi);
}

.kst-bolge-bilgi__satir a[href*="wa.me"] {
  color: var(--kst-wa);
}

.kst-bolge-bilgi__satir a[href*="wa.me"]:hover {
  color: var(--kst-wa-koyu);
}

/* ==========================================================================
   §7.2 Belirtiler / kapsam ızgarası
   ========================================================================== */

.kst-belirtiler {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-beyaz);
}

.kst-belirtiler .kst-bolum__baslik,
.kst-belirtiler > .kst-kap > h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}

.kst-belirtiler .kst-bolum__aciklama {
  font-size: 16px;
  color: var(--kst-metin);
}

/* Bulgu 18: minmax alt siniri min(...,100%) ile sarilir; 320px'te 280px'lik
   kapsayicida 300px'lik track olusup kartlarin sag bosluğu sifirlaniyordu.
   Ayni kalip dosyadaki tum auto-fit/auto-fill izgaralara uygulandi. */
.kst-belirtiler__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.kst-belirti {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--kst-kenar);
  border-radius: 13px;
  background: var(--kst-yuzey-2);
  padding: 18px 20px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-belirti svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* ==========================================================================
   §7.3 Çözüm süreci — adım listesi
   ========================================================================== */

.kst-adimlar {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-yuzey);
}

.kst-adimlar__ic {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 90px);
}

.kst-adimlar__sol {
  flex: 1 1 320px;
  max-width: 440px;
}

.kst-adimlar__sol .kst-bolum__baslik,
.kst-adimlar__sol h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}

.kst-adimlar__sol .kst-bolum__aciklama,
.kst-adimlar__sol p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--kst-metin);
}

.kst-adimlar__sol .kst-btn {
  margin-top: 26px;
}

.kst-adimlar__liste {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kst-adim {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--kst-kenar-5);
}

.kst-adim:last-child {
  border-bottom: 1px solid var(--kst-kenar-5);
}

.kst-adim__no {
  flex: none;
  width: 34px;
  font-size: 15px;
  font-weight: 800;
  color: var(--kst-mavi);
  font-variant-numeric: tabular-nums;
}

.kst-adim__baslik {
  display: block;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-adim__metin {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kst-metin);
}

/* ==========================================================================
   §7.4 Çip satırı (hizmet bölgeleri / yakın bölgeler)
   ========================================================================== */

.kst-cipler-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.kst-cipler-satir .kst-cip {
  padding: 10px 16px;
  border-radius: var(--kst-r-s);
  background: var(--kst-yuzey-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-cipler-satir .kst-cip:hover {
  border-color: var(--kst-mavi);
  background: var(--kst-mavi-yuzey);
  color: var(--kst-mavi);
  transform: none;
}

.kst-cipler-satir .kst-cip--pasif {
  border-style: dashed;
  border-color: var(--kst-kenar-kesik-2);
  background: var(--kst-beyaz);
  color: var(--kst-metin);
}

.kst-cipler-satir .kst-cip--pasif:hover {
  border-color: var(--kst-kenar-kesik-2);
  background: var(--kst-beyaz);
  color: var(--kst-metin);
}

/* ==========================================================================
   §7.6 İlgili hizmet kartları
   ========================================================================== */

.kst-ilgili {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-beyaz);
}

.kst-ilgili .kst-bolum__baslik,
.kst-ilgili h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.kst-ilgili__izgara {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.kst-ikart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--kst-kenar);
  border-radius: 15px;
  background: var(--kst-beyaz);
  padding: 26px;
  color: inherit;
  text-decoration: none;
  transition: var(--kst-gecis-kart);
}

.kst-ikart:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(13, 27, 76, .10);
  border-color: var(--kst-kenar-hover);
}

.kst-ikart strong,
.kst-ikart__baslik {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-ikart span,
.kst-ikart__metin {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kst-metin);
}

.kst-ikart .kst-ikart__ikon,
.kst-ikart .kst-hkart__ikon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--kst-mavi-zemin);
  color: var(--kst-mavi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kst-ikart .kst-ikart__ikon svg,
.kst-ikart .kst-hkart__ikon svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   §8.2 Bölgedeki hizmetler — satır kartları
   ========================================================================== */

.kst-hsatirlar {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.kst-hsatir {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-l);
  background: var(--kst-yuzey-2);
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
  transition: var(--kst-gecis-kart);
}

.kst-hsatir:hover {
  border-color: var(--kst-mavi);
  background: var(--kst-mavi-yuzey);
  transform: translateY(-2px);
}

.kst-hsatir__ikon {
  width: 44px;
  height: 44px;
  border-radius: var(--kst-r-m);
  background: var(--kst-mavi-zemin);
  color: var(--kst-mavi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.kst-hsatir__ikon svg {
  width: 21px;
  height: 21px;
}

.kst-hsatir__govde {
  flex: 1;
  min-width: 0;
}

.kst-hsatir__baslik {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-hsatir__alt {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kst-metin);
}

.kst-hsatir > svg:last-child {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--kst-mavi);
  margin-left: auto;
}

/* ==========================================================================
   §8.3 Bölge süreci (3 adım) — 4.6 süreç bloğunun bölge varyantı
   ========================================================================== */

.kst-surec--bolge {
  padding: var(--kst-bolum-pad-ic) 0;
  border-top: 0;
  border-bottom: 0;
}

.kst-surec--bolge .kst-surec__izgara {
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: 44px;
}

.kst-surec--bolge .kst-surec__nokta,
.kst-surec--bolge .kst-surec__adim:last-child .kst-surec__nokta {
  width: 12px;
  height: 12px;
  background: var(--kst-mavi);
  box-shadow: 0 0 0 5px rgba(22, 96, 232, .15);
}

.kst-surec--bolge .kst-surec__cizgi {
  background: repeating-linear-gradient(90deg, var(--kst-kenar-kesik) 0 8px, transparent 8px 16px);
}

.kst-surec--bolge .kst-surec__no {
  font-size: 52px;
  opacity: .10;
  margin-top: 18px;
}

.kst-surec--bolge .kst-surec__baslik {
  font-size: 18.5px;
  margin-top: 4px;
}

.kst-surec--bolge .kst-surec__metin {
  font-size: 15px;
  line-height: 1.65;
  margin-top: 8px;
}

/* ==========================================================================
   §8.4 Bölge hakkında metin + özel not + nokta listesi
   ========================================================================== */

.kst-bolge-metin {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-beyaz);
}

/* satır düzeni: doğrudan .kst-kap içinde ya da __ic sarmalayıcısıyla çalışır */
.kst-bolge-metin > .kst-kap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
}

.kst-bolge-metin__ic {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
}

.kst-bolge-metin__sol {
  flex: 1.4 1 480px;
}

.kst-bolge-metin__sol h2,
.kst-bolge-metin > .kst-kap > h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--kst-baslik);
}

.kst-bolge-metin__sol p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--kst-metin-koyu);
}

/* bölgeye özgü vurgu kutusu */
.kst-ozel {
  display: flex;
  gap: 14px;
  border: 1px solid var(--kst-turkuaz-kenar);
  background: var(--kst-turkuaz-yuzey);
  border-radius: var(--kst-r-l);
  padding: 20px 22px;
  margin-top: 24px;
}

.kst-ozel svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--kst-turkuaz-koyu);
}

.kst-ozel p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kst-turkuaz-metin);
}

.kst-noktalar {
  flex: 1 1 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kst-noktalar h2,
.kst-noktalar h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-nokta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kst-kenar-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--kst-metin-orta);
}

.kst-nokta svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--kst-mavi);
}

/* ==========================================================================
   §8.5 Yakın bölgeler
   ========================================================================== */

.kst-yakin {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-yuzey);
}

.kst-yakin > .kst-kap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
}

.kst-yakin__ic {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
}

.kst-yakin__sol {
  flex: 1 1 320px;
  max-width: 440px;
}

.kst-yakin__sol .kst-bolum__baslik,
.kst-yakin__sol h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.kst-yakin__sol .kst-bolum__aciklama,
.kst-yakin__sol p {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--kst-metin);
}

.kst-yakin .kst-cipler-satir {
  flex: 1 1 400px;
  margin-top: 0;
}

/* ==========================================================================
   Arşiv düzenleri (hizmet / bölge listeleri)
   ========================================================================== */

.kst-arsiv {
  padding: var(--kst-bolum-pad-ic) 0;
  background: var(--kst-beyaz);
}

.kst-arsiv--yuzey {
  background: var(--kst-yuzey);
}

.kst-arsiv__izgara {
  display: grid;
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.kst-arsiv__izgara--cip {
  /* bulgu 18: parca kapsayiciyi asamaz */
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 14px;
}

.kst-arsiv__grup + .kst-arsiv__grup {
  margin-top: 44px;
}

.kst-arsiv__grup-baslik {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--kst-baslik);
}

.kst-arsiv .kst-cipler {
  margin-top: 24px;
}

/* ==========================================================================
   §7.7 İç sayfa son CTA paneli
   ========================================================================== */

.kst-son-cta--ic {
  padding: 0 0 clamp(64px, 8vw, 110px);
  background: var(--kst-beyaz);
}

.kst-son-cta--ic .kst-son-cta__panel {
  border-radius: 22px;
  padding: clamp(44px, 6vw, 72px);
  background:
    radial-gradient(600px 300px at 85% 15%, rgba(22, 96, 232, .35), transparent 60%),
    radial-gradient(500px 260px at 8% 90%, rgba(47, 184, 216, .16), transparent 60%),
    linear-gradient(120deg, var(--kst-navy-800), var(--kst-navy-900));
}

.kst-son-cta--ic .kst-son-cta__baslik {
  font-size: clamp(26px, 3.4vw, 42px);
}

.kst-son-cta--ic .kst-son-cta__metin {
  color: rgba(255, 255, 255, .75);
}

.kst-son-cta--ic .kst-son-cta__ctalar {
  margin-top: 30px;
}

.kst-son-cta--ic .kst-btn--wa:hover {
  background: var(--kst-wa-koyu-2);
}

.kst-son-cta__tel {
  margin: 24px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--kst-beyaz);
}

.kst-son-cta__tel a {
  color: var(--kst-beyaz);
}

.kst-son-cta__tel a:hover {
  color: var(--kst-uzeri-mavi);
}

/* ===== 60-forms.css ===== */
/* ==========================================================================
   60-forms.css — iletişim formu, iletişim kartları, harita, arama formu,
   sayfalama, 404 bloğu ve arama sonuç listesi.

   Sözleşme : docs/MIMARI.md §8 · docs/TASARIM.md §11
   KURAL    : Bu dosyada @media YAZILMAZ. Tüm medya sorguları
              90-responsive.css içinde toplanır (tek istisna @supports).
   ========================================================================== */

/* Durum renkleri — 00-tokens.css'te karşılığı yok, bu dosyada tanımlanır.
   Başarı rengi WhatsApp yeşili ailesinden alınır (yeni renk uydurulmaz). */
:root {
	--kst-hata: #C0392B;
	--kst-hata-zemin: #FDF3F2;
	--kst-hata-kenar: #F0C8C3;
	--kst-basari-kenar: #BFE7CE;
	/* Basari metni: --kst-wa-koyu yesil zeminde 4.09:1 kaliyordu; bu ton
	   #F2FBF5 uzerinde 6.40:1 verir (buton hover jetonundan bagimsiz). */
	--kst-basari-metin: #12693A;
}

/* ==========================================================================
   1. İletişim sayfası düzeni
   ========================================================================== */

.kst-iletisim {
	padding: var(--kst-bolum-pad-ic) 0;
	background: var(--kst-beyaz);
}

/* Üstteki 3 iletişim kartı: Telefon / WhatsApp / Hizmet Bölgesi */
/* Bulgu 18: minmax alt sınırı min(...,100%) ile sarılır; 320px'te 234px'lik
   kapsayıcıda 240px'lik track oluşup kart sağdan taşıyordu. */
.kst-iletisim__kartlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
}

.kst-iletisim-kart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	background: var(--kst-beyaz);
	border: 1px solid var(--kst-kenar);
	border-radius: var(--kst-r-l);
	box-shadow: var(--kst-g-kart);
	transition: var(--kst-gecis-kart);
}

a.kst-iletisim-kart:hover {
	transform: translateY(-3px);
	border-color: var(--kst-kenar-hover);
	box-shadow: var(--kst-g-kart-h);
}

.kst-iletisim-kart__ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--kst-r-m);
	background: var(--kst-mavi-zemin);
	color: var(--kst-mavi);
	flex: none;
}

.kst-iletisim-kart--wa .kst-iletisim-kart__ikon {
	background: var(--kst-wa-zemin);
	color: var(--kst-wa);
}

.kst-iletisim-kart__baslik {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kst-metin-etiket);
}

.kst-iletisim-kart__deger {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.35;
	color: var(--kst-baslik);
}

a.kst-iletisim-kart .kst-iletisim-kart__deger {
	color: var(--kst-mavi);
}

a.kst-iletisim-kart--wa .kst-iletisim-kart__deger {
	color: var(--kst-wa);
}

.kst-iletisim-kart__alt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--kst-metin);
}

/* Form + yan bilgi paneli: iki kolon, dar ekranda kendiliğinden alt alta. */
.kst-iletisim__izgara {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px clamp(32px, 4vw, 56px);
	margin-top: 40px;
}

.kst-iletisim__form {
	flex: 1.4 1 420px;
	min-width: 0;
}

.kst-iletisim__yan {
	flex: 1 1 300px;
	min-width: 0;
	padding: 28px;
	background: var(--kst-mavi-yuzey);
	border: 1px solid var(--kst-kenar);
	border-radius: var(--kst-r-xl);
}

.kst-iletisim__yan-baslik {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kst-mavi);
	margin-bottom: 16px;
}

.kst-iletisim__yan-metin {
	font-size: 15px;
	line-height: 1.7;
	color: var(--kst-metin);
}

/* ==========================================================================
   2. Form iskeleti
   ========================================================================== */

.kst-form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* Bir satırda 1 ya da 2 alan; auto-fit sayesinde dar ekranda medya sorgusu
   gerekmeden tek kolona düşer. */
.kst-form__satir {
	display: grid;
	/* bulgu 18: parça kapsayıcıyı aşamaz */
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 18px;
}

.kst-form__satir--tek {
	grid-template-columns: 1fr;
}

.kst-form__alan {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kst-form__etiket {
	display: block;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.005em;
	color: var(--kst-baslik);
	margin-bottom: 8px;
}

.kst-form__zorunlu {
	color: var(--kst-mavi);
	margin-left: 3px;
}

/* ==========================================================================
   3. Girdiler
   ========================================================================== */

.kst-form__girdi,
.kst-form input[type="text"],
.kst-form input[type="tel"],
.kst-form input[type="email"],
.kst-form input[type="url"],
.kst-form input[type="search"],
.kst-form select,
.kst-form textarea {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--kst-baslik);
	background: var(--kst-beyaz);
	border: 1.5px solid var(--kst-kenar-buton);
	border-radius: var(--kst-r-m);
	padding: 14px 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.kst-form__girdi::placeholder,
.kst-form input::placeholder,
.kst-form textarea::placeholder {
	color: var(--kst-metin-silik);
	font-weight: 500;
	opacity: 1;
}

.kst-form__girdi:hover,
.kst-form input:hover,
.kst-form select:hover,
.kst-form textarea:hover {
	border-color: var(--kst-kenar-hover);
}

.kst-form__girdi:focus,
.kst-form input:focus,
.kst-form select:focus,
.kst-form textarea:focus {
	outline: none;
	border-color: var(--kst-mavi);
	box-shadow: 0 0 0 3px rgba(22, 96, 232, .12);
}

.kst-form textarea,
textarea.kst-form__girdi {
	min-height: 156px;
	resize: vertical;
	line-height: 1.65;
}

/* Seçim kutusu: yerel ok kaldırılır, tasarımdaki chevron basılır. */
.kst-form select,
select.kst-form__girdi {
	padding-right: 44px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230D1B4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/* Hatalı alan */
.kst-form__girdi[aria-invalid="true"],
.kst-form [aria-invalid="true"] {
	border-color: var(--kst-hata);
}

.kst-form__girdi[aria-invalid="true"]:focus,
.kst-form [aria-invalid="true"]:focus {
	border-color: var(--kst-hata);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .14);
}

/* ==========================================================================
   4. Onay kutusu ve KVKK satırı
   ========================================================================== */

.kst-form__onay {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.kst-form__onay input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--kst-mavi);
	cursor: pointer;
}

.kst-form__onay span {
	font-size: 14px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--kst-metin);
}

.kst-form__onay a {
	font-weight: 800;
	color: var(--kst-mavi);
}

.kst-form__onay a:hover {
	color: var(--kst-mavi-koyu);
}

/* ==========================================================================
   5. Hata metni, sonuç kutusu, bal küpü
   ========================================================================== */

.kst-form__hata {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--kst-hata);
	margin-top: 7px;
}

/* İçerik yokken hiç yer kaplamaz; JS yalnız metni yazar. */
.kst-form__hata:empty {
	display: none;
}

.kst-form__sonuc {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	border-radius: var(--kst-r-m);
	padding: 15px 18px;
	border: 1px solid var(--kst-kenar);
	background: var(--kst-yuzey-2);
	color: var(--kst-metin-orta);
}

.kst-form__sonuc:empty {
	display: none;
}

.kst-form__sonuc--basarili {
	background: var(--kst-wa-zemin);
	border-color: var(--kst-basari-kenar);
	color: var(--kst-basari-metin);
}

.kst-form__sonuc--hata {
	background: var(--kst-hata-zemin);
	border-color: var(--kst-hata-kenar);
	color: var(--kst-hata);
}

/* Bal küpü: display:none KULLANILMAZ — bazı botlar gizli alanı atlıyor,
   ekran dışına taşımak bal küpünün doldurulmasını sağlıyor. */
.kst-form__tuzak {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Gönder butonu ve bekleme durumu */
.kst-form__gonder {
	align-self: flex-start;
}

.kst-form .kst-btn[disabled],
.kst-form button[disabled] {
	opacity: .62;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.kst-form__not {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--kst-metin);
}

/* Odak halkası — form denetimleri için pekiştirme (10-base ile aynı değerler) */
.kst-form :focus-visible,
.kst-arama__form :focus-visible,
.kst-sayfalama :focus-visible {
	outline: 3px solid var(--kst-mavi);
	outline-offset: 2px;
}

/* ==========================================================================
   6. Harita
   ========================================================================== */

.kst-harita {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--kst-kenar);
	border-radius: var(--kst-r-xl);
	background: var(--kst-mavi-zemin-3);
	box-shadow: var(--kst-g-kart);
}

.kst-harita iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
	.kst-harita {
		height: 420px;
	}
}

/* ==========================================================================
   7. Arama formu
   ========================================================================== */

.kst-arama__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	max-width: 560px;
}

.kst-arama__girdi,
.kst-arama__form input[type="search"],
.kst-arama__form input[type="text"] {
	flex: 1 1 220px;
	min-width: 0;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--kst-baslik);
	background: var(--kst-beyaz);
	border: 1.5px solid var(--kst-kenar-buton);
	border-radius: var(--kst-r-m);
	padding: 14px 16px;
	transition: border-color .2s ease, box-shadow .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.kst-arama__girdi::placeholder,
.kst-arama__form input::placeholder {
	color: var(--kst-metin-silik);
	font-weight: 500;
	opacity: 1;
}

/* Odak halkasi korunur: bu blok pekistirme kuralindan SONRA geldigi icin
   kosulsuz `outline:none` klavye halkasini oldururdu (MIMARI §a11y). */
.kst-arama__girdi:focus,
.kst-arama__form input:focus {
	border-color: var(--kst-mavi);
	box-shadow: 0 0 0 3px rgba(22, 96, 232, .12);
}

/* Yalnizca isaretleyici odaginda halka kaldirilir. */
.kst-arama__girdi:focus:not(:focus-visible),
.kst-arama__form input:focus:not(:focus-visible) {
	outline: none;
}

.kst-arama__btn {
	flex: none;
}

/* ==========================================================================
   8. Arama sonuçları
   ========================================================================== */

.kst-arama {
	padding: var(--kst-bolum-pad-ic) 0;
	background: var(--kst-beyaz);
}

.kst-arama__sayi {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--kst-metin);
	margin-bottom: 24px;
}

.kst-arama__liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kst-arama__oge {
	display: block;
	padding: 24px 26px;
	background: var(--kst-beyaz);
	border: 1px solid var(--kst-kenar);
	border-radius: var(--kst-r-l);
	box-shadow: var(--kst-g-kart);
	transition: var(--kst-gecis-kart);
}

a.kst-arama__oge:hover {
	transform: translateY(-2px);
	border-color: var(--kst-kenar-hover);
	box-shadow: var(--kst-g-kart-h);
}

.kst-arama__tip {
	display: block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kst-mavi);
}

.kst-arama__baslik {
	display: block;
	font-size: 18.5px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var(--kst-baslik);
	margin-top: 8px;
}

.kst-arama__ozet {
	display: block;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--kst-metin);
	margin-top: 8px;
}

.kst-arama__bos {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--kst-metin);
	margin-bottom: 24px;
}

/* ==========================================================================
   9. Sayfalama
   ========================================================================== */

.kst-sayfalama {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

/* Çekirdek paginate_links() çıktısı ile tema sınıfı birlikte desteklenir. */
.kst-sayfalama .page-numbers,
.kst-sayfalama__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--kst-metin-orta);
	background: var(--kst-beyaz);
	border: 1px solid var(--kst-kenar);
	border-radius: var(--kst-r-s);
	transition: var(--kst-gecis);
}

.kst-sayfalama a.page-numbers:hover,
.kst-sayfalama__link:hover {
	color: var(--kst-mavi);
	border-color: var(--kst-mavi);
	background: var(--kst-mavi-yuzey);
}

.kst-sayfalama .page-numbers.current,
.kst-sayfalama__link--aktif {
	color: var(--kst-beyaz);
	background: var(--kst-navy-800);
	border-color: var(--kst-navy-800);
}

.kst-sayfalama .page-numbers.dots {
	border-color: transparent;
	background: none;
	color: var(--kst-metin-pasif);
	min-width: 24px;
	padding: 0 4px;
}

/* ==========================================================================
   10. 404
   ========================================================================== */

.kst-404 {
	padding: var(--kst-bolum-pad-ic) 0;
	background: var(--kst-beyaz);
	text-align: center;
}

.kst-404__ic {
	max-width: 640px;
	margin: 0 auto;
}

.kst-404__kod {
	display: block;
	font-size: clamp(64px, 10vw, 118px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--kst-mavi);
	opacity: .14;
}

.kst-404__baslik {
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.15;
	color: var(--kst-baslik);
	margin-top: 12px;
}

.kst-404__metin {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--kst-metin);
	margin: 16px auto 0;
	max-width: 520px;
}

.kst-404 .kst-arama__form {
	margin: 28px auto 0;
	justify-content: center;
}

.kst-404__ctalar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

/* ===== 70-blog.css ===== */
/* 70-blog.css — Blog listesi ve tekil yazı (TASARIM.md §9 ve §10)
   .kst-icerik tipografisi burada tanımlıdır. Bu dosyada @media YOK. */

/* ==========================================================================
   §9 Blog hero + filtre çipleri
   ========================================================================== */

.kst-blog-hero {
  position: relative;
  background: linear-gradient(180deg, #F3F7FE 0%, var(--kst-beyaz) 100%);
  padding: clamp(140px, 16vw, 180px) 0 clamp(40px, 5vw, 56px);
}

.kst-blog-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--kst-baslik);
}

.kst-blog-hero p {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--kst-metin-koyu);
}

.kst-blog-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.kst-blog-filtre__link {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kst-metin-orta);
  border: 1px solid var(--kst-kenar);
  background: var(--kst-beyaz);
  border-radius: var(--kst-r-s);
  padding: 9px 16px;
  text-decoration: none;
  transition: var(--kst-gecis);
}

.kst-blog-filtre__link:hover {
  border-color: var(--kst-mavi);
  color: var(--kst-mavi);
}

.kst-blog-filtre__link--aktif {
  font-weight: 800;
  color: var(--kst-beyaz);
  background: var(--kst-navy-800);
  border-color: var(--kst-navy-800);
}

.kst-blog-filtre__link--aktif:hover {
  color: var(--kst-beyaz);
  border-color: var(--kst-navy-800);
}

/* ==========================================================================
   §9 Öne çıkan yazı (yatay kart)
   ========================================================================== */

.kst-bolum--one-yazi {
  padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 56px);
  background: var(--kst-beyaz);
}

.kst-one-yazi {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-2xl);
  overflow: hidden;
  background: var(--kst-beyaz);
  color: inherit;
  text-decoration: none;
  transition: var(--kst-gecis-kart);
}

.kst-one-yazi:hover {
  box-shadow: 0 24px 50px rgba(13, 27, 76, .12);
  border-color: var(--kst-kenar-hover);
}

.kst-one-yazi__gorsel {
  position: relative;
  flex: 1 1 460px;
  min-height: 300px;
  background: var(--kst-mavi-zemin-3);
  overflow: hidden;
}

.kst-one-yazi__gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kst-one-yazi__gorsel .kst-ykart__rozet {
  top: 16px;
  left: 16px;
}

.kst-one-yazi__govde {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 52px);
}

.kst-one-yazi__kategori,
.kst-one-yazi__govde .kst-etiket {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kst-mavi);
}

.kst-one-yazi__baslik,
.kst-one-yazi__govde strong {
  display: block;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--kst-baslik);
}

.kst-one-yazi__ozet,
.kst-one-yazi__govde p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--kst-metin);
}

.kst-one-yazi__meta,
.kst-one-yazi__govde .kst-ykart__meta {
  font-size: 13px;
  font-weight: 700;
  color: var(--kst-metin-silik);
}

/* ==========================================================================
   §9 Yazı ızgarası
   ========================================================================== */

.kst-blog-liste {
  padding: 0 0 clamp(64px, 8vw, 100px);
  background: var(--kst-beyaz);
}

.kst-blog-liste .kst-yazilar__izgara {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  margin-top: 0;
}

/* ==========================================================================
   §10 Tekil yazı — başlık bloğu
   ========================================================================== */

.kst-yazi {
  background: linear-gradient(180deg, #F3F7FE 0%, var(--kst-beyaz) 100%);
  padding: clamp(140px, 16vw, 180px) 0 clamp(36px, 4vw, 48px);
}

.kst-yazi > .kst-kap {
  max-width: 820px;
}

.kst-yazi .kst-kirinti {
  margin-bottom: 18px;
}

.kst-yazi__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--kst-metin-silik);
}

/* kategori rozeti başlık bloğunda akış içinde durur */
.kst-yazi__rozet,
.kst-yazi__meta .kst-ykart__rozet {
  position: static;
  display: inline-flex;
  background: var(--kst-navy-800);
  color: var(--kst-beyaz);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--kst-r-xs);
}

.kst-yazi h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--kst-baslik);
}

.kst-yazi__ozet,
.kst-yazi > .kst-kap > p {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--kst-metin-koyu);
}

/* ==========================================================================
   §10 Kapak görseli
   ========================================================================== */

.kst-yazi__kapak {
  /* TASARIM §10: kapak ile metin arası boşluk — ayrı bölüm sarmalayıcı sınıfı yok. */
  margin: 0 0 clamp(36px, 4vw, 52px);
  border-radius: 18px;
  aspect-ratio: 16 / 8;
  background: var(--kst-mavi-zemin-3);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(13, 27, 76, .10);
}

.kst-yazi__kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   §10 Yazı gövdesi
   ========================================================================== */

.kst-yazi__govde {
  padding: 0 0 clamp(56px, 7vw, 80px);
  background: var(--kst-beyaz);
}

.kst-yazi__govde > .kst-kap {
  max-width: 820px;
}

/* ==========================================================================
   .kst-icerik — uzun metin tipografisi (the_content dâhil)
   ========================================================================== */

.kst-icerik {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--kst-metin-koyu);
}

.kst-icerik > *:first-child {
  margin-top: 0;
}

.kst-icerik h2 {
  margin: 44px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--kst-baslik);
}

.kst-icerik h3 {
  margin: 32px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--kst-baslik);
}

.kst-icerik h4 {
  margin: 26px 0 0;
  font-size: 17.5px;
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-icerik p {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--kst-metin-koyu);
}

.kst-icerik a {
  color: var(--kst-mavi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kst-icerik a:hover {
  color: var(--kst-mavi-koyu);
}

.kst-icerik strong {
  font-weight: 800;
  color: var(--kst-baslik);
}

/* madde işaretleri CSS ile üretilir — editörden gelen düz liste de aynı görünür */
.kst-icerik ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.kst-icerik ul > li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kst-metin-koyu);
}

/* onay-daire-mavi dokusu: açık mavi daire + mavi tik */
.kst-icerik ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .05em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kst-mavi-zemin-2);
}

.kst-icerik ul > li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: .42em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--kst-mavi);
  border-bottom: 2px solid var(--kst-mavi);
  transform: rotate(-45deg);
}

.kst-icerik ol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: kst-sira;
}

.kst-icerik ol > li {
  counter-increment: kst-sira;
  position: relative;
  padding-left: 42px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kst-metin-koyu);
}

.kst-icerik ol > li::before {
  content: counter(kst-sira);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--kst-mavi-zemin);
  color: var(--kst-mavi);
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kst-icerik blockquote {
  margin: 24px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--kst-kenar);
  border-left: 3px solid var(--kst-mavi);
  border-radius: var(--kst-r-l);
  background: var(--kst-mavi-yuzey);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--kst-metin-orta);
}

.kst-icerik blockquote p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.kst-icerik blockquote p + p {
  margin-top: 12px;
}

.kst-icerik table {
  width: 100%;
  margin: 24px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-l);
  overflow: hidden;
  font-size: 15px;
}

.kst-icerik th,
.kst-icerik td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--kst-kenar-3);
}

.kst-icerik th {
  background: var(--kst-mavi-yuzey);
  font-weight: 800;
  color: var(--kst-baslik);
}

.kst-icerik tr:last-child td {
  border-bottom: 0;
}

.kst-icerik figure {
  margin: 24px 0 0;
}

.kst-icerik img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--kst-r-l);
}

.kst-icerik figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kst-metin);
  text-align: center;
}

/* ipucu / bilgi kutusu */
.kst-ipucu {
  display: flex;
  gap: 14px;
  border: 1px solid var(--kst-turkuaz-kenar);
  background: var(--kst-turkuaz-yuzey);
  border-radius: var(--kst-r-l);
  padding: 20px 22px;
  margin: 24px 0 0;
}

.kst-ipucu svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--kst-turkuaz-koyu);
}

.kst-ipucu p,
.kst-icerik .kst-ipucu p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kst-turkuaz-metin);
}

/* ==========================================================================
   §10 Yazı içi koyu CTA bandı
   ========================================================================== */

.kst-yazi__cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 40px);
  margin-top: 44px;
  background:
    radial-gradient(500px 240px at 85% 10%, rgba(22, 96, 232, .35), transparent 60%),
    linear-gradient(120deg, var(--kst-navy-800), var(--kst-navy-900));
}

.kst-yazi__cta strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--kst-beyaz);
}

.kst-yazi__cta p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .75);
}

.kst-yazi__cta-ctalar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kst-yazi__cta .kst-btn--mavi:hover {
  background: var(--kst-mavi-acik);
}

.kst-yazi__cta :focus-visible {
  outline-color: var(--kst-uzeri-mavi);
}

/* ==========================================================================
   §10 İlgili yazılar
   ========================================================================== */

.kst-yazi__ilgili {
  padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 100px);
  background: var(--kst-yuzey);
}

.kst-yazi__ilgili > .kst-kap {
  max-width: 820px;
}

.kst-yazi__ilgili h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--kst-baslik);
}

.kst-yazi__ilgili-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.kst-yazi__ilgili-kart {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--kst-beyaz);
  border: 1px solid var(--kst-kenar);
  border-radius: var(--kst-r-l);
  padding: 22px 24px;
  color: inherit;
  text-decoration: none;
  transition: var(--kst-gecis-kart);
}

.kst-yazi__ilgili-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--kst-g-kart-h);
  border-color: var(--kst-kenar-hover);
}

.kst-yazi__ilgili-kart > span:first-child,
.kst-yazi__ilgili-kart .kst-etiket {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kst-mavi);
}

.kst-yazi__ilgili-kart strong {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--kst-baslik);
}

.kst-yazi__ilgili-kart .kst-ykart__meta,
.kst-yazi__ilgili-kart > span:last-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--kst-metin-silik);
}

/* ===== 90-responsive.css ===== */
/* ==========================================================================
   90-responsive.css — TEMANIN TÜM MEDYA SORGULARI

   Sözleşme : docs/MIMARI.md §8 · docs/TASARIM.md
   Kural    : Yalnız-mobil öğeler temel kuralda display:none'dur; burada
              açılırlar. Kırılma noktaları büyükten küçüğe sıralanır:
              1080px → 900px → 760px → 560px → 380px.
   Hedef    : 320px genişlikte hiçbir öğe taşmaz, hamburger daima görünür.
   ========================================================================== */

/* ==========================================================================
   1080px — mobil menü eşiği (tasarımdaki matchMedia ile aynı)
   ========================================================================== */

@media (max-width: 1080px) {

	/* Sabit başlık kısaldığı için çapa hedefi de kısalır. */
	html {
		scroll-padding-top: 92px;
	}

	/* Topbar ve masaüstü gezinme kapanır. */
	.kst-topbar {
		display: none;
	}

	.kst-nav,
	.kst-nav__ctalar {
		display: none;
	}

	/* Mobil küme ve hamburger açılır. */
	.kst-mobil {
		display: flex;
	}

	.kst-mobil__ac {
		display: inline-flex;
	}

	/* Alt yapışkan CTA ve onun bıraktığı boşluk açılır. */
	.kst-sticky {
		display: flex;
	}

	.kst-sticky__bosluk {
		display: block;
	}

	/* Ana sayfa hero tek kolon.
	   order: görsel DOM'da önce basılsa bile metin üstte kalır;
	   böylece hero görseli erken keşfedilir, düzen bozulmaz. */
	.kst-hero__ic {
		flex-direction: column;
		align-items: stretch;
	}

	.kst-hero__sol {
		order: 1;
		flex: 1 1 auto;
		max-width: 100%;
	}

	.kst-hero__figur {
		order: 2;
		flex: 1 1 auto;
		width: 100%;
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}

	/* İç sayfa hero'ları da tek kolon. */
	.kst-ic-hero__ic {
		flex-direction: column;
		align-items: stretch;
	}

	.kst-ic-hero__sol {
		order: 1;
		flex: 1 1 auto;
		max-width: 100%;
	}

	.kst-ic-hero__figur {
		order: 2;
		flex: 1 1 auto;
		width: 100%;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Bölge hero'sundaki bilgi kartı tam genişlik. */
	.kst-bolge-bilgi {
		width: 100%;
		max-width: 100%;
	}
}

/* ==========================================================================
   900px — bölüm boşlukları ve iki kolonlu blokların sadeleşmesi
   ========================================================================== */

@media (max-width: 900px) {

	/* Bölüm boşlukları jetonlar üzerinden tek noktadan düşürülür. */
	:root {
		--kst-bolum-pad: clamp(52px, 7vw, 78px);
		--kst-bolum-pad-ic: clamp(52px, 7vw, 72px);
	}

	/* Künye ve bölge bilgi kartları tam genişlik. */
	.kst-kunye,
	.kst-bolge-bilgi {
		width: 100%;
		max-width: 100%;
	}

	.kst-kurumsal__sol,
	.kst-neden__sol,
	.kst-adimlar__sol {
		max-width: 100%;
	}

	/* Neden Biz tek kolon. */
	.kst-neden__ic {
		gap: 36px;
	}

	.kst-neden__izgara {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Öne çıkan hizmet paneli tek kolon. */
	.kst-one__panel {
		flex-direction: column;
		align-items: stretch;
	}

	.kst-one__sol {
		max-width: 100%;
	}

	.kst-one__figur {
		width: 100%;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   760px — başlıklar clamp alt sınırına iner, ızgaralar daralır
   ========================================================================== */

@media (max-width: 760px) {

	.kst-hero__h1 {
		font-size: 38px;
	}

	.kst-ic-hero__h1 {
		font-size: 34px;
	}

	.kst-bolum__baslik {
		font-size: 30px;
	}

	.kst-acil__baslik,
	.kst-son-cta__baslik {
		font-size: 28px;
	}

	/* Bölge çipleri daha dar kutulara. */
	/* bulgu 18: min() ile parça kapsayıcıyı aşamaz */
	.kst-cipler {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	}

	/* Bulgu 19: iOS Safari 16px altındaki girdiye odaklanınca sayfayı
	   yakınlaştırıyordu (girdiler 15.5px idi); mobilde 16px'e sabitlenir. */
	.kst-form__girdi,
	.kst-form input[type="text"],
	.kst-form input[type="tel"],
	.kst-form input[type="email"],
	.kst-form input[type="url"],
	.kst-form input[type="search"],
	.kst-form select,
	.kst-form textarea,
	.kst-arama__girdi,
	.kst-arama__form input[type="search"],
	.kst-arama__form input[type="text"] {
		font-size: 16px;
	}

	/* Footer iki kolon. */
	.kst-footer__izgara {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Blog öne çıkan yazı tek kolon. */
	.kst-one-yazi {
		flex-direction: column;
	}

	.kst-one-yazi__gorsel {
		flex: 1 1 auto;
		width: 100%;
		min-height: 220px;
	}

	.kst-one-yazi__govde {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Acil CTA tek kolon, butonlar tam genişlik. */
	.kst-acil__ic {
		flex-direction: column;
		align-items: flex-start;
	}

	.kst-acil__sol {
		max-width: 100%;
	}

	.kst-acil__sag {
		flex: 1 1 100%;
	}

	.kst-acil__ctalar {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.kst-acil__ctalar .kst-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   560px — tek kolon footer, küçültülmüş kartlar ve tam genişlik CTA'lar
   ========================================================================== */

@media (max-width: 560px) {

	.kst-footer__izgara {
		grid-template-columns: 1fr;
	}

	/* Kart iç boşlukları. */
	.kst-hkart,
	.kst-ikart,
	.kst-iletisim-kart,
	.kst-bolge-bilgi,
	.kst-iletisim__yan {
		padding: 22px;
	}

	.kst-kunye {
		padding-left: 22px;
		padding-right: 22px;
	}

	/* Hero yüzen kutuları: kfFloat animasyonu transform'u kullandığı için
	   ölçek bağımsız `scale` özelliğiyle verilir (transform ezilmez). */
	.kst-hero__kutu {
		scale: .9;
	}

	.kst-hero__kutu--ust {
		top: -10px;
		right: 8px;
		transform-origin: top right;
	}

	.kst-hero__kutu--alt {
		bottom: -12px;
		left: 4px;
		transform-origin: bottom left;
	}

	/* Süreç bölümündeki dev numara. */
	.kst-surec__no {
		font-size: 44px;
	}

	/* CTA öbekleri tam genişlik. */
	.kst-hero__ctalar,
	.kst-ic-hero__ctalar,
	.kst-son-cta__ctalar,
	.kst-404__ctalar {
		flex-direction: column;
		align-items: stretch;
	}

	/* Bulgu 17: .kst-btn{white-space:nowrap} yüzünden "Hemen Ara · 0531 258 81 71"
	   (doğal genişliği 297px) tam genişlik butonun hapından taşıyordu: ölçülen
	   sağ taşma 414px'te 4.7px, 390px'te 16.7px, 320px'te 51.7px. Sarma izni
	   tam genişlik CTA'ların açıldığı bu bloğa konur; buton yalnız sığmadığında
	   satır atlar, 561px üstünde otomatik genişlikte olduğu için değişmez. */
	.kst-hero__ctalar .kst-btn,
	.kst-ic-hero__ctalar .kst-btn,
	.kst-son-cta__ctalar .kst-btn,
	.kst-404__ctalar .kst-btn,
	.kst-btn--blok {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}

	.kst-form__gonder {
		align-self: stretch;
	}
}

/* ==========================================================================
   380px — küçük telefonlar (320px'de taşma olmamalı)
   ========================================================================== */

@media (max-width: 380px) {

	/* Sabit başlık iç boşluğu daraltılır ki hamburger kadraj dışında kalmasın. */
	.kst-header__ic,
	.kst-header .kst-kap {
		padding-left: 14px;
		padding-right: 14px;
	}

	.kst-logo__img {
		height: 36px;
	}

	.kst-mobil {
		gap: 8px;
	}

	.kst-mobil__ac,
	.kst-mobil__ara {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.kst-sticky__btn {
		font-size: 14px;
	}

	/* Bulgu 17 (ek): iç sayfa son CTA panelinin yan boşluğu 44px olduğu için
	   320px'te buton kutusu 192px'e düşüyor ve etiket 3 satıra bölünüyordu.
	   Yan boşluk 20px olunca kutu 240px olur, etiket 2 satırda kalır. */
	.kst-son-cta__panel,
	.kst-son-cta--ic .kst-son-cta__panel {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Uzun tek kelimeler taşma üretmesin. */
	.kst-hero__h1,
	.kst-ic-hero__h1,
	.kst-bolum__baslik,
	.kst-arama__baslik {
		overflow-wrap: break-word;
	}

	/* İki sütunlu bilgi satırları alt alta geçebilsin. */
	.kst-kunye__satir,
	.kst-bolge-bilgi__satir {
		flex-wrap: wrap;
	}

	.kst-cipler {
		grid-template-columns: 1fr;
	}
}