/* ==========================================================================
   YİMA YAPI — Bileşenler
   Tüm sayfalarda yeniden kullanılır. tokens.css'ten SONRA yüklenir.

   İçindekiler
   01 Butonlar            07 Dönüşümlü içerik blokları (.feature)
   02 Başlıklar           08 Fotoğraf kolajlı sayfa başlığı (.page-head)
   03 Karusel / ray       09 Detay sayfası (kahraman, şerit, kutular, süreç, SSS)
   04 Kategori kartı       10 Proje kartı, galeri
   05 İletişim şeridi     11 İletişim (form, bilgi, harita)
   06 Bağlantılar         12 Ekip
                          13 Sayfa üst bandı, ızgaralar, yer tutucu, animasyon
   ========================================================================== */

/* ===== 01 Butonlar ======================================================= */
.btn{
  display:inline-block;padding:14px 42px;z-index:0;
  border:1px solid var(--gold-dark);color:var(--gold-dark);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  background:transparent;position:relative;overflow:hidden;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--gold-grad);
  transform:translateY(101%);transition:transform var(--dur) var(--ease);z-index:-1;
}
.btn:hover{color:var(--ink-deep);border-color:var(--gold)}
.btn:hover::before{transform:translateY(0)}

.btn--light{border-color:rgba(255,255,255,.5);color:#fff}
.btn--light:hover{color:var(--ink-deep);border-color:var(--gold)}

/* ===== 02 Başlıklar ====================================================== */
.section-title{
  text-align:center;color:var(--gold-dark);
  font-size:var(--fs-h2);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  margin:var(--section-y) 0 14px;padding-inline:var(--gutter);
}
.section-title--flush{margin-top:0}
.section-title + .section-sub{
  text-align:center;color:var(--text-soft);max-width:60ch;
  margin:0 auto var(--section-y);padding-inline:var(--gutter);
}
.title-rule{width:74px;height:3px;background:var(--gold-grad);margin:0 auto var(--section-y)}

/* Bölüm içi başlık ve giriş paragrafı */
.block-title{
  font-size:var(--fs-h3);color:var(--gold-dark);
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:22px;
}
.lead{font-size:var(--fs-lead);color:var(--text)}

/* Etiket + çizgi + konum satırı */
.meta-line{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--muted);margin-bottom:24px;
}
.meta-line .rule{flex:0 0 58px;height:1px;background:var(--gold);opacity:.7}

/* Sol hizalı küçük bölüm etiketi (HİZMETLER —————) */
.rail-head{display:flex;align-items:center;gap:26px;margin-bottom:38px}
.rail-head h2{
  font-size:15px;font-weight:600;letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.rail-head .rule{flex:1;height:1px;background:var(--line)}
.rail-head .rail-nav{display:flex;gap:4px}

/* ===== 03 Karusel okları ve yatay ray =================================== */
.arrow{
  flex:0 0 auto;width:46px;height:46px;border:0;background:none;
  color:var(--gold-dark);display:grid;place-items:center;
  opacity:.7;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.arrow:hover{opacity:1}
.arrow[data-dir="-1"]:hover{transform:translateX(-3px)}
.arrow[data-dir="1"]:hover{transform:translateX(3px)}
.arrow svg{width:28px;height:14px}
.arrow[disabled]{opacity:.22;cursor:default;transform:none}

.rail{
  display:grid;grid-auto-flow:column;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}

/* ===== 04 Proje / kategori kartı ======================================== */
.card{display:block}
.card .card-img{overflow:hidden;position:relative}
.card .card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(23,26,29,.55));
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.card .ph,.card img{height:200px;object-fit:cover;width:100%;transition:transform .55s var(--ease)}
.card:hover .ph,.card:hover img{transform:scale(1.07)}
.card:hover .card-img::after{opacity:1}
.card span{
  display:block;margin-top:18px;text-align:center;
  font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.card:hover span{color:var(--gold-dark)}

/* ===== 05 İletişim şeridi =============================================== */
.cta-band{
  background:var(--ink-grad);color:#fff;text-align:center;
  padding:var(--section-y) var(--gutter);position:relative;
}
.cta-band::before,.cta-band::after{
  content:'';position:absolute;left:0;right:0;height:2px;background:var(--gold-grad);
}
.cta-band::before{top:0}
.cta-band::after{bottom:0}
.cta-band h2{font-size:var(--fs-h3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.cta-band p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 28px}

/* ===== 06 "Detaylar →" bağlantısı ======================================= */
.more{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--gold-dark);
}
.more svg{width:24px;height:10px;transition:transform var(--dur) var(--ease)}
.more:hover svg{transform:translateX(5px)}

/* ===== 07 Dönüşümlü içerik blokları =====================================
   .feature        : görsel solda, metin sağda (diyagonal sağa daralır)
   .feature.flip   : görsel sağda, metin solda (diyagonal sola daralır)
   .feature--compact : blok yüksekliğini düşürür (çok sayıda blok alt alta)
   ------------------------------------------------------------------------ */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;margin-bottom:var(--section-y)}
.feature-media{height:min(80vh,760px)}
.feature-media .ph,.feature-media img{
  height:100%;width:100%;object-fit:cover;
  clip-path:polygon(0 0,100% 0,70% 100%,0 100%);
}
.feature.flip .feature-media{order:2}
.feature.flip .feature-media .ph,
.feature.flip .feature-media img{clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.feature.flip .feature-body{order:1;padding:0 var(--gutter) 0 clamp(24px,7vw,110px)}

.feature-body{padding:0 clamp(24px,6vw,90px) 0 clamp(24px,3vw,40px)}
.feature-body h3{
  font-size:var(--fs-h3);letter-spacing:.02em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:24px;
}
.feature-body p{max-width:52ch;color:var(--text-soft)}
.feature-body p strong{color:var(--ink);font-weight:600}
.feature-body .btn{margin-top:18px}

.feature--compact .feature-media{height:min(62vh,560px)}

/* ===== 08 Fotoğraf kolajlı sayfa başlığı ================================
   Üç diyagonal dilim; her dilime ayrı görsel konur. Dilimler arasındaki
   ince boşluktan alt katmandaki altın degrade görünür.
   Metin tabanlı sade başlık için .page-hero kullanın.
   ------------------------------------------------------------------------ */
.page-head{
  position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(340px,38vw,520px);
  display:grid;place-items:center;text-align:center;
  padding:calc(var(--nav-h) + 48px) var(--gutter) 64px;
}
.page-head-media{position:absolute;inset:0;place-self:stretch;background:var(--gold-grad)}
/* özgüllük .ph{position:relative} kuralını geçmeli */
.page-head .page-head-media > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-head-media > :nth-child(1){clip-path:polygon(0 0,38% 0,22% 100%,0 100%)}
.page-head-media > :nth-child(2){clip-path:polygon(38.8% 0,72% 0,56% 100%,22.8% 100%)}
.page-head-media > :nth-child(3){clip-path:polygon(72.8% 0,100% 0,100% 100%,56.8% 100%)}
.page-head::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,26,29,.7) 0%,rgba(23,26,29,.45) 50%,rgba(23,26,29,.7) 100%);
}
.page-head::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-grad);z-index:3;
}
.page-head-body{position:relative;z-index:2}
.page-head h1{
  font-size:var(--fs-h2);color:#fff;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:14px;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.page-head p{color:rgba(255,255,255,.85);max-width:58ch;margin:0 auto}
.page-head .breadcrumb,.page-head .title-rule{margin-bottom:18px}

/* yer tutucu etiketleri başlıkla çakışmasın — her biri kendi diliminin altına */
.page-head .ph::after{align-items:flex-end;padding-bottom:22px}
.page-head .ph:nth-child(1)::after{justify-content:flex-start;padding-left:4%}
.page-head .ph:nth-child(2)::after{justify-content:center}
.page-head .ph:nth-child(3)::after{justify-content:flex-end;padding-right:4%}

/* ===== 09 Detay sayfası ==================================================
   .detail-hero  : tam genişlik görsel + üzerine başlık ve dev "hayalet" numara
   .facts        : kahramanın altına oturan hızlı bilgi şeridi
   .intro-split  : solda büyük ifade, sağda gövde metni (asimetrik)
   .tiles        : 1px hairline ızgarada ikonlu kapsam kutuları
   .timeline     : yatay süreç adımları (mobilde dikeye döner)
   .accordion    : <details> tabanlı SSS
   .pager        : önceki / sonraki hizmet
   ------------------------------------------------------------------------ */
.detail-hero{
  position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(420px,50vw,620px);
  display:grid;align-items:end;
  padding:calc(var(--nav-h) + 90px) 0 56px;
}
.detail-hero .detail-hero-media{position:absolute;inset:0;place-self:stretch}
.detail-hero .detail-hero-media > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,26,29,.55) 0%,rgba(23,26,29,.35) 40%,rgba(23,26,29,.92) 100%);
}
.detail-hero::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-grad);z-index:4;
}
/* .wrap ile aynı hizada dursun */
.detail-hero-body{
  position:relative;z-index:3;width:100%;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.detail-hero .breadcrumb{justify-content:flex-start;margin-bottom:16px}
.detail-hero h1{
  font-size:clamp(28px,4.6vw,54px);color:#fff;text-transform:uppercase;
  letter-spacing:.03em;max-width:18ch;margin-bottom:16px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.detail-hero .hero-lead{color:rgba(255,255,255,.82);max-width:54ch;margin:0;font-size:var(--fs-lead)}
/* yer tutucu etiketi başlıkla çakışmasın */
.detail-hero .ph::after{align-items:flex-start;padding-top:22%}

.ghost-num{
  position:absolute;right:2%;bottom:-4%;z-index:2;
  font-size:clamp(140px,24vw,320px);font-weight:700;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(242,216,143,.28);
  pointer-events:none;user-select:none;
}

/* Hızlı bilgi şeridi */
.facts{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.fact{padding:30px 24px;text-align:center;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font-size:24px;font-weight:700;color:var(--gold-dark);line-height:1.2}
.fact small{
  display:block;margin-top:8px;font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);
}

/* Asimetrik giriş */
.intro-split{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.statement{
  font-size:clamp(20px,2.3vw,28px);font-weight:500;line-height:1.5;
  color:var(--ink);margin:0;padding-left:26px;border-left:3px solid var(--gold);
}
.prose p{max-width:68ch;color:var(--text-soft)}
.prose p strong{color:var(--ink);font-weight:600}

/* Hairline ızgarada ikonlu kutular */
.tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.tile{
  background:var(--surface);padding:34px 30px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.tile:hover{background:#fff}
.tile svg{
  width:32px;height:32px;margin-bottom:18px;
  fill:none;stroke:var(--gold-dark);stroke-width:1.2;
  transition:stroke var(--dur) var(--ease);
}
.tile:hover svg{stroke:var(--gold)}
.tile h4{
  font-size:14.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);margin-bottom:10px;
}
.tile p{font-size:14px;color:var(--text-soft);margin:0}

/* Yatay süreç */
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.tl-step{position:relative;padding-right:26px}
.tl-step::before{                        /* adımı bir sonrakine bağlar */
  content:'';position:absolute;left:46px;right:0;top:23px;height:1px;background:var(--line);
}
.tl-step:last-child::before{display:none}
.tl-step .dot{
  position:relative;z-index:2;width:46px;height:46px;margin-bottom:22px;
  display:grid;place-items:center;background:var(--paper);
  border:1px solid var(--gold);color:var(--gold-dark);
  font-size:13px;font-weight:700;letter-spacing:.05em;
}
.tl-step h4{
  font-size:14px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink);margin-bottom:8px;
}
.tl-step p{font-size:13.5px;color:var(--text-soft);margin:0}

/* SSS akordiyonu */
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{
  list-style:none;cursor:pointer;position:relative;
  padding:24px 52px 24px 0;
  font-size:15.5px;font-weight:600;color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--gold-dark)}
.accordion summary::before,
.accordion summary::after{
  content:'';position:absolute;right:12px;top:50%;
  background:var(--gold);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.accordion summary::before{width:16px;height:2px;margin-top:-1px}
.accordion summary::after{width:2px;height:16px;margin-top:-8px;margin-right:7px}
.accordion details[open] summary{color:var(--gold-dark)}
.accordion details[open] summary::after{transform:rotate(90deg);opacity:0}
.accordion .answer{padding:0 40px 26px 0}
.accordion .answer p{max-width:72ch;color:var(--text-soft);margin:0 0 12px}
.accordion .answer p:last-child{margin-bottom:0}

/* Önceki / sonraki */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pager a{
  display:flex;flex-direction:column;gap:6px;padding:28px 0;
  transition:color var(--dur) var(--ease);
}
.pager a:hover{color:var(--gold-dark)}
.pager .lbl{
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);
}
.pager .ttl{font-size:16px;font-weight:600;color:inherit}
.pager .next{text-align:right;align-items:flex-end;border-left:1px solid var(--line);padding-left:26px}
.pager .prev{padding-right:26px}

/* ===== 10 Proje kartı, galeri ===========================================
   .project-grid + .project-card : görsel üzerine metin bindirilmiş kartlar
   .split-hero                   : proje detayı — solda künye paneli, sağda görsel
   .gallery-slider               : büyük görsel + oklar + küçük önizlemeler
   ------------------------------------------------------------------------ */
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(20px,2vw,28px)}
.project-card{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;background:var(--ink);
}
.project-card .ph,.project-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.project-card::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(23,26,29,.05) 35%,rgba(23,26,29,.88) 100%);
  transition:background var(--dur) var(--ease);
}
.project-card:hover .ph,.project-card:hover img{transform:scale(1.07)}
.project-card:hover::after{background:linear-gradient(180deg,rgba(23,26,29,.2) 20%,rgba(23,26,29,.92) 100%)}
.project-card-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:28px 26px;color:#fff;
}
.project-card-body::before{           /* hover'da soldan açılan altın çizgi */
  content:'';position:absolute;left:26px;top:0;height:2px;width:34px;
  background:var(--gold-grad);transition:width var(--dur) var(--ease);
}
.project-card:hover .project-card-body::before{width:calc(100% - 52px)}
.project-card .cat{
  display:block;margin:14px 0 8px;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--gold-light);
}
.project-card h3{
  font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.03em;
  margin-bottom:6px;
}
.project-card .loc{font-size:13px;color:rgba(255,255,255,.72);margin:0}

/* Proje detayı — bölünmüş kahraman */
.split-hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);min-height:clamp(520px,64vw,760px)}
.split-hero-panel{
  background:var(--ink-grad);color:#fff;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  /* sol iç boşluk .wrap ile aynı hizaya oturur */
  --panel-pad:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding:calc(var(--nav-h) + 56px) clamp(24px,4vw,64px) 0 var(--panel-pad);
}
.split-hero-panel::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--gold-grad);
}
.split-hero-panel h1{
  font-size:clamp(26px,3.2vw,44px);text-transform:uppercase;
  letter-spacing:.05em;line-height:1.22;margin-bottom:28px;
}
.split-hero-panel .meta-line{color:rgba(255,255,255,.72);margin-bottom:20px}
.split-hero-panel .breadcrumb{justify-content:flex-start;margin-bottom:22px}
.split-hero-media{position:relative;overflow:hidden;background:var(--ink)}
.split-hero-media .ph,.split-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* Panelin altına oturan durum kutusu */
.status-box{
  background:var(--surface);color:var(--ink);
  /* panelin iç boşluklarını iptal edip kenardan kenara uzanır */
  margin-left:calc(var(--panel-pad) * -1);
  margin-right:clamp(-64px,-4vw,-24px);
  padding:26px clamp(24px,4vw,64px) 26px var(--panel-pad);
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px 28px;
  border-top:2px solid var(--gold);
}
.status-box div small{
  display:block;font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.status-box div b{font-size:15px;font-weight:600;color:var(--gold-dark)}

/* Galeri — ilki iki sütun genişliğinde */
/* ---------- Galeri slider ----------
   Büyük görsel + oklar + altta küçük önizlemeler.
   Kutu oranı yükleme oranıyla (3:2) aynı — görsel ikinci kez kırpılmaz.
   Büyük görsele tıklanınca tam ekran görüntüleyici açılır. */
.gallery-slider{position:relative}

.gs-sahne{
  /* Oran yükleme oranıyla (3:2) birebir aynı — görsel ikinci kez kırpılmaz.
     max-height vermiyoruz: verirsek sahne daralıp yanda boşluk bırakıyor. */
  position:relative;overflow:hidden;
  aspect-ratio:3/2;background:var(--ink);
}
.gs-ray{
  display:flex;height:100%;
  transition:transform .45s var(--ease);
  will-change:transform;
}
.gs-slayt{
  flex:0 0 100%;margin:0;height:100%;position:relative;
}
.gs-slayt img,.gs-slayt .ph{
  width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
}
.gs-slayt figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 22px 16px;
  background:linear-gradient(180deg,transparent,rgba(23,26,29,.8));
  color:rgba(255,255,255,.92);font-size:13.5px;
}

/* Oklar */
.gs-ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;display:grid;place-items:center;
  background:rgba(23,26,29,.55);border:1px solid rgba(255,255,255,.25);
  color:#fff;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.gs-ok:hover{background:rgba(23,26,29,.85);border-color:var(--gold)}
.gs-ok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.gs-onceki{left:14px}
.gs-sonraki{right:14px}
.gs-ok[disabled]{opacity:.28;cursor:default}

/* Sayaç */
.gs-sayac{
  position:absolute;right:14px;top:14px;z-index:3;
  background:rgba(23,26,29,.62);color:var(--gold-light);
  padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.1em;
}

/* Küçük önizlemeler */
.gs-kucukler{
  display:flex;gap:10px;margin-top:12px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.gs-kucukler::-webkit-scrollbar{display:none}
.gs-kucuk{
  flex:0 0 clamp(88px,11vw,132px);aspect-ratio:3/2;
  padding:0;border:2px solid transparent;background:var(--ink);
  overflow:hidden;cursor:pointer;opacity:.55;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.gs-kucuk img{width:100%;height:100%;object-fit:cover;display:block}
.gs-kucuk:hover{opacity:.85}
.gs-kucuk[aria-current="true"]{opacity:1;border-color:var(--gold)}
.gs-kucuk:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:560px){
  .gs-ok{width:40px;height:40px}
  .gs-onceki{left:8px}
  .gs-sonraki{right:8px}
}

/* ---------- Tam ekran görüntüleyici (lightbox) ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(17,19,21,.94);padding:clamp(16px,4vw,56px);
}
.lightbox.acik{display:flex}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:14px}
.lightbox img{
  max-width:100%;max-height:calc(100vh - 160px);
  object-fit:contain;display:block;margin-inline:auto;
}
.lightbox figcaption{
  text-align:center;color:rgba(255,255,255,.72);
  font-size:13px;letter-spacing:.04em;
}
.lightbox-sayac{
  color:var(--gold-light);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;text-align:center;
}
.lightbox button{
  position:absolute;background:none;border:1px solid rgba(255,255,255,.28);
  color:#fff;width:52px;height:52px;display:grid;place-items:center;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.lightbox button:hover{border-color:var(--gold);background:rgba(201,162,74,.14)}
.lightbox button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.lightbox .lb-kapat{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lightbox .lb-onceki{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lightbox .lb-sonraki{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
@media (max-width:560px){
  .lightbox button{width:44px;height:44px}
  .lightbox .lb-onceki{left:6px}
  .lightbox .lb-sonraki{right:6px}
}

/* ===== 11 İletişim =======================================================
   .contact-grid : solda bilgi bloğu, sağda form
   .info-item    : ikon + başlık + değer
   .form-grid    : form alanları (ad/e-posta yan yana, gerisi tam genişlik)
   .map-embed    : harita alanı
   ------------------------------------------------------------------------ */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
.info-list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.info-item{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.info-item svg{
  width:26px;height:26px;margin-top:2px;
  fill:none;stroke:var(--gold-dark);stroke-width:1.2;
}
.info-item h3{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.info-item p,.info-item a{margin:0;color:var(--ink);font-weight:500;line-height:1.6}
.info-item a:hover{color:var(--gold-dark)}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1 / -1}
.field label{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--muted);
}
.field label .req{color:var(--gold-dark)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);padding:14px 16px;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,74,.16);
}
.field input::placeholder,.field textarea::placeholder{color:#B3ADA4}

.consent{display:flex;gap:12px;align-items:flex-start;grid-column:1 / -1}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--gold-dark)}
.consent label{font-size:13.5px;color:var(--text-soft);letter-spacing:0;text-transform:none;font-weight:400}
.consent a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px}

/* Form geri bildirimleri */
.form-ok,.form-error{
  padding:14px 18px;margin-bottom:22px;font-size:14px;
  border-left:3px solid var(--gold);background:rgba(201,162,74,.10);color:var(--ink);
}
.form-error{border-left-color:#B4453C;background:rgba(180,69,60,.08);color:#8C332C}
.field-error{font-size:12.5px;color:#B4453C}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B4453C}

/* Spam tuzağı — ekranda ve okuyucularda görünmez, botlar doldurur */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Harita */
.map-embed{
  position:relative;width:100%;aspect-ratio:21/9;min-height:300px;
  border-top:2px solid var(--gold);overflow:hidden;
}
.map-embed iframe,.map-embed .ph{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== 12 Ekip ========================================================== */
.team-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,40px);
  max-width:1100px;margin-inline:auto;   /* 6 kişide 3'lü düzen verir */
  /* start: biri özgeçmişini açtığında aynı satırdaki diğer kartlar
     uzayıp altlarında boşluk bırakmasın. */
  align-items:start;
}
.person{text-align:center}
.person-photo{position:relative;overflow:hidden;margin-bottom:20px}
.person-photo .ph,.person-photo img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .55s var(--ease);
}
.person-photo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.person:hover .ph,.person:hover img{transform:scale(1.05)}
.person:hover .person-photo::after{transform:scaleX(1)}
.person h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.person .role{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--gold-dark);margin:0;
}

/* ===== 13 Sayfa üst bandı, ızgaralar, yer tutucu, animasyon ============= */
.page-hero{
  position:relative;background:var(--ink-grad);color:#fff;
  padding:calc(var(--nav-h) + 64px) var(--gutter) 64px;text-align:center;
}
.page-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-grad)}
.page-hero h1{font-size:var(--fs-h2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.page-hero .title-rule{margin-bottom:18px}
.page-hero p{color:rgba(255,255,255,.8);max-width:60ch;margin:0 auto}

.breadcrumb{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--gold-light);margin-bottom:18px;
}
.breadcrumb a{color:rgba(255,255,255,.7)}
.breadcrumb a:hover{color:var(--gold-light)}

.section{padding:var(--section-y) 0}
.section--tight{padding:calc(var(--section-y) / 2) 0}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,5vw,64px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}

/* Görsel yer tutucu — gerçek görsel eklerken .ph'li div'i <img> ile değiştirin */
.ph{
  background:
    linear-gradient(140deg,rgba(36,40,44,.92),rgba(140,107,47,.55)),
    repeating-linear-gradient(45deg,#2b3035 0 18px,#333a41 18px 36px);
  position:relative;
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(242,216,143,.5);font-size:11px;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;text-align:center;padding:16px;
}

/* Giriş animasyonu — sadece .js varken gizlenir; JS yoksa içerik görünür kalır */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== Responsive ======================================================= */
@media (max-width:1024px){
  .feature{grid-template-columns:1fr;margin-bottom:56px}
  .feature-media,.feature--compact .feature-media{height:58vw;min-height:280px}
  .feature-media .ph,.feature-media img,
  .feature.flip .feature-media .ph,
  .feature.flip .feature-media img{clip-path:none}
  .feature.flip .feature-media{order:0}
  .feature.flip .feature-body,
  .feature-body{order:0;padding:36px var(--gutter) 0}
}
@media (max-width:900px){
  .intro-split{grid-template-columns:1fr;gap:32px}
  .contact-grid{grid-template-columns:1fr}
  .split-hero{grid-template-columns:1fr;min-height:0}
  .split-hero-panel{padding:calc(var(--nav-h) + 40px) var(--gutter) 0}
  .split-hero-panel::after{top:auto;left:0;right:0;bottom:0;width:auto;height:2px}
  .split-hero-media{order:-1;aspect-ratio:16/10}
  .status-box{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .split-hero-panel{--panel-pad:var(--gutter)}
  .timeline{grid-auto-flow:row;gap:26px}
  .tl-step{padding:0 0 0 70px}
  .tl-step .dot{position:absolute;left:0;top:0;margin:0}
  .tl-step::before{left:23px;right:auto;top:46px;bottom:-26px;width:1px;height:auto}
  /* yer tutucu etiketi başlıkla çakışmasın */
.detail-hero .ph::after{align-items:flex-start;padding-top:22%}

.ghost-num{display:none}
  /* dar ekranda kolaj iki dilime düşer */
  .page-head-media > :nth-child(3){display:none}
  .page-head-media > :nth-child(1){clip-path:polygon(0 0,58% 0,36% 100%,0 100%)}
  .page-head-media > :nth-child(2){clip-path:polygon(58.8% 0,100% 0,100% 100%,36.8% 100%)}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left;align-items:flex-start;border-left:0;border-top:1px solid var(--line);padding-left:0}
  .pager .prev{padding-right:0}
  .fact{border-left:0;border-top:1px solid var(--line)}
  .fact:first-child{border-top:0}
}

/* ============================================================
   WHATSAPP DÜĞMESİ
   Mobilde yuvarlak sabit düğme, masaüstünde yazılı hap.
   Numara panelde boşsa bu blok hiç basılmaz (partials/whatsapp.php).
   ============================================================ */
.wa-btn{
  position:fixed;right:16px;bottom:16px;z-index:150;
  display:inline-flex;align-items:center;gap:9px;
  width:54px;height:54px;justify-content:center;
  border-radius:999px;background:#25D366;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-btn svg{width:28px;height:28px;flex:none}

/* Yuvarlak hâlde yazı okunmaz; sadece ekran okuyucuya kalsın */
.wa-etiket{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.wa-btn:hover,.wa-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  color:#fff;
}

/* Masaüstünde yer var — yazıyı göster */
@media (min-width:992px){
  .wa-btn{
    right:24px;bottom:24px;
    width:auto;height:auto;padding:13px 20px 13px 16px;
    font-weight:600;font-size:14px;letter-spacing:.02em;
  }
  .wa-etiket{position:static;width:auto;height:auto;clip-path:none}
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .wa-btn{transition:none}
  .wa-btn:hover,.wa-btn:focus-visible{transform:none}
}

/* Kurumsal — ekip bölümünün giriş cümlesi */
.team-intro{
  max-width:62ch;margin:0 0 clamp(28px,4vw,44px);
  color:var(--muted);
}

/* Ekip kartı — isteğe bağlı özgeçmiş açılır bloğu.
   Hizmet sayfasındaki SSS akordiyonuyla aynı dili konuşur. */
.person-bio{margin-top:14px;text-align:left}
.person-bio > summary{
  cursor:pointer;list-style:none;text-align:center;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--muted);padding:6px 0;
  transition:color .2s var(--ease);
}
.person-bio > summary::-webkit-details-marker{display:none}
.person-bio > summary::after{
  content:'';display:inline-block;vertical-align:middle;
  width:7px;height:7px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--ease);
}
.person-bio[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
.person-bio > summary:hover{color:var(--gold-dark)}
.person-bio > div{
  padding-top:10px;border-top:1px solid var(--line);margin-top:4px;
}
.person-bio p{font-size:14px;line-height:1.7;color:var(--muted)}
.person-bio p + p{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .person-bio > summary,.person-bio > summary::after{transition:none}
}