@charset "UTF-8";
/* ==========================================================================
   Ev Tadilat — İlhan İnşaat
   Görsel yön: şantiye & zanaat. Teknik çizim disiplini.
   Kaçınılanlar: Inter, yuvarlak köşe enflasyonu, yumuşak gölge, emoji ikon.
   ========================================================================== */

/* --- 1. Jetonlar ---------------------------------------------------------- */
:root {
  /* Renkler işin dünyasından: ıslak beton, tebeşir, ham bakır, teknik çizim mavisi */
  --grafit:        #132141;   /* logo laciverti */
  --grafit-acik:   #1E2C4E;
  --tebesir:       #F5F3EE;
  --kagit:         #EAE6DC;
  --murekkep:      #16181C;
  --murekkep-ara:  #4E525A;
  --murekkep-sol:  #7A7E86;
  --bakir:         #CC3A02;   /* logo turuncusu — eylem rengi */
  --bakir-koyu:    #A32E01;
  --bakir-sis:     rgba(204, 58, 2, .10);
  --olcu:          #2C5D82;   /* ölçü/teknik çizgi — beklenmedik olan renk */
  --yesil-wa:      #1FA855;

  --cizgi:         #D8D3C7;
  --cizgi-ince:    #E4E0D6;
  --cizgi-koyu:    rgba(245, 243, 238, .13);

  /* Tipografi */
  --f-metin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-veri:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Ölçü — 4px taban ızgara */
  --k1: .25rem;  --k2: .5rem;   --k3: .75rem;  --k4: 1rem;
  --k6: 1.5rem;  --k8: 2rem;    --k12: 3rem;   --k16: 4rem;
  --k20: 5rem;   --k28: 7rem;

  --en: 1180px;          /* içerik genişliği */
  --kenar: clamp(1.25rem, 5vw, 4rem);
  --gecis: .18s cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Temel ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.25rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--f-metin);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--murekkep);
  background: var(--tebesir);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
/* img'e genel zemin verilmiyor: saydam logo/SVG'lerde kutu olarak görünür.
   Yükleme sırasındaki yer tutucu rengi karonun kendi zemininden geliyor. */
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--bakir); color: var(--tebesir); }

/* Klavye odağı — her yerde görünür kalsın */
:focus-visible {
  outline: 2px solid var(--olcu);
  outline-offset: 3px;
}
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--grafit); color: var(--tebesir);
  padding: var(--k3) var(--k6); font-weight: 600;
}
.atla:focus { left: 0; }

/* --- 3. Tipografi --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }
p  { text-wrap: pretty; }
p + p { margin-top: var(--k4); }

a { color: var(--bakir); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--bakir-koyu); }

strong, b { font-weight: 700; }

/* Daktilo etiket — teknik döküman hissinin taşıyıcısı */
.etiket {
  font-family: var(--f-veri);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--murekkep-sol);
  display: block;
}
.etiket-bakir { color: var(--bakir); }
.etiket-acik  { color: rgba(245, 243, 238, .45); }

/* Sayılar hep daktilo ve hizalı */
.veri { font-family: var(--f-veri); font-variant-numeric: tabular-nums; }

/* --- 4. Yerleşim ---------------------------------------------------------- */
.sarmal { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: var(--kenar); }
.blok   { padding-block: clamp(3.5rem, 8vw, 7rem); }
.blok-dar { padding-block: clamp(2.5rem, 5vw, 4rem); }

.koyu { background: var(--grafit); color: var(--tebesir); }
.koyu h1, .koyu h2, .koyu h3, .koyu h4 { color: var(--tebesir); }
.koyu p { color: rgba(245, 243, 238, .68); }
.koyu a { color: #FE7620; }
.koyu a:hover { color: #FF8F45; }

.kagit-zemin { background: var(--kagit); }

/* Bölüm başlığı — numaralı, cetvelli, sola dayalı (ortalanmış AI klişesi değil) */
.baslik { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.baslik-cetvel {
  display: flex; align-items: baseline; gap: var(--k4);
  padding-bottom: var(--k3); margin-bottom: var(--k6);
  border-bottom: 1px solid var(--cizgi);
}
.koyu .baslik-cetvel { border-bottom-color: var(--cizgi-koyu); }
.baslik-no {
  font-family: var(--f-veri); font-size: .8125rem; font-weight: 600;
  color: var(--bakir); letter-spacing: .06em; flex-shrink: 0;
}
.baslik h2 { margin-bottom: var(--k4); }
.baslik p { color: var(--murekkep-ara); font-size: 1.0625rem; max-width: 40rem; }
.koyu .baslik p { color: rgba(245, 243, 238, .6); }

/* --- 5. Düğmeler ---------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .875rem 1.6rem;
  font-family: var(--f-metin); font-size: .9375rem; font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; border-radius: 2px;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
  white-space: nowrap;
}
.dugme svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

.dugme-bakir { background: var(--bakir); color: #FFF; border-color: var(--bakir); }
.dugme-bakir:hover { background: var(--bakir-koyu); border-color: var(--bakir-koyu); color: #FFF; }

.dugme-cizgi { background: transparent; color: var(--murekkep); border-color: var(--murekkep); }
.dugme-cizgi:hover { background: var(--murekkep); color: var(--tebesir); }
.koyu .dugme-cizgi { color: var(--tebesir); border-color: rgba(245, 243, 238, .45); }
.koyu .dugme-cizgi:hover { background: var(--tebesir); color: var(--grafit); border-color: var(--tebesir); }

.dugme-wa { background: var(--yesil-wa); color: #FFF; border-color: var(--yesil-wa); }
.dugme-wa:hover { background: #17803F; border-color: #17803F; color: #FFF; }

.dugme-genis { width: 100%; padding-block: 1rem; }

/* Metin bağlantısı — bakır alt çizgi hover'da uzuyor */
.bag-ok {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
  color: var(--bakir); padding-bottom: 2px;
  border-bottom: 1.5px solid var(--bakir-sis);
  transition: border-color var(--gecis);
}
.bag-ok:hover { border-bottom-color: var(--bakir); }
.bag-ok svg { width: .8em; height: .8em; transition: transform var(--gecis); }
.bag-ok:hover svg { transform: translateX(3px); }

/* --- 6. Üst çubuk --------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 243, 238, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis);
}
.ust.kaydi { box-shadow: 0 1px 0 var(--cizgi), 0 12px 28px -22px rgba(22, 24, 28, .5); }
.ust-ic {
  max-width: var(--en); margin-inline: auto; padding-inline: var(--kenar);
  height: 4.75rem; display: flex; align-items: center; gap: var(--k8);
}

.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.logo-im {
  width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  background: var(--grafit); color: var(--tebesir);
  display: grid; place-items: center;
}
.logo-im svg { width: 1.35rem; height: 1.35rem; }
.logo-ad {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--murekkep); line-height: 1.05; display: block;
}
.logo-alt {
  font-family: var(--f-veri); font-size: .625rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--murekkep-sol); display: block; margin-top: 1px;
}
/* Hazır logo dosyası konduğunda kullanılır (assets/img/logo.svg).
   Logo DİKEY kilitli (yazı üstte, çizim altta, oran 1.55:1). Bu yüzden ince
   bir başlıkta küçük kalıyor — yatay sürümü gelirse yükseklik düşürülebilir. */
.logo-gorsel { height: 1.85rem; width: auto; max-width: 13rem; object-fit: contain;
  background: none; }
.alt-logo .logo-gorsel { height: 2.1rem; }
/* Koyu zeminde logo koyu renkliyse görünür kalsın diye ufak bir güvence */
.alt-logo .logo-gorsel[src$=".svg"] { filter: none; }

.menu { display: flex; align-items: center; gap: var(--k6); list-style: none; }
.menu a {
  position: relative; text-decoration: none;
  font-size: .9375rem; font-weight: 500; color: var(--murekkep-ara);
  padding-block: .4rem; transition: color var(--gecis);
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 1.5px; background: var(--bakir);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--gecis);
}
.menu a:hover { color: var(--murekkep); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
.menu a[aria-current] { color: var(--murekkep); font-weight: 600; }
.menu .dis svg { width: .7em; height: .7em; display: inline; margin-left: .25rem; opacity: .5; vertical-align: baseline; }

.ust-tel {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--f-veri); font-size: .875rem; font-weight: 600;
  color: var(--murekkep); text-decoration: none; letter-spacing: -.01em;
}
.ust-tel svg { width: .95rem; height: .95rem; color: var(--bakir); }
.ust-tel:hover { color: var(--bakir); }

.ust-sag { display: flex; align-items: center; gap: var(--k4); }

/* Kutusuz, geniş çizgili. Dokunma alanı 44px kalıyor ama görünen sadece çizgiler. */
.hamburger {
  display: none; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  background: none; border: 0; cursor: pointer;
  padding: 0; place-items: center;
}
.hamburger span {
  display: block; width: 1.5rem; height: 2px; background: var(--murekkep);
  transition: transform var(--gecis), opacity var(--gecis);
}
.hamburger span + span { margin-top: 5px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobil {
  display: none; border-top: 1px solid var(--cizgi);
  background: var(--tebesir); padding: var(--k4) var(--kenar) var(--k8);
}
.mobil.acik { display: block; }
.mobil a {
  display: block; padding: .95rem 0; text-decoration: none;
  font-size: 1.05rem; font-weight: 500; color: var(--murekkep);
  border-bottom: 1px solid var(--cizgi-ince);
}
.mobil .mobil-tel {
  font-family: var(--f-veri); font-weight: 600; color: var(--bakir);
  border-bottom: none; margin-top: var(--k4);
}

/* --- 7. Ana sayfa girişi — 7/5 asimetrik ---------------------------------- */
.giris { position: relative; background: var(--grafit); color: var(--tebesir); overflow: hidden; }
.giris-fon { position: absolute; inset: 0; z-index: 0; }
.giris-fon img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.giris-fon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(19,33,65,.94) 0%, rgba(19,33,65,.82) 46%, rgba(19,33,65,.62) 100%);
}
.giris-ic {
  position: relative; z-index: 1;
  max-width: var(--en); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6.5rem) var(--kenar) clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
.giris h1 { color: var(--tebesir); margin-block: var(--k4) var(--k6); }
.giris h1 em { font-style: normal; color: #FE7620; }
.giris-ozet { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: rgba(245,243,238,.72); max-width: 34rem; }
.giris-dugmeler { display: flex; flex-wrap: wrap; gap: var(--k3); margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Giriş künyesi — imza öğe */
.kunye { border-top: 1px solid var(--cizgi-koyu); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kunye dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.kunye div { padding: var(--k4) var(--k4) var(--k4) 0; border-bottom: 1px solid var(--cizgi-koyu); }
.kunye dt {
  font-family: var(--f-veri); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,243,238,.42); margin-bottom: .35rem;
}
.kunye dd {
  font-family: var(--f-veri); font-size: 1.375rem; font-weight: 600;
  color: var(--tebesir); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kunye dd small { display: block; font-family: var(--f-metin); font-size: .75rem; font-weight: 400; color: rgba(245,243,238,.42); letter-spacing: 0; margin-top: .25rem; }

/* Giriş formu — kağıt üstünde teklif fişi */
.fis { background: var(--tebesir); color: var(--murekkep); padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: 2px; }
.fis-ust { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--k3); margin-bottom: var(--k6); border-bottom: 1.5px solid var(--murekkep); }
.fis-ust h2 { font-size: 1.3rem; }
.fis-no { font-family: var(--f-veri); font-size: .6875rem; color: var(--murekkep-sol); letter-spacing: .1em; }

/* --- 8. Form -------------------------------------------------------------- */
.alan { margin-bottom: var(--k4); }
.alan label {
  display: block; font-family: var(--f-veri); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-ara);
  margin-bottom: .4rem;
}
.alan input, .alan select, .alan textarea {
  width: 100%; padding: .8rem .9rem;
  background: #FFF; border: 1.5px solid var(--cizgi); border-radius: 2px;
  font-size: .9375rem; transition: border-color var(--gecis);
}
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--murekkep-sol); }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--olcu); box-shadow: 0 0 0 3px rgba(44, 93, 130, .13);
}
.alan textarea { resize: vertical; min-height: 5.5rem; }
.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k3); }
.form-not { font-size: .75rem; color: var(--murekkep-sol); margin-top: var(--k3); line-height: 1.5; }
.form-not a { color: var(--murekkep-ara); }

/* --- 9. Hizmet listesi — asimetrik, üç eşit kart değil -------------------- */
.hizmet-liste { border-top: 1px solid var(--cizgi); }
.hizmet-sat {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: var(--k6); align-items: center;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--cizgi);
  text-decoration: none; color: inherit;
  transition: background var(--gecis), padding-inline var(--gecis);
}
.hizmet-sat:hover { background: rgba(180, 83, 29, .045); padding-inline: var(--k4); }
.hizmet-sat:hover .hizmet-ad { color: var(--bakir); }
.hizmet-no { font-family: var(--f-veri); font-size: .8125rem; color: var(--murekkep-sol); font-variant-numeric: tabular-nums; }
.hizmet-ad { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; transition: color var(--gecis); }
.hizmet-not { font-size: .9375rem; color: var(--murekkep-ara); }
.hizmet-sure { font-family: var(--f-veri); font-size: .8125rem; color: var(--murekkep-ara); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- 10. Öne çıkan üç iş — kasıtlı olarak eşit değil ---------------------- */
.vitrin { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--k4); }
.vitrin-is { position: relative; display: block; text-decoration: none; overflow: hidden; background: var(--grafit); }
.vitrin-is img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity var(--gecis); opacity: .88; }
.vitrin-is:hover img { transform: scale(1.04); opacity: 1; }
.vitrin-buyuk img { aspect-ratio: 4 / 5; }
.vitrin-sag { display: grid; gap: var(--k4); }
.vitrin-yazi {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: var(--k12) var(--k4) var(--k4);
  background: linear-gradient(to top, rgba(19,33,65,.9), transparent);
  color: var(--tebesir);
}
.vitrin-yazi h3 { font-size: 1.1rem; color: var(--tebesir); }
.vitrin-yazi .etiket { color: rgba(245,243,238,.6); margin-bottom: .3rem; }

/* --- 11. Yöntem — numaralı adımlar, ölçü çizgisiyle ----------------------- */
.yontem { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border-top: 1px solid var(--cizgi); }
.yontem-adim { padding: var(--k8) var(--k6) var(--k8) 0; border-bottom: 1px solid var(--cizgi); position: relative; }
.yontem-adim + .yontem-adim { padding-left: var(--k6); }
.yontem-adim + .yontem-adim::before {
  content: ""; position: absolute; left: 0; top: var(--k8); bottom: var(--k8);
  width: 1px; background: var(--cizgi);
}
/* Koyu zeminde aynı cetvel çizgileri açık renge döner */
.koyu .yontem, .koyu .yontem-adim { border-color: var(--cizgi-koyu); }
.koyu .yontem-adim + .yontem-adim::before { background: var(--cizgi-koyu); }
.yontem-no {
  font-family: var(--f-veri); font-size: .75rem; font-weight: 600;
  color: var(--bakir); letter-spacing: .1em; margin-bottom: var(--k4); display: block;
}
.yontem-adim h3 { margin-bottom: var(--k3); font-size: 1.2rem; }
.yontem-adim p { font-size: .9375rem; }

/* --- 12. Sebep ızgarası --------------------------------------------------- */
.sebep { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.sebep-kutu { background: var(--tebesir); padding: clamp(1.4rem, 2.6vw, 2rem); }
.sebep-kutu svg { width: 1.6rem; height: 1.6rem; color: var(--olcu); margin-bottom: var(--k4); }
.sebep-kutu h3 { font-size: 1.0625rem; margin-bottom: .55rem; }
.sebep-kutu p { font-size: .9375rem; color: var(--murekkep-ara); }

/* --- 13. Hizmet detay sayfası --------------------------------------------- */
.sayfa-bas { background: var(--grafit); color: var(--tebesir); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); }
.sayfa-bas h1 { margin-block: var(--k4) var(--k4); max-width: 20ch; }
.sayfa-bas p { font-size: 1.0625rem; max-width: 44rem; }

.detay { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.detay-metin > * + * { margin-top: var(--k6); }
.detay-metin h2 { margin-top: var(--k12); padding-top: var(--k6); border-top: 1px solid var(--cizgi); }
.detay-metin h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.detay-metin h3 { margin-top: var(--k8); }
.detay-metin ul { list-style: none; margin-top: var(--k4); }
.detay-metin ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: .6rem; font-size: 1rem;
}
.detay-metin ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .55rem; height: 1.5px; background: var(--bakir);
}
.detay-gorsel { margin-block: var(--k8); }
.detay-gorsel img { width: 100%; }
.detay-gorsel figcaption { font-family: var(--f-veri); font-size: .6875rem; letter-spacing: .06em; color: var(--murekkep-sol); margin-top: .6rem; }

/* Yan sütun künyesi — imza öğenin detay sayfası hâli */
.yan { position: sticky; top: 6.5rem; display: grid; gap: var(--k6); }
.yan-kunye { border: 1.5px solid var(--murekkep); border-radius: 2px; }
.yan-kunye-bas {
  background: var(--murekkep); color: var(--tebesir);
  padding: .7rem 1rem; font-family: var(--f-veri); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.yan-kunye dl { padding: .4rem 1rem 1rem; }
.yan-kunye div { display: flex; justify-content: space-between; gap: var(--k4); align-items: baseline; padding: .7rem 0; border-bottom: 1px dotted var(--cizgi); }
.yan-kunye div:last-child { border-bottom: none; }
.yan-kunye dt { font-family: var(--f-veri); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--murekkep-sol); }
.yan-kunye dd { font-family: var(--f-veri); font-size: .875rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.yan-eylem { display: grid; gap: var(--k3); }

/* --- 14. Sorular — details/summary ---------------------------------------- */
.sorular { border-top: 1px solid var(--cizgi); max-width: 48rem; }
.soru { border-bottom: 1px solid var(--cizgi); }
.soru summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k4);
  padding: var(--k6) 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em;
  transition: color var(--gecis);
}
.soru summary::-webkit-details-marker { display: none; }
.soru summary:hover { color: var(--bakir); }
.soru summary::after {
  content: ""; flex-shrink: 0; width: .8rem; height: .8rem; margin-top: .35rem;
  background: var(--bakir);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform var(--gecis);
}
.soru[open] summary::after { transform: rotate(135deg); }
.soru-cevap { padding-bottom: var(--k6); color: var(--murekkep-ara); max-width: 42rem; }

/* --- 15. Bölgeler --------------------------------------------------------- */
.bolge-agi { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1px; background: var(--cizgi); border: 1px solid var(--cizgi); }
.bolge-agi a, .bolge-agi span {
  background: var(--tebesir); padding: .85rem 1rem; text-decoration: none;
  font-size: .9375rem; color: var(--murekkep); transition: background var(--gecis), color var(--gecis);
}
.bolge-agi a { font-weight: 600; }
.bolge-agi a:hover { background: var(--murekkep); color: var(--tebesir); }
.bolge-agi span { color: var(--murekkep-sol); }

/* --- 16. Çağrı şeridi ----------------------------------------------------- */
.serit { background: var(--bakir); color: #FFF; }
.serit-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--k8); align-items: center; }
.serit h2 { color: #FFF; max-width: 22ch; }
.serit p { color: rgba(255,255,255,.85); margin-top: var(--k3); max-width: 44ch; }
.serit-dugmeler { display: flex; flex-wrap: wrap; gap: var(--k3); }
.serit .dugme-beyaz { background: #FFF; color: var(--bakir-koyu); border-color: #FFF; }
.serit .dugme-beyaz:hover { background: var(--grafit); color: #FFF; border-color: var(--grafit); }
.serit .dugme-cizgi { color: #FFF; border-color: rgba(255,255,255,.55); }
.serit .dugme-cizgi:hover { background: #FFF; color: var(--bakir-koyu); border-color: #FFF; }

/* --- 17. Alt bilgi -------------------------------------------------------- */
.alt { background: var(--grafit); color: rgba(245,243,238,.6); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.alt-agi {
  max-width: var(--en); margin-inline: auto; padding-inline: var(--kenar);
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: var(--k12);
}
.alt-logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-bottom: var(--k4); }
.alt-logo .logo-im { background: var(--bakir); }
.alt-logo .logo-ad { color: var(--tebesir); }
.alt-logo .logo-alt { color: rgba(245,243,238,.4); }
.alt-tanim { font-size: .9375rem; color: rgba(245,243,238,.5); max-width: 26rem; }
.alt-iletisim { display: grid; gap: .6rem; margin-top: var(--k6); }
.alt-iletisim a {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-size: .9375rem; color: rgba(245,243,238,.72); transition: color var(--gecis);
}
.alt-iletisim a:hover { color: var(--tebesir); }
.alt-iletisim svg { width: .95rem; height: .95rem; color: var(--bakir); flex-shrink: 0; }
.alt-iletisim .veri { font-family: var(--f-veri); font-size: .875rem; }

.alt-sut h3 {
  font-family: var(--f-veri); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(245,243,238,.4);
  margin-bottom: var(--k4); padding-bottom: var(--k3); border-bottom: 1px solid var(--cizgi-koyu);
}
.alt-sut a, .alt-sut p {
  display: block; text-decoration: none; font-size: .9rem;
  color: rgba(245,243,238,.58); margin-bottom: .55rem; transition: color var(--gecis);
}
.alt-sut a:hover { color: var(--bakir); }
.alt-adres { font-style: normal; font-size: .9rem; color: rgba(245,243,238,.58); line-height: 1.7; }
.alt-saat { font-family: var(--f-veri); font-size: .8125rem; color: rgba(245,243,238,.42); margin-top: var(--k4); }

.alt-son {
  max-width: var(--en); margin-inline: auto; padding: var(--k6) var(--kenar);
  border-top: 1px solid var(--cizgi-koyu);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--k4);
  font-size: .8125rem; color: rgba(245,243,238,.34);
}
.alt-son a { color: rgba(245,243,238,.34); text-decoration: none; }
.alt-son a:hover { color: rgba(245,243,238,.7); }
.alt-son-bag { display: flex; gap: var(--k6); flex-wrap: wrap; }

/* --- 18. Sabit WhatsApp --------------------------------------------------- */
.wa-sabit {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--yesil-wa); color: #FFF;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 6px 20px -6px rgba(31, 168, 85, .7);
  transition: transform var(--gecis);
}
.wa-sabit:hover { transform: translateY(-2px) scale(1.04); color: #FFF; }
.wa-sabit svg { width: 1.7rem; height: 1.7rem; }

/* --- 19. Görünürlük animasyonu — tek bir hareket, içerik için -------------
   Önemli: içerik varsayılan olarak GÖRÜNÜR. Gizleme yalnızca <html class="js">
   varken, yani JavaScript gerçekten çalışıyorken devreye giriyor. Böylece
   script yüklenmezse veya hata verirse sayfa boş kalmıyor.                  */
.js .bel { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1); }
.js .bel.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .bel { opacity: 1; transform: none; }
}

/* --- 20. Uyarlama --------------------------------------------------------- */
@media (max-width: 1040px) {
  .menu { gap: var(--k4); }
  .menu a { font-size: .875rem; }
  .alt-agi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .menu, .ust-tel, .ust-sag .dugme { display: none; }
  .hamburger { display: grid; }
  .giris-ic { grid-template-columns: 1fr; }
  .detay { grid-template-columns: 1fr; }
  .yan { position: static; }
  .vitrin { grid-template-columns: 1fr; }
  .vitrin-buyuk img { aspect-ratio: 4 / 3; }
  .serit-ic { grid-template-columns: 1fr; gap: var(--k6); }
  .hizmet-sat { grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: var(--k4); }
  .hizmet-not { display: none; }
  .yontem-adim + .yontem-adim { padding-left: 0; }
  .yontem-adim + .yontem-adim::before { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .alan-cift { grid-template-columns: 1fr; }
  .alt-agi { grid-template-columns: 1fr; gap: var(--k8); }
  .kunye dl { grid-template-columns: 1fr 1fr; }
  .giris-dugmeler .dugme { flex: 1 1 100%; }
  .hizmet-sure { display: none; }
  .wa-sabit { width: 3rem; height: 3rem; right: 1rem; bottom: 1rem; }
}

/* --- 21. Baskı ------------------------------------------------------------ */
@media print {
  .ust, .mobil, .wa-sabit, .serit, .yan-eylem { display: none !important; }
  body { background: #FFF; font-size: 11pt; }
  .koyu, .giris, .sayfa-bas { background: #FFF !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- 22. Hizmet mozaiği ---------------------------------------------------
   Kaynak fotoğraflar KARE (1024×1024). Karolar da 4:3'e yakın tutuluyor;
   4:1 gibi uzun karolarda kare fotoğraftan ince bir şerit kalıyor ve
   neye baktığın anlaşılmıyor. Boyut farkı oran bozarak değil, KARONUN
   BÜYÜKLÜĞÜ değiştirilerek veriliyor.
   Sütun 240px iken satır 180px → 2x2 karo tam 4:3 çıkıyor.              */
.mozaik {
  --sutun: 6;
  --bosluk: 6px;
  display: grid;
  grid-template-columns: repeat(var(--sutun), 1fr);
  /* Yedek: kap sorgusu desteklenmezse ekran genişliğine göre */
  grid-auto-rows: clamp(4.5rem, 8.1vw, 11rem);
  grid-auto-flow: dense;
  gap: var(--bosluk);
}
.mz-is {
  position: relative; overflow: hidden; text-decoration: none;
  background: var(--grafit-acik); display: block;
  grid-column: span 2; grid-row: span 2;      /* taban karo → 4:3 */
}
/* Sarmalayıcı da karoyu doldurmalı — yoksa görsel kendi oranında kalıp
   altında boşluk bırakıyor. */
.mz-is picture { display: block; width: 100%; height: 100%; }
.mz-is img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .3s; opacity: .94;
}
.mz-is:hover img, .mz-is:focus-visible img { transform: scale(1.05); opacity: 1; }

/* Boyut farkı — oran korunuyor, sadece karo büyüyor */
.mz-buyuk { grid-column: span 3; grid-row: span 3; }   /* 4:3, daha büyük */
.mz-genis { grid-column: span 4; grid-row: span 2; }   /* geniş fotoğraflar için */

.mz-is::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(19,33,65,.9) 0, rgba(19,33,65,.6) 2rem, rgba(19,33,65,0) 5.5rem);
  transition: background .3s;
}
.mz-is:hover::after, .mz-is:focus-visible::after {
  background: linear-gradient(to top,
    rgba(163,46,1,.92) 0, rgba(163,46,1,.55) 2.4rem, rgba(163,46,1,.05) 6rem);
}
.mz-yazi {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  padding: clamp(.7rem, 1.3vw, 1.15rem);
  display: flex; flex-direction: column; gap: .15rem;
}
.mz-ad {
  color: #FFF; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(.88rem, 1.2vw, 1.1rem); line-height: 1.15;
  text-shadow: 0 1px 4px rgba(8, 14, 30, .8);
}
.mz-buyuk .mz-ad, .mz-genis .mz-ad { font-size: clamp(1.05rem, 1.8vw, 1.6rem); }
.mz-sure {
  font-family: var(--f-veri); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(8, 14, 30, .85);
}

.mz-tum {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1rem, 2vw, 1.6rem); background: var(--bakir);
  grid-column: span 2; grid-row: span 2;
}
.mz-tum::after { display: none; }
.mz-tum .mz-ad, .mz-tum .mz-sure { text-shadow: none; }
.mz-tum .mz-sure { color: rgba(255,255,255,.8); }
.mz-tum:hover { background: var(--bakir-koyu); }

@media (max-width: 900px) {
  .mozaik { --sutun: 4; grid-auto-rows: clamp(4.5rem, 13vw, 8rem); }
  .mz-is, .mz-tum, .mz-buyuk { grid-column: span 2; grid-row: span 2; }
  .mz-genis { grid-column: span 4; grid-row: span 2; }
}

/* Satır yüksekliği = sütun genişliği × 0.75 → 2x2 karo tam 4:3 çıkar.
   Ekran genişliği (vw) değil, KABIN kendi genişliği ölçülüyor.
   Medya sorgularından SONRA geliyor ki onların yedek değerini ezebilsin. */
@supports (width: 1cqw) {
  .mozaik {
    grid-auto-rows: calc(
      ((100cqw - (var(--sutun) - 1) * var(--bosluk)) / var(--sutun)) * 0.75
    );
  }
}
@media (max-width: 480px) {
  .mozaik { gap: 4px; }
}

/* Mozaik sayfa kenarlarına kadar açılsın — sarmal genişliğinden taşar */
.sarmal-genis {
  width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--kenar);
  container-type: inline-size;   /* mozaiğin satır yüksekliği buradan ölçülüyor */
}