/* =====================================================================
   Tema: LACİVERT — Stitch "Atlas Lacivert" tasarımının saf CSS karşılığı
   Klasik kurumsal: tam genişlik slider, ortalı bölüm başlıkları, 14px kartlar.
   ===================================================================== */
:root {
  --k-font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --k-primary: #0B2545;
  --k-ink: #001026;
  --k-text: #44474e;
  --k-accent: #1E6FD9;
  --k-accent-hover: #005cbd;
  --k-accent-soft: #EEF4F9;
  --k-on-dark-muted: #c1ddfa;
  --k-bg-soft: #F4F7FB;
  --k-footer: #001026;
  --k-radius: 14px;
}

/* ---------- 1. Üst bilgi çubuğu ---------- */
.lv-ustbar { background: var(--k-primary); color: #fff; padding: 10px 0; font-size: 12px; line-height: 16px; letter-spacing: .04em; font-weight: 600; }
.lv-ustbar-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lv-ustbar .sol, .lv-ustbar .sag { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lv-ustbar .sol a, .lv-ustbar .sol > span { display: inline-flex; align-items: center; gap: 8px; color: #c1ddfa; transition: color .2s; }
.lv-ustbar .sol a:hover { color: #fff; }
.lv-ustbar .nokta { width: 6px; height: 6px; border-radius: 50%; background: rgba(119, 141, 178, .4); }
.lv-ustbar .etiket { color: #778db2; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.lv-ustbar .sosyal { width: 28px; height: 28px; border-radius: 50%; background: rgba(119, 141, 178, .2); display: grid; place-items: center; color: #fff; transition: background .2s; }
.lv-ustbar .sosyal:hover { background: #4e92fe; }

/* ---------- 2. Ana başlık ---------- */
.lv-baslik { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); transition: box-shadow .3s; }
.lv-baslik.kaydi { box-shadow: 0 10px 30px rgba(11, 37, 69, .08); }
.lv-baslik-ic { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lv-logo { display: flex; align-items: center; gap: 14px; flex: none; }
.lv-logo img { height: 46px; width: auto; }
.lv-logo .isaret { width: 44px; height: 44px; border-radius: 12px; background: var(--k-primary); color: #4e92fe; display: grid; place-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); transition: transform .2s; }
.lv-logo:hover .isaret { transform: scale(1.05); }
.lv-logo .yazi { display: grid; line-height: 1; }
.lv-logo .yazi b { font-size: 18px; font-weight: 700; color: var(--k-ink); letter-spacing: -.01em; }
.lv-logo .yazi small { margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k-accent-hover); }
.lv-menu { display: flex; align-items: center; gap: 28px; font-size: 14px; line-height: 20px; letter-spacing: .02em; }
.lv-menu > a, .lv-menu .acilir > a { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; font-weight: 500; color: var(--k-text); transition: color .2s; }
.lv-menu > a:hover, .lv-menu .acilir > a:hover { color: var(--k-accent-hover); }
.lv-menu a.aktif { color: var(--k-accent-hover); font-weight: 600; }
.lv-menu > a.aktif::after, .lv-menu .acilir > a.aktif::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 9999px; background: var(--k-accent-hover); }
.lv-menu .acilir { position: relative; }
.lv-menu .acilir .liste { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 240px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 20px 48px rgba(11, 37, 69, .12); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.lv-menu .acilir .liste::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.lv-menu .acilir:hover .liste, .lv-menu .acilir:focus-within .liste { opacity: 1; visibility: visible; transform: none; }
.lv-menu .acilir .liste a { padding: 10px 14px; border-radius: 10px; font-weight: 500; color: var(--k-text); }
.lv-menu .acilir .liste a:hover, .lv-menu .acilir .liste a.aktif { background: var(--k-bg-soft); color: var(--k-accent-hover); }
.lv-eylem { display: flex; align-items: center; gap: 12px; }
.lv-teklif { padding: 10px 24px; }
.lv-burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--k-bg-soft); color: var(--k-ink); place-items: center; }

/* ---------- 3. Hero slider ---------- */
.lv-hero { position: relative; min-height: 640px; background: var(--k-primary); color: #fff; overflow: hidden; display: grid; }
.lv-hero-slayt { grid-area: 1 / 1; position: relative; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.lv-hero-slayt.aktif { opacity: 1; visibility: visible; }
.lv-hero-slayt .arka { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; mix-blend-mode: overlay; transform: scale(1.04); transition: transform 7s ease; }
.lv-hero-slayt.aktif .arka { transform: scale(1); }
.lv-hero-slayt .perde { position: absolute; inset: 0; background: linear-gradient(90deg, #0b2545 0%, rgba(11, 37, 69, .9) 50%, transparent 100%); }
.lv-hero-ic { position: relative; padding-top: 96px; padding-bottom: 150px; }
.lv-hero-ic .metin { max-width: 768px; display: grid; gap: 32px; justify-items: start; }
.lv-hero-rozet { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 12px; line-height: 16px; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; color: #d7e2ff; }
.lv-hero-rozet i { width: 8px; height: 8px; border-radius: 50%; background: #4e92fe; animation: lv-nabiz 2s infinite; }
@keyframes lv-nabiz { 50% { opacity: .4; } }
.lv-hero h1, .lv-hero h2 { color: #fff; font-size: 56px; line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.lv-hero p { color: #c1ddfa; font-size: 18px; line-height: 30px; max-width: 672px; }
.lv-hero .butonlar { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.lv-hero-gosterge { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2; display: flex; align-items: center; gap: 16px; }
.lv-hero-gosterge .hap { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 9999px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lv-hero-gosterge button { display: inline-flex; align-items: center; gap: 8px; color: #778db2; font-size: 12px; font-weight: 600; letter-spacing: .04em; transition: color .2s; }
.lv-hero-gosterge button i { display: none; width: 10px; height: 10px; border-radius: 50%; background: #4e92fe; }
.lv-hero-gosterge button.aktif { color: #fff; }
.lv-hero-gosterge button.aktif i { display: inline-block; }
.lv-hero-gosterge button:hover { color: #fff; }
.lv-hero-gosterge .ayrac { color: #778db2; font-size: 12px; }
.lv-hero-gosterge .aciklama { color: #778db2; font-size: 12px; font-weight: 600; letter-spacing: .04em; }

/* ---------- 4. Tanıtım + istatistik ---------- */
.lv-tanitim { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lv-tanitim .yazi { display: grid; gap: 20px; justify-items: start; }
.lv-tanitim .yazi h2 { line-height: 1.25; }
.lv-tanitim .k-icerik { font-size: 15px; line-height: 26px; }
.lv-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lv-stat { padding: 32px; }
.lv-stat-ikon { background: var(--k-accent-soft); margin-bottom: 20px; }
.lv-stat .k-metric { margin-bottom: 8px; line-height: 1; }
.lv-tanitim-foto { border-radius: var(--k-radius); overflow: hidden; box-shadow: var(--k-shadow); aspect-ratio: 4 / 3; }
.lv-tanitim-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Hizmet kartı ---------- */
.lv-hizmet { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.lv-hizmet .k-ikon { margin-bottom: 24px; }
.lv-hizmet h3 { margin-bottom: 12px; }
.lv-hizmet p { line-height: 26px; }
.lv-hizmet .k-link { padding-top: 16px; }

/* ---------- 6. Ürün grubu kartı ---------- */
.lv-urun { display: block; }
.lv-urun-gorsel { height: 208px; }
.lv-urun-gorsel .etiket { position: absolute; top: 16px; left: 16px; padding: 4px 12px; border-radius: 9999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--k-primary); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.lv-urun .yazi { padding: 24px; display: grid; gap: 8px; }
.lv-urun .yazi h3 { font-weight: 700; }
.lv-urun .yazi p { font-size: 12.5px; line-height: 18px; letter-spacing: .02em; font-weight: 500; }
.lv-urun .yazi .k-link { padding-top: 12px; }
.lv-urun:hover .k-link { text-decoration: underline; }

/* ---------- 7. Proje kartı (yatay) ---------- */
.lv-proje { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; }
.lv-proje .gorsel { min-height: 256px; }
.lv-proje .yazi { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.lv-proje .ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.lv-proje .ust b { font-size: 12px; font-weight: 700; color: var(--k-text); }
.lv-proje h3 { margin-bottom: 8px; }
.lv-proje .konum { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--k-primary); }
.lv-proje .konum svg { color: var(--k-accent); }

/* ---------- 8. Neden biz ---------- */
.lv-neden .k-ikon.beyaz { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); margin-bottom: 24px; }
.lv-neden h3 { font-weight: 700; margin-bottom: 8px; }

/* ---------- 9. Logo şeridi ---------- */
.lv-logolar { padding: 56px 0; background: rgba(238, 244, 249, .6); }
.lv-logolar .baslik { text-align: center; margin-bottom: 32px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--k-text); }
.lv-logolar .liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; align-items: center; text-align: center; }
.lv-logolar .liste > * { display: grid; place-items: center; padding: 12px; font-size: 18px; font-weight: 700; color: var(--k-primary); letter-spacing: -.01em; opacity: .7; transition: opacity .2s; }
.lv-logolar .liste > *:hover { opacity: 1; }
.lv-logolar img { max-height: 42px; width: auto; filter: grayscale(1); }
.lv-logolar .liste > *:hover img { filter: none; }

/* ---------- 10. Yorumlar ---------- */
.lv-yorum { display: flex; flex-direction: column; justify-content: space-between; }
.lv-yorum .yildiz { display: flex; gap: 4px; color: #f59e0b; margin-bottom: 16px; }
.lv-yorum blockquote { font-style: italic; color: var(--k-ink); line-height: 26px; }
.lv-yorum figcaption { margin-top: 24px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .6); display: flex; gap: 14px; align-items: center; }
.lv-yorum figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.lv-yorum figcaption b { display: block; color: var(--k-ink); font-size: 17px; }
.lv-yorum figcaption span { display: block; font-size: 12px; letter-spacing: .02em; }
.lv-yorum figcaption em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--k-accent); }

/* ---------- 11. Haber kartı ---------- */
.lv-haber { display: flex; flex-direction: column; justify-content: space-between; }
.lv-haber .gorsel { height: 208px; }
.lv-haber .yazi { padding: 28px 28px 12px; display: grid; gap: 12px; }
.lv-haber .ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.lv-haber h3 { font-weight: 700; transition: color .2s; }
.lv-haber:hover h3 { color: var(--k-accent); }
.lv-haber p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-haber .devam { padding: 0 28px 28px; }

/* ---------- SSS bölümü ---------- */
.lv-sss { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.lv-sss .k-bas { justify-items: start; }

/* ---------- Footer ---------- */
.lv-footer { background: var(--k-footer); color: #fff; padding: 80px 0 48px; }
.lv-footer-grid { display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; gap: 48px; padding-bottom: 64px; }
.lv-footer .kimlik { display: grid; gap: 24px; align-content: start; }
.lv-logo.ters .isaret { background: var(--k-accent-hover); color: #fff; }
.lv-logo.ters .yazi b { color: #fff; font-size: 22px; }
.lv-logo.ters .yazi small { color: #c1ddfa; }
.lv-logo.ters img { filter: brightness(0) invert(1); }
.lv-footer p { color: #c1ddfa; line-height: 26px; }
.lv-footer .sosyal-satir { display: flex; gap: 12px; }
.lv-footer .sosyal-satir a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; transition: background .2s; }
.lv-footer .sosyal-satir a:hover { background: var(--k-accent); }
.lv-footer h4 { color: #fff; font-size: 18px; line-height: 26px; font-weight: 700; margin-bottom: 16px; }
.lv-footer .sutun ul { display: grid; gap: 10px; }
.lv-footer .sutun a { color: #c1ddfa; transition: color .2s; }
.lv-footer .sutun a:hover { color: #d7e2ff; text-decoration: underline; text-underline-offset: 3px; }
.lv-footer .lokasyon { display: grid; gap: 20px; align-content: start; }
.lv-footer .lokasyon h4 { margin-bottom: 0; }
.lv-footer .sube { padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .05); display: grid; gap: 6px; }
.lv-footer .sube .ad { display: flex; align-items: center; gap: 8px; color: #d7e2ff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.lv-footer .sube p { font-size: 12.5px; line-height: 20px; letter-spacing: .02em; }
.lv-footer .sube .tel { display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 12.5px; font-weight: 500; color: #fff; }
.lv-footer-alt { padding: 24px 32px; margin: 0 -32px; border-radius: 16px; background: rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; letter-spacing: .02em; color: #c1ddfa; }
.lv-footer-alt nav { display: flex; flex-wrap: wrap; gap: 24px; }
.lv-footer-alt a:hover { color: #fff; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  .lv-menu { gap: 18px; font-size: 13.5px; }
}
@media (max-width: 1040px) {
  .lv-menu { display: none; }
  .lv-burger { display: grid; }
  .lv-ustbar .sol .genis { display: none; }
  .lv-tanitim, .lv-sss { grid-template-columns: 1fr; gap: 40px; }
  .lv-footer-grid { grid-template-columns: 1fr 1fr; }
  .lv-proje { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lv-ustbar-ic { justify-content: center; }
  .lv-ustbar .sag { display: none; }
  .lv-teklif { display: none; }
  .lv-hero { min-height: 560px; }
  .lv-hero h1, .lv-hero h2 { font-size: 36px; line-height: 44px; }
  .lv-hero p { font-size: 16px; line-height: 26px; }
  .lv-hero-ic { padding-top: 64px; padding-bottom: 130px; }
  .lv-hero-ic .metin { gap: 24px; }
  .lv-hero-gosterge { bottom: 36px; }
  .lv-hero-gosterge .aciklama { display: none; }
  .lv-stat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .lv-stat { padding: 22px; }
  .lv-stat .k-metric { font-size: 34px; }
  .lv-footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .lv-footer-alt { margin: 0; padding: 20px; flex-direction: column; text-align: center; }
  .lv-footer-alt nav { justify-content: center; gap: 14px; }
}
@media (max-width: 420px) {
  .lv-ustbar .sol { gap: 10px; }
  .lv-ustbar .sol .nokta { display: none; }
  .lv-logo .yazi b { font-size: 16px; }
}