/* ====================================================================
   KURUMSAL FİRMA - TASARIM SİSTEMİ (app.css)
   Modern, kurumsal, glassmorphism + floating cards.
   Renkler tema CSS değişkenlerinden gelir (--c-primary, --c-accent ...).
   ==================================================================== */

/* ---------- Temel değişkenler ---------- */
:root{
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow: 0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg: 0 30px 60px -20px rgba(15,23,42,.28);
  --shadow-accent: 0 16px 40px -12px rgba(var(--c-accent-rgb), .45);
  --ring: rgba(var(--c-primary-rgb), .35);
  --container: 1200px;
  --header-h: 76px;
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e6ebf2;
  --text: #0f172a;
  --muted: #64748b;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Dark mode ---------- */
html.dark{
  --bg: #0a1020;
  --surface: #0f172a;
  --surface-2: #111c34;
  --border: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .4s ease, color .3s ease;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:1rem}
ul{list-style:none;padding:0}
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--text)}
::selection{background:var(--c-accent);color:#fff}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.section{padding-block:clamp(56px,8vw,104px);position:relative}
.section-sm{padding-block:clamp(40px,5vw,64px)}
.grid{display:grid;gap:24px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* ---------- Tipografi yardımcıları ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-accent);
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--c-accent)}
.section-title{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:.5rem 0 .8rem}
.section-lead{color:var(--muted);font-size:1.06rem;max-width:620px}
.text-center{text-align:center}
.text-center .section-lead{margin-inline:auto}
.text-center .eyebrow{justify-content:center}
.text-gradient{
  background:linear-gradient(120deg,var(--c-primary-light),var(--c-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.muted{color:var(--muted)}

/* ---------- Butonlar ---------- */
.btn{
  --btn-bg:var(--c-primary);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:.95rem;
  background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .25s, background .25s;
  box-shadow:var(--shadow-sm);white-space:nowrap;line-height:1;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);filter:brightness(1.05)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.btn-accent{--btn-bg:var(--c-accent);box-shadow:var(--shadow-accent)}
.btn-accent:hover{box-shadow:0 22px 48px -12px rgba(var(--c-accent-rgb),.55)}
.btn-light{--btn-bg:#fff;--btn-fg:var(--c-primary)}
.btn-outline{
  background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--border);
}
.btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--c-primary);color:var(--c-primary)}
.btn-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.btn-whatsapp{--btn-bg:#22c55e;--btn-fg:#fff}
.btn-ghost{background:var(--surface-2);color:var(--text)}
.btn-lg{padding:16px 34px;font-size:1.02rem}
.btn-sm{padding:9px 18px;font-size:.85rem}
.btn-block{width:100%}

/* ---------- Kart ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s;
  overflow:hidden;position:relative;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(var(--c-primary-rgb),.25)}
.card-pad{padding:26px}
.glass{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
}
html.dark .glass{background:rgba(20,30,55,.7);border-color:rgba(255,255,255,.08)}

/* ---------- Badge / pill ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  font-size:.78rem;font-weight:700;
  background:rgba(var(--c-accent-rgb),.12);color:var(--c-accent);
}
.badge-primary{background:rgba(var(--c-primary-rgb),.1);color:var(--c-primary)}
html.dark .badge-primary{color:var(--c-primary-on-dark)}
.chip{padding:5px 12px;border-radius:8px;background:var(--surface-2);font-size:.8rem;color:var(--muted);font-weight:600}

/* ---------- İkon kutusu ---------- */
.icon-box{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(var(--c-primary-rgb),.12),rgba(var(--c-accent-rgb),.12));
  color:var(--c-primary);flex:none;
  transition:transform .35s, background .35s, color .35s;
}
html.dark .icon-box{color:var(--c-primary-on-dark)}
.card:hover .icon-box{transform:rotate(-6deg) scale(1.08);background:var(--c-primary);color:#fff}
.icon-box svg{width:28px;height:28px}

/* =====================================================================
   TOP HEADER
   ===================================================================== */
.topbar{
  background:var(--c-dark-bg);color:rgba(255,255,255,.85);font-size:.83rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar a{color:rgba(255,255,255,.85);transition:color .2s}
.topbar a:hover{color:#fff}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:42px;gap:18px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:20px}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-item svg{width:15px;height:15px;color:var(--c-accent)}
.topbar-social{display:flex;gap:10px}
.topbar-social a{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.topbar-social a:hover{background:var(--c-accent)}
.topbar-social svg{width:14px;height:14px}
@media(max-width:960px){.topbar-left .topbar-item.hide-md,.topbar-right .hide-md{display:none}}
@media(max-width:680px){.topbar{display:none}}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
/* Başlık VARSAYILAN OLARAK AKIŞTA durur; sabitleme yönetimden açılır
   (`appearance.sticky_header`). Eskiden koşulsuz `position:sticky` idi ve
   kapatmanın yolu yoktu. */
.site-header{
  position:relative;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s, background .3s, transform .3s ease;
}
.site-header.is-sticky{position:sticky}
/* Mobil/tablette sabitleme ayrıca kapatılabilir: küçük ekranda başlık
   dikey alanın önemli bir bölümünü kaplıyor. */
@media(max-width:1140px){
  .site-header.is-sticky:not(.sticky-mobile){position:relative}
}
.site-header.scrolled{box-shadow:var(--shadow);background:color-mix(in srgb,var(--surface) 92%,transparent)}
/* Kaydırınca inceltme */
.site-header.sticky-shrink.scrolled .nav{height:calc(var(--header-h) - 12px)}
.site-header.sticky-shrink .nav{transition:height .25s ease}
/* Aşağı kaydırınca gizle (JS `.nav-up` ekler) */
.site-header.sticky-autohide.nav-up{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .site-header.sticky-shrink .nav{transition:none}
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.2rem;color:var(--text)}
/* Yükseklik yönetimden gelir (--logo-h, varsayılan 55px); genişlik daima
   orantılı kalır ki logo ezilmesin. Değişken tanımsızsa 55px'e düşer. */
.brand img{height:var(--logo-h,55px);width:auto}
/* AÇIK/KOYU LOGO — iki logo da basılır, görüneni CSS seçer. Tema sınıfı
   <html> üzerinde olduğu için ilk boyamada doğru logo görünür; JS beklenmez,
   logo değişimi gözle görülmez. Koyu logo tanımsızsa bu sınıflar hiç
   basılmaz ve tek logo her temada görünür. */
.brand-logo-dark{display:none}
html.dark .brand-logo-light{display:none}
html.dark .brand-logo-dark{display:block}
.brand-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-light));font-size:1.2rem;
  box-shadow:var(--shadow-sm);
}
/* Menü, logo ile aksiyon düğmeleri arasındaki BOŞLUĞU alır ve gerekirse
   küçülür. Aksi halde 9 maddelik menü + aksiyonlar (~1343px) 1160px'lik
   kapsayıcıya sığmıyor ve sağdaki "Teklif Al" düğmesi taşıp KIRPILIYORDU
   (body{overflow-x:hidden} bunu gizlediği için fark edilmiyordu). */
/* justify-content:center + taşma = içerik İKİ yandan taşar ve soldaki maddeler
   erişilemez olur; bu yüzden flex-start. overflow:hidden ise menünün asla
   aksiyon düğmelerini itmemesini garanti eder. */
/* Menü SAĞA yaslanır: boş alan marka ile menü ARASINDA kalır, menü de
   sağdaki aksiyon düğmelerinin yanına oturur.
   `flex:1 1 auto` + `justify-content:flex-end` yerine `margin-left:auto`
   seçildi: ilkinde kap tüm boş alanı yutar ve yer daralınca taşma SOL
   uçtan (markanın altından) kırpılırdı. Bu yazımda kap yalnız gereken
   kadar yer kaplar, dar ekranda önce sol boşluk erir, sonra bugünkü gibi
   sağdan kırpılır. */
.nav-menu{display:flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;
  margin-left:auto;justify-content:flex-end;overflow:hidden}
.nav-menu>li{flex:0 1 auto;min-width:0}
.nav-menu>li>a{
  display:flex;align-items:center;gap:5px;padding:10px 8px;border-radius:10px;
  font-weight:600;font-size:.85rem;color:var(--text);transition:color .2s,background .2s;
  white-space:nowrap;
}
.nav-menu>li>a:hover,.nav-menu>li.active>a{color:var(--c-primary);background:var(--surface-2)}
html.dark .nav-menu>li>a:hover,html.dark .nav-menu>li.active>a{color:var(--c-primary-on-dark)}
.nav-menu .has-children{position:relative}
.nav-menu .has-children>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px;opacity:.6}
.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:220px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;
}
.nav-menu .has-children:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 14px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--text)}
.dropdown a:hover{background:var(--surface-2);color:var(--c-primary)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:none}
/* Masaüstünde menü küçülerek yer açar; marka TAM görünür kalmalı. */
.nav .brand{flex:none}
.nav .brand .brand-mark{flex:none}
.icon-btn{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text);transition:.25s;
}
.icon-btn:hover{background:var(--c-primary);color:#fff}
.icon-btn svg{width:19px;height:19px}
.nav-toggle{display:none}
/* Dar masaüstünde önce CTA metni, sonra menü devre dışı kalır. */
@media(max-width:1240px){
  .nav{gap:14px}
  .nav-menu>li>a{padding:10px 9px;font-size:.87rem}
}
@media(max-width:1140px){
  .nav-menu,.nav-cta-desktop{display:none}
  .nav-toggle{display:grid}
  /* Menü gizlendiğinde küçülebilecek TEK öğe marka kalır; flex:none bırakılırsa
     logo + aksiyon düğmeleri dar ekrana sığmaz ve başlık taşar. Marka adı
     gerektiği kadar kısalır, logo işareti korunur. */
  .nav .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .nav .brand>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- Mobil menü ---------- */
.mobile-drawer{
  position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--surface);
  z-index:120;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;padding:22px;overflow-y:auto;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(8,12,24,.5);backdrop-filter:blur(3px);z-index:110;opacity:0;visibility:hidden;transition:.3s}
.drawer-backdrop.open{opacity:1;visibility:visible}
.mobile-menu a{display:block;padding:13px 14px;border-radius:11px;font-weight:600;border-bottom:1px solid var(--border)}
.mobile-menu a:hover{background:var(--surface-2);color:var(--c-primary)}

/* ---------- Arama overlay ---------- */
.search-overlay{position:fixed;inset:0;z-index:130;background:rgba(8,12,24,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;visibility:hidden;transition:.3s}
.search-overlay.open{opacity:1;visibility:visible}
.search-box{width:min(640px,92vw);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:14px;display:flex;gap:10px;align-items:center}
.search-box input{flex:1;border:none;background:transparent;outline:none;color:var(--text);padding:10px;font-size:1.1rem}

/* =====================================================================
   HERO VARYANTLARI
   ===================================================================== */
.hero{position:relative;overflow:hidden}
.hero-slide{position:relative;min-height:clamp(520px,76vh,760px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:1}
.hero-overlay.dark{background:linear-gradient(90deg,rgba(8,14,30,.82) 0%,rgba(8,14,30,.55) 50%,rgba(8,14,30,.25) 100%)}
.hero-overlay.gradient{background:linear-gradient(115deg,rgba(var(--c-primary-rgb),.92) 0%,rgba(var(--c-primary-rgb),.6) 45%,rgba(var(--c-accent-rgb),.45) 100%)}
.hero-overlay.light{background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.4))}
.hero-content{position:relative;z-index:2;color:#fff;max-width:680px;padding-block:60px}
.hero-content.center{margin-inline:auto;text-align:center;max-width:820px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);font-size:.82rem;font-weight:700;margin-bottom:22px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 4px rgba(var(--c-accent-rgb),.3);animation:pulse 2s infinite}
.hero h1,.hero .hero-h1{font-size:clamp(2.1rem,5vw,3.7rem);color:#fff;margin-bottom:18px;letter-spacing:-.03em;font-weight:800;line-height:1.12}
.hero-desc{font-size:clamp(1rem,1.6vw,1.2rem);color:rgba(255,255,255,.85);margin-bottom:30px;max-width:560px}
.hero-content.center .hero-desc{margin-inline:auto}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-content.center .hero-actions{justify-content:center}

/* slider kontrolleri */
.hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.hero-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s;cursor:pointer}
.hero-dot.active{background:#fff;width:30px;border-radius:6px}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff;transition:.25s}
.hero-arrow:hover{background:rgba(255,255,255,.3)}
.hero-arrow.prev{left:24px}.hero-arrow.next{right:24px}
@media(max-width:768px){.hero-arrow{display:none}}
.hero-slides{display:flex;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.hero-slide{flex:0 0 100%}

/* Hero: gradient/mesh varyantı (görselsiz) */
.hero-mesh{position:relative;background:var(--c-dark-bg);overflow:hidden}
.hero-mesh::before,.hero-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;z-index:0}
.hero-mesh::before{width:520px;height:520px;background:var(--c-primary-light);top:-160px;right:-80px;animation:float 9s ease-in-out infinite}
.hero-mesh::after{width:460px;height:460px;background:var(--c-accent);bottom:-180px;left:-60px;animation:float 11s ease-in-out infinite reverse}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;z-index:1}

/* Hero: split (içerik + görsel) */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:auto;padding-block:clamp(50px,7vw,90px)}
.hero-split .hero-content{color:var(--text);max-width:none;padding-block:0}
.hero-split .hero-badge{background:rgba(var(--c-primary-rgb),.1);border-color:rgba(var(--c-primary-rgb),.2);color:var(--c-primary)}
.hero-split h1{color:var(--text)}
.hero-split .hero-desc{color:var(--muted)}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3.4;object-fit:cover}
.hero-float-card{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:12px}
.hero-float-card.tl{top:18px;left:-22px;animation:float 5s ease-in-out infinite}
.hero-float-card.br{bottom:24px;right:-18px;animation:float 6s ease-in-out infinite reverse}
@media(max-width:900px){.hero-split{grid-template-columns:1fr}.hero-visual{display:none}}

/* =====================================================================
   MARKA GÜCÜ / TRUST
   ===================================================================== */
.trust-strip{margin-top:-40px;position:relative;z-index:10}
.trust-card{display:flex;align-items:center;gap:16px;padding:22px}
.trust-card .icon-box{width:50px;height:50px}
.trust-card h4{font-size:1rem;margin-bottom:2px}
.trust-card p{font-size:.84rem;color:var(--muted)}

/* =====================================================================
   HİZMET / ÜRÜN KARTLARI
   ===================================================================== */
/* KRİTİK: .media bir <a> etiketidir ve varsayılan olarak INLINE'dır.
   Inline öğelerde aspect-ratio ve overflow UYGULANMAZ; kart yalnızca görsel
   yüksekliğinde kalıp `overflow:hidden` yüzünden gövdeyi (başlık, kategori,
   açıklama, fiyat) TAMAMEN KIRPIYORDU. display:block bunu düzeltir. */
.media-card .media{display:block;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--surface-2)}
.media-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.media-card:hover .media img{transform:scale(1.08)}
.media-card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,14,30,.55),transparent 55%)}
.media-card .cat-tag{position:absolute;top:14px;left:14px;z-index:2}

/* Kart dikey esnek: bir satırdaki kartların ALT BLOĞU aynı hizada başlar,
   metin uzunluğu farklı olsa da fiyat/buton satırı kaymaz. */
.media-card{display:flex;flex-direction:column}
.media-card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.media-card h3{font-size:1.15rem;margin-bottom:8px;line-height:1.35}
.media-card h3 a:hover{color:var(--c-primary)}
.media-card p{color:var(--muted);font-size:.9rem;margin-bottom:14px;line-height:1.6}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Görsel üzerindeki sağ üst rozet (stok / yıl / okuma süresi) */
.stock-tag{
  position:absolute;top:14px;right:14px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.01em;
  background:rgba(255,255,255,.92);color:#0f172a;backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(15,23,42,.18);
}
.stock-tag svg{width:12px;height:12px}
.stock-tag.stock-ok{background:#dcfce7;color:#15803d}
.stock-tag.stock-no{background:#fee2e2;color:#b91c1c}
.stock-tag.stock-wait{background:#fef3c7;color:#92400e}

/* Marka · model üst satırı */
.card-meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;
}
.card-meta .cm-brand{color:var(--c-accent)}
.card-meta .cm-sep{opacity:.5;font-weight:400}

/* Teknik bilgi çipleri (ürün kodu, min. sipariş) */
.spec-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.spec-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);
  font-size:.73rem;color:var(--muted);
}
.spec-chip b{color:var(--text);font-weight:700}
.spec-chip svg{width:13px;height:13px;opacity:.7}

/* Blog etiketleri */
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tag-chip{
  font-size:.71rem;font-weight:600;color:var(--c-primary);
  background:rgba(var(--c-primary-rgb),.09);
  padding:3px 9px;border-radius:999px;
}
html.dark .tag-chip{color:var(--c-primary-on-dark)}

/* Alt blokta yer alan ikincil bilgi (müşteri / yazar) */
.card-side{display:flex;flex-direction:column;min-width:0}
.card-side small{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);line-height:1.4}
.card-side b{font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* margin-top:auto → alt blok kartın en altına yapışır (eşit hizalama) */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;margin-top:auto;border-top:1px solid var(--border)}
.icon-btn-sm{width:38px;height:38px}
.price-tag{font-weight:800;color:var(--c-primary);font-size:1.05rem;line-height:1.25;min-width:0}
.price-tag .pt-num{display:block;white-space:nowrap}
.price-tag .pt-soft{display:block;font-size:.86rem;font-weight:700;color:var(--muted)}
html.dark .price-tag{color:var(--c-primary-on-dark)}
.price-tag small{display:block;font-size:.7rem;font-weight:600;color:var(--muted)}
.card-links{display:flex;gap:8px}
.svc-card{padding:30px 26px}
.svc-card h3{font-size:1.22rem;margin:18px 0 10px}
.svc-card .arrow-link{margin-top:18px}
.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--c-primary);font-size:.92rem;transition:gap .25s}
html.dark .arrow-link{color:var(--c-primary-on-dark)}
.arrow-link:hover{gap:12px}

/* =====================================================================
   NEDEN BİZ
   ===================================================================== */
.feature-row{display:flex;gap:16px;padding:20px;border-radius:var(--radius);transition:.3s}
.feature-row:hover{background:var(--surface)}
.feature-row .check{width:38px;height:38px;border-radius:11px;background:rgba(var(--c-accent-rgb),.14);color:var(--c-accent);display:grid;place-items:center;flex:none}
.feature-row h4{font-size:1.02rem;margin-bottom:4px}
.feature-row p{font-size:.88rem;color:var(--muted)}

/* =====================================================================
   ÇALIŞMA SÜRECİ  (.proc-*)
   Eski 6 sütunlu ".timeline" yerine geçti: 177px'lik sütunlarda başlık ve
   açıklama sıkışıyordu. 3 sütun x 2 satır kart ızgarası hem okunur hem de
   her adıma ikon, süre bilgisi ve yön oku sığdırır.
   ===================================================================== */
.proc-sec{background:var(--surface-2)}

/* İlerleme şeridi — adım sayısını başlıktan önce bir bakışta verir */
.proc-rail{display:flex;align-items:center;justify-content:center;gap:0;margin:-14px 0 34px}
.proc-rail__dot{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.74rem;font-weight:800;color:#fff;background:var(--c-primary);box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.12)}
.proc-rail__dot:nth-child(11){background:var(--c-accent);box-shadow:0 0 0 4px rgba(var(--c-accent-rgb),.15)}
.proc-rail__line{height:2px;width:clamp(18px,4vw,54px);flex:none;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));opacity:.35}
@media(max-width:560px){.proc-rail{display:none}}

.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.proc-card{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px 22px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.proc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(var(--c-primary-rgb),.35)}

/* Üst kenardaki renk çizgisi hover'da soldan sağa dolar */
.proc-card::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:0;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));transition:width .45s ease}
.proc-card:hover::before{width:100%}

/* Hayalet numara: sırayı okumadan hissettirir, metni engellemez */
.proc-card__ghost{position:absolute;top:6px;right:14px;font-size:4.2rem;font-weight:900;line-height:1;
  color:var(--c-primary);opacity:.07;letter-spacing:-.04em;pointer-events:none;user-select:none}

.proc-card__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;
  color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-primary-light));
  box-shadow:0 10px 22px -10px rgba(var(--c-primary-rgb),.7);transition:transform .35s}
.proc-card__ico svg{width:23px;height:23px}
/* İkon verilmediğinde rozete adım NUMARASI basılır (hizmet sayfaları). */
.proc-card__ico.is-num{font-size:1.28rem;font-weight:800;letter-spacing:-.02em}
.proc-card:hover .proc-card__ico{transform:scale(1.08) rotate(-4deg)}

.proc-card__title{font-size:1.06rem;margin:0 0 8px;letter-spacing:-.01em}
.proc-card__text{font-size:.88rem;line-height:1.65;color:var(--muted);margin:0}

.proc-card__meta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:700;
  color:var(--c-primary);background:rgba(var(--c-primary-rgb),.09)}
.proc-card__meta svg{width:13px;height:13px}
/* KOYU TEMA: --c-primary kurumsal lacivertdir ve koyu kartın üzerinde 1.3:1
   kontrast verir — rozet neredeyse görünmez. Projede bu iş için üretilen
   açık ton kullanılır. */
html.dark .proc-card__meta{color:var(--c-primary-on-dark);background:rgba(var(--c-primary-rgb),.22)}
html.dark .proc-card__ghost{color:var(--c-primary-on-dark);opacity:.13}

/* Kartlar arası yön oku — akışın yönünü gösterir */
.proc-card__arrow{position:absolute;top:50%;right:-14px;transform:translateY(-50%);z-index:2;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);color:var(--c-accent);box-shadow:var(--shadow-sm)}
.proc-card__arrow svg{width:13px;height:13px}
/* Satır sonundaki kartın oku gizlenir: bir sonraki kart ALT SATIRDA,
   sağda değil — ok yanlış yönü gösterirdi. */
.proc-grid > .proc-card:nth-child(3n) .proc-card__arrow{display:none}

/* Süreç sonu çağrısı */
.proc-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:22px 26px;border-radius:var(--radius-lg);
  /* Şerit --surface-2 bölümünün üzerinde duruyordu ve sönük metin orada
     4.34:1 kalıyordu (AA 4.5:1). Zemin OPAK --surface yapılıp tint yalnız
     background-image olarak konuluyor; metin böylece beyaza yakın bir
     zemine oturuyor. */
  background-color:var(--surface);
  background-image:linear-gradient(120deg,rgba(var(--c-primary-rgb),.05),rgba(var(--c-accent-rgb),.05));
  border:1px solid var(--border)}
.proc-foot__txt{display:flex;flex-direction:column;gap:3px;min-width:240px}
.proc-foot__txt strong{font-size:1.02rem}
.proc-foot__txt span{font-size:.87rem;color:var(--muted)}
.proc-foot__btns{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:980px){
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .proc-grid > .proc-card:nth-child(3n) .proc-card__arrow{display:grid}
  .proc-grid > .proc-card:nth-child(2n) .proc-card__arrow{display:none}
}
@media(max-width:640px){
  .proc-grid{grid-template-columns:1fr}
  .proc-card__arrow{display:none !important}
  .proc-card__ghost{font-size:3.4rem}
  .proc-foot{padding:20px}
}

/* =====================================================================
   İSTATİSTİK
   ===================================================================== */
.stats-band{background:linear-gradient(120deg,var(--c-primary),var(--c-primary-light));color:#fff;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.12),transparent 40%),radial-gradient(circle at 80% 70%,rgba(var(--c-accent-rgb),.25),transparent 40%)}
.stat{position:relative;z-index:1;text-align:center}
.stat .num{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em}
.stat .num .plus{color:var(--c-accent)}
.stat .label{color:rgba(255,255,255,.8);font-weight:600;margin-top:4px}

/* =====================================================================
   REFERANS LOGOLARI
   ===================================================================== */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.logo-cell{aspect-ratio:3/2;display:grid;place-items:center;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--border);filter:grayscale(1);opacity:.75;transition:.3s}
.logo-cell:hover{filter:none;opacity:1;transform:translateY(-4px);box-shadow:var(--shadow)}
.logo-cell img{max-height:46px}
@media(max-width:880px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   TABLO (data-rich)
   ===================================================================== */
.data-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.data-table th,.data-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:.92rem}
.data-table thead th{background:var(--surface-2);font-weight:700;color:var(--text);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.data-table tbody tr:hover{background:var(--surface-2)}
.data-table td .badge{font-size:.72rem}

/* =====================================================================
   SIK SORULAN SORULAR
   Ana sayfada 6 satır x 2 sütun ızgara + kategori süzgeci.
   .faq-item / .faq-q / .faq-a iskeleti SSS SAYFASIYLA ORTAKTIR; oradaki
   tek sütunlu liste de aynı stilleri kullanır.
   ===================================================================== */
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:rgba(var(--c-primary-rgb),.3);box-shadow:var(--shadow)}
.faq-q{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:18px 20px;cursor:pointer;font-weight:700;font-size:1rem;background:none;border:0;color:inherit;font-family:inherit}
.faq-q__txt{flex:1;min-width:0;line-height:1.45}
.faq-q .ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none;transition:.3s}
.faq-item.open .faq-q .ic{background:var(--c-primary);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.faq-a-inner{padding:0 20px 20px}

/* Sorunun başındaki kategori ikonu — hangi başlığa ait olduğunu açmadan gösterir */
.faq-q__cat{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  color:var(--c-primary);background:rgba(var(--c-primary-rgb),.1)}
.faq-q__cat svg{width:16px;height:16px}
.faq-item.open .faq-q__cat{background:var(--c-primary);color:#fff}
/* KOYU TEMA: aynı gerekçe (bkz. .proc-card__meta). */
html.dark .faq-q__cat{color:var(--c-primary-on-dark);background:rgba(var(--c-primary-rgb),.26)}
html.dark .faq-item.open .faq-q__cat{background:var(--c-primary-on-dark);color:#0f172a}
html.dark .faq-tab.is-active{background:var(--c-primary-light);border-color:var(--c-primary-light)}
/* Sayı rozeti .7rem KÜÇÜK metindir; koyu temada --muted ile 4.24:1'de
   kalıyordu (AA eşiği 4.5:1). Gövde metni rengine çekildi. */
html.dark .faq-tab__n{color:var(--text);background:rgba(255,255,255,.09)}
/* Aktif sekmede rozet zemini AÇILIYOR ve beyaz sayı 4.24:1'e düşüyordu;
   koyu temada zemin koyulaştırılır. */
html.dark .faq-tab.is-active .faq-tab__n{background:rgba(0,0,0,.3);color:#fff}

/* Yanıtın altındaki kategori etiketi */
/* Etiket --c-accent (turuncu) ile 2.48:1 veriyordu; turuncu açık zeminde
   metin rengi olarak yetersizdir. Diğer rozetlerle aynı birincil renk şeması
   kullanılır (bkz. .proc-card__meta). */
.faq-a-tag{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;
  font-size:.7rem;font-weight:700;color:var(--c-primary);background:rgba(var(--c-primary-rgb),.1)}
html.dark .faq-a-tag{color:var(--c-primary-on-dark);background:rgba(var(--c-primary-rgb),.24)}

/* ---- Ana sayfa ızgarası ---- */
.faq-sec{background:var(--surface-2)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.faq-grid .faq-item{margin-bottom:0}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* ---- Kategori sekmeleri ---- */
.faq-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-16px 0 26px}
.faq-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font-size:.84rem;font-weight:700;font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border);transition:.25s}
.faq-tab svg{width:14px;height:14px;opacity:.65}
.faq-tab:hover{border-color:rgba(var(--c-primary-rgb),.45)}
.faq-tab.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.faq-tab.is-active svg{opacity:1}
.faq-tab__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-size:.7rem;background:var(--surface-2);color:var(--muted)}
.faq-tab.is-active .faq-tab__n{background:rgba(255,255,255,.22);color:#fff}

.faq-empty{text-align:center;color:var(--muted);padding:26px 0;margin:0}

/* ---- Alt çağrı ---- */
.faq-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:22px;padding:22px 26px;border-radius:var(--radius-lg);
  background-color:var(--surface);
  background-image:linear-gradient(120deg,rgba(var(--c-primary-rgb),.05),rgba(var(--c-accent-rgb),.05));
  border:1px solid var(--border)}
.faq-foot__txt{display:flex;flex-direction:column;gap:3px;min-width:260px;flex:1}
.faq-foot__txt strong{font-size:1.02rem}
.faq-foot__txt span{font-size:.87rem;color:var(--muted)}
.faq-foot__btns{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:640px){
  .faq-foot{padding:20px}
  .faq-q{padding:16px;gap:11px}
  .faq-a-inner{padding:0 16px 18px}
  /* Sekmeler dar ekranda 3 SATIRA sarıp 130px dikey yer kaplıyordu.
     Yatay kaydırma şeridine çevrilir — mobil için alışılmış davranış. */
  .faq-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:-16px;padding-inline:16px}
  .faq-tabs::-webkit-scrollbar{display:none}
  .faq-tab{flex:none}
}

/* =====================================================================
   CTA BANNER
   ===================================================================== */
.cta-banner{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--c-primary),var(--c-primary-light));color:#fff;padding:clamp(36px,5vw,64px)}
.cta-banner::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(var(--c-accent-rgb),.4);filter:blur(70px);top:-120px;right:-60px}
.cta-banner-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.2rem);color:#fff;max-width:620px}
.cta-banner p{color:rgba(255,255,255,.85);margin-top:8px;max-width:560px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* =====================================================================
   BLOG
   ===================================================================== */
.blog-card .media{aspect-ratio:16/10}
.blog-meta{display:flex;gap:14px;font-size:.8rem;color:var(--muted);margin-bottom:10px}
.blog-meta span{display:inline-flex;align-items:center;gap:5px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--c-dark-bg);color:rgba(255,255,255,.7);padding-top:64px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:46px}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:18px;font-weight:700}
/* YALNIZ dogrudan cocuk baglantilar = footer MENU baglantilaridir.
   `.footer-col a` yazilsaydi sosyal ikonlari ve iletisim satirlarini da
   yakalardi; hover rengi --c-accent oldugundan ikon, ayni renkteki
   hover arkaplaninin uzerinde GORUNMEZ olurdu. */
.footer-col > a{color:rgba(255,255,255,.65);font-size:.92rem;display:inline-block;padding:5px 0;transition:.2s}
.footer-col > a:hover{color:var(--c-accent);transform:translateX(4px)}
.footer-brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;font-size:1.25rem;margin-bottom:16px}
/* Footer logosu başlıktakinden bir tık büyük durabilir; yine de aynı
   yönetim ayarına bağlıdır ki iki logo orantısız kalmasın. */
.footer-logo{height:var(--logo-h,55px);width:auto;max-width:100%}
.footer-about{font-size:.92rem;line-height:1.7;color:rgba(255,255,255,.6);margin-bottom:18px}
/* Geliştirici imzası: telif satırının devamı, ondan bir ton daha soluk. */
.footer-credit{margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55)}
.footer-credit a{color:rgba(255,255,255,.75);text-decoration:none}
.footer-credit a:hover{color:#fff;text-decoration:underline}
@media(max-width:520px){
  /* Dar ekranda kenarlık satır başına düşüyor; imza alt satıra alınır. */
  .footer-credit{display:block;margin:6px 0 0;padding:0;border-left:0}
}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}
/* Ikon boyutu burada verilir: 24'luk viewBox 38px kutuda buyuk kalir. */
.footer-social a svg{width:18px;height:18px}
/* Hover'da renk BEYAZ kalir; arkaplan turuncuya doner. */
.footer-social a:hover{background:var(--c-accent);color:#fff;transform:translateY(-3px)}
.footer-contact li{display:flex;gap:11px;font-size:.9rem;margin-bottom:12px;color:rgba(255,255,255,.7)}
.footer-contact svg{width:18px;height:18px;color:var(--c-accent);flex:none;margin-top:2px}
.footer-contact a{color:rgba(255,255,255,.7);transition:color .2s}
.footer-contact a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}
.footer-bottom a{color:rgba(255,255,255,.65)}
.footer-bottom a:hover{color:#fff}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* =====================================================================
   FORMLAR
   ===================================================================== */
.form-group{margin-bottom:18px}
.form-label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px;color:var(--text)}
.form-control{
  width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);transition:.2s;outline:none;
}
.form-control:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px var(--ring)}
textarea.form-control{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--muted)}
.form-check input{margin-top:3px;width:17px;height:17px;accent-color:var(--c-primary)}

/* İki kolonlu form ızgarası.
   NOT: `.fld` ve `.inp` YÖNETİM PANELİ sınıflarıdır ve yalnız admin.css
   içinde tanımlıdır. Ön yüzde kullanılırlarsa form bütünüyle biçimsiz
   kalır — katalog, bayilik ve destek formlarında tam olarak bu olmuştu.
   Ön yüzde `form-group` / `form-control` / `form-check` kullanın. */
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
/* Tam satır kaplayan alanlar (adres, mesaj gibi). */
.form-grid .span-2,.form-grid .full{grid-column:1/-1}
/* Izgarada satır arası boşluğu `gap` verir; alanın kendi alt boşluğu
   olsaydı satırlar arasında çift boşluk oluşurdu. */
.form-grid .form-group{margin-bottom:0}
@media(max-width:640px){.form-grid.cols-2{grid-template-columns:1fr}}

/* Etiket sınıfı yazılmamış olsa da aynı görünsün. */
.form-group>label{display:block;font-weight:600;font-size:.88rem;margin-bottom:7px;color:var(--text)}

/* Zorunlu alan yıldızı */
.req{color:#dc2626;font-weight:700;margin-left:2px}

/* YOL TARİFİ — harita uygulaması seçimi.
   <details>/<summary> ile yazıldı: JavaScript kapalıyken de açılır.
   Tarayıcının varsayılan üçgen işareti gizlenip düğme görünümü verilir. */
.yol-tarifi{margin-top:6px;border-top:1px solid var(--border);padding-top:14px}
.yol-tarifi>summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:9px 16px;border-radius:11px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text);font-size:.86rem;font-weight:600;
  transition:border-color .2s,color .2s;
}
.yol-tarifi>summary::-webkit-details-marker{display:none}
.yol-tarifi>summary:hover{border-color:var(--c-primary);color:var(--c-primary)}
.yol-tarifi>summary svg{width:17px;height:17px;flex:none}
.yol-tarifi__secim{margin-top:12px}
.yol-tarifi__soru{display:block;font-size:.82rem;color:var(--muted);margin-bottom:8px}
.yol-tarifi__btn{display:flex;gap:10px;flex-wrap:wrap}
.yol-tarifi__btn .btn{flex:1 1 auto;justify-content:center;min-width:150px}
/* Dokunmatikte hedef yuksekligi: 36px parmakla isabet ettirmesi zor.
   Ozet dugmesi ve secim dugmeleri en az 44px'e cikarilir. */
@media(max-width:640px){
  .yol-tarifi>summary{min-height:44px;padding:11px 16px}
  .yol-tarifi__btn .btn{min-height:44px}
  .yol-tarifi__btn{flex-direction:column}
}

/* =====================================================================
   MÜŞTERİ GİRİŞİ
   Sayfa artık sitenin kendi şablonuyla basılıyor; aşağıdaki biçemler
   giriş kartını ve yanındaki tanıtım listesini düzenler.
   ===================================================================== */
/* ARKA PLAN GORSELI (yonetimden secilir; bos ise bolum sade kalir).
   Gorselin uzerine koyu bir ortu konur: acik renkli bir fotograf
   secildiginde kart ve yazilar okunmaz hale gelmesin. */
.auth-section.has-bg{position:relative;background:var(--auth-bg) center/cover no-repeat;isolation:isolate}
.auth-section.has-bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,18,38,.82),rgba(11,18,38,.92))}
/* Ortunun uzerinde yan sutun HER ZAMAN acik renkte okunur. */
.auth-section.has-bg .auth-aside h2,
.auth-section.has-bg .auth-list h4{color:#fff}
.auth-section.has-bg .auth-list p{color:rgba(255,255,255,.75)}
.auth-section.has-bg .auth-list .check{background:rgba(255,255,255,.12);color:#fff}
.auth-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  align-items:start;max-width:1000px;margin-inline:auto}
.auth-head{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.auth-ico{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:rgba(var(--c-accent-rgb),.14);color:var(--c-accent)}
.auth-ico svg{width:23px;height:23px}
.auth-title{font-size:1.35rem;font-weight:800;margin:0 0 3px}
.auth-sub{font-size:.88rem;color:var(--muted);margin:0}
.auth-note{font-size:.88rem;color:var(--muted);margin:0 0 16px;line-height:1.7}
/* Doğrulama kodu: rakamlar okunaklı olsun diye seyreltilir. */
.auth-otp{text-align:center;letter-spacing:.5em;font-size:1.25rem;font-weight:700}
.auth-alt{display:flex;gap:10px;margin-top:14px}
.auth-alt form{flex:1}
.auth-foot{margin:20px 0 0;font-size:.86rem;text-align:center}
.auth-aside h2{font-size:1.1rem;font-weight:700;margin:0 0 18px}
.auth-list{display:grid;gap:16px}
.auth-list li{display:flex;gap:13px;align-items:flex-start}
.auth-list h4{font-size:.95rem;font-weight:700;margin:0 0 3px}
.auth-list p{font-size:.86rem;color:var(--muted);line-height:1.6;margin:0}
@media(max-width:860px){
  .auth-wrap{grid-template-columns:1fr;gap:26px}
  /* Dar ekranda önce giriş kartı görünsün; tanıtım listesi altta kalsın. */
  .auth-aside{order:2}
}

/* =====================================================================
   BREADCRUMB & PAGE HERO
   ===================================================================== */
.page-hero{background:linear-gradient(120deg,var(--c-primary),var(--c-primary-light));color:#fff;padding:clamp(46px,6vw,78px) 0;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 85% 20%,rgba(var(--c-accent-rgb),.3),transparent 35%)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(1.8rem,4vw,2.8rem)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.86rem;color:rgba(255,255,255,.75);margin-bottom:14px}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.5}

/* =====================================================================
   FLOATING AKSİYONLAR (WhatsApp / Telefon / yukarı)
   ===================================================================== */
.floating-actions{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:12px}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg);transition:transform .25s}
.fab:hover{transform:scale(1.1)}
.fab-wa{background:#22c55e;animation:pulse-wa 2.4s infinite}
.fab-call{background:var(--c-primary)}
.fab-top{background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;visibility:hidden}
.fab-top.show{opacity:1;visibility:visible}
.fab svg{width:24px;height:24px}

/* =====================================================================
   ANİMASYONLAR (Scroll reveal)
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--c-accent-rgb),.3)}50%{box-shadow:0 0 0 8px rgba(var(--c-accent-rgb),.05)}}
@keyframes pulse-wa{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ---------- Yardımcılar ---------- */
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}
.section-head{margin-bottom:42px}
.section-head.between{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hidden{display:none}
.prose h2{font-size:1.5rem;margin:1.6rem 0 .8rem}
.prose h3{font-size:1.2rem;margin:1.4rem 0 .6rem}
.prose p{margin-bottom:1rem;color:var(--text)}
.prose ul{list-style:disc;padding-left:1.4rem;margin-bottom:1rem;color:var(--muted)}
.prose li{margin-bottom:.4rem}
.alert{padding:14px 18px;border-radius:12px;font-size:.9rem;font-weight:600;margin-bottom:18px}
.alert-success{background:rgba(34,197,94,.12);color:#16a34a}
.alert-error{background:rgba(239,68,68,.12);color:#dc2626}


/* ==========================================================================
   HERO DÜZENLERİ — kart ve ızgara varyantları (cards3/cards4/363/84/banner)
   ========================================================================== */

/* Yükseklik ayarı */
.hero-h-compact{--hero-h:340px}
.hero-h-normal {--hero-h:440px}
.hero-h-tall   {--hero-h:560px}

/* ── KART DÜZENİ ─────────────────────────────────────────────────────── */
.hero-cards{display:grid;gap:1.15rem}
.hero-cards--3{grid-template-columns:repeat(3,1fr)}
.hero-cards--4{grid-template-columns:repeat(4,1fr)}

.hero-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-height:380px;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s
}
.hero-card.is-linked:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.hero-card__media{position:absolute;inset:0;z-index:-2}
.hero-card__media img,.hero-card__media picture{width:100%;height:100%;object-fit:cover;display:block}
.hero-card__overlay{position:absolute;inset:0;z-index:-1}
.hero-card__overlay.dark{background:linear-gradient(180deg,rgba(8,12,22,.15) 0%,rgba(8,12,22,.82) 100%)}
.hero-card__overlay.gradient{background:linear-gradient(160deg,rgba(var(--c-primary-rgb),.72),rgba(8,12,22,.85))}
.hero-card__overlay.light{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.75))}
.hero-card__corner{
  position:absolute;top:12px;right:12px;z-index:2;background:var(--c-accent);color:#fff;
  font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.03em
}
.hero-card__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem;padding:1.35rem;margin-top:auto;height:100%;justify-content:flex-end}
.hero-card__eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-accent)}
.hero-card__title{font-size:1.22rem;line-height:1.25;font-weight:800;margin:0}
.hero-card__desc{font-size:.86rem;line-height:1.55;opacity:.88;margin:0}
.hero-card__btn{align-self:flex-start;margin-top:.35rem;pointer-events:none}
.hero-card__overlay.light ~ .hero-card__body{color:var(--text)}

@media (max-width:1100px){ .hero-cards--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .hero-cards--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  /* Mobilde tam genişlik kartlar, yatay kaydırma (swipe) */
  .hero-cards{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:88%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;padding-bottom:.5rem;scrollbar-width:none}
  .hero-cards::-webkit-scrollbar{display:none}
  .hero-card{scroll-snap-align:start;min-height:320px}
}

/* ── IZGARA DÜZENLERİ ────────────────────────────────────────────────── */
.hero-363{display:grid;grid-template-columns:3fr 6fr 3fr;gap:1.1rem;align-items:stretch}
.hero-84 {display:grid;grid-template-columns:8fr 4fr;gap:1.1rem;align-items:stretch}
.hero-sb {display:grid;grid-template-columns:8fr 4fr;gap:1.1rem;align-items:stretch}
.hero-sb--solo{grid-template-columns:1fr}

@media (max-width:1100px){
  .hero-363{grid-template-columns:1fr 1fr}
  .hero-363 .hero-ms{grid-column:1 / -1;order:-1}
}
@media (max-width:860px){
  .hero-363,.hero-84,.hero-sb{grid-template-columns:1fr}
  .hero-363 .hero-ms{order:0}
}

/* ── ANA SLIDER (ızgara içi) ─────────────────────────────────────────── */
.hero-ms{position:relative;border-radius:var(--radius);overflow:hidden;min-height:var(--hero-h,440px);background:var(--surface-2)}
.hero-ms__slides{position:relative;height:100%;min-height:inherit}
.hero-ms__slide{position:absolute;inset:0;display:none;text-decoration:none;color:#fff}
.hero-ms__slide.active{display:block}
.hero-ms__bg{position:absolute;inset:0}
.hero-ms__bg img,.hero-ms__bg picture{width:100%;height:100%;object-fit:cover;display:block}
.hero-ms__content{position:absolute;inset:auto 0 0 0;padding:1.8rem;display:flex;flex-direction:column;gap:.6rem;z-index:1}
.hero-ms__eyebrow{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--c-accent)}
.hero-ms__title{font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1.2;font-weight:800;margin:0}
.hero-ms__desc{font-size:.92rem;line-height:1.6;opacity:.9;margin:0;max-width:56ch}
.hero-ms__btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}

/* ── YAN SÜTUN ───────────────────────────────────────────────────────── */
.hero-side{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem;display:flex;flex-direction:column;gap:.75rem
}
.hero-side__title{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0}
.hero-side__list,.hero-side__links{display:flex;flex-direction:column;gap:.55rem}
.hero-side__empty{font-size:.82rem;color:var(--muted);margin:0}

.hero-mini{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:inherit;
  padding:.5rem;border-radius:var(--radius-sm);transition:background .2s}
.hero-mini:hover{background:var(--surface-2)}
.hero-mini__img{width:52px;height:52px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2)}
.hero-mini__img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-mini__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-mini__body strong{font-size:.84rem;font-weight:600;line-height:1.3}
.hero-mini__body em{font-style:normal;font-size:.78rem;font-weight:700;color:var(--c-accent)}
.hero-mini__body em.muted{color:var(--muted);font-weight:500}

.hero-qlink{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:inherit;
  padding:.6rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.86rem;font-weight:600;transition:.2s}
.hero-qlink:hover{border-color:var(--c-accent);background:var(--surface-2);transform:translateX(3px)}
.hero-qlink__ico{font-size:1.1rem;line-height:1;flex-shrink:0}

/* ── YAN BANNER ──────────────────────────────────────────────────────── */
.hero-sidebanner{display:block;border-radius:var(--radius);overflow:hidden;position:relative;min-height:var(--hero-h,440px)}
.hero-sidebanner img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.hero-sidebanner:hover img{transform:scale(1.03)}
.hero-sidebanner img{transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media (max-width:860px){
  .hero-sidebanner{min-height:0}
  .hero-sidebanner img{position:static;height:auto}
}

/* ==================================================================== */
/*  İÇ SAYFA DÜZENİ — kapak görseli, yan sütun, içindekiler             */
/* ==================================================================== */

/* ---------- Kapak görselli sayfa başlığı ---------- */
.page-hero-img{padding-block:clamp(64px,9vw,120px)}
.page-hero .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Görsel üzerine okunabilirlik katmanı: başlık her görselde net kalmalı. */
.page-hero-img::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(var(--c-primary-rgb),.92),rgba(var(--c-primary-rgb),.62) 55%,rgba(8,14,30,.55));
}
.page-hero-img::after{opacity:.55}
.page-hero .ph-lead{color:rgba(255,255,255,.88);margin-top:12px;max-width:660px;font-size:1.02rem;line-height:1.7}
.page-hero .ph-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.page-hero .ph-meta span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:rgba(255,255,255,.9);font-weight:600}
.page-hero .ph-meta svg{width:16px;height:16px;color:var(--c-accent)}
.page-hero .ph-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- İki sütunlu içerik düzeni ---------- */
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.page-layout.side-left{grid-template-columns:320px minmax(0,1fr)}
.page-layout.side-left>.page-side{order:-1}
@media(max-width:1024px){
  .page-layout,.page-layout.side-left{grid-template-columns:1fr;gap:32px}
  .page-layout.side-left>.page-side{order:0}
}
.page-main{min-width:0}

/* ---------- Yan sütun ---------- */
.page-side{display:flex;flex-direction:column;gap:18px}
/* Yapışkan davranış yalnızca sütunun sığdığı geniş ekranlarda anlamlı. */
@media(min-width:1025px){.page-side.is-sticky{position:sticky;top:calc(var(--header-h) + 18px)}}

.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.side-title{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:800;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.side-title svg{width:17px;height:17px;color:var(--c-accent)}

.side-nav{list-style:none;display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:9px;justify-content:space-between;padding:9px 11px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;color:var(--muted);transition:background .2s,color .2s}
.side-nav a svg{width:15px;height:15px;flex:none;opacity:.55}
.side-nav a:hover{background:var(--surface-2);color:var(--text)}
.side-nav a.active{background:rgba(var(--c-primary-rgb),.1);color:var(--c-primary);font-weight:700}
html.dark .side-nav a.active{color:var(--c-primary-on-dark)}
.side-nav a.active svg{opacity:1}

.side-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.83rem;font-weight:700;color:var(--c-primary);transition:gap .25s}
html.dark .side-more{color:var(--c-primary-on-dark)}
.side-more:hover{gap:11px}
.side-more svg{width:14px;height:14px}

/* Belge / katalog listesi */
.side-files{list-style:none;display:flex;flex-direction:column;gap:4px}
.side-files a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);font-size:.85rem;color:var(--muted);transition:background .2s,color .2s}
.side-files a:hover{background:var(--surface-2);color:var(--text)}
.side-files .sf-ico{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(var(--c-accent-rgb),.12);color:var(--c-accent)}
.side-files .sf-ico svg{width:15px;height:15px}
.side-files .sf-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Son yazılar */
.side-posts{list-style:none;display:flex;flex-direction:column;gap:12px}
.side-posts a{display:flex;gap:11px;align-items:center}
.side-posts img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface-2)}
.side-posts b{display:block;font-size:.84rem;font-weight:700;line-height:1.4;color:var(--text)}
.side-posts a:hover b{color:var(--c-primary)}
html.dark .side-posts a:hover b{color:var(--c-primary-on-dark)}
.side-posts small{font-size:.72rem;color:var(--muted)}

/* İletişim kartı */
.side-contact-list{list-style:none;display:flex;flex-direction:column;gap:3px}
/* Satır kabı: bağlantılı satırlarda <a>, bağlantısızlarda <li>'nin kendisi.
   Seçici ESKİDEN `li>*` idi ve bağlantısız satırlarda ikonu da metin
   kutusunu da yakalıyordu; metin kutusu flex olunca başlık ile değer alt
   alta değil YAN YANA diziliyor, ikon da hizadan çıkıyordu. */
.side-contact-list li>a,.side-contact-list li.no-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm)}
.side-contact-list a{transition:background .2s}
.side-contact-list a:hover{background:var(--surface-2)}
.side-contact-list svg{width:18px;height:18px;flex:none;color:var(--c-accent)}
.side-contact-list small{display:block;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.side-contact-list b{font-size:.85rem;font-weight:700;line-height:1.45}
.side-contact-list li.no-link b{font-weight:600;color:var(--muted)}

/* Teklif kutusu */
.side-cta{background:linear-gradient(140deg,var(--c-primary),color-mix(in srgb,var(--c-primary) 65%,#000));color:#fff;border:0}
.side-cta h2{font-size:1.08rem;font-weight:800;margin:0 0 8px;color:#fff}
.side-cta p{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:16px}
.side-cta .btn{width:100%;justify-content:center;margin-bottom:8px}
.side-cta .btn:last-child{margin-bottom:0}

/* İçindekiler */
.toc-list{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:1px}
.toc-list li{counter-increment:toc}
.toc-list a{display:block;padding:7px 10px;border-radius:8px;font-size:.85rem;color:var(--muted);line-height:1.45;border-left:2px solid transparent;transition:background .2s,color .2s,border-color .2s}
.toc-list a::before{content:counter(toc) ". ";font-weight:700;opacity:.6}
.toc-list a:hover{background:var(--surface-2);color:var(--text)}
.toc-list a.active{border-left-color:var(--c-accent);color:var(--c-primary);background:rgba(var(--c-primary-rgb),.07);font-weight:600}
html.dark .toc-list a.active{color:var(--c-primary-on-dark)}
.toc-list .toc-h3 a{padding-left:22px;font-size:.8rem}

/* Yapışkan başlığın altında kalmasın */
.prose h2,.prose h3{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ---------- Hizmet kartı ---------- */
.service-card .media{aspect-ratio:16/10}
.service-card .svc-icon{
  position:absolute;left:16px;bottom:-22px;z-index:2;
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--surface);color:var(--c-primary);
  box-shadow:var(--shadow);border:1px solid var(--border);
  transition:transform .3s,background .3s,color .3s;
}
html.dark .service-card .svc-icon{color:var(--c-primary-on-dark)}
.service-card .svc-icon svg{width:24px;height:24px}
.service-card:hover .svc-icon{transform:rotate(-6deg) scale(1.08);background:var(--c-primary);color:#fff}
.service-card .body{padding-top:34px}
.service-card-noimg .body{padding-top:26px}
.service-card-noimg .icon-box{margin-bottom:14px}

/* ---------- Belge / sertifika kartı ---------- */
.doc-card .media{aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center}
.doc-card .media img{object-fit:contain;padding:18px}
.doc-card .media::after{display:none}
.file-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.file-chip.pdf{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.file-chip.img{background:#dbeafe;border-color:#bfdbfe;color:#1d4ed8}
html.dark .file-chip.pdf{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.3);color:#fca5a5}
html.dark .file-chip.img{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.3);color:#93c5fd}

/* ---------- Bölüm sekmeleri ---------- */
.tab-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab-bar a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--border);transition:all .2s}
.tab-bar a:hover{color:var(--text);border-color:var(--muted)}
.tab-bar a.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.tab-bar .cnt{font-size:.75rem;opacity:.75;font-weight:600}

/* ---------- Kategori vitrini ---------- */
.cat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:34px}
.cat-tile{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(var(--c-primary-rgb),.3)}
.cat-tile.active{border-color:var(--c-primary);background:rgba(var(--c-primary-rgb),.05)}
.cat-tile .ct-ico{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(var(--c-primary-rgb),.1);color:var(--c-primary)}
html.dark .cat-tile .ct-ico{color:var(--c-primary-on-dark)}
.cat-tile .ct-ico svg{width:21px;height:21px}
.cat-tile b{display:block;font-size:.92rem;font-weight:700;line-height:1.35}
.cat-tile small{font-size:.76rem;color:var(--muted)}

/* ---------- Değerler / bilgi ızgarası (kurumsal sayfalar) ---------- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.value-item{padding:20px;background:var(--surface-2);border-radius:var(--radius);border:1px solid var(--border)}
.value-item .vi-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--c-accent);margin-bottom:12px;box-shadow:var(--shadow-sm)}
.value-item .vi-ico svg{width:19px;height:19px}
.value-item h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.value-item p{font-size:.86rem;color:var(--muted);line-height:1.6;margin:0}

/* Footer MENU bağlantılarında ikon hizası (yalnız doğrudan çocuklar —
   sosyal ikonlar ve iletişim satırları bu kuralların dışında kalmalı). */
.footer-col > a{display:flex;align-items:center;gap:8px}
.footer-col > a svg{width:15px;height:15px;flex:none;opacity:.65}
.footer-col > a:hover svg{opacity:1}
.footer-legal{display:flex;gap:14px;flex-wrap:wrap}
/* Üst menüde ikon + etiket hizası */
.nav-menu>li>a svg{width:15px;height:15px;flex:none;opacity:.75}
.nav-menu>li.active>a svg,.nav-menu>li>a:hover svg{opacity:1}
.dropdown a{display:flex;align-items:center;gap:8px}
.dropdown a svg{width:15px;height:15px;flex:none;opacity:.7}
.mobile-menu a{display:flex;align-items:center;gap:9px}
.mobile-menu a svg{width:17px;height:17px;flex:none;opacity:.7}

/* Dil değiştirici (üst bilgi çubuğu) */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.12)}
.lang-switch a{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.75);transition:.2s;
}
.lang-switch a:hover{color:#fff;background:rgba(255,255,255,.14)}
.lang-switch a.on{background:#fff;color:var(--c-primary)}
.lang-switch .lf{font-size:.95rem;line-height:1}

/* Favori butonu — basılı (favoride) durumu net ayırt edilmeli */
.js-fav.is-fav{background:rgba(var(--c-accent-rgb),.14);color:var(--c-accent);
  box-shadow:inset 0 0 0 1.5px var(--c-accent)}
.js-fav.is-fav svg{fill:currentColor}
.js-fav[disabled]{opacity:.6;cursor:progress}

/* ══════════════════════════════════════════════════════════════════════
   GÖRSEL ÖNİZLEME (lightbox) — bkz. themes/default/partials/lightbox.php
   ══════════════════════════════════════════════════════════════════════ */
.lb{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(8,14,30,.94);
  /* Tarayıcı desteği varsa arka plan hafifçe bulanır; yoksa düz koyu zemin
     zaten yeterli kontrast veriyor. */
  backdrop-filter:blur(4px);
  padding:20px;
  opacity:0;transition:opacity .18s ease;
}
.lb.is-open{opacity:1}
/* [hidden] tek başına yetmez: .lb kuralındaki display:flex onu ezerdi. */
.lb[hidden]{display:none}

.lb-figure{
  margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.lb-img{
  max-width:min(92vw,1400px);max-height:78vh;width:auto;height:auto;
  object-fit:contain;border-radius:12px;background:rgba(255,255,255,.04);
  /* Görsel değişirken küçük bir yumuşama; konum atlamasını gizler. */
  transition:opacity .15s ease;
}
.lb.is-loading .lb-img{opacity:.35}

.lb-cap{
  color:#fff;font-size:.94rem;text-align:center;max-width:min(92vw,760px);
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.lb-counter{color:rgba(255,255,255,.6);font-size:.85rem;font-variant-numeric:tabular-nums}

/* Düğmeler: zeminden bağımsız okunur olsunlar diye kendi koyu kutuları var. */
.lb-close,.lb-nav{
  background:rgba(255,255,255,.1);border:0;color:#fff;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;flex:none;
  transition:background .2s,transform .2s;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-close{position:absolute;top:18px;right:20px;width:44px;height:44px;z-index:2}
.lb-nav{width:52px;height:52px}
.lb-nav:active{transform:scale(.94)}
/* Tek görselde gezinme düğmeleri gizlenir (tıklanacak bir yer kalmaz). */
.lb.is-single .lb-nav{display:none}

@media(max-width:640px){
  .lb{padding:12px;gap:4px}
  .lb-img{max-height:70vh}
  .lb-nav{width:42px;height:42px}
  .lb-close{top:10px;right:12px;width:40px;height:40px}
  /* Dar ekranda oklar görselin üstüne biner; yarı saydam kalsınlar. */
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(8,14,30,.55)}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}
@media(prefers-reduced-motion:reduce){
  .lb,.lb-img,.lb-close,.lb-nav{transition:none}
}
/* Katman açıkken arkadaki sayfa kaymasın. */
body.lb-open{overflow:hidden}