/* ===== Core / Reset ===== */
:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280;
  --brand:#0B5ED7; --accent:#F59E0B;
  --success:#10B981; --danger:#EF4444;
  --card:#f8fafc; --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.hidden{display:none !important}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.icon{width:20px;height:20px}

/* ===== Header / Nav ===== */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
  padding:4px 0; box-shadow:var(--shadow);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;font-size:20px}
.logo-badge{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)
}
.menu{display:flex;gap:16px}
.menu a{
  padding:10px 14px;border-radius:10px;transition:.2s;font-weight:600
}
.menu a:hover{background:#eef5ff;color:var(--brand)}
.menu a.active{background:var(--brand);color:#fff}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;font-weight:700;
  border:1px solid var(--border);background:#fff;
  box-shadow:var(--shadow);cursor:pointer;transition:.2s;justify-content:center;text-align:center
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--brand);color:#fff;border-color:transparent}
.btn-primary:hover{background:#084bb0}
.btn-accent{background:var(--accent);color:#fff;border-color:transparent}
.btn-accent:hover{background:#d48806}

/* ===== Hero / Lead ===== */
.hero{padding:48px 0;background:linear-gradient(180deg,#fff,#f9fafb)}
.hero h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin-bottom:12px;font-weight:900}
.lead{color:var(--muted);font-size:clamp(14px,2.3vw,17px)}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.badge{background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.price-note{font-size:12px;color:var(--muted);margin-top:8px}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}

/* ===== Sections / Cards / Grids ===== */
section{padding:28px 0}
.sec-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-title h2{margin:0;font-size:22px;font-weight:800}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.12)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}

/* ===== Tables ===== */
.price-table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:14px
}
.price-table th,.price-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.price-table th{background:#f1f5f9;text-align:left}
.price-table tr:last-child td{border-bottom:none}

/* ===== Details / FAQ ===== */
details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}

/* ===== Footer ===== */
.footer{background:#f7f9fc;border-top:1px solid var(--border)}
.footer-grid{display:grid;gap:22px;grid-template-columns:2fr 1fr 1.2fr;padding:28px 0}
.footer-col h4{margin:0 0 10px;font-size:16px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footer-desc{color:var(--muted);margin:0 0 10px}
.socials{display:flex;gap:10px;margin:8px 0}
.socials a{display:inline-flex;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);align-items:center;justify-content:center;background:#fff}
.socials a:hover{background:#eef5ff}
.badges{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.footer-links,.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-links a{color:var(--text)}
.footer-links a:hover{color:var(--brand)}
.footer-contact li{color:var(--muted)}
.footer-contact a{color:var(--text)}
.footer-contact a:hover{color:var(--brand)}
.pay{display:flex;gap:10px;align-items:center;margin-top:12px}
.footer-bottom{border-top:1px solid var(--border);background:#f0f4f8}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
.fb-links{display:flex;gap:12px}
.fb-links a{color:var(--muted)}
.fb-links a:hover{color:var(--brand)}

/* ===== Bottom CTA Bar (mobile-first visible) ===== */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:8px;padding:10px 12px;
  background:rgba(255,255,255,.95);backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--border)
}
.bottom-bar .btn{flex:1}

/* ===== Blog: toolbar + search + wave ===== */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 12px;border:1px solid var(--border);border-radius:999px;
  background:#fff;font-weight:700;font-size:13px;cursor:pointer
}
.chip.active{background:#eef5ff;border-color:#dbeafe}
.chip:focus{outline:2px solid #dbeafe;outline-offset:2px}
.search{display:flex;align-items:center;gap:8px}
.search input{width:260px;max-width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,94,215,.12)}
.hero-visual{margin:10px 0 0;opacity:.9}
.hero-visual svg{width:260px;height:90px;display:block}
.wave-sep svg{width:100%;height:120px;display:block}
.wave-sep path{fill:#f8fafc}

/* ===== Hakkımızda: KPI & Timeline ===== */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi .item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.kpi .n{font-size:24px;font-weight:900}
.kpi .t{font-size:12px;color:var(--muted)}
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#e5e7eb}
.tl-item{position:relative;margin-bottom:14px}
.tl-item:before{content:"";position:absolute;left:-2px;top:4px;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent))}
.tl-item h3{margin:0 0 4px;font-size:16px}
.tl-item p{margin:0;color:var(--muted);font-size:14px}

/* ===== Article (Tekil Blog Yazısı) ===== */
article{line-height:1.7}
article .meta{color:var(--muted);font-size:13px;margin:6px 0 14px}
article h2{margin:20px 0 8px;font-size:20px}
article h3{margin:14px 0 6px;font-size:16px}
article ul{margin:8px 0 12px;padding-left:18px}
article li{margin:6px 0}
.note{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ===== Animations ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeInUp .45s ease both}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .menu{display:none}
  .hero{padding:28px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-wrap{grid-template-columns:1fr;gap:20px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer-bottom .container{flex-direction:column;align-items:flex-start}
  .hero-visual svg{width:200px;height:70px}
  .search{width:100%}
  .search input{width:100%}
}
@media (max-width:560px){
  .nav{height:58px}
  .btn{padding:10px 12px}
}

/* =======================================================
   EK: İletişim Sayfası – “Soft UI” Yumuşatma
   (Sadece ilgili sayfada kullanacağın sınıflar)
   ======================================================= */

/* Hero’yu daha yumuşak geçişli yap */
.page-hero{
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
}

/* İki sütunlu düzeni daha ferah hale getir */
.contact-wrap{gap:16px}
@media (min-width:981px){
  .contact-wrap{grid-template-columns:1.2fr .8fr}
}

/* Kartların daha “soft” görünmesi */
.card.soft{
  background:#fff;
  border-color:#eef2f7;
  box-shadow:0 10px 28px rgba(17,24,39,.06);
}

/* Form alanları – sadece iletişim grid’i içinde hedefliyoruz */
.contact-wrap input,
.contact-wrap textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(17,24,39,.02);
  transition:border-color .15s, box-shadow .15s;
}
.contact-wrap input:focus,
.contact-wrap textarea:focus{
  outline:none;
  border-color:#cfe0ff;
  box-shadow:0 0 0 6px rgba(11,94,215,.10);
}

/* Satır düzeni */
.row{display:flex;gap:10px;flex-wrap:wrap}

/* Daha yuvarlak buton opsiyonu (istersen ekle) */
.btn.round{border-radius:999px;padding:12px 18px}

/* Hızlı erişim listesi aralığı */
.contact-list{display:grid;gap:12px}

/* Harita placeholder’ı */
.map-placeholder{
  border:1px dashed var(--border);
  border-radius:14px;
  padding:22px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:repeating-linear-gradient(45deg,#f9fbff,#f9fbff 10px,#ffffff 10px,#ffffff 20px);
}

/* Nazik giriş animasyonu */
.soft, .map-placeholder, .contact-wrap input, .contact-wrap textarea{animation:fadeInUp .35s ease both}
/* ===== İletişim Formu Kutucukları – Soft Kenarlar ===== */
input, textarea {
  border-radius: 14px; /* daha yumuşak köşeler */
  border: 1px solid var(--border);
  padding: 12px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

input:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(11,94,215,0.12);
  outline: none;
}
@media (max-width: 980px){
  .menu {
    display: flex !important; 
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }
  .menu a {
    flex: 0 0 auto;
  }
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* === Global Background === */
html, body {
  height: 100%;
}
body {
  background:
    linear-gradient(180deg, rgba(14,23,45,.75), rgba(14,23,45,.35) 35%, rgba(14,23,45,.2)),
    url('assets/bg-road.html') center/cover no-repeat fixed;
}

/* Kart ve hero card cam efekti */
.hero-card,
.card {
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Hero metin kontrastı */
.hero h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero p,
.lead {
  color: #e6e8ee;
}
.badge {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.6);
}

/* Alt sabit bar zemini */
.bottom-bar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Mobilde performans için fixed kaldırma */
@media (max-width: 640px){
  body { background-attachment: scroll; }
}
/* 1) Arka planı yumuşat */
html, body { height:100%; }
body{
  /* daha hafif degrade + foto */
  background:
    linear-gradient(180deg, rgba(16,24,40,.35), rgba(16,24,40,.12) 40%, rgba(16,24,40,.06)),
    url('assets/bg-road.html') center/cover no-repeat fixed;
}

/* 2) İçerik için beyaz şerit (tüm sayfada okunurluk) */
main{ position:relative; z-index:0; }
main::before{
  content:"";
  position:absolute;
  inset:-24px 0 -24px;      /* hero üstü/altına biraz taşsın */
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  z-index:-1;
  /* istersen şerit tam beyaz yerine çok hafif doku için: 
     background: linear-gradient(#ffffffef, #ffffffef); */
}

/* 3) Hero başlığını netle (flu giden yer burası) */
.hero h1{ color:#1f2937; text-shadow:none; }   /* gölgeyi kaldırdık */
.hero p, .lead{ color:#4b5563; }

/* 4) Sadece form kartı cam kalsın, diğer kartlar düz beyaz olsun */
.hero-card{
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.card{
  background:#fff;               /* düz beyaz */
  border:1px solid var(--border);
  backdrop-filter:none;
}

/* 5) Alt sabit bar kontrastı */
.bottom-bar{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(0,0,0,.06);
}

/* 6) Mobilde performance */
@media (max-width:640px){
  body{ background-attachment:scroll; }
}
:root{
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20));
  --ring: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 16px rgba(0,0,0,.08);
  --soft-shadow: 0 12px 28px rgba(17,24,39,.12);
}
/* === Görsel Upgrade Değişkenleri === */
:root{
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20));
  --ring: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 16px rgba(0,0,0,.08);
  --soft-shadow: 0 12px 28px rgba(17,24,39,.12);
}

/* === Hero’a arka plan görseli (isteğe göre sayfa bazlı) === */
.hero.with-bg{position:relative;overflow:hidden}
.hero.with-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.9; 
  background: var(--hero-overlay), url('https://images.unsplash.com/photo-1569879178894-5103dba06a5c?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
}
.hero .lead{max-width:64ch}

/* === Kartlara üst görsel alanı === */
.card-image{border-radius:12px;overflow:hidden;box-shadow:var(--soft-shadow)}
.card-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* === Feature strip === */
.feature-strip{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.feature{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--border);padding:14px;border-radius:12px;box-shadow:var(--shadow)}
.feature svg{width:28px;height:28px}

/* === Marka/kurum logoları (güven bandı) === */
.brand-strip{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:center;opacity:.9}
.brand-strip img{height:28px;filter:grayscale(1);opacity:.75}

/* === Küçük galeri === */
.gallery{display:grid;gap:12px}
.gallery.cols-3{grid-template-columns:repeat(3,1fr)}
.gallery.cols-4{grid-template-columns:repeat(4,1fr)}
.gallery .ph{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--soft-shadow)}
.gallery .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.08),transparent)}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* === Blog kartlarına thumbnail === */
.card.blog-thumb{display:grid;grid-template-rows:auto 1fr;gap:8px}
.card .thumb{border-radius:10px;overflow:hidden}
.card .thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* === Ekip/Avatar şerit === */
.avatars{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.avatars .ava{width:42px;height:42px;border-radius:999px;overflow:hidden;box-shadow:var(--ring)}
.avatars img{width:100%;height:100%;object-fit:cover;display:block}

/* === Floating CTA (sabit WhatsApp+Ara) === */
.floating-cta{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:999}
.floating-cta a{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;box-shadow:var(--soft-shadow);border:1px solid var(--border);background:#fff}
.floating-cta a svg{width:18px;height:18px}

/* === Harita iframe kaplaması === */
.map-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--soft-shadow)}
.map-wrap iframe{display:block;width:100%;height:360px;border:0}

@media (max-width:860px){
  .feature-strip{grid-template-columns:1fr}
  .gallery.cols-4{grid-template-columns:repeat(2,1fr)}
  .gallery.cols-3{grid-template-columns:repeat(2,1fr)}
}
.hero.with-bg{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)), /* koyulaştırdım */
    url('assets/bg-2492389.webp');
  background-size: cover;
  background-position: 30% center; /* kamyon soldaysa %20–35S arası iyi */
  background-repeat: no-repeat;
  color:#000000;
  min-height: 768px;              /* kesilmesin */
  display:flex; align-items:center;
}
@media (max-width: 768px){
  .hero.with-bg{
    background-position: center top; /* mobilden kırpılmasın */
    min-height: 520px;
  }
}
.hero-card{
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.5);
}
.hero.with-bg h1{ text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.badge{ background: rgba(0, 0, 0, 0.18); color:#fff; border-color: rgba(255,255,255,.35); }
.price-note{ color: #f0f3f7; opacity:.9; }
/* Hero arka planı hafif beyazlaştır */
.hero.with-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25); /* beyaz + %25 opaklık */
  z-index: 0;
}

/* Yazıların üste çıkması ve gölge ile okunaklı olması */
.hero.with-bg > * {
  position: relative;
  z-index: 1;
}

.hero.with-bg h1,
.hero.with-bg p,
.hero.with-bg .badge,
.hero.with-bg .price-note {
  color: #000; /* siyah yazı */
  text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6); /* beyaz gölge */
}

/* Badge’leri de hafif beyaz şeffaf yapalım */
.badge {
  background: rgba(255, 255, 255, 0.7);
  color: #000;
  border-color: rgba(0,0,0,0.2);
}
/* Hero metinleri netleştir */
.hero.with-bg{ position:relative; color:#fff; }
.hero.with-bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: rgba(0,0,0,.38); /* hafif koyu katman = kontrast */
}
.hero.with-bg > *{ position:relative; z-index:1; }

/* Başlık ve metin kontrastı */
.hero.with-bg h1{
  color:#fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.35);
}
.hero.with-bg p,
.hero.with-bg .price-note{
  color:#f3f4f6;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Rozetler */
.hero.with-bg .badge{
  background: rgba(17,24,39,.55);
  color:#fff; border-color: rgba(255,255,255,.35);
}
/* Hero form kutusu (Hızlı Teklif) */
.hero-card {
  background: rgba(255, 255, 255, 0.92); /* hafif şeffaf beyaz */
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Form başlığı */
.hero-card strong {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

/* Input & textarea */
.hero-card input,
.hero-card textarea {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #111827;
  transition: border-color .25s, box-shadow .25s;
}

.hero-card input:focus,
.hero-card textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.2);
}

/* Gönder butonu */
.hero-card button {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: background .25s, transform .25s;
}

.hero-card button:hover {
  background: #0846ad;
  transform: translateY(-2px);
}
/* === Timeline ikonlu satırlar (Kısa Hikayemiz) === */
.tl-item .tl-row{
  display:flex; align-items:flex-start; gap:10px;
}
.tl-ico{
  flex:0 0 28px; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 18px rgba(0,0,0,.10);
}
.tl-ico svg{width:18px;height:18px;display:block}
.tl-text h3{margin:0 0 4px;font-size:16px;font-weight:800;line-height:1.2}
.tl-text p{margin:0;color:var(--muted);font-size:14px}

/* Timeline çizgisi noktayla çakışmasın diye biraz sola al */
.timeline{position:relative;padding-left:34px}
.timeline:before{left:18px}           /* çizgi sola */
.tl-item:before{left:14px}            /* küçük nokta */
.tl-item{margin-bottom:16px}
/* === Lightbox === */
#lightbox.backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center;
}
#lightbox.backdrop.open{ display:flex; }

#lightbox .stage{
  position:relative; width:min(96vw,1200px); height:min(92vh,1200px);
  display:flex; align-items:center; justify-content:center;
}
#lightbox img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
#lightbox .ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.12); backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
}
#lightbox .ctrl:hover{ background:rgba(255,255,255,.2); }
#lightbox .prev{ left:12px; } 
#lightbox .next{ right:12px; }

#lightbox .close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#lightbox .caption{
  position:absolute; left:0; right:0; bottom:-44px;
  color:#fff; text-align:center; font-size:14px; opacity:.9; padding:6px 10px;
}
#lightbox .pager{
  position:absolute; left:12px; bottom:-40px; color:#fff; font-size:12px; opacity:.7;
}

/* Galeride hover imleci */
.gallery img{ cursor:zoom-in; }
/* === Fiyat Hesaplayıcı === */
.calc-card{padding:18px}
.calc-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-bottom:8px;
}
@media (max-width:700px){ .calc-grid{ grid-template-columns:1fr; } }

.calc-field{display:grid; gap:8px}
.calc-field input, .calc-field select{
  padding:12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; font-size:15px;
}
.calc-check{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px dashed var(--border); border-radius:10px; background:#fff;
}
.calc-check input{ width:18px; height:18px }

.calc-result{
  margin-top:10px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.calc-result .price{ font-size:22px; display:flex; align-items:baseline; gap:6px }
.calc-result .note{ color:var(--muted); font-size:12px; margin-top:4px }
.calc-result .actions{ display:flex; gap:8px; flex-wrap:wrap }
/* "Çekicim" için sayfaya uyumlu soft-parlak turuncu */
.hl-cekicim{
  /* tonlar: sayfadaki --accent turuncu + daha açıkları */
  --o1: var(--accent, #F59E0B);
  --o2: #ffb84d;
  --o3: #ffe1a3;

  background: linear-gradient(92deg, var(--o1) 0%, var(--o2) 40%, var(--o3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* arka plan foto üstünde net görünmesi için hafif parlama */
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 6px 18px rgba(245,158,11,.35);

  font-weight: 800;
  position: relative;
}

/* altta yumuşak bir highlight çizgisi */
.hl-cekicim::after{
  content:"";
  position:absolute; left:-2px; right:-2px; bottom:.08em; height:.22em;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255,184,77,.6) 0%, rgba(255,184,77,0) 70%);
  filter: blur(6px); opacity:.55; pointer-events:none;
}

/* destek yoksa düz renk fallback */
@supports not (-webkit-background-clip: text){
  .hl-cekicim{ color: var(--accent, #F59E0B); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
}

/* hareketi sevmeyenlerde animasyon kapalı (şu an yok ama ileride eklersen dursun) */
@media (prefers-reduced-motion: reduce){
  .hl-cekicim{ animation:none; }
}

/* Kart/rozet */
html.dark .card,
html.dark .hero-card,
html.dark .badge,
html.dark .note{
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* Butonlar */
html.dark .btn{
  background:#0b1220;
  border-color: var(--border);
  color: var(--text);
}
html.dark .btn:hover{ box-shadow:0 14px 30px rgba(0,0,0,.35) }
html.dark .btn-primary{ background: var(--brand); color:#0b1220; border-color:transparent }
html.dark .btn-primary:hover{ filter: brightness(.95) }
html.dark .btn-accent{ background: var(--accent); color:#0b1220; border-color:transparent }

/* Inputlar */
html.dark input, 
html.dark textarea, 
html.dark select{
  background:#0b1220; 
  color:var(--text); 
  border-color:var(--border);
}

/* Alt sabit bar ve footer */
html.dark .bottom-bar{ 
  background: rgba(15,23,42,.92); 
  border-top:1px solid var(--border);
}
html.dark .footer,
html.dark .footer-bottom{ 
  background:#0b1220; 
  border-color:var(--border);
}

/* Blog chip/search ve tablo tonları */
html.dark .chip{ background:#0b1220; border-color:var(--border); }
html.dark .chip.active{ background:#0f172a; border-color:#1e293b; }
html.dark .search input{ background:#0b1220; border-color:var(--border); }
html.dark .price-table th{ background:#111826; }
select,
select option {
  color: #111827; /* Yazı rengi siyah gibi koyu olsun */
  background-color: #fff; /* Arka plan beyaz */
}

select:focus,
select option:checked {
  color: #111827;
  background-color: #f0f0f0; /* Seçili arka plan */
}
input[type="text"],
input[type="number"],
input {
  color: #111827 !important; /* Yazı rengini koyu yap */
}
/* Hero içindeki beyaz butonların yazısını koyulaştır */
.hero.with-bg .btn:not(.btn-primary){
  background:#fff;
  color:#111827;               /* yazı */
  border-color: rgba(17,24,39,.15);
}
.hero.with-bg .btn:not(.btn-primary):hover{
  background:#f8fafc;
}
.hero.with-bg .btn:not(.btn-primary) svg{
  color: currentColor;         /* ikon da koyu görünsün */
  stroke: currentColor;
}