/* Terminal Metal — ortak stil. Tasarım tokenları CLAUDE.md §10'da. */
/* ── Modernist tokens — tasarımdan birebir alındı ───────────────────────── */
:root{
  --color-bg:#f3f2f2; --color-surface:#eae9e9; --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-divider:color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;
  --color-accent-600:#dd2b0f; --color-accent-700:#ae1800;
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --koyu:#232120;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.sayfa{max-width:1440px;margin:0 auto;background:var(--color-bg)}

/* ── Üst bar ─────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:20;background:var(--koyu);display:flex;
  align-items:center;justify-content:space-between;gap:24px;padding:14px 20px;
  border-bottom:2px solid #000}
.marka{display:flex;align-items:stretch;gap:12px}
.marka .cubuk{width:6px;background:var(--color-accent)}
.marka .ad{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:.95;
  letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.marka .ad span{display:block;color:var(--color-neutral-400)}
/* Logonun altındaki alt başlık — kırmızı çubukla aynı turuncu */
.marka .ad em{display:block;margin-top:5px;font-style:normal;font-size:10px;font-weight:700;
  line-height:1.1;letter-spacing:.18em;color:var(--color-accent)}
nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:10px 20px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-neutral-300)}
nav a:hover{color:var(--color-accent)}
nav a.dugme{background:var(--color-accent);color:#fff;padding:11px 18px;letter-spacing:.1em}
nav a.dugme:hover{background:var(--color-accent-600);color:#fff}
.gizli-mobil{display:none}

/* ── Kapak ───────────────────────────────────────────────────────────────── */
#ust{position:relative;background:var(--koyu)}
#ust .foto{position:absolute;inset:0;background:var(--kapak) center/cover no-repeat,
  repeating-linear-gradient(135deg,#2b2827 0 22px,#232120 22px 44px)}
#ust .perde{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(35,33,32,.94) 0%, rgba(35,33,32,.92) 56%, rgba(35,33,32,.74) 72%,
  rgba(35,33,32,.28) 100%)}
#ust .ic{position:relative;display:grid;grid-template-columns:1fr}
#ust .bosluk{min-height:170px}
.kapak-metin{padding:40px 20px 44px;display:flex;flex-direction:column;gap:22px}
.slogan{display:flex;flex-direction:column;gap:10px;border-left:8px solid var(--color-accent);
  padding:6px 0 6px 18px}
.slogan b{font-family:var(--font-heading);font-size:34px;font-weight:800;line-height:1.02;
  letter-spacing:-.03em;color:#fff}
.slogan i{font-style:normal;font-size:16px;line-height:1.5;color:var(--color-neutral-300)}
.ustyazi{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent);flex-wrap:wrap}
.ustyazi .tire{width:32px;height:2px;background:var(--color-accent);flex:none}
h1{margin:0;font-family:var(--font-heading);font-weight:700;font-size:30px;line-height:1.1;
  letter-spacing:-.02em;color:var(--color-neutral-300);text-wrap:pretty}
.kapak-metin p{margin:0;max-width:480px;font-size:17px;line-height:1.6;
  color:var(--color-neutral-300)}
.dugmeler{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dg{padding:16px 24px;font-size:14px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:inline-block}
.dg.dolu{background:var(--color-accent);color:#fff}
.dg.dolu:hover{background:var(--color-accent-600)}
.dg.bos{border:2px solid var(--color-neutral-500);color:#fff}
.dg.bos:hover{border-color:var(--color-accent);color:var(--color-accent)}
.rozetler{display:flex;gap:18px 28px;flex-wrap:wrap;padding-top:4px;font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-400)}

/* ── Bölümler ────────────────────────────────────────────────────────────── */
section.blok{padding:56px 20px;display:flex;flex-direction:column;gap:32px}
.baslik{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-bottom:4px solid var(--color-text);padding-bottom:16px}
.baslik h2{margin:0;font-family:var(--font-heading);font-weight:800;font-size:32px;
  letter-spacing:-.025em;text-transform:uppercase}
.baslik .yan{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-neutral-700)}

.izgara{display:grid;grid-template-columns:1fr;gap:2px;background:transparent}
.kart{background:#fff;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.kart-gorsel{position:relative;aspect-ratio:5/3;overflow:hidden;margin:0;background:var(--color-neutral-300)}
.kart-gorsel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.kart:hover .kart-gorsel img{transform:scale(1.025)}
.kart-gorsel figcaption{position:absolute;right:0;bottom:0;background:rgba(35,33,32,.84);color:#fff;
  padding:7px 10px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.kart-icerik{padding:24px;display:flex;flex:1;flex-direction:column;gap:12px}
.kart .no{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--color-accent)}
.kart h3{margin:0;font-family:var(--font-heading);font-size:22px;font-weight:700;
  letter-spacing:-.01em}
.kart p{margin:0;font-size:15px;line-height:1.6;color:var(--color-neutral-800)}
.kart .detay{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700)}
.kart .detay:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Kullanıcının seçtiği model örnekleri ── */
.model-notu{margin:0;max-width:780px;font-size:16px;line-height:1.7;color:var(--color-neutral-800)}
.model-grid{display:grid;grid-template-columns:1fr;gap:12px}
.model-kare{position:relative;aspect-ratio:3/2;overflow:hidden;margin:0;background:var(--color-neutral-900)}
.model-kare img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.model-kare:hover img{transform:scale(1.025)}
.model-kare figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;
  background:linear-gradient(transparent,rgba(35,33,32,.9));color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.adimlar{display:grid;grid-template-columns:1fr;gap:24px}
.adim{display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--color-text);
  padding-top:16px}
.adim:first-child{border-top-color:var(--color-accent)}
.adim .no{font-family:var(--font-heading);font-size:36px;font-weight:800;letter-spacing:-.03em}
.adim h3{margin:0;font-size:18px;font-weight:700}
.adim p{margin:0;font-size:15px;line-height:1.6;color:var(--color-neutral-800)}

/* ── Kırmızı çağrı bandı ─────────────────────────────────────────────────── */
.band{background:var(--color-accent);padding:48px 20px;display:flex;
  align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band .cizgi{width:64px;height:4px;background:#fff;margin-bottom:16px}
.band h2{margin:0;font-family:var(--font-heading);font-weight:700;font-size:34px;
  line-height:1.05;letter-spacing:-.03em;color:#fff}
.band .sag{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.band .sag a{background:#fff;color:var(--color-accent-700);padding:18px 26px;
  font-family:var(--font-heading);font-size:20px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap}
.band .sag a:hover{background:var(--color-neutral-200)}
.band .sag span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff}

/* ── Form ────────────────────────────────────────────────────────────────── */
#not{background:#fff;border-top:2px solid var(--color-divider);padding:56px 20px;
  display:grid;grid-template-columns:1fr;gap:36px}
#not h2{margin:0;font-family:var(--font-heading);font-weight:800;font-size:32px;
  letter-spacing:-.025em;text-transform:uppercase}
#not .kalin{height:4px;background:var(--color-text)}
#not .anlatim{margin:0;font-size:17px;line-height:1.6;color:var(--color-neutral-800);
  max-width:460px}
#not .anlatim a{color:var(--color-accent-700);border-bottom:2px solid var(--color-accent)}
#not .kucuk{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700)}
form{display:flex;flex-direction:column;gap:16px}
.ikili{display:grid;grid-template-columns:1fr;gap:16px}
label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-700)}
input,select,textarea{border:2px solid var(--color-text);background:var(--color-bg);
  padding:14px 16px;font-family:var(--font-body);font-size:16px;color:var(--color-text);
  border-radius:0;width:100%}
textarea{resize:vertical}
button[type=submit]{align-self:flex-start;background:var(--color-accent);color:#fff;
  border:none;padding:17px 30px;font-family:var(--font-body);font-size:15px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
button[type=submit]:hover{background:var(--color-accent-600)}
button[type=submit]:disabled{background:var(--color-neutral-500);cursor:wait}
.tuzak{position:absolute;left:-9999px;opacity:0}
#sonuc{border:4px solid var(--color-accent);padding:32px;display:none;
  flex-direction:column;gap:12px;align-self:start}
#sonuc.goster{display:flex}
#sonuc .etiket{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-accent)}
#sonuc .buyuk{font-family:var(--font-heading);font-size:26px;font-weight:700;
  letter-spacing:-.02em}
#sonuc p{margin:0;font-size:16px;line-height:1.6;color:var(--color-neutral-800)}

/* ── İletişim ────────────────────────────────────────────────────────────── */
#iletisim{background:var(--koyu);padding:56px 20px;display:grid;
  grid-template-columns:1fr;gap:32px}
#iletisim .sutun{display:flex;flex-direction:column;gap:14px}
#iletisim .etiket{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-accent)}
#iletisim .buyuk{font-family:var(--font-heading);font-size:24px;font-weight:700;color:#fff}
#iletisim .buyuk a:hover{color:var(--color-accent)}
#iletisim .metin{font-size:16px;line-height:1.7;color:var(--color-neutral-300)}
#iletisim .soluk{font-size:14px;line-height:1.7;color:var(--color-neutral-400)}
#iletisim a.eposta{font-size:16px;line-height:1.7;color:#fff}
#iletisim a.eposta:hover{color:var(--color-accent)}

footer{background:var(--koyu);border-top:2px solid var(--color-neutral-800);
  padding:26px 20px;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
footer .marka .ad{font-size:15px}
footer .sag{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-500)}
footer .sag .site{color:var(--color-neutral-400);font-size:10px;letter-spacing:.1em}

/* ── Sık sorulanlar ── */
.sorular{display:grid;grid-template-columns:1fr;gap:2px;background:transparent}
.ss{background:#fff;padding:24px 22px}
.ss h3{margin:0 0 8px;font-family:var(--font-heading);font-size:18px;font-weight:700;
  letter-spacing:-.01em}
.ss p{margin:0;font-size:15.5px;line-height:1.65;color:var(--color-neutral-800)}

/* ── Hizmet bölgesi ── */
.bolge{background:var(--koyu);color:var(--color-neutral-300);padding:56px 20px}
.bolge-ic{display:flex;flex-direction:column;gap:28px}
.baslik-koyu{border-bottom:4px solid var(--color-accent);padding-bottom:14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.baslik-koyu h2{margin:0;font-family:var(--font-heading);font-weight:800;font-size:30px;
  letter-spacing:-.025em;text-transform:uppercase;color:#fff}
.baslik-koyu span{font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--color-neutral-500)}
.bolge-ad{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-accent);margin-bottom:12px}
.yerler{columns:2;column-gap:20px;list-style:none;margin:0;padding:0;font-size:15px;
  line-height:1.75;color:var(--color-neutral-300)}
.yerler li{break-inside:avoid;margin:0}
.bolge-metin{margin:0;font-size:15.5px;line-height:1.8;color:var(--color-neutral-300)}
.bolge-metin strong{color:#fff}

/* ── Geniş ekran ─────────────────────────────────────────────────────────── */
@media(min-width:720px){
  header{padding:18px 40px;gap:48px}
  .marka .ad{font-size:30px}
  .marka .ad em{font-size:10px;letter-spacing:.22em;margin-top:6px}
  nav{font-size:13px;gap:16px 28px}
  .gizli-mobil{display:inline}
  /* Kapak bloğu ekrana sığsın: yazılar aşağı taşarsa fotoğraf da onunla
     birlikte uzuyor ve büyük görünüyor. Boşlukları ve puntoları kıstık. */
  .kapak-metin{padding:56px 56px 52px;gap:22px}
  .slogan b{font-size:38px}
  .slogan i{font-size:16px}
  h1{font-size:30px}
  .kapak-metin p{font-size:17px}
  #ust .ic{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  #ust .bosluk{min-height:440px}
  /* Tasarımdaki orijinal perde: fotoğraf sağda en net, sola doğru azalarak kayboluyor */
  #ust .perde{background:linear-gradient(90deg,rgba(35,33,32,.94) 0%,
    rgba(35,33,32,.86) 34%,rgba(35,33,32,.45) 62%,rgba(35,33,32,.15) 100%)}
  section.blok{padding:88px 56px;gap:48px}
  .baslik h2{font-size:44px}
  .izgara{grid-template-columns:repeat(3,1fr)}
  .kart-icerik{padding:28px;min-height:250px}
  .kart h3{font-size:24px}
  .model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adimlar{grid-template-columns:repeat(4,1fr);gap:40px}
  .adim .no{font-size:40px}
  .band{padding:80px 56px;flex-wrap:nowrap}
  .band h2{font-size:48px}
  #not{padding:88px 56px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px}
  #not h2{font-size:44px}
  .ikili{grid-template-columns:1fr 1fr}
  #iletisim{padding:88px 56px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
  #iletisim .sutun{padding:0 40px;border-left:2px solid var(--color-neutral-800)}
  #iletisim .sutun:first-child{padding:0 40px 0 0;border-left:none}
  .sorular{grid-template-columns:1fr 1fr}
  .ss{padding:30px 28px}
  .ss h3{font-size:19px}
  .bolge{padding:88px 56px}
  .bolge-ic{gap:40px}
  .baslik-koyu h2{font-size:44px}
  .yerler{columns:4;font-size:15.5px}
  footer{padding:32px 56px}
  }
@media(min-width:1100px){
  .model-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .band h2{font-size:56px}
}
/* ── Alt bilgi sayfa bağlantıları (6 sayfada ortak) ── */
footer{flex-direction:column;align-items:stretch;gap:0}
footer .alt-nav{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--color-neutral-800);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-400)}
footer .alt-nav a:hover{color:var(--color-accent)}
footer .alt-satir{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ── Hizmet sayfaları (seyyar kaynak, kapı, korkuluk, çit, fason) ── */
#ust.hizmet .ic{grid-template-columns:1fr}
#ust.hizmet .kapak-metin{padding-bottom:28px}
#ust.hizmet h1{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.03em;color:#fff}
/* Kapak fotoğrafı sabit kutuda: taşmaz, sayfayı uzatmaz */
.kapak-foto{position:relative;margin:0 20px 40px;aspect-ratio:16/10;max-height:260px;overflow:hidden;
  background:var(--color-neutral-900);border-top:4px solid var(--color-accent)}
.kapak-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* İki fotoğraflı kapak (kapı sayfası: ferforje + panel) */
.kapak-foto.ikili{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:2/1;max-height:220px;background:#000}
.kapak-foto.ikili img{position:static;min-height:0}
.kirinti{padding:18px 20px 0;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-neutral-600)}
.kirinti a:hover{color:var(--color-accent)}
.kart.yazi{border-top:4px solid var(--color-text)}
.kart.yazi:first-child{border-top-color:var(--color-accent)}
.kart.yazi .kart-icerik{min-height:0}
.diger{display:flex;flex-wrap:wrap;gap:10px}
.diger a{border:2px solid var(--color-text);padding:12px 16px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.diger a:hover{border-color:var(--color-accent);color:var(--color-accent)}
@media(min-width:720px){
  #ust.hizmet .ic{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  #ust.hizmet .kapak-metin{padding-bottom:52px}
  #ust.hizmet h1{font-size:44px}
  .kapak-foto{margin:0;aspect-ratio:auto;max-height:560px;min-height:420px;
    border-top:none;border-left:4px solid var(--color-accent)}
  .kirinti{padding:22px 56px 0}
  .kapak-foto.ikili{grid-template-columns:1fr;grid-template-rows:1fr 1fr;aspect-ratio:auto;max-height:560px;min-height:420px}
}