/* ==========================================================================
   Mai Müşavirlik — bileşen stilleri
   Tokenlar tokens.css'te. Burada yeni hex/radius/easing tanımlanmaz.
   Turkuaz dozu düşük tutulur: birincil CTA + koyu zeminde ince vurgular.
   ========================================================================== */

.skip{
  position:absolute;left:1rem;top:-4rem;z-index:120;
  background:var(--koyu-gradyan);color:#fff;padding:.7rem 1.2rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:600;
  transition:top var(--t-micro) var(--ease);
}
.skip:focus{top:1rem}

/* ==========================================================================
   Header — hero ile bütünleşik başlar, kaydırınca beyazlar ve kısalır
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:80;
  background:var(--beyaz);
  border-bottom:1px solid var(--line);
  transition:background-color 320ms var(--ease),
             border-color 320ms var(--ease),
             box-shadow 320ms var(--ease),
             margin-bottom 320ms var(--ease);
}
/* İç sayfalarda header akışın içinde (sticky). Kaydırınca 96→70px küçülüyordu; sayfa kısalıp
   kaydırma geri kayınca eşiğin altına düşüyor, header büyüyüp yeniden küçülüyordu — header titriyordu
   (müşteri, 2026-09-16). Kaybedilen yükseklik aynı hızda alt boşlukla telafi edilir: akış yüksekliği
   sabit kalır, döngü oluşmaz. Şeffaf (ana sayfa) header fixed olduğu için hariç. */
.site-head:not(.site-head--seffaf).is-stuck{margin-bottom:26px}
/* Üç sütun: solda menü (mobilde burger), ortada logo, sağda iletişim.
   Yan sütunlar 1fr olduğu için logo gerçekten ortada durur. */
.site-head__in{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  height:96px;transition:height 320ms var(--ease);
}
.site-head__in>.burger{grid-column:1;grid-row:1;justify-self:start}
.site-head__in>.nav{grid-column:1;grid-row:1;justify-self:start}
.site-head__in>.site-head__logo{grid-column:2;grid-row:1;justify-self:center}
.site-head__in>.site-head__sag{grid-column:3;grid-row:1;justify-self:end}
.site-head__logo{color:var(--lacivert);display:block;transition:color 320ms var(--ease)}
.site-head__logo svg{height:70px;width:auto;transition:height 320ms var(--ease)}
/* Renkli logo açık zeminde, beyaz (mono) logo şeffaf header'da hero üzerinde (müşteri revizesi, 2026-09-14) */
.site-head__logo-renkli{display:block;height:70px;width:auto;transition:height 320ms var(--ease)}
.site-head__logo-renkli + svg{display:none}
.site-head--seffaf:not(.is-stuck) .site-head__logo-renkli{display:none}
.site-head--seffaf:not(.is-stuck) .site-head__logo-renkli + svg{display:block}
.site-head.is-stuck .site-head__logo-renkli{height:56px}

/* Şeffaf mod: hero'nun koyu zemini üzerinde yüzer */
.site-head--seffaf{
  position:fixed;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
}
.site-head--seffaf.is-stuck{position:fixed}
.site-head--seffaf .site-head__logo{color:#fff}
.site-head--seffaf .nav__link{color:rgba(255,255,255,.78)}
.site-head--seffaf .nav__link:hover,.site-head--seffaf .nav__link.is-active{color:#fff}
/* Varsayılan (beyaz) başlık: dolu lacivert CTA */
.site-head__cta{background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff}
/* Header CTA'sı hover'da değişmez (müşteri kararı, 2026-09-09) */
.site-head__cta:hover{background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff}
.site-head--seffaf .btn--cizgi{border-color:rgba(255,255,255,.32);color:#fff}
.site-head--seffaf .btn--cizgi:not(.site-head__cta):hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* CTA zemine göre ters: koyu başlıkta dolu beyaz, beyaz başlıkta dolu lacivert. */
.site-head--seffaf .site-head__cta{background:#fff;border-color:#fff;color:var(--lacivert)}
.site-head--seffaf .site-head__cta:hover{background:#fff;border-color:#fff;color:var(--lacivert)}
.site-head--seffaf .burger{color:#fff}
.site-head--seffaf .burger:hover{background:rgba(255,255,255,.1)}

/* Kaydırınca: beyaz zemin, kısalmış yükseklik */
.site-head.is-stuck{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 22px rgba(18,26,43,.07);
}
.site-head.is-stuck .site-head__in{height:70px}
.site-head.is-stuck .site-head__logo{color:var(--lacivert)}
.site-head.is-stuck .site-head__logo svg{height:56px}
.site-head.is-stuck .nav__link{color:var(--muted)}
.site-head.is-stuck .nav__link:hover,.site-head.is-stuck .nav__link.is-active{color:var(--lacivert)}
.site-head.is-stuck .btn--cizgi{border-color:var(--cizgi-belirgin);color:var(--lacivert)}
.site-head.is-stuck .site-head__cta{background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff}
.site-head.is-stuck .site-head__cta:hover{background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff}
/* CTA hariç: onun hover'ı kapalı, aksi hâlde bu kural (sonra geldiği için) onu eziyordu */
.site-head.is-stuck .btn--cizgi:not(.site-head__cta):hover{border-color:var(--lacivert);background:var(--bg-2)}
.site-head.is-stuck .burger{color:var(--lacivert)}
.site-head.is-stuck .burger:hover{background:var(--bg-2)}

/* --- Ortalanmış menü --- */
.nav__list{display:flex;align-items:center;gap:.1rem}
.nav__item{position:static}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.6rem .85rem;border-radius:var(--r);
  font-size:.93rem;font-weight:500;color:var(--muted);
  transition:color var(--t-micro) var(--ease);
}
.nav__ok{width:13px;height:13px;opacity:.6;transition:transform 240ms var(--ease)}
.nav__item.is-open .nav__ok{transform:rotate(180deg)}
.nav__link:hover,.nav__link.is-active{color:var(--lacivert)}
/* Ana sayfa (ev) bağlantısı — yalnız ikon (müşteri, 2026-09-12) */
.nav__link--ev{padding:.6rem .6rem}
.nav__link--ev svg{width:18px;height:18px}
/* Mega tetikleyicisi <button>: tarayıcı buton görünümü sıfırlanır, link gibi durur */
button.nav__link{background:none;border:0;cursor:pointer;font-family:inherit;line-height:inherit}

/* --- Klasik dropdown (Kurumsal) — başlığın tam altında hizalı --- */
.nav__item.has-dropdown{position:relative}
.acilir{
  position:absolute;top:calc(100% + .55rem);left:0;
  min-width:14.5rem;padding:.4rem;
  background:var(--beyaz);
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  box-shadow:0 18px 40px -28px rgba(18,26,43,.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms;
  display:grid;gap:1px;
}
.nav__item.is-open .acilir{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.acilir a{
  padding:.7rem .9rem;border-radius:var(--r);
  font-size:.9rem;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.acilir a:hover{background:var(--bg-2);color:var(--lacivert)}

/* --- Mega menü (yalnız Hizmetlerimiz) — site genişliğinde, iki eşit sütun --- */
.mega{
  position:absolute;top:calc(100% + .55rem);left:0;right:0;
  background:var(--beyaz);
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  box-shadow:0 24px 50px -32px rgba(18,26,43,.3);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);
  transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 220ms;
  overflow:hidden;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* Liste iki sütun olduğu için sol tarafa daha çok yer veriliyor */
.mega__in{display:grid;grid-template-columns:1.62fr 1fr;gap:0}
/* Tanıtım paneli kapalıyken liste tüm genişliği kullanır (çok hizmette daha derli toplu) */
.mega__in--panelsiz{grid-template-columns:1fr}
.mega__in--panelsiz .mega__liste{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.mega__in--panelsiz .mega__liste{grid-template-columns:1fr 1fr}}
.mega__liste{
  display:grid;grid-template-columns:1fr 1fr;align-content:center;
  gap:.15rem;padding:1.5rem;
}
/* Tek sayıda öğe varsa sonuncusu yalnız kalmasın: iki sütunu birden kaplar.
   (5 öğede geçerli; 6 öğede kural devre dışı kalıp düzgün 2x3 ızgara olur.) */
.mega__liste .mega__item:nth-child(odd):nth-last-child(1){grid-column:1 / -1}
.mega__item{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.8rem .9rem;border-radius:var(--r);
  transition:background-color var(--t-micro) var(--ease);
}
.mega__item:hover{background:var(--bg-2)}
.mega__ico{color:var(--mavi);display:grid;place-items:center;width:22px;height:22px}
.mega__ico svg{width:21px;height:21px}
.mega__txt strong{display:block;font-size:.94rem;font-weight:500;line-height:1.35;color:var(--lacivert)}
.mega__txt span{display:block;color:var(--dim);font-size:.8rem;line-height:1.45;margin-top:.12rem}
.mega__ok{width:15px;height:15px;color:transparent;transition:color 200ms var(--ease),transform 200ms var(--ease)}
.mega__item:hover .mega__ok{color:var(--mavi);transform:translateX(3px)}

/* Sağ panelde yalnız görsel var (üstündeki başlık/telefon/buton müşteri talebiyle kaldırıldı). */
.mega__yan{position:relative;min-height:19rem;overflow:hidden}
.mega__gorsel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity 380ms var(--ease),transform 620ms var(--ease);
}
.mega__gorsel.is-aktif{opacity:1;transform:none}

.site-head__sag{display:flex;align-items:center;gap:.6rem;justify-self:end}

/* --- Dil seçici: telefon numarasının yerinde (müşteri, 2026-09-15) ---
   İki dil olduğu için açılır liste değil iki durumlu segment: hangi dilde
   olduğun ve öteki seçenek aynı anda görünür. Tema düğmesiyle aynı yüksekliği
   ve pil formunu paylaşır ki başlıkta ikisi bir aile gibi dursun. */
.dil{
  display:inline-flex;align-items:center;gap:.15rem;flex:none;
  padding:.18rem;border-radius:var(--r-pill);
  border:1px solid var(--cizgi-belirgin);
}
.dil__oge{
  display:grid;place-items:center;
  min-width:2.05rem;height:1.9rem;padding-inline:.45rem;
  border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;letter-spacing:.04em;
  color:var(--dim);
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.dil__oge:hover{color:var(--lacivert);background:var(--bg-2)}
.dil__oge.is-secili{background:var(--koyu-gradyan);color:#fff}
/* Şeffaf başlık (hero üstünde): çerçeve ve yazı beyaza, seçili olan ters döner. */
.site-head--seffaf:not(.is-stuck) .dil{border-color:rgba(255,255,255,.32)}
.site-head--seffaf:not(.is-stuck) .dil__oge{color:rgba(255,255,255,.72)}
.site-head--seffaf:not(.is-stuck) .dil__oge:hover{color:#fff;background:rgba(255,255,255,.12)}
.site-head--seffaf:not(.is-stuck) .dil__oge.is-secili{background:#fff;color:var(--lacivert)}

.burger{display:none;width:44px;height:44px;place-items:center;border-radius:var(--r-daire);color:var(--lacivert)}
.burger svg{width:23px;height:23px}
.burger:hover{background:var(--bg-2)}

@media (max-width:1280px){
  .nav{display:none}
  .burger{display:grid}          /* burger solda, logo yine ortada kalır */
}
@media (max-width:720px){
  .site-head__cta{display:none}
  .site-head__in{height:74px}
  .site-head.is-stuck .site-head__in{height:64px}
  .site-head:not(.site-head--seffaf).is-stuck{margin-bottom:10px}   /* 74→64px telafisi */
  .site-head__logo svg{height:54px}
  .site-head.is-stuck .site-head__logo svg{height:46px}
  .site-head__logo-renkli{height:54px}
  .site-head.is-stuck .site-head__logo-renkli{height:46px}
}

/* ==========================================================================
   Mobil drawer
   ========================================================================== */
.drawer{position:fixed;inset:0;z-index:110}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(18,26,43,.5);opacity:0;transition:opacity 280ms var(--ease)}
.drawer__panel{
  position:absolute;inset:0 auto 0 0;width:min(420px,100%);
  background:var(--beyaz);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform 320ms var(--ease);overflow-y:auto;
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:1.25rem var(--gutter);border-bottom:1px solid var(--line)}
.drawer__logo{color:var(--lacivert);display:block}
.drawer__logo svg{height:54px;width:auto}   /* kare logo 44px'te okunmuyordu */
.drawer__x{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-daire);color:var(--lacivert)}
.drawer__x svg{width:23px;height:23px}
.drawer__x:hover{background:var(--bg-2)}
.drawer__nav{padding:.5rem var(--gutter) 1.5rem;flex:1}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:1.05rem 0;border-bottom:1px solid var(--line);
  font-size:1rem;font-weight:600;text-align:left;
  transition:color var(--t-micro) var(--ease);
}
.drawer__link:hover{color:var(--mavi)}
.drawer__plus{width:18px;height:18px;flex:none;color:var(--dim);transition:transform 260ms var(--ease)}
.drawer__link--cta{color:var(--mavi)}
.drawer__ok{width:18px;height:18px;flex:none;transition:transform 260ms var(--ease)}
.drawer__link--cta:hover .drawer__ok{transform:translateX(4px)}
.drawer__toggle[aria-expanded="true"] .drawer__plus{transform:rotate(45deg);color:var(--mavi)}
.drawer__alt{display:grid;overflow:hidden;max-height:0;transition:max-height 320ms var(--ease)}
.drawer__alt a{padding:.8rem 0 .8rem 1rem;color:var(--muted);font-size:.92rem;border-bottom:1px solid var(--line)}
.drawer__alt a:hover{color:var(--mavi)}
.drawer__foot{padding:1.25rem var(--gutter) 2rem;border-top:1px solid var(--line)}

/* ==========================================================================
   Hero / slider — koyu, görselsiz, header ile bütünleşik
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--koyu-gradyan);
  color:#fff;
  padding-block:11rem 3.5rem;   /* üst boşluk şeffaf header'ı kapsar */
  min-height:min(88vh,840px);
  display:flex;align-items:center;
}
/* Slayt arka planı (panelden): en altta durur, üstüne gradyanlar ve metin gelir. */
.hero__fonlar{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fon{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 780ms var(--ease);
}
.hero__fon.is-aktif{opacity:1}
/* Fotoğraf üzerinde beyaz metin okunur kalsın: solda güçlü, sağda hafif perde */
.hero__fonlar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,26,43,.94) 0%,rgba(18,26,43,.82) 38%,rgba(18,26,43,.5) 100%);
}

/* Derinlik: tek yönlü yumuşak geçiş + ince grid. Glow orb / mesh yok. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(160deg,rgba(30,41,66,.42) 0%,rgba(18,26,43,0) 62%),
    linear-gradient(0deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 42%);
}
/* Hero'daki şeffaf kare/grid örtüsü KALDIRILDI (müşteri, 2026-09-16).
   Derinlik artık yalnız ::before'daki yumuşak gradyandan geliyor; slayt
   fotoğrafının üstünde ikinci bir doku desen kalabalığı yapıyordu. */
.hero__in{position:relative;z-index:2}

/* Hero: solda slaytlar, sağda seçim kartı (müşteri, 2026-09-12). Kart slaytların
   dışındadır; üç slaytta da görünür. Dar ekranda kart metnin altına iner. */
.hero__ust{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.hero__kart{
  background:var(--beyaz);color:var(--fg);
  border-radius:14px;padding:1.5rem;
  box-shadow:0 30px 60px -40px rgba(18,26,43,.65);
}
.hero__kart-baslik{font-size:1.05rem;font-weight:600;color:var(--lacivert)}
.hero__kart-liste{display:grid;gap:.6rem;margin-top:1.1rem}
.hero__kart-liste a{
  display:block;padding:.85rem 1rem;border-radius:10px;
  background:var(--bg-2);border:1px solid transparent;
  transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.hero__kart-liste a:hover{background:var(--beyaz);border-color:var(--cizgi-belirgin)}
.hero__kart-soru{display:block;color:var(--muted);font-size:.88rem;line-height:1.5}
/* Yanıt satırları KOYU, düğme TURUNCU (müşteri, 2026-09-16) — önceki hâli
   tersiydi. Ok currentColor olduğu için yazıyla birlikte koyulaşır. */
.hero__kart-cevap{display:flex;align-items:center;gap:.4rem;margin-top:.3rem;color:var(--lacivert);font-size:.92rem;font-weight:600}
.hero__kart-cevap svg{width:15px;height:15px;flex:none}
.hero__kart-btn{margin-top:1.1rem}   /* içeriği kadar genişlik — tam genişlik çok iri duruyordu (müşteri, 2026-09-14) */
/* Kartın tek dolu düğmesi turuncu: koyu hero üstündeki beyaz kartta tek eylem
   noktasını işaret ediyor. Rozet dairesi beyaz, içindeki ok koyu. */
.hero__kart .hero__kart-btn.btn--primary{background:var(--turuncu);color:#fff}
.hero__kart .hero__kart-btn.btn--primary:hover{background:var(--turuncu-gradyan-hover)}
.hero__kart .hero__kart-btn.btn--primary .btn__rozet{background:#fff;color:var(--lacivert)}
@media (max-width:1080px){
  .hero__ust{grid-template-columns:1fr;gap:2.25rem}
  .hero__slaytlar{min-height:0}
}
@media (max-width:560px){ .hero__kart{padding:1.15rem} }

.hero__slaytlar{position:relative;min-height:21rem}
.hero__slayt{
  position:absolute;inset:0;max-width:54rem;
  opacity:0;visibility:hidden;transform:translateY(12px);
  /* 520ms → 780ms (müşteri, 2026-09-17): slayt değişimi de aynı tempoda. */
  transition:opacity 780ms var(--ease),transform 780ms var(--ease),visibility 780ms;
}
.hero__slayt.is-aktif{opacity:1;visibility:visible;transform:none;position:relative}
.no-js .hero__slayt{position:relative;opacity:1;visibility:visible;transform:none}
.no-js .hero__slayt + .hero__slayt{display:none}

.hero__etiket{
  display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.01em;
  /* Slayt etiketi beyaz — turuncu vurgu başlığa bırakıldı (müşteri, 2026-09-14) */
  color:#fff;padding-bottom:.5rem;margin-bottom:1.15rem;
  border-bottom:1px solid rgba(255,255,255,.38);
}
/* Slider'da yalnız ilk slayt h1; diğerleri p. İkisi de aynı görünür. */
.hero__baslik{
  font-size:clamp(2.2rem,4.3vw,3.75rem);line-height:1.1;
  font-weight:600;letter-spacing:-.028em;text-wrap:balance;
}
.hero__lede{margin-top:1.45rem;max-width:40rem;color:rgba(255,255,255,.72);font-size:1.09rem;line-height:1.65}
.hero__cta{display:flex;gap:.75rem;margin-top:2.3rem;flex-wrap:wrap}
.hero .btn--ghost,.phero .btn--ghost{border-color:rgba(255,255,255,.28);color:#fff}
.hero .btn--ghost:hover,.phero .btn--ghost:hover{
  border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

.hero__alt{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:3.25rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.14);
}
.hero__nokta{display:flex;gap:.5rem}
.hero__n{width:44px;height:24px;display:grid;place-items:center;border-radius:var(--r-pill)}
.hero__n span{
  display:block;width:100%;height:3px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.24);
  transition:background-color 320ms var(--ease);
}
.hero__n:hover span{background:rgba(255,255,255,.45)}
.hero__n.is-aktif span{background:#fff}
.hero__oklar{display:flex;gap:.5rem}
.hero__ok{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-daire);
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.hero__ok svg{width:17px;height:17px}
.hero__ok:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

@media (max-width:1080px){
  .hero{padding-block:10.5rem 3rem;min-height:auto}
  .hero__slaytlar{min-height:23rem}
}
@media (max-width:640px){
  .hero{padding-block:8rem 2.5rem}
  .hero__slaytlar{min-height:26.5rem}
  /* Metin slayt alanının üstüne yapışmasın: dikeyde ortalanır (altta boş alan kalıyordu) */
  .hero__slayt{display:flex;flex-direction:column;justify-content:center;padding-top:1.25rem}
  .hero__lede{font-size:1rem;margin-top:1.15rem}
  .hero__cta{margin-top:1.8rem;gap:.6rem;flex-wrap:nowrap}
  .hero__cta .btn{flex:1 1 0;min-width:0;padding-inline:1rem;white-space:nowrap}
  .hero__alt{margin-top:2.4rem;padding-top:1.3rem}
  .hero__oklar{display:none}
}

/* ==========================================================================
   İç sayfa hero
   ========================================================================== */
.phero{background:var(--koyu-gradyan);color:#fff;padding-block:4.5rem 5rem;position:relative;overflow:hidden}
.phero__in{position:relative;z-index:2}
/* Uzun yazı başlıkları erken sarmasın; marka işaretinin altına girmez. */
.phero h1{max-width:28ch}
.phero__lede{margin-top:1.35rem;max-width:56ch;color:var(--on-dark-muted);font-size:1.06rem}
.phero__ust{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1.75rem}
.phero__geri{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem .4rem .65rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:.82rem;font-weight:600;color:#fff;background:rgba(255,255,255,.06);transition:background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)}
.phero__geri:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.phero__geri svg{flex:none}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem;color:var(--on-dark-dim)}
.crumb a{transition:color var(--t-micro) var(--ease)}
.crumb a:hover{color:#fff}
.crumb__now{color:#fff;font-weight:500}

/* Dekoratif marka işareti */
.mai-mark--hero{right:-4rem;top:12%;width:34rem;opacity:.045}
.mai-mark--phero{right:-3rem;top:-4rem;width:26rem}
.mai-mark--surec{left:-4rem;bottom:-5rem;width:26rem;opacity:.04}
.mai-mark--foot{left:-3rem;bottom:-4rem;width:24rem;opacity:.035}

/* ==========================================================================
   Hizmet şeridi — hero'nun altındaki ikonlu hizmet kartları (müşteri, 2026-09-12).
   Masaüstünde beş sütun, dar ekranda yatay kaydırılır.
   ========================================================================== */
/* Slider ile kutular arası boşluk artırıldı (müşteri, 2026-09-14) */
.hserit{padding-top:clamp(3.25rem,6vw,5.5rem)}
.hserit__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.hserit__kutu{min-width:0}
.hserit__link{
  height:100%;display:flex;flex-direction:column;gap:.7rem;
  padding:1.15rem 1.1rem;background:var(--beyaz);
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:border-color var(--t-card) var(--ease),transform var(--t-card) var(--ease),box-shadow var(--t-card) var(--ease);
}
/* Gölge azaltıldı (müşteri, 2026-09-14): yükseklik ve yayılım düşürüldü */
.hserit__link:hover{border-color:var(--cizgi-belirgin);transform:translateY(-2px);box-shadow:0 6px 16px -14px rgba(18,26,43,.30)}
.hserit__ico{display:block;color:var(--mavi)}
.hserit__ico svg{width:26px;height:26px}
.hserit__ad{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--fg)}

@media (max-width:1080px){
  /* Kaydırılabilir şerit: kartlar daralmaz, yan yana kayar */
  .hserit__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;padding-bottom:.35rem;scrollbar-width:thin}
  /* not: flex-basis'te minmax() geçersizdi, sabit değere alındı */
  .hserit__kutu{flex:0 0 13.5rem;width:13.5rem;scroll-snap-align:start}
  /* Yatay kayan şeritte giriş animasyonu yok: ekran dışındaki kartlar kaydırınca tek tek
     aşağıdan yükseliyordu — mobilde "kartlar yukarı aşağı oynuyor" (müşteri, 2026-09-15) */
  .hserit__grid .reveal{opacity:1;transform:none}
}
/* Mobilde tam 2 kart görünür; kalanlar kaydırmayla gelir (müşteri, 2026-09-14).
   Genişlik oranla veriliyor, cihaz genişliği ne olursa olsun ikisi tam oturur. */
@media (max-width:640px){
  .hserit__grid{gap:.7rem;scrollbar-width:none}
  .hserit__grid::-webkit-scrollbar{display:none}
  .hserit__kutu{flex:0 0 calc((100% - .7rem) / 2);width:auto}
  .hserit__ad{font-size:.86rem}
  .hserit__link{padding:1rem .95rem;gap:.55rem}
  .hserit__ico svg{width:23px;height:23px}
}

/* ==========================================================================
   İş ortakları — Ekibimiz'in altındaki kartlar (müşteri, 2026-09-12)
   ========================================================================== */
/* Yalnız logo kutuları (müşteri, 2026-09-14) — eşit yükseklik, logo ortalanır ve sığdırılır */
/* Yatay şerit: ortak sayısı arttıkça alt alta yığılmaz, yan yana dizilir
   (müşteri, 2026-09-14). Kaba sığdığında ortalanır.
   Otomatik akış kaldırıldı (müşteri, 2026-09-15): şerit yalnız kullanıcı
   kaydırınca hareket eder. Kendi başına hareket etmediği için kaydırma çubuğu
   artık gizlenmiyor — yoksa devamı olduğu hiç belli olmuyor. */
.ortak__grid{
  display:flex;gap:1rem;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  padding-bottom:.85rem;
  /* Taşarken "center" sol taşmayı erişilmez yapıyor (scrollLeft negatife
     inemez): ilk ortak asla görünmez. "safe center" taşma varsa başa döner. */
  justify-content:flex-start;
}
@supports (justify-content:safe center){
  .ortak__grid{justify-content:safe center}
}
.ortak__grid::-webkit-scrollbar{height:6px}
.ortak__grid::-webkit-scrollbar-track{background:transparent}
.ortak__grid::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill)}
/* Sığdığında kutular kabı doldurur, satır ekip kartlarıyla aynı kenarlarda biter; sığmadığında
   en az bu genişlikte kalıp yana kayar (müşteri, 2026-09-16) */
.ortak__grid>li{flex:1 0 clamp(9.5rem,18vw,13rem);scroll-snap-align:start;min-width:0}
/* Şerit yatay kaydığı için giriş animasyonu yok (hizmet şeridiyle aynı sorun; ayrıca akan şeritte
   ekran dışındaki logolar hiç görünür olmuyordu) */
.ortak__grid .reveal{opacity:1;transform:none}
.ortak{
  height:128px;display:flex;align-items:center;justify-content:center;padding:1.25rem 1.5rem;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:border-color var(--t-card) var(--ease),transform var(--t-card) var(--ease);
}
a.ortak:hover{border-color:var(--cizgi-belirgin);transform:translateY(-2px)}
.ortak__logo{max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain}
.ortak__yedek{font-size:1rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.35}
@media (max-width:640px){.ortak__grid{justify-content:flex-start}.ortak{height:104px;padding:1rem}}
/* Dokunmatik ekranda :hover dokununca takılı kalır; kart 2px yukarıda asılı kalmasın */
@media (hover:none){.hserit__link:hover,a.ortak:hover{transform:none}}

/* ==========================================================================
   Kariyer — başvuru formunun solundaki açık pozisyon listesi (müşteri, 2026-09-12)
   ========================================================================== */
.ilan-ozet{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--cizgi-ince)}
.ilan-ozet__baslik{font-size:1.15rem;font-weight:600}
.ilan-ozet__liste{margin-top:.85rem;display:grid;gap:.5rem}
.ilan-ozet__liste a{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;background:var(--beyaz);
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:border-color var(--t-card) var(--ease),background-color var(--t-card) var(--ease);
}
.ilan-ozet__liste a:hover{border-color:var(--cizgi-belirgin);background:var(--bg-2)}
.ilan-ozet__ad{font-weight:600;font-size:.95rem;color:var(--fg)}
.ilan-ozet__meta{color:var(--muted);font-size:.84rem}
.ilan-ozet__ok{width:16px;height:16px;margin-left:auto;flex:none;color:var(--mavi)}
.ilan-ozet__bos{margin-top:.6rem;color:var(--muted);font-size:.9rem;line-height:1.6}
@media (max-width:640px){ .ilan-ozet__liste a{flex-wrap:wrap;gap:.35rem} .ilan-ozet__ok{margin-left:0} }

/* ==========================================================================
   Hesaplama araçları — resmî hesaplama sayfalarına giden kartlar (müşteri, 2026-09-12)
   ========================================================================== */
.hesap__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hesap{
  height:100%;display:flex;flex-direction:column;gap:.5rem;
  padding:var(--pad-kart);background:var(--beyaz);
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:border-color var(--t-card) var(--ease),transform var(--t-card) var(--ease),box-shadow var(--t-card) var(--ease);
}
.hesap:hover{border-color:var(--cizgi-belirgin);transform:translateY(-2px);box-shadow:0 14px 30px -24px rgba(18,26,43,.45)}
.hesap__ico{display:block;color:var(--mavi);margin-bottom:.35rem}
.hesap__ico svg{width:26px;height:26px}
.hesap__ad{font-size:1rem;font-weight:600;color:var(--fg)}
.hesap__ozet{color:var(--muted);font-size:.88rem;line-height:1.55}
.hesap__alt{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--mavi);font-size:.85rem;font-weight:500}
.hesap__alt svg{width:15px;height:15px}
.hesap__not{margin-top:1.75rem;color:var(--muted);font-size:.88rem;line-height:1.6;max-width:70ch}
.hesap__not a{color:var(--mavi);text-decoration:underline}
@media (max-width:1080px){.hesap__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.hesap__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Hesaplama aracı sayfası — solda form, sağda canlı sonuç (müşteri, 2026-09-14)
   ========================================================================== */
.hesapla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.hesapla__form{display:flex;flex-direction:column;gap:1.1rem}
.hesapla__baslik{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}
.hesapla__grup{border:0;padding:0;margin:0}
/* Seçenek başlığı ve alan etiketleri aynı biçimde (formda tek tip başlık) */
.hesapla__etiket,.hesapla__form .field label{display:block;font-size:.9rem;font-weight:500;color:var(--fg);margin-bottom:.45rem;padding:0;letter-spacing:0;text-transform:none}
.hesapla__secenekler{display:flex;flex-wrap:wrap;gap:.5rem}
.hesapla__secenek{position:relative;cursor:pointer}
.hesapla__secenek input{position:absolute;opacity:0;pointer-events:none}
.hesapla__secenek span{
  display:inline-block;padding:.55rem 1rem;border-radius:var(--r-pill);
  border:1px solid var(--cizgi-belirgin);font-size:.88rem;font-weight:500;color:var(--fg);
  transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.hesapla__secenek input:checked + span{background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff}
.hesapla__secenek input:focus-visible + span{outline:2px solid var(--mavi);outline-offset:2px}
.hesapla__alan{margin:0}
.hesapla__alan input,.hesapla__alan select{font-size:1rem}
.hesapla__ipucu{margin-top:.35rem;font-size:.8rem;color:var(--dim);line-height:1.5}
.hesapla__sonuc{
  position:sticky;top:6.5rem;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);padding:var(--pad-kart);
}
.hesapla__bos{color:var(--muted);font-size:.92rem;margin-top:.5rem}
.hesapla__tablo{margin-top:.75rem}
.hesapla__satir{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--cizgi-ince);font-size:.92rem}
.hesapla__satir dt{color:var(--muted)}
.hesapla__satir dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg)}
.hesapla__satir--toplam{border-bottom:0;padding-top:.85rem}
.hesapla__satir--toplam dt{color:var(--fg);font-weight:600}
.hesapla__satir--toplam dd{font-size:1.2rem;font-weight:600;color:var(--mavi)}
.hesapla__satir--toplam + .hesapla__satir{border-top:1px solid var(--cizgi-belirgin);margin-top:.4rem}
.hesapla__sonuc-not{margin-top:.75rem;font-size:.82rem;color:var(--dim);line-height:1.55}
.hesapla__not{margin-top:1.5rem;font-size:.85rem;color:var(--muted);max-width:70ch}
.hesapla__not a{color:var(--mavi);text-decoration:underline}
.hesapla__diger-baslik{font-size:1.3rem;margin-bottom:1.25rem}

/* --- Net/brüt maaş aracı (müşteri, 2026-09-16) ---
   Diğer araçlarla aynı iki sütun; sonuç kutusunun başında tek koyu özet yüzeyi. */
.maas__onay{margin-top:0;font-size:.88rem;color:var(--fg)}
.maas__onay[hidden]{display:none}   /* .onay display:flex, hidden özelliğini eziyordu */
.maas-ozet{
  margin:.25rem 0 .5rem;padding:1.5rem 1.6rem 1.35rem;border-radius:var(--r);
  background:var(--koyu-gradyan);color:#fff;
}
.maas-ozet__etiket{font-size:.86rem;color:var(--on-dark-muted)}
.maas-ozet__deger{margin-top:.35rem;font-size:clamp(2rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums}
.maas-ozet__deger span{font-size:.45em;font-weight:500;letter-spacing:0;color:var(--on-dark-muted)}
.maas-ozet__alt{margin-top:.35rem;font-size:.9rem;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.maas-ozet__cubuk{display:flex;height:8px;margin-top:1.25rem;border-radius:var(--r-pill);overflow:hidden;background:rgba(255,255,255,.1)}
.maas-ozet__cubuk span{display:block;height:100%;transition:width 420ms var(--ease)}
.maas-ozet :is(.is-net){background:#fff}
.maas-ozet :is(.is-prim){background:rgba(255,255,255,.34)}
.maas-ozet :is(.is-vergi){background:var(--turuncu)}
.maas-ozet__lejant{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.75rem;font-size:.8rem;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.maas-ozet__lejant li{display:flex;align-items:center;gap:.4rem}
.maas-ozet__lejant i{width:8px;height:8px;border-radius:var(--r-daire);flex:none}
@media (prefers-reduced-motion:reduce){.maas-ozet__cubuk span{transition:none}}

.maas-yil{margin-top:clamp(3rem,6vw,4.5rem)}
.maas-yil__not{margin-top:-.6rem;color:var(--muted);font-size:.92rem;max-width:62ch}
.maas-yil__ozet{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1.5rem;
  background:var(--cizgi-ince);border:1px solid var(--cizgi-ince);border-radius:var(--r);overflow:hidden;
}
.maas-yil__ozet div{padding:1.1rem 1.35rem;background:var(--beyaz)}
.maas-yil__ozet dt{font-size:.82rem;color:var(--muted)}
.maas-yil__ozet dd{margin:.3rem 0 0;font-size:1.25rem;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.maas-yil__kap{margin-top:1rem;overflow-x:auto;background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r)}
.maas-yil__kap:focus-visible{outline:2px solid var(--mavi);outline-offset:3px}
.maas-yil__tablo{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.maas-yil__tablo th,.maas-yil__tablo td{padding:.7rem 1.25rem;text-align:right;white-space:nowrap}
.maas-yil__tablo :is(th,td):first-child{text-align:left}
.maas-yil__tablo thead th{font-size:.78rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--cizgi-belirgin)}
.maas-yil__tablo tbody :is(th,td){border-top:1px solid var(--cizgi-ince)}
.maas-yil__tablo tbody tr:first-child :is(th,td){border-top:0}
.maas-yil__tablo td.is-kesinti,.maas-yil__tablo td.is-dilim{color:var(--muted)}
.maas-yil__tablo td.is-net{font-weight:600;color:var(--fg)}
.maas-yil__ay{font:inherit;font-weight:500;color:var(--fg);padding:.15rem 0;border-radius:4px}
.maas-yil__ay:hover{color:var(--mavi)}
.maas-yil__ay:focus-visible{outline:2px solid var(--mavi);outline-offset:3px}
.maas-yil__tablo tr.is-secili :is(th,td){background:var(--bg-2)}
.maas-yil__tablo tr.is-secili :is(th,td):first-child{box-shadow:inset 3px 0 0 var(--turuncu-koyu)}
.maas-yil__tablo tr.is-secili .maas-yil__ay,.maas-yil__tablo tr.is-secili td.is-net{color:var(--mavi)}
@media (max-width:640px){
  .maas-yil__ozet{grid-template-columns:1fr}
  /* Beş sütun telefonda da yana kaymadan sığsın */
  .maas-yil__tablo{min-width:0;font-size:.8rem}
  .maas-yil__tablo th,.maas-yil__tablo td{padding:.6rem .45rem}
  .maas-yil__tablo :is(th,td):first-child{padding-left:.75rem}
  .maas-yil__tablo :is(th,td):last-child{padding-right:.75rem}
  .maas-yil__tablo thead th{font-size:.72rem;white-space:normal}
}
/* Dar telefonda "Kesintiler" gizlenir (brüt − net); dört sütun yana kaymadan sığar */
@media (max-width:420px){.maas-yil__tablo :is(th,td):nth-child(3){display:none}}
@media (max-width:900px){
  .hesapla{grid-template-columns:1fr}
  .hesapla__sonuc{position:static}
}

/* ==========================================================================
   Yukarı çık — sağ altta, sayfa aşağı kaydırılınca belirir (müşteri, 2026-09-12).
   WhatsApp düğmesinin üstünde durur; mobilde ikisi çakışmaz.
   ========================================================================== */
.yukari{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:94;   /* WhatsApp ile aynı boyut, en altta (müşteri, 2026-09-14) */
  width:58px;height:58px;display:grid;place-items:center;
  border-radius:var(--r-daire);background:var(--koyu-gradyan);color:#fff;
  box-shadow:0 10px 24px -12px rgba(18,26,43,.55);cursor:pointer;
  opacity:0;transform:translateY(8px);
  transition:opacity 220ms var(--ease),transform 220ms var(--ease),background-color var(--t-micro) var(--ease);
}
.yukari.is-gorunur{opacity:1;transform:none}
.yukari:hover{background:var(--turuncu-gradyan)}
.yukari:active{transform:translateY(1px)}
@media (max-width:560px){ .yukari{right:1rem;bottom:1rem;width:54px;height:54px} }
.yukari svg{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){ .yukari{transition:opacity 1ms} }

/* ==========================================================================
   404 — müşterinin ilettiği referans (2026-09-10): açık zemin, dikey kılavuz
   çizgileri, arkada dev soluk "404", ortada başlık + iki buton.
   ========================================================================== */
.hata{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg);color:var(--fg);
  min-height:78vh;display:flex;align-items:center;
  padding-block:7rem 6.5rem;
  border-bottom:1px solid var(--line-strong);
}
/* Kılavuz: içerik genişliğinin sol kenarı, ⅓, ⅔ ve sağ kenarı — bölüm boyunca */
.hata__izgara{
  position:absolute;inset-block:0;left:0;right:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) 0 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 33.333% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 66.666% 0/1px 100% no-repeat,
    linear-gradient(var(--line),var(--line)) 100% 0/1px 100% no-repeat;
  background-origin:content-box;background-clip:content-box;
}
.hata__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* Dev rakam içeriğin ARKASINDA; okunmaz, yalnız doku — ekran okuyucuya kapalı */
.hata__kod{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;
  font-size:clamp(11rem,34vw,31rem);font-weight:500;line-height:.8;letter-spacing:-.05em;
  color:rgba(18,26,43,.045);white-space:nowrap;user-select:none;
}
.hata h1{font-size:clamp(2.6rem,6.4vw,5.5rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;max-width:none}
.hata__lede{margin-top:1.1rem;max-width:44ch;color:var(--muted);font-size:1.08rem;line-height:1.6}
.hata__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.1rem}
/* İkinci buton referanstaki gibi net çerçeveli (varsayılan ghost açık zeminde neredeyse görünmez) */
.hata .btn--ghost{border-color:var(--lacivert);color:var(--lacivert)}
.hata .btn--ghost:hover{background:var(--bg-2);border-color:var(--lacivert)}

@media (max-width:720px){
  .hata{min-height:auto;padding-block:5.5rem 5rem}
  .hata__lede{font-size:1rem}
}

/* ==========================================================================
   Bölüm başlığı
   ========================================================================== */
/* Başlık bloğu ile altındaki içerik arasındaki boşluk TEK yerde tanımlıdır:
   .sec-head'in alt marjı. Bileşenler kendi margin-top'unu yazmaz.
   Yan yana (iki sütunlu) yerleşimlerde başlık kendi sütunundadır; orada
   alt boşluk sıfırlanır. */
.sec-head{max-width:38rem;margin-bottom:var(--bosluk-blok)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head p{margin-top:var(--bosluk-metin);color:var(--muted);font-size:1.02rem}
.one__sol .sec-head,
.sss-blok__sol .sec-head,
.hizmetler__baslik .sec-head,
.blog__ust .sec-head,
.sec-ust .sec-head{margin-bottom:0}
/* Başlıklar turuncu olmaz (müşteri, 2026-09-16): vurgu kelimesi başlığın kendi rengini alır */
.sec-head h2 em{font-style:normal;color:inherit}
/* KURAL: koyu zeminde ikonlar BEYAZ olur. Başlıklarda turuncu kullanılmaz (2026-09-16). */
.section--dark .sec-head p{color:var(--on-dark-muted)}

.sec-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.sec-ust__yan{flex:none}

/* ==========================================================================
   Güven şeridi
   ========================================================================== */
/* Öne çıkanlar — solda başlık, sağda 2x2 kutu */
/* Başlık sütunu sağdaki kutularla aynı hizada başlasın diye üstten hizalı. */
.one__in{display:grid;grid-template-columns:1fr 1.25fr;gap:4.5rem;align-items:start}
.one__sol .btn{margin-top:2rem}
.one__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.one__i{
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:var(--pad-kart);
  transition:border-color var(--t-card) var(--ease);
}
.one__i:hover{border-color:var(--cizgi-belirgin)}
/* Koyu bölümde aynı kart: cam yüzey + beyaz ikon (koyu zemin ikon kuralı). */
.section--dark .one__i{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;
  transition:border-color var(--t-card) var(--ease),background-color var(--t-card) var(--ease);
}
.section--dark .one__i:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.section--dark .one__i p{color:var(--on-dark-muted)}
.section--dark .one__ico{color:#fff}
.one__ico{display:block;color:var(--mavi);margin-bottom:1.1rem}
.one__ico svg{width:30px;height:30px}   /* müşteri: imgeçler biraz daha büyük (2026-09-12) */
.one__i h3{font-size:1rem}
.one__i p{color:var(--muted);font-size:.87rem;margin-top:.45rem}
@media (max-width:1080px){
  .one__in{grid-template-columns:1fr;gap:2.5rem}
}
@media (max-width:520px){
  .one__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Hizmetler — tam ekran koyu bölüm: arka plan görseli + marka gradyanı,
   yatay kaydırma. Hero ile aynı "edge-to-edge" mantığı: bölüm kenardan
   kenara, içerik .wrap ile ortalanır.
   ========================================================================== */
/* Kapsam — koyu bölüm, hafif gradyan (tek yönlü, düşük kontrast) */
.kapsam{background:linear-gradient(165deg,#1e2942 0%,#121a2b 100%)}

/* overflow:clip — hidden gibi keser ama kaydırma bağlamı yaratmaz; mobildeki sticky kart yığını bunu ister */
.hizmetler{position:relative;overflow:hidden;overflow:clip}
.hizmetler__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.22;
}
.hizmetler::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,rgba(30,41,66,.55) 0%,rgba(18,26,43,.88) 55%,rgba(18,26,43,.97) 100%);
}
.hizmetler__in{position:relative;z-index:2}

.hizmetler__ust{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.hizmetler__baslik .sec-head{max-width:none}
.hizmetler__aciklama{max-width:24rem}
.hizmetler__aciklama p{color:var(--on-dark-muted);font-size:1rem;line-height:1.6}

/* Kartlar sayfa akışında: yatay kaydırma yok, normal ızgara. */
.hizmetler__grid{
  margin-top:3rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}

.hizmet{
  display:flex;flex-direction:column;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:var(--pad-kart);color:var(--fg);
  transition:border-color var(--t-card) var(--ease);
}
.hizmet:hover{border-color:var(--cizgi-belirgin)}
/* İkon, markanın şeffaf tonundan bir daire içinde durur */
.hizmet__ico{
  width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:rgba(255,123,0,.08);color:var(--mavi);
  transition:background-color var(--t-card) var(--ease),color var(--t-card) var(--ease);
}
.hizmet__ico svg{width:25px;height:25px}
.hizmet:hover .hizmet__ico{background:rgba(255,123,0,.14)}
.hizmet h3{font-size:1.1rem;margin-top:1.45rem}
.hizmet p{color:var(--muted);font-size:.92rem;margin-top:.6rem;flex:1}
.hizmet__ok{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.6rem;
  font-size:.87rem;font-weight:600;color:var(--mavi);
}
.hizmet__ok svg{width:15px;height:15px;transition:transform 220ms var(--ease)}
.hizmet:hover .hizmet__ok svg{transform:translateX(4px)}

/* Dönüşüm kartı — koyu panel üzerinde cam görünümü */
.hizmet--cta{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.hizmet--cta .hizmet__ico{background:rgba(255,255,255,.1);color:#fff}
.hizmet--cta:hover .hizmet__ico{background:rgba(255,255,255,.16)}
.hizmet--cta p{color:var(--on-dark-muted)}
.hizmet--cta .hizmet__ok{color:#fff}
.hizmet--cta:hover{border-color:rgba(255,255,255,.32);box-shadow:0 16px 36px -24px rgba(0,0,0,.5)}


@media (max-width:1000px){
  .hizmetler__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hizmetler__aciklama{max-width:none}
}
@media (max-width:640px){
  .hizmetler__grid{grid-template-columns:1fr;gap:1rem}
  /* Kart yığını: her kart üstte yapışır, sonraki kart onun üstüne kayar; yukarı çıkınca çözülür.
     Her kart bir öncekinden biraz aşağıda durur ki altta kalanların üst kenarı görünsün. */
  /* YALNIZ ızgaradaki kartlar: aynı .hizmet sınıfı detay sayfasındaki yatay karüselde de
     kullanılıyor, orada sticky olmamalı. */
  .hizmetler__grid > .hizmet{position:sticky;top:calc(65px + .75rem);box-shadow:0 -10px 30px -18px rgba(18,26,43,.45)}
  .hizmetler__grid > .hizmet:nth-child(2){top:calc(65px + 1.25rem)}
  .hizmetler__grid > .hizmet:nth-child(3){top:calc(65px + 1.75rem)}
  .hizmetler__grid > .hizmet:nth-child(4){top:calc(65px + 2.25rem)}
  .hizmetler__grid > .hizmet:nth-child(5){top:calc(65px + 2.75rem)}
  .hizmetler__grid > .hizmet:nth-child(n+6){top:calc(65px + 3.25rem)}
  .hizmetler__grid > .hizmet--cta{background:var(--koyu-gradyan)}   /* cam efekti şeffaf; yığında altındaki kart görünmesin */
  .hizmetler__grid::after{content:'';display:block;height:1px}
}

/* ==========================================================================
   Hakkımızda
   ========================================================================== */
.hakkinda__in{display:grid;grid-template-columns:1fr 1.02fr;gap:4.5rem;align-items:center}
/* Solda tam boy dikey görsel, sağda üst üste iki görsel (referans düzen) */
.hakkinda__gorsel{
  position:relative;
  display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:1fr 1fr;
  gap:.85rem;
}
.hakkinda__kare{width:100%;height:100%;object-fit:cover;border-radius:var(--r);display:block}
.hakkinda__kare--buyuk{grid-row:1 / span 2;aspect-ratio:1/1.32}
.hakkinda__metin p{color:var(--muted);margin-top:1.1rem;font-size:1.02rem}
.hakkinda__metin .reveal>p:first-child{margin-top:0}
.hakkinda__liste{margin-top:1.8rem;display:grid;gap:.8rem}
.hakkinda__liste li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;font-weight:500}
/* Onay çubukları KOYU zemin + BEYAZ ikon (müşteri, 2026-09-16). Açık gri
   daire içinde turuncu tik cılız duruyordu; dolu koyu daire listeyi
   sayfanın koyu bloklarıyla aynı dile bağlıyor. */
.hakkinda__liste .ok{
  flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--lacivert);color:#fff;margin-top:.1rem;
}
.hakkinda__liste .ok svg{width:12px;height:12px;stroke-width:2.6}
.hakkinda__metin .btn{margin-top:2.1rem}
@media (max-width:980px){
  .hakkinda__in{grid-template-columns:1fr;gap:3rem}
}
/* Dar ekranda büyük görsel üste tam genişlik, ikisi altta yan yana */
@media (max-width:560px){
  .hakkinda__gorsel{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.6rem}
  .hakkinda__kare--buyuk{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3.1}
  .hakkinda__kare:not(.hakkinda__kare--buyuk){aspect-ratio:1}
}

/* ==========================================================================
   İÇ SAYFA ORTAK PARÇALARI
   Buradaki sınıflar iç sayfaların tamamı tarafından paylaşılır.
   Sayfaya özel varyant yazmak yasak — eksik varsa buraya eklenir.
   ========================================================================== */

/* --- Uzun düz metin (hizmet metni, blog gövdesi, yasal metin) --- */
.metin{max-width:70ch}
.metin>*:first-child{margin-top:0}
.metin p{color:var(--muted);font-size:1.02rem;line-height:1.75;margin-top:1.1rem}
.metin h3{font-size:1.15rem;font-weight:600;color:var(--lacivert);margin-top:2.4rem}
.metin ul,.metin ol{margin-top:1.1rem;display:grid;gap:.6rem;padding-left:1.2rem;color:var(--muted);font-size:1rem;line-height:1.7}
.metin li::marker{color:var(--mavi)}
.metin strong{color:var(--lacivert);font-weight:600}
.metin a{color:var(--mavi);text-decoration:underline;text-underline-offset:2px}
/* Yazı içi görsel */
.metin__gorsel{margin-top:2rem}
.metin__gorsel img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r);border:1px solid var(--cizgi-ince);
}
.metin__gorsel figcaption{
  color:var(--dim);font-size:.83rem;line-height:1.5;margin-top:.65rem;
}
.metin__not{margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--dim);font-size:.84rem;line-height:1.6}
.section--dark .metin p,.section--dark .metin ul,.section--dark .metin ol{color:var(--on-dark-muted)}
.section--dark .metin h3,.section--dark .metin strong{color:#fff}

/* --- Geniş içerik + dar yan panel --- */
.icerik-blok{display:grid;grid-template-columns:1.5fr 1fr;gap:4.5rem;align-items:start}
.icerik-blok--yapiskan .icerik-blok__yan{position:sticky;top:8.5rem}
/* min-width:0 — uzun kelime/URL ızgara sütununu şişirmesin */
.icerik-blok__ana{min-width:0}
.icerik-blok__yan{display:grid;gap:1rem;min-width:0}
@media (max-width:980px){
  .icerik-blok{grid-template-columns:1fr;gap:2.75rem}
  .icerik-blok--yapiskan .icerik-blok__yan{position:static}
}

/* Yan panel solda (yasal metin sayfaları). Mobilde DOM sırası geçerli olur:
   içerik önce, yan panel sonra — `order` hilesi kullanılmıyor. */
.icerik-blok--sol-yan{grid-template-columns:1fr 1.5fr}
.icerik-blok--sol-yan .icerik-blok__ana{grid-column:2;grid-row:1}
.icerik-blok--sol-yan .icerik-blok__yan{grid-column:1;grid-row:1}

/* Dar yan panel (blog yazısı) */
/* Blog yazısı: sayfa genişliğini sonuna kadar kullanır. Yan panel sağ kenara
   yaslı, gövde kalan alanın tamamını alır; ana yapılar arası boşluk 50px. */
.icerik-blok--dar-yan{
  grid-template-columns:minmax(0,1fr) 20rem;gap:50px;
}
.icerik-blok--dar-yan .icerik-blok__ana .metin{max-width:none}
/* Dar yan panelde kutu daralınca metin sıkışmasın: iç boşluk ve punto artar. */
.icerik-blok--dar-yan .icerik-blok__yan .card{padding:var(--pad-kart-sm)}
.icerik-blok--dar-yan .icerik-blok__yan .card p{font-size:.95rem;line-height:1.7;max-width:none}
.icerik-blok--dar-yan .icerik-blok__yan .card h3{font-size:.78rem}

/* Blog yazısının sonundaki SSS: ayrı bölüm gibi değil, gövdenin devamı. */
/* Yazı kapağı — gövdenin üstünde, 16:10 3B ikon */
/* Gövde sütunu geniş olduğu için kapak tam genişlikte devasa duruyor;
   sabit üst sınırla okuma akışını bozmayan bir ölçekte tutulur. */
/* Görsel KIRPILMAZ (müşteri, 2026-09-17): sabit 600px genişlik ve 16/10
   oranı kalktı; görsel sütunu tam kaplar, yüksekliği kendi oranından gelir. */
.yazi__kapak{margin:1.75rem 0 2.25rem;border-radius:var(--r);overflow:hidden}
.yazi__kapak img{display:block;width:100%;height:auto}

/* --- Yazı içi "İçindekiler" — gövdedeki h2/h3'lerden otomatik üretilir --- */
/* Kutu iki başlıktan azsa sunucu hiç basmaz; burada "boş kutu" hâli yok. */
.icindekiler{
  background:var(--bg-2);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:1.1rem 1.35rem 1.2rem;margin:0 0 2rem;
}
.icindekiler__baslik{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);
}
.icindekiler__liste{list-style:none;margin-top:.55rem;counter-reset:ic}
.icindekiler__oge{counter-increment:ic}
.icindekiler__oge a{
  display:flex;gap:.6rem;align-items:baseline;
  padding:.34rem 0;font-size:.95rem;line-height:1.5;
  color:var(--fg);text-decoration:none;
  transition:color var(--t-micro) var(--ease);
}
.icindekiler__oge a::before{
  content:counter(ic) ".";flex:none;min-width:1.15rem;
  font-size:.82rem;font-weight:600;color:var(--dim);
}
.icindekiler__oge--h3{padding-left:1.4rem}
.icindekiler__oge--h3 a{font-size:.9rem;color:var(--muted)}
.icindekiler__oge--h3 a::before{content:"—";min-width:.9rem}
.icindekiler__oge a:hover{color:var(--mavi)}
/* Okunmakta olan bölüm — JS işaretler, JS yoksa hiçbir şey eksilmez. */
.icindekiler__oge.is-okunan a{color:var(--mavi);font-weight:600}
/* Çapaya inince başlık yapışkan header'ın altında kalmasın. */
.rich-text :is(h2,h3){scroll-margin-top:calc(var(--head-h,6rem) + 1.5rem)}

.yazi__sss{margin-top:50px;padding-top:50px;border-top:1px solid var(--cizgi-ince)}
.yazi__sss-baslik{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.yazi__sss-ozet{color:var(--muted);margin-top:.6rem;line-height:1.7}
.yazi__sss .sss{margin-top:1.75rem}
.yazi__sss-alt{margin-top:1.75rem}

/* Eşit iki sütun (kariyer: metin + form) */
.icerik-blok--esit{grid-template-columns:1fr 1fr;gap:3.5rem}

@media (max-width:980px){
  /* Varyantlar temel kuraldan SONRA geldiği için sütunlar burada da sıfırlanmalı. */
  .icerik-blok--sol-yan,.icerik-blok--dar-yan,.icerik-blok--esit{
    grid-template-columns:1fr;gap:2.75rem}
  .icerik-blok--sol-yan .icerik-blok__ana,
  .icerik-blok--sol-yan .icerik-blok__yan{grid-column:auto;grid-row:auto}
}

/* --- Çalışma alanı satırları (kariyer) — kart değil, sade ikon+ad --- */
.alan__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.alan{
  display:flex;align-items:center;gap:.9rem;
  padding:1.1rem 1.25rem;border-radius:var(--r);
  background:var(--beyaz);
  font-size:.95rem;font-weight:500;line-height:1.4;
}
.alan__ico{
  flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:rgba(255,123,0,.08);color:var(--mavi);
}
.alan__ico svg{width:18px;height:18px}
@media (max-width:900px){.alan__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.alan__grid{grid-template-columns:1fr}}

/* --- Galeri — 4x4 ızgara --- */
.galeri__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.galeri__kare{
  border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  border:1px solid var(--cizgi-ince);
}
.galeri__kare img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 900ms var(--ease);
}
.galeri__kare:hover img{transform:scale(1.04)}
@media (max-width:1000px){.galeri__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.galeri__grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}

/* --- Kart içi başlık + link listesi --- */
.card h3{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.card p{color:var(--muted);font-size:.93rem;line-height:1.65;margin-top:.85rem}
.card .btn{margin-top:1.35rem}
.card__liste{display:grid;margin-top:1rem}
.card__liste a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--line);
  font-size:.92rem;font-weight:500;color:var(--fg);
  transition:color var(--t-micro) var(--ease);
}
.card__liste a:last-child{border-bottom:0;padding-bottom:0}
/* Yalnız satır sonundaki ok gizlenir — ikon dairesindeki svg'ler etkilenmez. */
.card__liste a>svg{width:15px;height:15px;flex:none;color:var(--mavi);opacity:0;transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.card__liste a:hover{color:var(--mavi)}
.card__liste a:hover>svg{opacity:1;transform:translateX(3px)}

/* --- SSS sekmeli görünüm: solda başlıklar, sağda o başlığın soruları --- */
.sekme{display:grid;grid-template-columns:20rem 1fr;gap:3rem;align-items:start}
.sekme__yan{
  display:grid;gap:.35rem;position:sticky;top:8.5rem;
}
.sekme__dugme{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;
  width:100%;text-align:left;
  padding:.9rem 1rem;border-radius:var(--r);
  border:1px solid transparent;
  font-size:.93rem;font-weight:500;line-height:1.35;color:var(--muted);
  transition:background-color var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.sekme__dugme:hover{background:var(--bg-2);color:var(--lacivert)}
.sekme__ico{
  width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--bg-2);color:var(--mavi);
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.sekme__ico svg{width:16px;height:16px}
.sekme__adet{
  font-size:.76rem;font-weight:600;color:var(--dim);
  background:var(--bg-2);border-radius:var(--r-pill);padding:.15rem .5rem;
}
.sekme__dugme.is-aktif{
  background:var(--koyu-gradyan);border-color:var(--lacivert);color:#fff;
}
.sekme__dugme.is-aktif .sekme__ico{background:rgba(255,255,255,.14);color:#fff}
.sekme__dugme.is-aktif .sekme__adet{background:rgba(255,255,255,.14);color:#fff}

.sekme__ana{min-width:0}
.sekme__baslik{font-size:1.35rem;font-weight:600;margin-bottom:1.35rem}
/* JS varsa tek panel görünür; JS yoksa hepsi açık kalır (fail-safe). */
.js .sekme__panel[hidden]{display:none}
.sekme__panel+.sekme__panel{margin-top:3rem}
.js .sekme__panel+.sekme__panel{margin-top:0}

@media (max-width:980px){
  .sekme{grid-template-columns:1fr;gap:2rem}
  .sekme__yan{
    position:static;
    grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;padding-bottom:.35rem;
    scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  }
  .sekme__yan::-webkit-scrollbar{width:0;height:0;display:none}
  .sekme__dugme{grid-template-columns:auto auto;white-space:nowrap}
  .sekme__adet{display:none}
}

/* --- Kuruluş maliyetleri: teklif dosyasındaki gibi çerçeveli, numaralı tablo --- */
.maliyet__ust{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.35rem}
.maliyet__ust .sekme__baslik{margin-bottom:0}
.maliyet__rozet{
  font-size:.74rem;font-weight:600;letter-spacing:.02em;
  color:var(--accent-ink);background:var(--accent-soft);
  border-radius:var(--r-pill);padding:.25rem .7rem;
}
.maliyet__giris{color:var(--muted);max-width:62ch;margin-bottom:1rem}
.maliyet__tarih{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.83rem;color:var(--dim);
  background:var(--bg-2);border-radius:var(--r-pill);padding:.4rem .85rem;margin-bottom:2rem;
}
.maliyet__tarih svg{width:15px;height:15px;flex:0 0 auto}

.maliyet__blok+.maliyet__blok{margin-top:2.5rem}
.maliyet__blok-baslik{font-size:1.02rem;font-weight:600;margin-bottom:.9rem}

/* Dar ekranda tablo kendi kabında yatay kayar; sayfa gövdesi kaymaz. */
.maliyet__kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.maliyet__kaydir+.maliyet__kaydir,
.maliyet__kaydir+.maliyet__blok,
.maliyet__blok+.maliyet__kaydir{margin-top:2.5rem}

.maliyet__tablo{
  width:100%;min-width:40rem;border-collapse:collapse;text-align:left;
  border:1px solid var(--line-strong);
}
.maliyet__tablo--bilgi{min-width:32rem}
/* Başlık şeridi: solda bölüm adı, sağda tutar sütununun başlığı (teklif dosyasıyla aynı). */
.maliyet__tablo thead th{
  background:var(--koyu-gradyan);color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
  padding:.8rem .9rem;border-right:1px solid rgba(255,255,255,.14);
}
.maliyet__tablo thead th:last-child{border-right:none}
.maliyet__tablo tbody th,
.maliyet__tablo tbody td{
  padding:.75rem .9rem;border:1px solid var(--line-strong);vertical-align:top;
}
.maliyet__no{width:2.75rem;color:var(--dim);font-size:.86rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.maliyet__kalem{width:12.5rem;font-weight:600;font-size:.9rem;line-height:1.45}
.maliyet__aciklama{color:var(--muted);font-size:.86rem;line-height:1.6}
.maliyet__tutar-bas,
.maliyet__tutar{text-align:right;white-space:nowrap}
.maliyet__tutar{width:9.5rem;font-weight:600;font-size:.94rem;font-variant-numeric:tabular-nums}
.maliyet__tutar--sifir{color:var(--dim);font-weight:500}
/* Rakam yerine metin girilmiş kalem ("Görüşmede netleştirilir") satıra sığsın */
.maliyet__tutar--metin{white-space:normal;font-weight:500;font-size:.82rem;color:var(--dim)}

/* Toplam satırı ARKA PLANSIZ (müşteri, 2026-09-16 — önce lacivert şeritti,
   ondan önce turuncu). Vurgu yalnız tipografiyle: kalın yazı, bir tık büyük
   tutar ve satırı ayıran çizgi. Zemin tabloyla aynı kaldığı için tablo tek
   parça okunuyor. */
.maliyet__tablo tfoot tr{background:transparent}
.maliyet__tablo tfoot th,
.maliyet__tablo tfoot td{
  padding:.85rem .9rem;border:1px solid var(--line-strong);
  background:transparent;color:var(--fg);font-weight:700;
}
/* Şerit içinde etiket ile tutarı ayıran dikey çizgi kaldırılır: alan tek
   parça görünür. */
.maliyet__tablo tfoot th{text-align:right;font-size:.94rem;border-right:none}
.maliyet__tablo tfoot td.maliyet__tutar{
  border-left:none;
  font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums;
}
/* Dipnot satırı toplamın parçası değil: daha küçük ve soluk. */
.maliyet__tablo tfoot tr.maliyet__eksik{background:var(--bg)}
.maliyet__tablo tfoot tr.maliyet__eksik td{
  border-color:var(--line-strong);font-weight:400;
  font-size:.82rem;color:var(--dim);text-align:left;white-space:normal;
}

/* Teşvikler — tutarı düşüren durumlar, turuncu vurguyla ayrışır */
.maliyet__tesvikler{display:grid;gap:.85rem}
.maliyet__tesvik{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:1.1rem 1.2rem;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid rgba(255,123,0,.14);
}
.maliyet__tesvik-ico{
  width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:#fff;color:var(--turuncu-koyu);
}
.maliyet__tesvik-ico svg{width:16px;height:16px}
.maliyet__tesvik h4{font-size:.94rem;font-weight:600;margin-bottom:.25rem;color:var(--accent-ink)}
.maliyet__tesvik p{font-size:.88rem;line-height:1.65;color:#5a3a20}

.maliyet__notlar{display:grid;gap:.6rem;list-style:none;padding:0}
.maliyet__notlar li{
  position:relative;padding-left:1.1rem;
  font-size:.88rem;line-height:1.65;color:var(--muted);
}
.maliyet__notlar li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:var(--r-daire);background:var(--line-strong);
}

.maliyet__cta{
  margin-top:2.5rem;padding:1.6rem 1.75rem;border-radius:var(--r);
  background:var(--bg-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;
}
.maliyet__cta p{font-weight:500;color:var(--lacivert)}
.maliyet__cta-btn{display:flex;gap:.6rem;flex-wrap:wrap}

@media (max-width:760px){
  /* Numara sütunu gizlenmez, daraltılır: gizlenince thead colspan ile gövde
     hücre sayısı ayrışıyor ve tabloda boş bir sütun kalıyordu. */
  .maliyet__no{width:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.8rem}
  .maliyet__tablo{min-width:32rem}
  .maliyet__tablo--bilgi{min-width:26rem}
  .maliyet__kalem{width:10rem}
  .maliyet__tutar{width:7.5rem}
  .maliyet__cta{flex-direction:column;align-items:flex-start}
  /* Tablo yatay kayarken tutar sütunu sağ kenarda sabit kalsın: kullanıcı
     açıklamayı okurken rakamı görmeye devam eder. border-collapse ile sabit
     hücrenin kenarlığı çizilmediği için sol çizgi box-shadow ile verilir. */
  .maliyet__tablo thead th.maliyet__tutar-bas,
  .maliyet__tablo tbody td.maliyet__tutar,
  .maliyet__tablo tfoot td.maliyet__tutar{
    position:sticky;right:0;z-index:1;box-shadow:-1px 0 0 var(--line-strong);
  }
  .maliyet__tablo thead th.maliyet__tutar-bas{background:var(--koyu-2)}
  .maliyet__tablo tbody td.maliyet__tutar{background:var(--bg)}
  /* Sabit tutar hücresi saydam kalırsa altından kayan hücreler görünür;
     tablo zeminiyle aynı dolgu verilir (2026-09-16: şerit kaldırıldı). */
  .maliyet__tablo tfoot td.maliyet__tutar{
    background:var(--bg);box-shadow:-1px 0 0 var(--line-strong);
  }
}

/* --- Paketler — sade, eşit yapılı karşılaştırma kartları --- */
.paket__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1.25rem;align-items:stretch}   /* 3 ya da 4 kart (müşteri, 2026-09-12) */
/* Boşluk yalnız başlık varsa; başlıksız kullanımda bölüm dolgusu zaten yeter. */
.paket{
  display:flex;flex-direction:column;
  background:var(--beyaz);border:0;border-radius:var(--r);
  padding:var(--pad-kart);
}
/* Öne çıkan paket kenarlıkla değil, hafif yükselti ve dolu butonla ayrılır. */
.paket--oneri{box-shadow:0 10px 34px -26px rgba(18,26,43,.45)}
/* Etiket: şeffaf kutu içinde, yalnız baş harfi büyük */
.paket__etiket{
  display:inline-block;align-self:flex-start;
  padding:.3rem .7rem;border-radius:var(--r-pill);
  background:rgba(18,26,43,.05);
  font-size:.78rem;font-weight:600;letter-spacing:0;
  color:var(--muted);
  /* Etiket metni panelden gelir; kelime başları burada büyütülür
     (müşteri, 2026-09-15) — "Hızlı başlangıç" → "Hızlı Başlangıç". */
  text-transform:capitalize;
}
.paket--oneri .paket__etiket{background:rgba(255,123,0,.1);color:var(--mavi)}
.paket__baslik{font-size:1.45rem;font-weight:600;margin-top:.7rem}
.paket__sermaye{
  color:var(--mavi);font-size:.92rem;font-weight:600;margin-top:.5rem;
}
.paket__ozet{color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:.9rem}
.paket__liste{display:grid;gap:.65rem;margin-top:1.5rem}
.paket__liste li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.55}
.paket__liste svg{width:15px;height:15px;flex:none;margin-top:.22rem;color:var(--mavi)}
.paket__liste--dikkat{color:var(--muted);margin-top:.9rem}
.paket__liste--dikkat svg{color:var(--dim)}
/* margin-top:auto butonu kartın en altına iter → üç kartta da aynı hizada durur.
   (Önceki .paket__liste+.paket__btn{margin-top:2rem} kuralı bunu eziyordu.)
   min-height, rozetli (dolu) ve ghost butonu aynı yükseklikte tutar. */
.paket__btn{margin-top:auto;align-self:flex-start;min-height:2.875rem}
.paket>*:nth-last-child(2){margin-bottom:2rem}   /* butondan önceki son öğe — hangisi olursa */
.paket__not{
  max-width:70ch;margin-top:2.25rem;
  color:var(--dim);font-size:.85rem;line-height:1.65;
}
.paket__tum{margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem}
@media (max-width:560px){.paket__tum{align-items:stretch}}
@media (max-width:1000px){.paket__grid{grid-template-columns:1fr}}

/* Kart vurgusu turuncu — müşteri isteği (2026-09-12). Onay işaretleri ve öne çıkan kartın etiketi. */
.paket__liste svg{color:var(--turuncu)}
.paket--oneri .paket__etiket{background:rgba(255,123,0,.13);color:var(--turuncu)}

/* Kart dibindeki düğme grubu — listeden net bir boşlukla ayrılır, kartlar arasında hizalı durur */
.paket__aksiyon{margin-top:auto;padding-top:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.paket__aksiyon .paket__btn{margin-top:0}
/* Paket kartından maliyet sayfasının ilgili sekmesine çapa (müşteri, 2026-09-15) */
.paket__maliyet-link{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.86rem;font-weight:600;color:var(--turuncu-koyu);
  min-height:2.25rem;                     /* dokunma hedefi */
  transition:color var(--t-micro) var(--ease),gap var(--t-micro) var(--ease);
}
.paket__maliyet-link svg{width:14px;height:14px}
.paket__maliyet-link:hover{color:var(--lacivert);gap:.5rem}
[data-tema="koyu"] .paket__maliyet-link{color:#ff7b00}
[data-tema="koyu"] .paket__maliyet-link:hover{color:#fff}


/* Kart düğmeleri mavi gradyan (müşteri, 2026-09-15). Önceden turuncuydu ve yalnız
   öne çıkan kart doluydu; artık dört kartta da aynı dolu düğme kullanılıyor. */
.paket .paket__btn.btn--primary{background:var(--mavi-gradyan);color:#fff}
.paket .paket__btn.btn--primary:hover{background:var(--mavi-gradyan-hover)}
/* Rozetin içindeki ok KOYU (müşteri, 2026-09-16). `--mavi` artık turuncuya
   bağlı olduğu için ok turuncu çıkıyordu; turuncu sitede dolgu ve vurgu
   metnidir, ikon rengi değil. */
.paket .paket__btn.btn--primary .btn__rozet{background:#fff;color:var(--lacivert)}

/* ---- Koyu mavi kart (panel: Şirket Türleri › Koyu mavi kart) ----
   Zemin gradyan olduğu için içerideki tüm yazılar beyaza döner; kartın kendi
   açık zemin renkleri (mavi başlık, gri özet, turuncu onay işareti) ezilir. */
.paket--koyu{
  background:var(--mavi-kart-gradyan);border-color:transparent;color:#fff;
  box-shadow:0 18px 44px -28px rgba(18,26,43,.75);
}
.paket--koyu .paket__baslik{color:#fff}
.paket--koyu .paket__etiket{background:rgba(255,255,255,.16);color:#fff}
.paket--koyu .paket__sermaye{color:#fff}
.paket--koyu .paket__ozet{color:var(--on-dark-muted)}
.paket--koyu .paket__liste li{color:#fff}
.paket--koyu .paket__liste svg{color:#fff}
.paket--koyu .paket__liste--dikkat{color:var(--on-dark-muted)}
.paket--koyu .paket__liste--dikkat svg{color:var(--on-dark-dim)}
/* Beyaz düğme: rozet dairesi ters renkte olmalı ki ok görünsün. */
.paket--koyu .paket__btn.btn--beyaz{background:#fff;color:var(--lacivert)}
.paket--koyu .paket__btn.btn--beyaz:hover{background:var(--bg-2)}
.paket--koyu .paket__btn.btn--beyaz .btn__rozet{background:var(--koyu-gradyan);color:#fff}
.paket--koyu .paket__maliyet-link{color:#fff}
.paket--koyu .paket__maliyet-link:hover{color:var(--on-dark-muted)}
.paket .paket__btn.btn--ghost{border-color:rgba(255,123,0,.45);color:var(--turuncu-koyu)}
.paket .paket__btn.btn--ghost:hover{border-color:var(--turuncu-koyu);background:rgba(255,123,0,.08)}

/* --- Talep formu — dört seçenekli, koşullu alanlı --- */
.talep__tur{border:0;padding:0;margin:0 0 1.75rem}
.talep__tur legend{padding:0}
.talep__secenekler{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.65rem}
.talep__secenek{
  position:relative;
  display:flex;align-items:center;gap:.75rem;
  padding:.95rem 1.05rem;cursor:pointer;
  background:var(--bg-2);border:0;border-radius:var(--r);
  font-size:.9rem;font-weight:500;line-height:1.35;
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.talep__secenek:hover{background:var(--bg-3)}
/* Radyo, kutunun tamamını kaplar: görünmez ama kendi odak halkası
   bütün kutuyu çevreler. Böylece etiketin üzerinde :focus-within'e gerek kalmaz. */
.talep__secenek input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;border-radius:var(--r);
}
.talep__ico{
  flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--beyaz);color:var(--mavi);
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.talep__ico svg{width:17px;height:17px}
.talep__secenek.is-secili{background:var(--koyu-gradyan);color:#fff}
.talep__secenek.is-secili .talep__ico{background:rgba(255,255,255,.14);color:#fff}
/* Yalnız klavyeyle gezerken halka görünür; fareyle tıklamada çizgi çıkmaz. */
.talep__secenek input:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}
.talep__blok{margin-top:1.75rem}
.talep__blok[hidden]{display:none}
.talep__baslik{
  font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);
}
.talep .form__grid{margin-top:.85rem}
.field select{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;font:inherit;font-size:.93rem;color:var(--fg);
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.7' 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 .9rem center;background-size:16px;
  padding-right:2.6rem;
  transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.field select:focus{outline:none;border-color:var(--mavi)}

/* ==========================================================================
   Özel açılır liste — .field select'in yerini alan panel.
   Native select DOM'da kalır (form gönderimi ve JS'siz hâl için) ama
   görünmez; JS yoksa .secim hiç oluşmaz ve select normal görünür.
   ========================================================================== */
.secim{position:relative}
.secim__yerli{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.secim__dugme{
  display:flex;align-items:center;gap:.75rem;width:100%;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;font:inherit;font-size:.93rem;color:var(--fg);text-align:left;
  cursor:pointer;
  transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.secim__dugme:hover{border-color:var(--cizgi-belirgin)}
.secim.is-acik .secim__dugme{border-color:var(--mavi);background:var(--beyaz)}
.secim__dugme:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}
.secim__deger{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secim.is-bos .secim__deger{color:var(--dim)}
.secim__ok{
  flex:none;width:16px;height:16px;color:var(--dim);
  transition:transform var(--t-micro) var(--ease);
}
.secim.is-acik .secim__ok{transform:rotate(180deg)}

.secim__liste{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  max-height:16rem;overflow-y:auto;overscroll-behavior:contain;
  background:var(--beyaz);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px -28px rgba(18,26,43,.5);
  padding:.3rem;list-style:none;margin:0;
}
.secim.is-yukari .secim__liste{top:auto;bottom:calc(100% + 6px)}
.secim__oge{
  padding:.62rem .75rem;border-radius:var(--r);font-size:.9rem;line-height:1.35;
  color:var(--fg);cursor:pointer;
}
.secim__oge--bos{color:var(--dim)}
.secim__oge.is-imlec{background:var(--bg-2)}
.secim__oge.is-secili{background:var(--koyu-gradyan);color:#fff;font-weight:500}
.secim__oge.is-secili.is-imlec{background:var(--mavi)}

/* ==========================================================================
   Telefon alanı — ülke kodu düğmesi + numara girişi
   ========================================================================== */
.tel{position:relative;display:flex;gap:.5rem}
.tel__ulke{
  flex:none;display:flex;align-items:center;gap:.45rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem .75rem;font:inherit;font-size:.93rem;color:var(--fg);cursor:pointer;
  transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.tel__ulke:hover{border-color:var(--cizgi-belirgin)}
.tel.is-acik .tel__ulke{border-color:var(--mavi);background:var(--beyaz)}
.tel__ulke:focus-visible{outline:2px solid var(--mavi);outline-offset:2px}
.tel__bayrak{font-size:1.05rem;line-height:1}
.tel__kod{font-variant-numeric:tabular-nums;white-space:nowrap}
.tel .tel__giris{flex:1;min-width:0;letter-spacing:.02em}

.tel__panel{
  position:absolute;z-index:40;left:0;top:calc(100% + 6px);width:min(22rem,100%);
  background:var(--beyaz);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px -28px rgba(18,26,43,.5);padding:.5rem;
}
.tel__ara{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.6rem .75rem;font:inherit;font-size:.88rem;color:var(--fg);
}
.tel__ara:focus{outline:none;border-color:var(--mavi)}
.tel__liste{position:static;margin-top:.4rem;padding:0;border:0;box-shadow:none;max-height:14rem}
.tel__oge{display:flex;align-items:center;gap:.6rem}
.tel__ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel__oge .tel__kod{color:var(--dim);font-size:.85rem}
.tel__oge.is-secili .tel__kod{color:rgba(255,255,255,.72)}
@media (max-width:520px){
  .tel__panel{width:100%}
  .tel__ulke{padding-inline:.6rem}
}
@media (max-width:640px){.talep__secenekler{grid-template-columns:1fr}}

/* --- Kart listesinde ikonlu satır --- */
.card__liste--ikonlu a{gap:.75rem}
.card__ico{
  flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--bg-2);color:var(--mavi);
  transition:background-color var(--t-micro) var(--ease);
}
.card__ico svg{width:15px;height:15px}
.card__liste--ikonlu a>span:nth-child(2){flex:1;min-width:0}
.card__liste--ikonlu a:hover .card__ico{background:var(--bg-3)}

/* --- Hizmet illüstrasyonu — içerik sütununun başında, marka çizimi --- */
/* Çizimin kendi koyu paneli var; ekstra çerçeve/zemin eklenmiyor. */
.hizmet-gorsel{border-radius:var(--r);overflow:hidden;margin-bottom:2rem}
.hizmet-gorsel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

/* --- Yan panel CTA kartı — koyu zemin + şeffaf marka işareti --- */
.card--cta{
  position:relative;overflow:hidden;
  background:var(--koyu-gradyan);border-color:transparent;color:#fff;
}
.card--cta:hover{border-color:transparent}
.card--cta>*{position:relative;z-index:2}
.card--cta h3{color:var(--on-dark-dim)}
.card--cta p{color:var(--on-dark-muted);max-width:34ch}
.card--cta .mai-mark{
  position:absolute;right:-1.75rem;bottom:-2.25rem;width:9.5rem;
  color:#fff;opacity:.08;z-index:1;pointer-events:none;
}

/* --- Yazı sayfası yan paneli — başlık + açıklama + düğmeler + diğer yazılar ---
   Müşteri (2026-09-17): kısa CTA kartı yerine uzun, gradyanlı, hafif hareketli
   panel. Üst blok koyu ve hareketli, alt blok kart zemininde yazı listesi. */
.yan-panel{
  background:var(--beyaz);border:1px solid var(--cizgi-ince);
  border-radius:var(--r);overflow:hidden;
}
.yan-panel__ust{
  position:relative;overflow:hidden;
  padding:var(--pad-kart-sm);color:#fff;
  /* Duraklar elle yazıldı: --koyu-gradyan tek boy olduğu için onunla hareket
     görünmez. Gradyan yüklenmezse background-color aynı koyu zemini verir. */
  background-color:#151e31;
  background-image:linear-gradient(160deg,
      #24314f 0%, #18213a 34%, #1b2742 68%, #101828 100%);
  background-size:100% 280%;
  background-position:0% 0%;
  animation:yanPanelAkis 18s var(--ease) infinite;
}
@keyframes yanPanelAkis{
  0%,100%{background-position:0% 0%}
  50%    {background-position:0% 100%}
}
@media (prefers-reduced-motion:reduce){
  .yan-panel__ust{animation:none;background-position:0% 50%}
}
/* İşaret hariç her şey işaretin üstünde. `>*` ile yazılsa işaret de akışa
   girip panelin tepesine biniyor (bkz. kariyer kartındaki aynı hata). */
.yan-panel__ust>*:not(.yan-panel__mark){position:relative;z-index:2}
.yan-panel__mark{
  position:absolute;right:-1.75rem;bottom:-2.5rem;width:10.5rem;
  color:#fff;opacity:.08;z-index:1;pointer-events:none;
}
.yan-panel__etiket{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-dim);
}
.yan-panel__baslik{font-size:1.15rem;font-weight:600;line-height:1.35;margin-top:.5rem;color:#fff}
.yan-panel__metin{font-size:.92rem;line-height:1.7;margin-top:.5rem;color:var(--on-dark-muted)}
.yan-panel__dugmeler{display:grid;gap:.55rem;margin-top:1.15rem}
.yan-panel__dugmeler .btn{width:100%}
/* Çizgili düğme koyu zeminde: beyaz kenar, hover'da hafif dolgu. */
.yan-panel .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.yan-panel .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.yan-panel__notlar{list-style:none;margin-top:.9rem;display:grid;gap:.4rem}
.yan-panel__notlar li{display:flex;gap:.5rem;align-items:center;font-size:.82rem;color:var(--on-dark-muted)}
.yan-panel__notlar svg{width:14px;height:14px;flex:none;color:#fff;opacity:.7}

.yan-panel__alt{padding:var(--pad-kart-sm)}
.yan-panel__alt-baslik{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);
}
.yan-panel__yazilar{display:grid;margin-top:.35rem}
.yan-panel__yazi{
  display:flex;gap:.75rem;align-items:center;justify-content:space-between;
  padding:.72rem 0;border-top:1px solid var(--cizgi-ince);
  color:var(--fg);text-decoration:none;
}
.yan-panel__yazi:first-child{border-top:0}
.yan-panel__yazi-ic{display:grid;gap:.15rem;min-width:0}
/* Kategori koyu kalır (müşteri, 2026-09-16): turuncu vurgu blog kutularından
   kaldırılmıştı, aynı kural burada da geçerli. */
.yan-panel__yazi-kat{font-size:.72rem;font-weight:600;color:var(--dim)}
.yan-panel__yazi-baslik{
  font-size:.92rem;font-weight:600;line-height:1.45;
  transition:color var(--t-micro) var(--ease);
}
.yan-panel__yazi-ok{
  width:14px;height:14px;flex:none;color:var(--dim);
  transition:transform 220ms var(--ease),color var(--t-micro) var(--ease);
}
.yan-panel__yazi:hover .yan-panel__yazi-baslik{color:var(--mavi)}
.yan-panel__yazi:hover .yan-panel__yazi-ok{color:var(--mavi);transform:translateX(3px)}
.yan-panel__tumu{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;
  font-size:.85rem;font-weight:600;color:var(--lacivert);text-decoration:none;
}
.yan-panel__tumu svg{width:14px;height:14px;transition:transform 200ms var(--ease)}
.yan-panel__tumu:hover svg{transform:translateX(3px)}
/* Panel uzun: yapışkan sütun ekranı aşarsa altı erişilemez kalmasın. */
@media (min-width:1025px){
  .icerik-blok--yapiskan .icerik-blok__yan:has(.yan-panel){
    max-height:calc(100dvh - 10.5rem);overflow-y:auto;scrollbar-width:thin;
  }
}

/* --- Yatay kaydırmalı kart rayı (carousel) --- */
/* Başlık bloğundan sonra geliyorsa nefes payı bırakılır. */
.karusel{position:relative}
.blog__ust+.karusel{margin-top:var(--bosluk-blok)}
.karusel__ray{
  display:flex;gap:1rem;
  /* SADECE yatay kaydırılır. overflow-y açık kalırsa ray dikey bir kaydırma
     kutusuna dönüşüp sayfanın tekerlek olayını yutuyor ve aşağı kaydırma
     karusele takılıyordu. */
  overflow-x:auto;overflow-y:hidden;
  /* Negatif margin + padding hilesi YOK: üstteki başlığa binip kartların
     tepesini taşma kutusuna sokuyordu. Kart gölgesi kalmadığı için gerekli de değil. */
  padding-block:4px;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
}
/* Karusel kartları reveal sisteminin DIŞINDA tutulur. İki nedeni var:
   1) translateY(18px) rayda dikey taşma yaratıp sayfa kaydırmasını hapsediyordu.
   2) Yatayda görünmeyen kart, ata taşmasıyla kırpıldığı için IntersectionObserver
      tarafından hiç "görünür" sayılmıyor; ok ile getirilene kadar saydam kalıyordu.
   Bölüm başlığı yine normal şekilde reveal olur. */
.karusel__ray .reveal{opacity:1;transform:none}
.karusel__ray::-webkit-scrollbar{width:0;height:0;display:none}
/* Geniş ekranda üç kart tam, dördüncüsü yarım görünür: kaydırılabilir olduğu
   ilk bakışta anlaşılır ve bir ok tıklaması tam bir kart yol alır. */
.karusel__ray>*{flex:0 0 clamp(17rem,30vw,26rem);scroll-snap-align:start}
.karusel__oklar{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem}
/* Ray sığıyorsa oklar hiç basılmaz — ölü kontrol gösterilmez */
.karusel.is-sabit .karusel__oklar{display:none}
.karusel__ok{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-daire);
  border:1px solid var(--cizgi-ince);color:var(--muted);background:var(--beyaz);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease),
             background-color var(--t-micro) var(--ease);
}
.karusel__ok svg{width:17px;height:17px}
.karusel__ok:hover{border-color:var(--cizgi-belirgin);color:var(--lacivert);background:var(--bg-2)}
.karusel__ok:disabled{opacity:.35;pointer-events:none}
.section--dark .karusel__ok{
  border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8);background:transparent}
.section--dark .karusel__ok:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
@media (max-width:640px){
  .karusel__ray>*{flex-basis:82vw}
  .karusel__oklar{justify-content:flex-start}
}

/* --- Üç sütunlu madde ızgarası (hizmet detaylarındaki maddeler) --- */
.one__grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.one__grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.one__grid--3{grid-template-columns:1fr}}

/* --- Ekip kartları — fotoğraf varsa portre, yoksa baş harf avatarı --- */
/* --- Ekibimiz: solda kariyer kartı + sağda ekip karuseli -----------------
   (müşteri, 2026-09-16) Kariyer kartı karuselin İÇİNDE ama rayın DIŞINDA:
   ızgarada rayla AYNI SATIRI paylaşır, böylece kişi kartlarıyla aynı hizada
   başlar ve `stretch` ile aynı yükseklikte biter. Oklar ikinci satırda durur,
   kart yüksekliğine eklenmez. Ekip büyüdüğünde kayan şey yalnız ray olur. */
.ekip-duzen{
  display:grid;
  /* Sol sütun genişletildi: 17rem → 21rem (müşteri, 2026-09-16). */
  grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:1rem;align-items:stretch;
}
/* Ray'in 4px dikey dolgusu var (kaydırma kutusu kartların tepesini kesmesin
   diye). Kariyer kartı aynı dolguyu alır ki üst hizası ve yüksekliği kişi
   kartlarıyla BİREBİR eşleşsin. */
.ekip-duzen>.ekip-duzen__yan{grid-column:1;grid-row:1;padding-block:4px}
.ekip-duzen>.karusel__ray{grid-column:2;grid-row:1;min-width:0}
.ekip-duzen>.karusel__oklar{grid-column:2;grid-row:2;margin-top:0}
/* Kart, esnetilen hücreyi doldurur → sağdaki kartlarla aynı yükseklik. */
.ekip-duzen__yan>.ekip__kisi{height:100%}
@media (max-width:1080px){
  .ekip-duzen{grid-template-columns:1fr}
  /* Dar ekranda önce ekip, sonra davet kartı; oklar en altta. */
  .ekip-duzen>.ekip-duzen__yan{grid-column:1;grid-row:2}
  .ekip-duzen>.karusel__ray{grid-column:1;grid-row:1}
  .ekip-duzen>.karusel__oklar{grid-column:1;grid-row:3}
}

.ekip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}   /* 3 kişi + kariyer kartı tek satır (2026-09-16) */
.ekip__kisi{
  display:flex;flex-direction:column;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:var(--pad-kart-sm);color:var(--fg);
  transition:border-color var(--t-card) var(--ease);
}
.ekip__kisi:hover{border-color:var(--cizgi-belirgin)}
.ekip__portre{
  display:block;overflow:hidden;border-radius:var(--r);
  background:var(--bg-3);aspect-ratio:4/5;
  display:grid;place-items:center;
}
.ekip__portre img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ekip__bas{
  width:64px;height:64px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--beyaz);color:var(--lacivert);font-size:1.15rem;font-weight:600;
}
.ekip__kisi h3{font-size:1.02rem;font-weight:600;margin-top:1.15rem}
.ekip__unvan{color:var(--mavi);font-size:.82rem;font-weight:600;margin-top:.25rem;line-height:1.4}
.ekip__kunye{color:var(--dim);font-size:.8rem;margin-top:.5rem;line-height:1.5}
.ekip__alan{color:var(--muted);font-size:.86rem;line-height:1.6;margin-top:.7rem;flex:1}
/* "Profili Görün" koyu lacivert (müşteri, 2026-09-17): kartta zaten turuncu
   bir satır (ünvan) var, ikinci turuncu vurgu fazla oluyordu. */
.ekip__ok{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-size:.83rem;font-weight:600;color:var(--lacivert);
}
.ekip__ok svg{width:14px;height:14px;transition:transform 220ms var(--ease)}
.ekip__kisi:hover .ekip__ok svg{transform:translateX(4px)}
@media (max-width:1080px){.ekip__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ekip__grid{grid-template-columns:1fr}}

/* Izgaradaki boş kart — fotoğraf yok, kariyer çağrısı */
/* Turuncu dolgu ve arkadaki şeffaf marka işareti GERİ ALINDI (müşteri,
   2026-09-17): kart eski sade hâline döndü — açık zemin, kesikli çerçeve.
   Genişlik 21rem'de bırakıldı; kişi kartlarıyla aynı ölçü olması istenmişti. */
.ekip__kisi--cta{
  justify-content:center;align-items:flex-start;
  background:var(--bg-2);border-style:dashed;border-color:var(--cizgi-belirgin);
  padding:var(--pad-kart);
}
/* Hover'da kenar çizgisi DEĞİŞMEZ (müşteri, 2026-09-16): kart bir bağlantı
   değil, içindeki düğme bağlantı. Taban kuralın hover'ını da nötrler. */
.ekip__kisi--cta:hover{border-color:var(--cizgi-belirgin)}
.ekip__cta-ico{
  width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--beyaz);color:var(--lacivert);
}
.ekip__cta-ico svg{width:23px;height:23px}
.ekip__kisi--cta h3{font-size:1.08rem;margin-top:1.35rem}
.ekip__kisi--cta p{color:var(--muted);font-size:.9rem;line-height:1.65;margin-top:.7rem}
.ekip__kisi--cta .btn{margin-top:1.5rem;align-self:flex-start}


/* Karusel içindeki ekip kartı: dört kart görünecek genişlik */
/* Ekip şeridi geniş ekranda tam üç kart (müşteri, 2026-09-16); tablette iki; telefonda eski ölçü */
.karusel--ekip .karusel__ray>*{flex:0 0 calc((100% - 2rem) / 3)}   /* üç kart görünür, dördüncüsü kaydırılır */
@media (max-width:1080px){.karusel--ekip .karusel__ray>*{flex-basis:calc((100% - 1rem) / 2)}}
@media (max-width:640px){.karusel--ekip .karusel__ray>*{flex-basis:clamp(15rem,23vw,21rem)}}

/* --- Vizyon & misyon --- */
.vm__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.vm{
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:var(--pad-kart);
}
.vm__ico{
  width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:rgba(255,123,0,.08);color:var(--mavi);
}
.vm__ico svg{width:22px;height:22px}
.vm h3{font-size:1.25rem;margin-top:1.35rem}
.vm p{color:var(--muted);font-size:.98rem;line-height:1.75;margin-top:.8rem}
@media (max-width:860px){.vm__grid{grid-template-columns:1fr}}

/* --- Ekip detay sayfası --- */
.ekip-detay{display:grid;grid-template-columns:22rem 1fr;gap:3.5rem;align-items:start}
.ekip-detay__sol{display:grid;gap:1rem;position:sticky;top:8.5rem}
.ekip-detay__sag{min-width:0}
.ekip-detay__portre{
  border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  aspect-ratio:4/5;display:grid;place-items:center;
}
.ekip-detay__portre img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ekip-detay__bas{
  width:96px;height:96px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--beyaz);color:var(--lacivert);font-size:1.6rem;font-weight:600;
}
/* Künye kartı — tanım listesi */
.ekip-detay__kunye-liste{display:grid;gap:1.1rem;margin-top:1.1rem}
.ekip-detay__kunye-liste dt{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);
}
.ekip-detay__kunye-liste dd{
  color:var(--fg);font-size:.92rem;line-height:1.55;margin-top:.3rem;font-weight:500;
}
.ekip-detay__altbaslik{font-size:1.15rem;font-weight:600;color:var(--lacivert);margin-top:2.5rem}
.ekip-detay__gorevler{display:grid;gap:.85rem;margin-top:1.1rem}
.ekip-detay__gorevler li{
  display:flex;gap:.75rem;align-items:flex-start;
  color:var(--muted);font-size:.97rem;line-height:1.65;
}
.ekip-detay__gorevler .ok{
  flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--bg-3);color:var(--mavi);margin-top:.2rem;
}
.ekip-detay__gorevler .ok svg{width:12px;height:12px;stroke-width:2.6}
/* İş ortağı detayı — ekip detayıyla aynı iskelet; portre yerine logo kutusu (2026-09-16) */
.ortak-detay__logo{
  aspect-ratio:4/3;display:grid;place-items:center;padding:2rem;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
}
.ortak-detay__logo img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}
.ortak-detay__ad{font-size:1.35rem;font-weight:600;line-height:1.35;color:var(--lacivert);text-align:center}
[data-tema="koyu"] .ortak-detay__logo{background:#fff;border-color:transparent}
.ekip-detay__kunye-liste dd a{color:var(--mavi);overflow-wrap:anywhere}
.ekip-detay__kunye-liste dd a:hover{text-decoration:underline}
.ortak-detay__bos{padding:var(--pad-kart);background:var(--bg-2);border:1px solid var(--cizgi-ince);border-radius:var(--r)}
.ortak-detay__bos p{margin:0;font-size:1.02rem;line-height:1.7;color:var(--fg)}
.ortak-detay__btn{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.blog__ust + .ortak__grid{margin-top:2.25rem}   /* ortak sayfasındaki "Diğer İş Ortaklarımız" şeridi */
.ekip-detay__etiketler{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.ekip-detay__etiket{
  padding:.4rem .85rem;border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--cizgi-ince);
  font-size:.82rem;font-weight:500;color:var(--muted);
}
@media (max-width:900px){
  .ekip-detay{grid-template-columns:1fr;gap:2.25rem}
  .ortak-detay__logo{aspect-ratio:auto;min-height:12rem}
  .ekip-detay__sol{position:static}
}

/* --- Dosya seçme alanı (kariyer CV) --- */
.field--dosya input[type="file"]{padding:.65rem 1rem;font-size:.88rem;color:var(--dim);background:var(--bg-2)}
.field--dosya input[type="file"]::file-selector-button{
  border:1px solid var(--cizgi-ince);background:transparent;color:var(--fg);
  border-radius:var(--r-pill);padding:.42rem .95rem;font:inherit;font-size:.82rem;
  margin-right:.85rem;cursor:pointer;
  transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.field--dosya input[type="file"]::file-selector-button:hover{background:var(--bg-3);border-color:var(--cizgi-belirgin)}
.field__not{color:var(--dim);font-size:.78rem;margin-top:.4rem;line-height:1.5}

/* --- Koyu bölümde ikincil buton (hero/phero dışındaki koyu section'lar) --- */
.section--dark .btn--ghost,.section--dark .btn--cizgi{border-color:rgba(255,255,255,.28);color:#fff}
.section--dark .btn--ghost:hover,.section--dark .btn--cizgi:hover{
  border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

/* ==========================================================================
   Referans şeridi — beyaz kutular, gri logolar, hover'da kendi rengi
   ========================================================================== */
.referans__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;
}
.referans__kutu{
  display:grid;place-items:center;min-height:7.25rem;padding:var(--pad-kart-sm);
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:border-color var(--t-card) var(--ease),box-shadow var(--t-card) var(--ease);
}
.referans__kutu img{
  max-width:100%;max-height:2.5rem;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.45;
  transition:filter var(--t-card) var(--ease),opacity var(--t-card) var(--ease);
}
.referans__kutu:hover{border-color:var(--cizgi-belirgin);box-shadow:0 6px 16px -14px rgba(18,26,43,.3)}
/* Kesintisiz akış için JS'in eklediği kopyalar yalnız mobil şeritte anlamlı.
   Masaüstüne dönüldüğünde DOM'da kaldıkları için ızgarada ikinci satır oluyorlardı. */
.referans__kutu--kopya{display:none}
.referans__kutu:hover img{filter:none;opacity:1}

@media (max-width:1080px){.referans__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
/* Mobilde tek sıra kaydırmalı şerit: parmakla kayar, JS boşta otomatik akıtır (main.js: referansKaydir) */
@media (max-width:900px){
  .referans__grid{
    display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:.25rem var(--gutter);margin-inline:calc(var(--gutter) * -1);
  }
  .referans__grid::-webkit-scrollbar{display:none}
  .referans__kutu{flex:0 0 42%;min-height:5.5rem}
  .referans__kutu--kopya{display:grid}
  .referans__kutu img{filter:none;opacity:.85}
}
@media (max-width:420px){.referans__kutu{flex-basis:46%}}

/* ==========================================================================
   Sayısal güven şeridi — yatay konteynır
   ========================================================================== */
.section--dar{padding-block:0 var(--sec-y)}
.sayilar{
  display:grid;grid-template-columns:1fr 1.25fr;gap:3.5rem;align-items:center;
  background:var(--bg-2);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:2.75rem 3rem;
}
.sayilar__sol h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2}
.sayilar__sol h2 em{font-style:normal;color:inherit}
.sayilar__sol p{color:var(--muted);font-size:.98rem;margin-top:.9rem;max-width:42ch}
.sayilar__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}

.sayilar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.sayi{padding:0 1.5rem;border-left:1px solid var(--line)}
.sayi:first-child{padding-left:0;border-left:0}
.sayi:last-child{padding-right:0}
.sayi__deger{
  font-size:clamp(2.1rem,3.4vw,2.9rem);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--lacivert);
}
.sayi__bos{color:var(--dim);font-weight:500}
.sayi__etiket{color:var(--muted);font-size:.86rem;line-height:1.45;margin-top:.7rem}

@media (max-width:1080px){
  .sayilar{grid-template-columns:1fr;gap:2.5rem;padding:var(--pad-kart)}
}
/* Mobil 2x2: dikey çizgi iki sütunun tam ortasında ve kesintisiz, satırlar arasında yatay çizgi
   (müşteri, 2026-09-15). Satır boşluğu hücre dolgusuna taşındı; gap çizgiyi bölüyordu. */
@media (max-width:640px){
  .sayilar__grid{grid-template-columns:1fr 1fr;gap:0}
  .sayi{padding:1.4rem 0 1.4rem 1.25rem}
  .sayi:nth-child(odd){padding:1.4rem 1.25rem 1.4rem 0;border-left:0}
  .sayi:nth-child(-n+2){padding-top:0}
  .sayi:nth-child(n+3){border-top:1px solid var(--line)}
  .sayi:nth-last-child(-n+2){padding-bottom:0}
}

/* ==========================================================================
   Blog — dört kart
   ========================================================================== */
.blog__ust{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.blog__ust-cta{flex:none}
.blog__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.blog__grid--3{grid-template-columns:repeat(3,1fr)}
.blog .blog__ust+.blog__grid{margin-top:var(--bosluk-blok)}
.yazi{
  display:flex;flex-direction:column;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  overflow:hidden;color:var(--fg);
  transition:border-color var(--t-card) var(--ease),box-shadow var(--t-card) var(--ease);
}
.yazi:hover{border-color:var(--cizgi-belirgin);box-shadow:0 7px 18px -16px rgba(18,26,43,.3)}
.yazi__gorsel{display:block;overflow:hidden;background:var(--bg-3)}
.yazi__gorsel img{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform 900ms var(--ease);
}
.yazi:hover .yazi__gorsel img{transform:scale(1.05)}
.yazi__meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:var(--pad-kart-sm) var(--pad-kart-sm) 0;font-size:.79rem;font-weight:500;
  letter-spacing:.01em;text-transform:lowercase;color:var(--dim);
}
/* Kategori: baş harfleri büyük ve KOYU (müşteri, 2026-09-16).
   Tarih küçük harfte kalır — o bir etiket değil, zaman bilgisi. */
/* `capitalize` "ve"yi de büyütüyordu (Bordro Ve SGK). Kategori panelde doğru
   yazımıyla duruyor — meta şeridindeki lowercase dönüşümü burada iptal edilir,
   metin olduğu gibi basılır. */
.yazi__kat{color:var(--fg);text-transform:none;font-weight:600}
.yazi__meta time::before{content:"·";margin-right:.6rem}
.yazi h3{font-size:1.02rem;line-height:1.4;margin:.7rem var(--pad-kart-sm) 0;flex:1}
.yazi__ok{
  display:inline-flex;align-items:center;gap:.45rem;
  margin:1.25rem var(--pad-kart-sm) var(--pad-kart-sm);font-size:.87rem;font-weight:600;color:var(--mavi);
}
.yazi__ok svg{width:15px;height:15px;transition:transform 220ms var(--ease)}
.yazi:hover .yazi__ok svg{transform:translateX(4px)}

@media (max-width:1080px){.blog__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.blog__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Form
   ========================================================================== */
.form{background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);padding:var(--pad-kart)}
.form__head h2.form__baslik{font-size:1.3rem}
.form__head p{color:var(--dim);font-size:.87rem;margin-top:.35rem}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem}
.field{display:block}
.field--full{grid-column:1/-1}
.field__lbl{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.4rem;
}
.field input,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;font-size:.93rem;
  transition:border-color var(--t-micro) var(--ease),background-color var(--t-micro) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--mavi);background:var(--beyaz)}
.field textarea{resize:vertical;min-height:96px}
.onay{display:flex;gap:.65rem;align-items:flex-start;margin-top:1.1rem;color:var(--dim);font-size:.79rem;line-height:1.55}
.onay input{width:17px;height:17px;flex:none;margin-top:.2rem;accent-color:var(--mavi)}
.onay a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.onay a:hover{color:var(--mavi)}
.form .btn{margin-top:1.1rem}
/* Gönder butonu tam genişlik değil: içeriğe göre daralır, sola yaslanır. */
.form__gonder{align-self:flex-start;margin-top:1.5rem}
.form{display:flex;flex-direction:column;align-items:flex-start}
.form>*:not(.form__gonder){width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__not{margin-top:1.1rem;padding:.9rem 1.05rem;border-radius:var(--r);font-size:.87rem;line-height:1.5;border:1px solid var(--line)}
.form__not--ok{background:var(--bg-2);border-color:var(--lacivert);color:var(--lacivert)}
.form__not--hata{background:var(--bg-2);border-color:var(--cizgi-belirgin);color:var(--fg)}
/* Gönderim başarılı bildirimi — gönder butonunun altında, yeşil ve belirgin */
/* Sunucu doğrulamasında takılan alanlar — hangisini düzelteceği görünsün */
.alan-hatali{border-color:#B42318!important;background:#FFF7F7!important}
.alan-hatali:focus{outline-color:#B42318}
.onay--hatali span{color:#B42318}
.onay--hatali input[type=checkbox]{outline:2px solid #B42318;outline-offset:2px;border-radius:3px}

.form__basari{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-top:1.15rem;padding:1rem 1.15rem;
  border:1px solid #12A150;border-left-width:4px;border-radius:var(--r);
  background:#E8F8EE;color:#0B6B36;font-size:.92rem;line-height:1.55;
  animation:basariBelir 420ms var(--ease) both;
}
.form__basari strong{color:#0A5C2E}
.form__basari-ikon{
  flex:none;width:1.6rem;height:1.6rem;margin-top:.05rem;
  display:grid;place-items:center;border-radius:var(--r-daire);
  background:#12A150;color:#fff;
}
.form__basari-ikon svg{width:14px;height:14px;stroke-width:3}
.form__basari:focus{outline:none}
@keyframes basariBelir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.form__basari{animation:none}}

/* Rozetli butonların oku: hover'da sağdan çıkar, görünmezken sola geçer, yavaşlayarak
   yerine oturur. Tek tur oynar. Daire overflow:hidden olduğu için ok dışına taşmaz.
   İstisnalar aşağıda: WhatsApp ve telefon rozetleri ok değil, yerinde durur. */
.btn--rozetli .btn__rozet{overflow:hidden}
.btn--rozetli:hover .btn__rozet svg{animation:okKay 1000ms both;transform:none}
@keyframes okKay{
  /* çıkış: hızlanarak sağa */
  0%   {transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.55,0,.85,.25)}
  42%  {transform:translateX(230%);opacity:0}
  /* görünmezken sola ışınlanır */
  50%  {transform:translateX(-230%);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  /* dönüş: yavaşlayarak merkeze oturur */
  100% {transform:translateX(0);opacity:1}
}
@media (prefers-reduced-motion:reduce){.btn--rozetli:hover .btn__rozet svg{animation:none}}

.form--koyu{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.form--koyu .form__head p{color:var(--on-dark-muted)}
.form--koyu .field__lbl{color:var(--on-dark-dim)}
.form--koyu .field input,.form--koyu .field textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;
}
.form--koyu .field input::placeholder,.form--koyu .field textarea::placeholder{color:var(--on-dark-dim)}
.form--koyu .field input:focus,.form--koyu .field textarea:focus{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
.form--koyu .onay{color:var(--on-dark-dim)}
.form--koyu .onay a{color:var(--on-dark-muted)}
.form--koyu .onay a:hover{color:#fff}
.form--koyu .onay input{accent-color:#fff}
.form--koyu .form__not--ok{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.form--koyu .form__not--hata{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}

@media (max-width:560px){.form{padding:1.6rem}.form__grid{grid-template-columns:1fr}}

/* ==========================================================================
   SSS
   ========================================================================== */
/* Sol başlık + sağ kutu */
.sss-blok{display:grid;grid-template-columns:1fr 1.35fr;gap:4.5rem;align-items:start}
.sss-blok__sol{position:sticky;top:8.5rem}
.sss-blok__sol .btn{margin-top:2rem}
.sss-blok__sag{display:grid;gap:.75rem}
@media (max-width:980px){
  .sss-blok{grid-template-columns:1fr;gap:1.75rem}
  .sss-blok__sol{position:static}
  .sss-blok__sag{padding:0}   /* kutular başlıkla aynı sol hizada başlar (müşteri, 2026-09-09) */
}

.sss{display:grid;gap:.75rem}
.sss--2{grid-template-columns:1fr 1fr;gap:.75rem}
.sss__i{
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  transition:background-color var(--t-micro) var(--ease);
}
/* Açık soru da beyaz kalır; ayrım kenarlıkla kuruluyor */
.sss__i[open]{background:var(--beyaz);border-color:var(--cizgi-belirgin)}
.sss__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.25rem var(--pad-kart-sm);cursor:pointer;list-style:none;
  font-weight:500;font-size:.98rem;line-height:1.45;
  transition:color var(--t-micro) var(--ease);
}
.sss__i summary::-webkit-details-marker{display:none}
.sss__i summary:hover{color:var(--mavi)}
.sss__ico{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--dim)}
.sss__ico svg{width:16px;height:16px}
.sss__ico .sss__eksi{display:none}
.sss__i[open] .sss__ico{color:var(--lacivert)}
.sss__i[open] .sss__arti{display:none}
.sss__i[open] .sss__eksi{display:block}
.sss__c{padding:0 var(--pad-kart-sm) 1.4rem;max-width:64ch}
.sss__c p{color:var(--muted);font-size:.93rem;line-height:1.7}

/* ==========================================================================
   İletişim — solda bilgiler, sağda harita
   ========================================================================== */
.iletisim__in{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:center}
.iletisim__liste{display:grid;gap:1.4rem}
.iletisim__liste li{display:flex;gap:1rem;align-items:flex-start}
.iletisim__ico{
  flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--bg-2);color:var(--mavi);
}
.iletisim__ico svg{width:19px;height:19px}
.iletisim__txt{line-height:1.45;padding-top:.15rem}
.iletisim__txt>span{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);
}
.iletisim__txt strong,.iletisim__txt a{
  display:block;font-size:.98rem;font-weight:500;color:var(--lacivert);margin-top:.25rem;
}
.iletisim__txt a{transition:color var(--t-micro) var(--ease)}
.iletisim__txt a:hover{color:var(--mavi)}
.iletisim__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.5rem}
.iletisim__form-cta{margin-top:2rem}

.iletisim__harita{
  border:1px solid var(--cizgi-ince);border-radius:var(--r);
  overflow:hidden;background:var(--bg-2);
}
.iletisim__harita iframe{display:block;width:100%;height:clamp(22rem,38vw,30rem);border:0}

@media (max-width:980px){
  .iletisim__in{grid-template-columns:1fr;gap:2.75rem}
  .iletisim__harita iframe{height:20rem}
}

/* ==========================================================================
   Footer üstü iletişim bannerı — tam genişlik, koyu
   ========================================================================== */
.banner{position:relative;overflow:hidden;background:var(--koyu-gradyan);color:#fff;padding-block:3.25rem}
/* Mobilde kapanış bandı gizli (müşteri kararı, 2026-09-09): WhatsApp butonu ve menüdeki telefon zaten erişilebilir */
@media (max-width:640px){.banner{display:none}}
.mai-mark--banner{right:-3rem;top:-4rem;width:24rem;opacity:.05}
.banner__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.banner__sol h2{color:#fff;font-size:clamp(1.5rem,2.2vw,2.05rem);font-weight:500;text-align:left}
.banner__sol h2 em{font-style:normal;color:inherit;font-weight:600}
.banner__sol p{color:var(--on-dark-muted);margin-top:.65rem;font-size:.98rem;max-width:48ch}
.banner__sag{display:flex;gap:.7rem;flex-wrap:wrap}
/* Banner butonları — genel .btn diliyle aynı: pil form, dolu olanda uçta
   ters renkli dairesel rozet. Rozetin içindeki ikon marka ikonu (WhatsApp). */
.banner__btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.66rem 1.2rem;border-radius:var(--r-pill);
  font-weight:500;font-size:.875rem;
  transition:background-color var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease);
}
.banner__btn>svg{width:16px;height:16px;flex:none}
/* Dolgu SABİT beyaz: banner her iki temada da koyu lacivert. --beyaz kullanılırsa
   koyu temada token koyulaşıyor ve buton zeminde kayboluyordu (müşteri, 2026-09-15). */
.banner__btn--wp{
  background:#fff;color:var(--lacivert);
  justify-content:flex-start;gap:.7rem;padding:.26rem .26rem .26rem 1.25rem;
}
.banner__btn--wp:hover{background:rgba(255,255,255,.88)}
.banner__btn--wp .btn__rozet{background:var(--koyu-gradyan);color:#fff}
.banner__btn--wp .btn__rozet svg{width:15px;height:15px}
/* Ok olmayan rozet ikonları (WhatsApp, telefon) hover'da yerinde durur — kayma da yok */
.banner__btn--wp:hover .btn__rozet svg,
.drawer__foot .btn:hover .btn__rozet svg{transform:none;animation:none}
.banner__btn--tel{border:1px solid rgba(255,255,255,.22);color:#fff}
.banner__btn--tel:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
@media (max-width:860px){
  .banner{padding-block:2.5rem}
  .banner__in{flex-direction:column;align-items:flex-start;gap:1.75rem}
  .banner__sag{width:100%}
  .banner__btn{flex:1 1 100%;justify-content:center}
}

/* ==========================================================================
   Footer — tam genişlik, koyu
   ========================================================================== */
.site-foot{position:relative;overflow:hidden;background:var(--koyu-gradyan);color:var(--on-dark);border-top:1px solid rgba(255,255,255,.08)}
.site-foot__in{position:relative;z-index:2;display:grid;grid-template-columns:22rem 1fr;gap:4rem;padding-block:3.5rem 3rem}
.site-foot__logo{display:block;color:#fff}
.site-foot__logo svg{height:56px;width:auto}
.site-foot__marka>p{color:var(--on-dark-muted);font-size:.92rem;margin-top:1.35rem;max-width:38ch}
.site-foot__ile{margin-top:1.6rem;display:grid;gap:.7rem}
.site-foot__ile li{display:flex;align-items:flex-start;gap:.7rem;color:var(--on-dark-muted);font-size:.9rem}
.site-foot__ile svg{width:16px;height:16px;flex:none;margin-top:.28rem;color:rgba(255,255,255,.42)}
.site-foot__ile a{transition:color var(--t-micro) var(--ease)}
.site-foot__ile a:hover{color:#fff}

.site-foot__kolonlar{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.site-foot h3{
  font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark-dim);margin-bottom:1.1rem;
}
.site-foot__kol a{color:var(--on-dark-muted);font-size:.91rem;transition:color var(--t-micro) var(--ease)}
.site-foot__kol a:hover{color:#fff}
.site-foot__kol li{padding:.32rem 0}

/* Mobilde dokunma hedefleri: footer ve breadcrumb linkleri 18-23px yükseklikteydi,
   WCAG 2.5.8'in istediği 24px'in altında kalıyordu (müşteri mobil kontrolü, 2026-09-14).
   Tıklanabilir alan blok yapılıp dikey dolgu veriliyor; görünüm değişmiyor. */
@media (max-width:900px){
  .site-foot__kol li{padding:0}
  .site-foot__kol a{display:block;padding:.5rem 0;min-height:2.25rem;line-height:1.35}
  .site-foot__ile a{display:inline-block;padding:.3rem 0;min-height:1.9rem}
  .crumb a{display:inline-block;padding:.28rem 0;min-height:1.75rem}
  /* İletişim bölümündeki telefon/e-posta bağlantıları (ana sayfa + iletişim) */
  .iletisim__txt a{display:inline-block;padding:.28rem 0;min-height:1.8rem}
  /* iOS Safari, yazı boyutu 16px'in altındaki alana odaklanınca sayfayı
     otomatik yakınlaştırıyor. Form alanları 14.88px'ti (müşteri mobil kontrolü). */
  .field input,.field textarea,.field select,.form input,.form textarea,.form select{font-size:16px}
  .field--dosya input[type="file"]{font-size:16px}
  /* "İlanı oku" 23.8px'ti; 24px eşiğinin hemen altında kalıyordu */
  .ilan__baglanti{display:inline-block;padding:.3rem 0;min-height:1.85rem}
}

.site-foot__alt{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
  padding-block:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  color:var(--on-dark-dim);font-size:.82rem;
}
/* "Tasarım" yazısı kaldırıldı, kutuda yalnız logo kalır (müşteri, 2026-09-15).
   Yazı gidince kutu basık görünüyordu: dolgu dengelendi, logo bir tik büyüdü. */
.sd-imza{
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:.5rem 1rem;color:var(--on-dark-dim);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.sd-imza img{height:22px;width:auto;opacity:.85;transition:opacity var(--t-micro) var(--ease)}
.sd-imza:hover{border-color:rgba(255,255,255,.32);color:#fff}
.sd-imza:hover img{opacity:1}

@media (max-width:1000px){
  .site-foot__in{grid-template-columns:1fr;gap:2.75rem;padding-block:2.75rem 2.25rem}
  .site-foot__kolonlar{grid-template-columns:repeat(2,1fr);gap:2rem}
}
@media (max-width:560px){.site-foot__kolonlar{grid-template-columns:1fr}}

/* ==========================================================================
   Sağ kenara yaslı sabit talep butonu
   Dikey yazı; WhatsApp butonuyla çakışmaması için dikeyde ortalanır.
   ========================================================================== */
.yan-cta{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:94;
  display:inline-flex;align-items:center;gap:.55rem;
  writing-mode:vertical-rl;
  padding:1.15rem .7rem;
  border-radius:var(--r) 0 0 var(--r);
  color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;
  box-shadow:0 10px 30px -16px rgba(18,26,43,.6);
  /* Marka turuncusu gradyanı (müşteri, 2026-09-14). Hareket aynı: arka plan
     boyutu genişletilip konumu animasyonla kaydırılıyor, hız değişmedi (9s). */
  background-image:linear-gradient(160deg,
      var(--turuncu) 0%, var(--turuncu-koyu) 35%, var(--turuncu) 65%, var(--turuncu-koyu) 100%);
  background-size:100% 320%;
  background-position:0% 0%;
  animation:yanCtaAkis 9s var(--ease) infinite;
  transition:padding var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
@keyframes yanCtaAkis{
  0%,100%{background-position:0% 0%}
  50%    {background-position:0% 100%}
}
.yan-cta:hover{padding-right:1rem;box-shadow:0 14px 34px -14px rgba(255,123,0,.7);animation-duration:4.5s}
.yan-cta__ok{width:14px;height:14px;flex:none;transform:rotate(90deg);transition:transform 260ms var(--ease)}
.yan-cta:hover .yan-cta__ok{transform:rotate(90deg) translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .yan-cta{animation:none;background-position:0% 50%}
}
/* Şerit sağ kenarda sabit; iç sayfa başlığı/lede'i altına girmesin diye sağdan pay */
@media (max-width:900px){
  .phero__in{padding-right:2.5rem}
}
@media (max-width:900px){
  /* Mobilde de sağ kenara yapışık dikey sekme (referans: "ÜCRETSİZ DENEME" şeridi):
     ekranın dikey ortasında durur, WhatsApp butonu altta kaldığı için çakışmaz. */
  .yan-cta{
    padding:1rem .55rem;gap:.5rem;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    border-radius:10px 0 0 10px;
  }
  .yan-cta__ok{width:12px;height:12px}
}

/* ==========================================================================
   Sabit WhatsApp butonu — sağ altta, tek işlevli
   ========================================================================== */
.wa-fab{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:95;
  width:58px;height:58px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--whatsapp);color:#fff;
  box-shadow:0 10px 28px -12px rgba(37,211,102,.65);
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),bottom 220ms var(--ease);
}
/* Yukarı çık görününce WhatsApp onun üstüne kayar; sayfa başında köşede kalır */
body:has(.yukari.is-gorunur) .wa-fab{bottom:calc(1.5rem + 58px + .75rem)}
.wa-fab:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(37,211,102,.75)}
.wa-fab svg{width:30px;height:30px}
@media (max-width:560px){
  .wa-fab{right:1rem;bottom:1rem;width:54px;height:54px}
  body:has(.yukari.is-gorunur) .wa-fab{bottom:calc(1rem + 54px + .65rem)}
  .wa-fab svg{width:28px;height:28px}
}

/* ==========================================================================
   Müşteri yorumları
   ========================================================================== */
.yorum{background:var(--bg-2)}
.yorum__in{display:grid;grid-template-columns:22rem 1fr;gap:3.5rem;align-items:center}
.yorum__google{display:inline-flex;align-items:center;gap:.7rem;font-size:.92rem;font-weight:500;color:var(--muted)}
.yorum__puan{display:flex;align-items:center;gap:.75rem;margin-top:1.4rem}
.yorum__puan strong{font-size:2.4rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.yorum__adet{color:var(--dim);font-size:.87rem;margin-top:.35rem}
.yorum__bekliyor{color:var(--dim);font-size:.87rem;margin-top:1.1rem;line-height:1.6;max-width:30ch}
.yorum__yildiz{display:inline-flex;gap:.15rem;color:var(--yildiz)}
.yorum__yildiz svg{width:16px;height:16px}
.yorum__sol h2{margin-top:1.6rem;font-size:clamp(1.6rem,2.4vw,2.2rem)}
.yorum__sol h2 em{font-style:normal;color:inherit}
.yorum__ozet{color:var(--muted);font-size:.98rem;margin-top:.75rem}
.yorum__sol .btn{margin-top:1.75rem}
.yorum__oklar{display:flex;gap:.5rem;margin-top:2rem}
.yorum__ok{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-daire);
  border:1px solid var(--cizgi-ince);color:var(--muted);background:var(--beyaz);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.yorum__ok svg{width:16px;height:16px}
.yorum__ok:hover{color:var(--lacivert);background:var(--bg-2)}
.yorum__ok[disabled]{opacity:.4;pointer-events:none}

.yorum__sag{overflow:hidden}
.yorum__ray{
  display:flex;gap:1rem;
  /* Kart geçişleri yavaşlatıldı (müşteri, 2026-09-17): 520ms → 780ms. */
  transition:transform 780ms var(--ease);
}
.yorum__kart{
  flex:0 0 calc((100% - 1rem) / 2);
  display:flex;flex-direction:column;
  background:var(--beyaz);border:1px solid var(--cizgi-ince);border-radius:var(--r);
  padding:var(--pad-kart-sm);
}
.yorum__metin{color:var(--muted);font-size:.92rem;line-height:1.7;margin-top:1rem;flex:1}
.yorum__kisi{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--cizgi-ince)}
.yorum__bas{
  flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-daire);
  background:var(--bg-3);color:var(--lacivert);font-size:.82rem;font-weight:600;
}
.yorum__kimlik strong{display:block;font-size:.9rem;font-weight:600;line-height:1.3}
.yorum__kimlik span{display:block;color:var(--dim);font-size:.79rem;margin-top:.1rem}

@media (max-width:1180px){.yorum__kart{flex-basis:calc((100% - 1rem) / 2)}}
@media (max-width:900px){
  .yorum__in{grid-template-columns:1fr;gap:2.25rem}
  .yorum__oklar{margin-top:1.5rem}
}
@media (max-width:560px){.yorum__kart{flex-basis:100%}}

/* ==========================================================================
   Panelden yönetilen içerik — zengin metin, duyuru bandı, sosyal bağlantılar
   `.rich-text` sınıfı panel editörüyle ORTAKTIR (panel/varliklar/panel.css):
   müşterinin panelde gördüğü ile sitede gördüğü aynı olsun diye.
   ========================================================================== */
.rich-text h2{font-size:1.55rem;margin:2rem 0 .7rem;font-weight:600;letter-spacing:-.02em}
.rich-text h3{font-size:1.2rem;margin:1.5rem 0 .5rem;font-weight:600}
.rich-text h4{font-size:1.02rem;margin:1.15rem 0 .4rem;font-weight:600}
.rich-text p{margin:0 0 1.05rem}
.rich-text ul{list-style:disc;padding-left:1.4rem;margin:0 0 1.05rem}
.rich-text ol{list-style:decimal;padding-left:1.6rem;margin:0 0 1.05rem}
.rich-text li{margin-bottom:.35rem}
.rich-text blockquote{border-left:3px solid var(--turkuaz);padding-left:1.15rem;margin:0 0 1.05rem;color:var(--muted)}
.rich-text a{color:var(--mavi);text-decoration:underline;text-underline-offset:2px}
.rich-text a:hover{text-decoration-thickness:2px}
/* `object-fit:cover` kalktı (müşteri, 2026-09-17): yazı içindeki görseller
   kendi oranında, kırpılmadan görünür. */
.rich-text img{max-width:100%;height:auto;border-radius:var(--r);margin:1rem 0}

/* --- Kısa kod blokları (müşteri, 2026-09-17) ---------------------------------
   Panelde "Kısa kod" listesinden eklenen hazır bloklar. Sunucudaki süzgeç
   yalnız bu sınıfları geçirir (admin/inc/temizle.php); yeni bir sınıf
   eklenecekse oraya da yazılmalı. Aynı kurallar panel.css'te de var: müşteri
   panelde ne görüyorsa sitede onu görür. */
.rich-text .rt-kutu{
  background:var(--bg-2);border:1px solid var(--cizgi-ince);
  border-left:3px solid var(--lacivert);
  border-radius:var(--r-sm);padding:1rem 1.15rem;margin:1.25rem 0;
}
.rich-text .rt-kutu>*:last-child{margin-bottom:0}
.rich-text .rt-kutu--uyari{border-left-color:var(--turuncu);background:rgba(255,123,0,.06)}
.rich-text .rt-onay{list-style:none;padding-left:0;margin:1rem 0}
.rich-text .rt-onay li{position:relative;padding-left:1.7rem;margin-bottom:.5rem}
.rich-text .rt-onay li::before{
  content:"";position:absolute;left:0;top:.45em;width:1rem;height:1rem;
  background:var(--lacivert);border-radius:var(--r-daire);
  /* Onay işareti maske ile: ayrı bir SVG dosyası yüklemeden ikon verir. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/.7rem no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 6'/%3E%3C/svg%3E") center/.7rem no-repeat,
       linear-gradient(#000,#000);
  mask-composite:exclude;
}
.rich-text a.rt-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--turuncu);color:#fff;text-decoration:none;
  padding:.66rem 1.2rem;border-radius:var(--r-pill);font-weight:500;font-size:.875rem;
  transition:background-color var(--t-micro) var(--ease);
}
/* --turuncu-koyu artık --turuncu ile aynı değer; hover tonu elle yazılır. */
.rich-text a.rt-btn:hover{background:#e86f00;text-decoration:none}
.rich-text .rt-sss{
  border:1px solid var(--cizgi-ince);border-radius:var(--r-sm);
  padding:.85rem 1.1rem;margin:.75rem 0;background:var(--beyaz);
}
.rich-text .rt-sss>summary{cursor:pointer;font-weight:600;list-style:none}
.rich-text .rt-sss>summary::-webkit-details-marker{display:none}
.rich-text .rt-sss>summary::after{content:"+";float:right;color:var(--dim);font-weight:400}
.rich-text .rt-sss[open]>summary::after{content:"–"}
.rich-text .rt-sss>*:not(summary){margin-top:.6rem}
.rich-text .rt-sss>*:last-child{margin-bottom:0}
.rich-text .rt-ikili{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0}
.rich-text .rt-ikili>div>*:last-child{margin-bottom:0}
@media (max-width:640px){.rich-text .rt-ikili{grid-template-columns:1fr}}
.rich-text table{width:100%;border-collapse:collapse;margin:0 0 1.05rem;font-size:.95em}
.rich-text th,.rich-text td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}
.rich-text th{background:var(--bg-2);font-weight:600}
.rich-text hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.rich-text .metin-orta{text-align:center}
.rich-text .metin-sag{text-align:right}
.rich-text iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);margin:1rem 0}
.rich-text > *:last-child{margin-bottom:0}

/* Duyuru bandı — panelden tarih aralığıyla yönetilir */
.duyuru-bant{background:var(--gradyan-yatay);color:var(--on-dark);font-size:.9rem}
.duyuru-bant__in{display:flex;align-items:center;justify-content:center;gap:1rem;
  flex-wrap:wrap;padding:.6rem 0;text-align:center}
.duyuru-bant strong{font-weight:600}
.duyuru-bant__btn{border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pill);
  padding:.25rem .9rem;font-size:.83rem;white-space:nowrap;
  transition:background-color var(--t-micro) var(--ease)}
.duyuru-bant__btn:hover{background:rgba(255,255,255,.14)}

/* Footer sosyal bağlantıları */
.site-foot__sosyal{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.site-foot__sosyal a{display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  padding:.28rem .8rem;font-size:.82rem;color:var(--on-dark-muted);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.site-foot__sosyal a:hover{border-color:var(--turkuaz);color:var(--on-dark)}
.site-foot__sosyal svg{width:14px;height:14px}

/* Açık pozisyonlar — panelden yönetilen iş ilanları */
.ilan-liste{display:grid;gap:1rem}
.ilan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad-kart-sm);
  transition:border-color var(--t-card) var(--ease)}
.ilan:hover{border-color:var(--line-strong)}
.ilan--acik{border-color:var(--mavi)}
.ilan__ust{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ilan__ust h3{font-size:1.15rem}
.ilan__etiketler{display:flex;gap:.85rem;flex-wrap:wrap;font-size:.83rem;color:var(--muted)}
.ilan__etiketler li{display:inline-flex;align-items:center;gap:.3rem}
.ilan__etiketler svg{width:14px;height:14px}
.ilan__ozet{margin-top:.6rem;color:var(--muted);font-size:.95rem}
.ilan__metin{margin-top:1rem}
.ilan__baglanti{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.9rem;font-weight:500;color:var(--highlight)}
.ilan__baglanti svg{width:14px;height:14px;transition:transform 200ms var(--ease)}
.ilan__baglanti:hover svg{transform:translateX(3px)}

/* ==========================================================================
   Açılış ekranı — marka zemininde ortalanmış logo, içerik hazır olunca söner.
   Ziyaret başına bir kez görünür (sessionStorage). JS kapalıysa hiç basılmaz.
   ========================================================================== */
.acilis{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--koyu-gradyan);
  transition:opacity 460ms var(--ease),visibility 460ms var(--ease);
}
/* Logo yavaşça belirir: hafif yukarı süzülerek, tek sefer */
.acilis__logo{
  display:block;width:min(150px,34vw);color:#fff;
  opacity:0;transform:translateY(12px);
  animation:acilisBelir 760ms var(--ease) 60ms forwards;
}
.acilis__logo svg{display:block;width:100%;height:auto}
@keyframes acilisBelir{to{opacity:1;transform:none}}

/* Logonun altındaki ince yükleme çizgisi — belirsiz (indeterminate) */
.acilis__bar{
  position:relative;overflow:hidden;
  width:min(150px,34vw);height:2px;margin-top:1.35rem;
  border-radius:99px;background:rgba(255,255,255,.14);
  opacity:0;animation:acilisBelir 500ms var(--ease) 420ms forwards;
}
.acilis__bar i{
  position:absolute;top:0;bottom:0;left:0;width:45%;
  border-radius:inherit;background:var(--turkuaz);
  animation:acilisCizgi 1250ms cubic-bezier(.4,0,.2,1) infinite;
}
/* Mesafe ize göre birebir: -100% solda tam gizli, 220% sağda tam gizli.
   Daha geniş bir aralık verilirse çizgi turun çoğunu iz dışında geçiriyor. */
@keyframes acilisCizgi{
  0%   {transform:translateX(-100%)}
  100% {transform:translateX(220%)}
}

.acilis.is-bitti{opacity:0;visibility:hidden;pointer-events:none}
/* JS yoksa ya da bu ziyarette zaten gösterildiyse hiç görünmez */
.no-js .acilis,
.acilis-atla .acilis{display:none}
@media (prefers-reduced-motion:reduce){
  .acilis{transition:none}
  .acilis__logo,.acilis__bar{animation:none;opacity:1;transform:none}
  .acilis__bar i{animation:none;width:100%}
}

/* ==========================================================================
   Koyu / açık görünüm düğmesi — header sağında (müşteri revizesi, 2026-09-14)
   ========================================================================== */
.tema-dugme{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-daire);border:1px solid var(--cizgi-belirgin);color:var(--lacivert);
  transition:background-color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.tema-dugme:hover{background:var(--bg-2)}
.tema-dugme svg{width:18px;height:18px}
.tema-dugme__gunes{display:none}
.site-head--seffaf:not(.is-stuck) .tema-dugme{color:#fff;border-color:rgba(255,255,255,.32)}
.site-head--seffaf:not(.is-stuck) .tema-dugme:hover{background:rgba(255,255,255,.1)}
@media (max-width:560px){ .tema-dugme{width:36px;height:36px} }

/* ==========================================================================
   KOYU GÖRÜNÜM — html[data-tema="koyu"] (müşteri revizesi, 2026-09-14)
   Token'lar tokens.css'te koyuya döner. Burada yalnız sabit renk yazılmış
   kurallar ve lacivertin YAZI rengi olarak kullanıldığı yerler ezilir.
   ========================================================================== */
[data-tema="koyu"] .tema-dugme{color:var(--fg);border-color:var(--cizgi-belirgin)}
[data-tema="koyu"] .tema-dugme__ay{display:none}
[data-tema="koyu"] .tema-dugme__gunes{display:block}

/* Lacivert yazı → açık yazı */
[data-tema="koyu"] :is(.site-head__logo,.nav__link:hover,.nav__link.is-active,.burger,
  .acilir a:hover,.mega__txt strong,.drawer__logo,.drawer__x,.hero__kart-baslik,.metin h3,.metin strong,
  .sekme__dugme:hover,.karusel__ok:hover,.ekip__bas,.ekip-detay__bas,.ekip-detay__altbaslik,
  .sayi__deger,.sss__i[open] .sss__ico,.iletisim__txt strong,.iletisim__txt a,.yorum__ok:hover,.yorum__bas){color:var(--fg)}
[data-tema="koyu"] .site-head.is-stuck :is(.site-head__logo,.nav__link:hover,.nav__link.is-active,.burger){color:var(--fg)}

/* Header: kaydırınca yarı saydam koyu zemin; koyuda logo her zaman beyaz sürüm */
[data-tema="koyu"] .site-head.is-stuck{background:rgba(12,17,28,.94);border-bottom-color:var(--line)}
[data-tema="koyu"] .site-head.is-stuck .btn--cizgi{border-color:var(--cizgi-belirgin);color:var(--fg)}
[data-tema="koyu"] .site-head__logo-renkli{display:none!important}
[data-tema="koyu"] .site-head__logo-renkli + svg{display:block!important;color:#fff}

/* Birincil buton lacivert zeminde kaybolur: koyuda beyaz buton */
[data-tema="koyu"] .btn--primary{background:#fff;color:var(--lacivert)}
[data-tema="koyu"] .btn--primary:hover{background:rgba(255,255,255,.88)}
[data-tema="koyu"] .btn--primary .btn__rozet{background:var(--koyu-gradyan);color:#fff}
[data-tema="koyu"] .paket .paket__btn.btn--primary{background:var(--mavi-gradyan);color:#fff}
[data-tema="koyu"] .paket .paket__btn.btn--primary .btn__rozet{background:#fff;color:var(--lacivert)}
/* Koyu kart zaten koyu zeminde: temadan bağımsız beyaz düğmesini korur. */
[data-tema="koyu"] .paket--koyu .paket__btn.btn--beyaz{background:#fff;color:var(--lacivert)}
[data-tema="koyu"] .paket--koyu .paket__btn.btn--beyaz .btn__rozet{background:var(--koyu-gradyan);color:#fff}
[data-tema="koyu"] .paket--koyu .paket__maliyet-link{color:#fff}
[data-tema="koyu"] .paket .paket__btn.btn--ghost{color:#ff7b00;border-color:rgba(255,123,0,.45)}
[data-tema="koyu"] .paket--oneri .paket__etiket{color:#ff7b00}
[data-tema="koyu"] .dil__oge.is-secili{background:#fff;color:var(--lacivert)}
[data-tema="koyu"] .dil__oge:hover{color:var(--fg);background:rgba(255,255,255,.1)}
[data-tema="koyu"] .yukari{background:#fff;color:var(--lacivert)}
[data-tema="koyu"] .yukari:hover{background:rgba(255,255,255,.88)}
[data-tema="koyu"] .yan-cta{box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* 404: arkadaki soluk rakam koyu zeminde görünür kalsın */
[data-tema="koyu"] .hata__kod{color:rgba(255,255,255,.05)}
[data-tema="koyu"] .hata .btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
/* İç sayfa header'ında dolu lacivert "Görüşme Talebi" koyu zeminde kaybolur */
[data-tema="koyu"] .site-head:not(.site-head--seffaf) .site-head__cta,
[data-tema="koyu"] .site-head.is-stuck .site-head__cta{background:#fff;color:var(--lacivert);border-color:#fff}
/* İş ortağı logo kutuları koyu görünümde de beyaz: lacivert/renkli logolar kaybolmasın */
[data-tema="koyu"] .ortak{background:#fff;border-color:transparent}
[data-tema="koyu"] .ortak__yedek{color:#4b5563}

/* Kaydırılabilir tablo kabı klavyeyle geziliyor: odak halkası görünür kalsın. */
.maliyet__kaydir:focus-visible{outline:2px solid var(--mavi);outline-offset:3px;border-radius:var(--r)}

/* Sayfanın sağ kenarında WhatsApp, yukarı-çık ve Talep Formu butonları sabit durur;
   ölçüldüğünde içerik sütununun son ~58 pikselini örtüyorlar. Bu sayfadaki tutarlar
   sağa dayalı olduğu için rakamlar butonların altında kalıyordu. Panelin tamamına
   sağdan boşluk verilir — tablo, teşvik kutuları ve CTA aynı hizada biter. */
@media (min-width:1000px){
  .sekme--maliyet .sekme__panel{padding-right:4.75rem}
}

/* Karanlık temada lacivert başlık şeridi (#121a2b) sayfa zemininden (#0c111c)
   neredeyse ayırt edilemiyordu; bir ton açık koyu yüzey kullanılır. */
[data-tema="koyu"] .maliyet__tablo thead th{background:var(--dark-yuzey)}
/* Toplam satırı arka plansız olduğu için koyu temada ezme gerekmiyor:
   zemin ve yazı rengi tokenlardan geliyor (2026-09-16). */
/* Turuncu kutulardaki yazı renkleri açık zemine göre sabit yazılmıştı (#2A1200,
   #5a3a20); karanlık temada --accent-soft saydam turuncuya dönünce koyu zemin
   üzerinde koyu yazı kalıyor ve okunmuyordu. */
[data-tema="koyu"] .maliyet__rozet{color:#ff7b00}
[data-tema="koyu"] .maliyet__tesvik h4{color:#ff7b00}
[data-tema="koyu"] .maliyet__tesvik p{color:var(--on-dark-muted)}
[data-tema="koyu"] .maliyet__tesvik-ico{background:rgba(255,255,255,.1);color:#ff7b00}
[data-tema="koyu"] .maliyet__cta p{color:var(--fg)}

/* --------------------------------------------------------------------------
   KOYU GÖRÜNÜM — açık renk dengesi (müşteri, 2026-09-15)
   Sorun: açık temaya göre yazılmış şeffaf LACİVERT/MAVİ dolgular (rgba(18,26,43,…),
   rgba(255,123,0,…)) koyu zeminde zemine karışıyor; kutu, çip ve rozetler yok
   oluyordu. Koyuda bunların karşılığı şeffaf BEYAZ cam yüzeydir — tek tek hex
   yazmak yerine aynı oran beyazla kurulur, böylece hiyerarşi korunur.
   -------------------------------------------------------------------------- */
/* İkon rozetleri: mavi şeffaf daire → beyaz cam daire (ikon rengi tokenla açılıyor). */
[data-tema="koyu"] :is(.hizmet__ico,.alan__ico,.vm__ico,.ekip__cta-ico,.talep__ico){
  background:rgba(255,255,255,.1);
}
[data-tema="koyu"] .hizmet:hover .hizmet__ico{background:rgba(255,255,255,.16)}
/* Paket kartındaki nötr etiket çipi (%5 lacivert) koyu kartta hiç görünmüyordu. */
/* Kart içindeki lacivert bağlantı koyu zeminde okunmuyor. */
[data-tema="koyu"] .ekip__ok{color:var(--fg)}
[data-tema="koyu"] .yan-panel__tumu{color:var(--fg)}
[data-tema="koyu"] .paket__etiket{background:rgba(255,255,255,.09);color:var(--muted)}
[data-tema="koyu"] .paket--oneri .paket__etiket{background:rgba(255,123,0,.16)}
/* Koyu mavi kart kendi gradyanını korur: temadan bağımsız beyaz çip. */
[data-tema="koyu"] .paket--koyu .paket__etiket{background:rgba(255,255,255,.16);color:#fff}

/* Hero kartı: hero her iki temada koyu. Koyuda kart zemini (--beyaz) neredeyse
   hero'yla aynı tona düşüyor ve kart kayboluyordu; bir ton açık yüzey + görünür
   kenarlık verilir. Beyaz kart koyu temada fazla parlak durduğu için tercih
   edilmedi. Liste satırları karttan bir tık AÇIK olmalı: --bg-2 koyuda karttan
   koyu kaldığı için hiyerarşi ters dönüyordu. */
[data-tema="koyu"] .hero__kart{
  background:var(--dark-yuzey);border:1px solid rgba(255,255,255,.12);
}
[data-tema="koyu"] .hero__kart-liste a{background:rgba(255,255,255,.06)}
[data-tema="koyu"] .hero__kart-liste a:hover{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);
}

/* Lacivert dolgulu seçili durumlar koyu zeminde "seçili" okunmuyordu. */
[data-tema="koyu"] .hesapla__secenek input:checked + span{
  background:#fff;border-color:#fff;color:var(--lacivert);
}
[data-tema="koyu"] .talep__secenek.is-secili{background:var(--mavi-gradyan);border-color:transparent}
/* Başarı notunda lacivert YAZI koyu zeminde okunmuyordu. */
[data-tema="koyu"] .form__not--ok{border-color:var(--mavi);color:var(--fg)}

/* --- Kapsam kutuları: daha açık cam yüzey + sol üstte ikon (müşteri, 2026-09-15) --- */
/* .section--dark .one__i zemini (.06) koyu gradyan üzerinde neredeyse görünmüyordu. */
.kapsam .one__i{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
.kapsam .one__i:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34)}
/* İkon çipi: koyu zeminde kutudan bir ton açık daire. */
.one__i--ikonlu .one__ico{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:var(--r);background:rgba(255,255,255,.12);
  margin-bottom:1rem;
}
.one__i--ikonlu .one__ico svg{width:20px;height:20px}
@media (max-width:760px){
  /* Mobilde ikon başlığın soluna geçer: kutu dikeyde kısalır, satır yüksekliği düşer. */
  .one__i--ikonlu{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem}
  .one__i--ikonlu .one__ico{width:34px;height:34px;margin-bottom:0;grid-row:1}
  .one__i--ikonlu .one__ico svg{width:17px;height:17px}
  .one__i--ikonlu h3{align-self:center;grid-column:2}
  .one__i--ikonlu p{grid-column:1 / -1;margin-top:.7rem}
}