:root{
  --brand:#6f42c1;    /* mor tonu */
  --brand-2:#0dcaf0;  /* cyan aksan */
}

html,body{ scroll-behavior:smooth; }
.navbar-brand { letter-spacing:.2px; }

.hero {
  padding: clamp(48px, 8vw, 120px) 0;
  background:
    radial-gradient(1000px 400px at 10% -20%, rgba(111,66,193,.15), transparent 60%),
    radial-gradient(800px 300px at 90% 0%, rgba(13,202,240,.12), transparent 60%);
}
.hero .display-5 { font-weight: 700; }
.badge-soft { background: rgba(13,202,240,.15); color:#0aa2c0; }
/* MOBIL navbar düzeni (lg ve altı) */
@media (max-width: 991.98px) {
  .navbar { position: relative; min-height: 56px; }

  /* Logo ortada */
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    margin: 0;           /* olası kaymaları engelle */
    line-height: 1;
  }

  /* Hamburger solda, absolute (fixed DEĞİL) */
  .navbar-toggler {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1041;       /* marka ve menü üstünde ama alan kaplamasın diye menüye boşluk vereceğiz */
  }

  /* Menü kapalıyken normal */
  #mainNav.collapse {
    padding-top: 0;
  }

  /* Menü AÇIKKEN: buton/brand alanı kadar üst boşluk ver → öğeler butonun altından başlasın */
  #mainNav.collapse.show {
    padding-top: 56px;   /* navbar yüksekliği kadar */
    background: var(--bs-body-bg);
    border-radius: 12px;
  }

  /* Açılan listede daha rahat dokunma alanı */
  #mainNav .nav-link {
    padding: .75rem 1rem;
  }
}

.floating-btn{
  position: fixed;
  width: 52px; height: 52px;
  right: 18px; border-radius: 50%;
  z-index: 1060; cursor: pointer;
  background: #fff; color:#333; border:1px solid #e5e5e5;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Eski: .floating-btn.whatsapp::before { ... }  --> KALDIR */
.floating-btn.whatsapp{
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;           /* <- metin/ikon rengi beyaz */
  text-decoration:none; border:0;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  z-index: 1100;
}
.floating-btn.whatsapp i{
  font-size: 28px; line-height: 1; color:#fff;  /* ikonu beyaz boya */
}
.floating-btn.whatsapp:hover { filter: brightness(1.08); }

@media (max-width: 575.98px){
  .floating-btn.whatsapp{ width:64px; height:64px; }
  .floating-btn.whatsapp i{ font-size: 30px; }
}

.floating-btn.chat{ bottom: 24px; color: var(--brand); border-color:#e8ddff; }
.floating-btn i{ font-size: 1.25rem; margin:auto; }

.chatbox{
  position: fixed; right: 18px; bottom: 86px; width: 320px; max-width: 95vw;
  background: #fff; border:1px solid #e9ecef; border-radius: 12px; overflow:hidden;
  display:none; z-index:1060;
}
.chatbox-header{
  background: var(--brand); color:#fff; padding:.6rem .8rem; display:flex; align-items:center; justify-content:space-between;
}
.chatbox-body{ padding:.8rem; background: #fff; }

[data-bs-theme="dark"] body{ background:#0f1116; color:#e6e6e6; }
[data-bs-theme="dark"] .chatbox{ background:#121522; border-color:#22283a; }
[data-bs-theme="dark"] .chatbox-header{ background:#6f42c1; }
/* -------- Modern service card -------- */
.card-modern {
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.card-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0,0,0,.14);
}
@media (prefers-reduced-motion: reduce) {
  .card-modern, .card-modern:hover { transition: none; transform: none; }
}

.card-modern .card-media {
  position: relative;
  /* aspect-ratio benzeri: 16:9 */
  padding-top: 56.25%;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  overflow: hidden;
}

/* Görsel + skeleton */
.card-modern .card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0; transition: opacity .25s ease;
}
.card-modern .media-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02), rgba(0,0,0,.06));
  background-size: 300% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { 0%{background-position:0 0} 100%{background-position:100% 0} }
.card-modern .card-media img.is-loaded { opacity: 1; }

.card-modern .price-badge {
  position: absolute; top: .75rem; right: .75rem;
  padding: .4rem .6rem; border-radius: .75rem;
  font-weight: 600; font-size: .9rem;
  background: var(--bs-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(13,110,253,.3);
}

.card-modern .icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary);
  margin-right: .6rem; flex: 0 0 auto;
}

/* Başlık her ekranda en fazla 2 satır olsun */
.card-modern .card-title{
  white-space:normal !important;
  text-overflow:clip !important;
  overflow:visible; /* clamp için overflow'u anchor'da yöneteceğiz */
}



.card-modern .card-text {
  color: var(--bs-secondary-color);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3;
  overflow: hidden; min-height: 3.6em;
}

.card-modern .category-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .6rem; font-size: .8rem; border-radius: 999px;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color);
}

.card-modern .card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .75rem;
}
.card-modern .btn {
  border-radius: .85rem; padding: .55rem .9rem; font-weight: 600;
}

/* Hover durumunda başlık ve ikon ufak vurgu */
.card-modern:hover .icon { background: rgba(var(--bs-primary-rgb), .16); transform: translateY(-1px); }
.card-modern:hover .card-title { color: var(--bs-primary); }

/* Dark mode iyileştirmesi */
[data-bs-theme="dark"] .card-modern {
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .card-modern .category-pill {
  background: rgba(255,255,255,.06);
}
/* --- Navbar polish --- */
.site-header {
  backdrop-filter: saturate(1.2) blur(6px);
  background: color-mix(in oklab, var(--bs-body-bg) 85%, transparent);
}
.navbar .nav-link {
  padding: .5rem .75rem;
  border-radius: .6rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: rgba(var(--bs-primary-rgb), .08);
  color: var(--bs-primary);
}
.navbar-toggler {
  border: 0;
}
.navbar-toggler:focus { box-shadow: none; }
/* Kart aç/kapa oku */
.product-card .card-expand-toggle{
  position:absolute; right:.6rem; top:.6rem;
  width:36px; height:36px; border:0; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  transition: transform .2s ease, background .2s ease;
  z-index: 2;
}
[data-bs-theme="dark"] .product-card .card-expand-toggle{
  background: rgba(20,22,30,.85);
}
.product-card .card-expand-toggle:hover{ transform: translateY(-1px); }
.product-card .card-expand-toggle i{ font-size: 1rem; }

/* Summary alanı (Bootstrap collapse uyumlu) */
.product-card .card-summary.collapse{ display:none; }
.product-card .card-summary.collapse.show{ display:block; }

.product-card .card-actions .btn{
  border-radius: .85rem;
}
.card-summary {
  position: relative;
}
.card-summary .summary-preview {
  color: var(--bs-secondary-color);
}
.card-summary .summary-full {
  color: var(--bs-body-color);
}
.card-summary .summary-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--bs-primary);
  transition: transform .2s ease;
}
.card-summary .summary-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
/* 2 satır kısma; genişletmede clamp kalkacak */
.clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* özet alanı + buton hizalama */
.card-summary { margin-top:.35rem; }

/* modern, belirgin ikon butonu */
.btn-icon{
  width:36px;height:36px;border:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--bs-primary-rgb), .12);
  color:var(--bs-primary);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn-icon:hover{ transform:translateY(-1px); background:rgba(var(--bs-primary-rgb), .18); }
.btn-icon[aria-expanded="true"] i{ transform: rotate(180deg); }
[data-bs-theme="dark"] .btn-icon{ background:rgba(255,255,255,.09); color:#fff; }
[data-bs-theme="dark"] .btn-icon:hover{ background:rgba(255,255,255,.14); }

/* genişleyince oku döndür */
.btn-icon[aria-expanded="true"] i{ transform: rotate(180deg); }

/* karanlık temada ikon daha kontrast */
[data-bs-theme="dark"] .btn-icon{
  background:rgba(255,255,255,.09);
  color:#fff;
}
[data-bs-theme="dark"] .btn-icon:hover{
  background:rgba(255,255,255,.14);
}
.product-card .card-body .d-flex.align-items-center > .card-title{ flex:1 1 auto; min-width:0; }

.card-media .card-media-link {
  position: absolute; inset: 0;
  display: block;
}
.card-modern .card-title {
  font-weight: 700; letter-spacing: .2px; line-height: 1.2;
  /* iki satırlık clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-link {
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover {
  color: var(--bs-primary);
  text-decoration: none;
}

/* (Zaten varsa) flex: başlık alanı doğru ölçülsün */
.product-card .card-body .d-flex.align-items-center > .card-title{ 
  flex:1 1 auto; min-width:0; 
}
/* Küçük ekranlarda butonların eşit yayılması için */
@media (max-width: 576px){
  .product-card .card-actions { gap:.5rem; }
}
@media (max-width:575.98px){
  .card-modern .card-title{
    white-space:normal;          /* kırılmaya izin ver */
    text-overflow:clip;          /* ellipsis yok */
    overflow:hidden;

    display:-webkit-box;         /* 2 satırla sınırla */
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-clamp:2;
  }
}

/* Performance: prefer font-display swap to avoid FOIT */
@font-face{
  font-family: 'InterVarFallback';
  src: local('Arial');
  font-display: swap;
}

/* Hint: ensure images use width/height attributes where possible to avoid large LCP shifts */


/* Grid: mobilde tek sütun, tablet 2, desktop 3/4 kolaylığı */
.services-grid { --gap: 1rem; display: grid; gap: var(--gap); }
@media (min-width: 576px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px){ .services-grid { grid-template-columns: repeat(4, 1fr); } }