/* Görsel dil "Atölye" (tasarım v2, Batuhan seçimi 07.11): koyu tonlu, sert hatlı, büyük harf başlıklar,
   turuncu vurgu, tam genişlik fotoğraf. İskelet temel.css'te; renkler burada, gündüz + gece. */

:root {
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yazi-baslik: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --baslik-agirlik: 800; --baslik-aralik: .01em; --baslik-donusum: uppercase;
  --dugme-yaricap: 3px; --kart-yaricap: 3px; --girdi-yaricap: 3px; --adim-yaricap: 3px;

  /* Gündüz */
  --zemin: #f3f1ed; --yuzey: #ffffff; --yuzey-2: #e9e5de;
  --metin: #15171a; --soluk: #565b62; --cizgi: #d6d0c6; --kenar: #827b71;
  --vurgu: #a9520b; --baglanti: #a9520b; --odak: #a9520b;
  --ana: #a9520b; --ana-metin: #ffffff; --ana-hover: #8a4207;
  --girdi-zemin: #ffffff; --hata: #b3261e;
  --ust-zemin: #ffffff;
  /* Her iki modda koyu kalanlar (atölye hissi) */
  --bant-zemin: #1b1e22; --bant-metin: #f1efea; --bant-soluk: #bdb8b0; --bant-vurgu: #f0892a;
  --alt-zemin: #111315; --alt-metin: #bdb8b0; --alt-baglanti: #f1efea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #111315; --yuzey: #1a1d21; --yuzey-2: #22262b;
    --metin: #f1efea; --soluk: #aaa6a0; --cizgi: #30353b; --kenar: #7d7870;
    --vurgu: #f0892a; --baglanti: #f39a3d; --odak: #ffb366;
    --ana: #f0892a; --ana-metin: #111315; --ana-hover: #ffa64d;
    --girdi-zemin: #111315; --hata: #ff8a80;
    --ust-zemin: #111315;
    --bant-zemin: #1a1d21; --alt-zemin: #0b0c0e;
  }
}
:root[data-tema="koyu"] {
  --zemin: #111315; --yuzey: #1a1d21; --yuzey-2: #22262b;
  --metin: #f1efea; --soluk: #aaa6a0; --cizgi: #30353b; --kenar: #7d7870;
  --vurgu: #f0892a; --baglanti: #f39a3d; --odak: #ffb366;
  --ana: #f0892a; --ana-metin: #111315; --ana-hover: #ffa64d;
  --girdi-zemin: #111315; --hata: #ff8a80;
  --ust-zemin: #111315;
  --bant-zemin: #1a1d21; --alt-zemin: #0b0c0e;
}

h1, h2, h3 { font-family: var(--yazi-baslik); }
.ust { border-bottom: 3px solid var(--vurgu); }

/* Kahraman: fotoğraf tam genişlikte arka plan, üstünde koyu geçiş; her iki modda koyu. */
.kahraman { position: relative; isolation: isolate; color: #fff; background: #111315; overflow: hidden; }
/* Telefonda fotoğraf yalnızca üst bantta; metin tabelanın altında düz koyu zeminde başlar. */
.kahraman-gorsel { position: absolute; left: 0; right: 0; top: 0; height: 19rem; z-index: -2; }
.kahraman-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kahraman::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 19rem; z-index: -1;
  background: linear-gradient(180deg, rgba(17,19,21,0) 45%, rgba(17,19,21,.7) 75%, #111315 100%);
}
.kahraman-ic { display: grid; align-content: end; padding-top: 18rem; padding-bottom: 2rem; gap: 1.5rem; }
.kahraman .ust-etiket { color: #f0892a; }
.kahraman h1 { font-size: clamp(2.4rem, 1.4rem + 5vw, 4.6rem); line-height: 1; margin-bottom: .35em; }
.kahraman-giris { font-size: 1.1rem; color: #e4e0d9; max-width: 38rem; }
.kahraman .dugme-ana { background: #f0892a; color: #111315; }
.kahraman .dugme-ana:hover { background: #ffa64d; color: #111315; }
.kahraman .dugme-ikincil { color: #fff; border-color: rgba(255,255,255,.7); }
.kahraman .dugme-ikincil:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.kahraman-kart { display: grid; gap: .5rem; border-top: 1px solid rgba(255,255,255,.25); padding-top: 1rem; color: #e4e0d9; }
.kahraman-kart p { display: flex; gap: .6rem; align-items: center; margin: 0; }
.kahraman-kart .ikon { color: #f0892a; }

/* Hizmetler: numaralı satırlar */
.hizmet-liste { gap: 0; border-top: 1px solid var(--cizgi); }
.hizmet { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--cizgi); }
.hizmet-no { grid-row: 1 / span 2; font-family: var(--yazi-baslik); font-size: 1.6rem; font-weight: 800; color: var(--vurgu); line-height: 1; }
.hizmet-ikon { display: none; }
.hizmet h3 { margin-bottom: .2em; }

/* Süreç bandı: her iki modda koyu, üstte uyarı şeridi */
.bolum-vurgu { position: relative; }
.bolum-vurgu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, #f0892a 0 12px, transparent 12px 24px);
}
.adimlar li { padding-top: .25rem; }

.randevu-kart { border-left: 4px solid var(--vurgu); }

@media (min-width: 48em) {
  .kahraman-gorsel, .kahraman::after { height: auto; bottom: 0; }
  .kahraman-ic { min-height: 36rem; padding-top: 10rem; padding-bottom: 3rem; grid-template-columns: 1.4fr 1fr; align-items: end; }
  .kahraman::after { background: linear-gradient(90deg, rgba(17,19,21,.96) 0%, rgba(17,19,21,.82) 45%, rgba(17,19,21,.25) 100%); }
  .kahraman-gorsel img { object-position: right center; }
  .kahraman-kart { border-top: 0; border-left: 3px solid #f0892a; padding: .25rem 0 .25rem 1.25rem; align-self: end; }
  .hizmet-liste { grid-template-columns: 1fr 1fr; column-gap: 3rem; border-top: 0; }
  .hizmet { border-top: 1px solid var(--cizgi); border-bottom: 0; }
}
@media (min-width: 64em) {
  .hizmet-liste { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
  .hizmet { grid-template-columns: 1fr; padding: 1.5rem 0; }
  .hizmet-no { grid-row: auto; margin-bottom: .75rem; }
}