/* ============================================================
   DİKMEN ÇATI — Açık & Profesyonel Tasarım Sistemi
   ============================================================ */

:root {
  --zemin:        #f5f6f8;
  --zemin-2:      #ffffff;
  --yuzey:        rgba(0, 0, 0, .025);
  --yuzey-guclu:  rgba(0, 0, 0, .045);
  --cizgi:        rgba(0, 0, 0, .08);
  --metin:        #1a2332;
  --metin-soluk:  #5a6577;
  --vurgu:        #1565c0;
  --vurgu-acik:   #42a5f5;
  --vurgu-koyu:   #0d47a1;
  /* Koyu zeminde (hero arka planli slaytlarda) okunan acik ton */
  --vurgu-parlak: #8fc4ff;
  --vurgu-rgb:      21, 101, 192;
  --vurgu-acik-rgb: 66, 165, 245;
  --vurgu-koyu-rgb: 13, 71, 161;
  --vurgu-yumuşak:rgba(var(--vurgu-rgb), .08);
  --baslik-fontu: 'Sora', system-ui, sans-serif;
  --govde-fontu:  'Manrope', system-ui, sans-serif;
  --gecis:        .3s cubic-bezier(.4, 0, .2, 1);
  --yaricap:      16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--govde-fontu);
  background: var(--zemin);
  color: var(--metin);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--gecis); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--baslik-fontu);
  line-height: 1.25;
  letter-spacing: -.02em;
}

::selection { background: var(--vurgu); color: #fff; }

.konteyner { width: min(1180px, 92%); margin-inline: auto; }

/* ---- Erişilebilirlik ---- */
.atla {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--vurgu); color: #fff; padding: 10px 18px; border-radius: 8px;
}
.atla:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--vurgu-acik); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   DÜĞMELER
   ============================================================ */
.dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: .95rem; letter-spacing: .03em;
  position: relative; overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), color var(--gecis);
}
.dugme-vurgu {
  background: linear-gradient(135deg, var(--vurgu) 0%, var(--vurgu-koyu) 100%);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(var(--vurgu-rgb), .45);
}
.dugme-vurgu::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s;
}
.dugme-vurgu:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -6px rgba(var(--vurgu-rgb), .55); }
.dugme-vurgu:hover::after { transform: translateX(120%); }

.dugme-hat {
  background: transparent; color: var(--metin);
  box-shadow: inset 0 0 0 1.5px var(--cizgi);
}
.dugme-hat:hover { box-shadow: inset 0 0 0 1.5px var(--vurgu); color: var(--vurgu-acik); transform: translateY(-3px); }

.dugme-kucuk { padding: 9px 20px; font-size: .85rem; }

/* ============================================================
   ÜST BAR / MENÜ
   ============================================================ */
.ustbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--cizgi);
  transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.ustbar.kaydirildi { border-bottom-color: var(--cizgi); box-shadow: 0 12px 32px -18px rgba(0,0,0,.12); }

.ustbar-icin { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }

.marka { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.marka img { filter: none; }
.marka-yazi {
  font-family: var(--baslik-fontu); font-size: 1.22rem; letter-spacing: .01em;
  display: flex; flex-direction: column; line-height: 1.15;
}
.marka-yazi strong { color: var(--metin); font-weight: 800; }
.marka-yazi strong + * { display: none; }
.marka-yazi small {
  font-family: var(--govde-fontu); font-size: .62rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--vurgu);
}

.menu { display: flex; align-items: center; gap: 4px; }
.menu > a, .acilir-dugme {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 999px;
  font-size: .93rem; font-weight: 600; color: var(--metin-soluk);
  background: none; border: 0; font-family: inherit;
  transition: color var(--gecis), background var(--gecis);
}
.menu > a:hover, .acilir-dugme:hover,
.menu > a.aktif, .acilir-dugme.aktif { color: var(--metin); background: var(--yuzey-guclu); }
.menu > a[aria-current="page"] { color: var(--vurgu); }
.ok { font-size: .6rem; transition: transform var(--gecis); }

.acilir { position: relative; }
.acilir-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  translate: -50% 0; min-width: 210px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .15);
}
.acilir-menu::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: rgba(255,255,255,.97); border-left: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); rotate: 45deg; translate: -6px 0; pointer-events: none; }
.acilir-menu a { display: block; padding: 10px 16px; border-radius: 9px; font-size: .9rem; font-weight: 500; color: var(--metin-soluk); }
.acilir-menu a:hover { background: var(--vurgu-yumuşak); color: var(--vurgu-acik); }
.acilir:hover .acilir-menu, .acilir.acik .acilir-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.acilir:hover .ok, .acilir.acik .ok { transform: rotate(180deg); }

.ustbar-sag { display: flex; align-items: center; gap: 14px; }
.tel-quick { font-weight: 700; font-size: .9rem; color: var(--metin-soluk); white-space: nowrap; }
.tel-quick:hover { color: var(--vurgu-acik); }

.hamburger { display: none; background: none; border: 0; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.hamburger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--metin); transition: var(--gecis); }
.hamburger.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.acik span:nth-child(2) { opacity: 0; }
.hamburger.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO (ANASAYFA)
   ============================================================ */
.hero {
  position: relative; min-height: calc(100vh - 76px);
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero-zemin {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 55% at 70% 15%, rgba(var(--vurgu-rgb), .08), transparent 60%),
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(var(--vurgu-rgb), .04), transparent 65%),
    linear-gradient(180deg, var(--zemin) 0%, #e8ecf2 100%);
}
.hero-izgara {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 75%);
}

.hero-parcacik { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(var(--vurgu-acik-rgb),.4), transparent 70%); z-index: -1; will-change: transform; animation: parcacik 14s ease-in-out infinite alternate; }
.hero-parcacik:nth-child(1) { width: 220px; height: 220px; top: 12%; right: 8%; }
.hero-parcacik:nth-child(2) { width: 140px; height: 140px; bottom: 18%; left: 6%; animation-delay: -6s; }
@keyframes parcacik { from { transform: translateY(0) scale(1); } to { transform: translateY(-46px) scale(1.15); } }

/* ---- Hero slayt rayı ---- */
.hero-ray {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.hero-ray::-webkit-scrollbar { display: none; }
.hero-slayt { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }

/* ---- Ortak arka plan katmani: 3 fotograf capraz gecisle donusur ---- */
.hero-arkaplan { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-arka {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}
.hero-arka.aktif { opacity: 1; }
/* Solda koyu, sagda acik: yazi okunur kalirken fotograf gorunur */
.hero-arka-kaplama {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
      rgba(8,20,38,.93) 0%,
      rgba(8,20,38,.80) 40%,
      rgba(8,20,38,.34) 72%,
      rgba(8,20,38,.20) 100%);
}
.hero-ray { position: relative; z-index: 1; }
.hero-slayt .hero-ic { position: relative; z-index: 2; }

/* Koyu slaytta metin renkleri */
.hero-slayt.koyu :is(h1, .hero-baslik) { color: #fff; }
.hero-slayt.koyu p.alt { color: rgba(255,255,255,.86); }
.hero-slayt.koyu .gradyan-metin {
  background: linear-gradient(120deg, var(--vurgu-parlak) 10%, #ffffff 55%, var(--vurgu-parlak) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-slayt.koyu .rozet {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: var(--vurgu-parlak);
}
.hero-slayt.koyu .rozet .nokta { background: var(--vurgu-parlak); }
.hero-slayt.koyu .guven-oge { color: rgba(255,255,255,.82); }
.hero-slayt.koyu .guven-oge svg { color: var(--vurgu-parlak); }
.hero-slayt.koyu .dugme-hat {
  color: #fff; border-color: rgba(255,255,255,.68); background: rgba(255,255,255,.10);
}
.hero-slayt.koyu .dugme-hat:hover { background: #fff; color: var(--vurgu-koyu); border-color: #fff; }
.hero-slayt.koyu .hero-gorsel-cerceve { border-color: rgba(255,255,255,.22); box-shadow: 0 40px 80px -20px rgba(0,0,0,.55); }

/* Dar ekranda metin tek sutuna inince govdenin tamami koyu olmali */
@media (max-width: 1024px) {
  .hero-slayt.koyu .hero-arka-kaplama {
    background: linear-gradient(180deg, rgba(8,20,38,.88) 0%, rgba(8,20,38,.80) 55%, rgba(8,20,38,.72) 100%);
  }
}


/* Sonsuz dongu kopyalari yalnizca JS acikken ise yarar; JS kapaliysa
   gizli kalirlar ve ray sade bir yatay kaydirma alani olarak calisir. */
.hero-slayt.klon { display: none; }
.hero-ray.klonlu .hero-slayt.klon { display: block; }

/* Oklar */
.hero-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
  font-size: 1.05rem; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.18);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.hero-ok:hover { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.hero-ok:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 2px; }
.hero-ok-sol { left: 18px; }
.hero-ok-sag { right: 18px; }

/* Noktalar + duraklat */
.hero-kontrol {
  position: absolute; left: 50%; translate: -50% 0; bottom: 26px; z-index: 4;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 999px;
  padding: 8px 14px; box-shadow: 0 8px 22px -10px rgba(0,0,0,.18);
}
.hero-noktalar { display: flex; align-items: center; gap: 4px; }
.hero-nokta {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.hero-nokta::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: var(--cizgi); transition: width var(--gecis), background var(--gecis);
}
.hero-nokta.aktif::before { width: 26px; background: var(--vurgu); }
.hero-nokta:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: -4px; border-radius: 999px; }
.hero-duraklat {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-left: 1px solid var(--cizgi); background: none;
  color: var(--metin-soluk); display: grid; place-items: center;
}
.hero-duraklat:hover { color: var(--vurgu); }
.hero-duraklat:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: -4px; }
.hero-duraklat .ikon-oynat { display: none; }
.hero-duraklat[aria-pressed="true"] .ikon-duraklat { display: none; }
.hero-duraklat[aria-pressed="true"] .ikon-oynat { display: block; }

@media (max-width: 860px) {
  /* Mobilde hero ekrandan uzun: kontroller hero'nun altina sabitlenirse ilk ekranda hic gorunmuyor.
     Bu yuzden ilk ekranin alt kenarina hizalaniyorlar. */
  /* Hero ust menunun 64px altindan basliyor; ayrica sabit WhatsApp dugmesi
     ekranin sag altini kapliyor. Kontrol bandi ikisinin de ustune alindi. */
  .hero-kontrol { bottom: auto; transform: none; translate: -50% 0; padding: 6px 10px; gap: 10px;
                  top: calc(100vh - 198px); top: calc(100svh - 198px); }
  .hero-ok { bottom: auto; transform: none; width: 38px; height: 38px; font-size: .9rem;
             top: calc(100vh - 194px); top: calc(100svh - 194px); }
  .hero-ok-sol { left: 10px; }
  .hero-ok-sag { right: 10px; }
  .hero-slayt .hero-ic { gap: 34px; padding-bottom: 40px; }
}


.hero-ic { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-block: 90px 110px; }

.rozet {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--vurgu-yumuşak); border: 1px solid rgba(var(--vurgu-rgb),.2);
  color: var(--vurgu); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 26px;
}
.rozet .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu); box-shadow: 0 0 0 0 rgba(var(--vurgu-rgb),.6); animation: nabiz 2s infinite; }
@keyframes nabiz { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.hero :is(h1, .hero-baslik) { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; margin-bottom: 22px; }
.gradyan-metin { background: linear-gradient(120deg, var(--vurgu) 10%, var(--vurgu-acik) 55%, var(--vurgu) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.alt { font-size: 1.13rem; color: var(--metin-soluk); max-width: 54ch; margin-bottom: 38px; }
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 52px; }

/* Hero sağ görsel */
.hero-gorsel { position: relative; }
.hero-gorsel-cerceve {
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--cizgi);
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.18);
  transform: rotate(2deg);
  transition: transform .5s var(--gecis);
}
.hero-gorsel-cerceve:hover { transform: rotate(0) scale(1.02); }
.hero-gorsel-cerceve img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.hero-gorsel-cerceve::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(var(--vurgu-rgb),.12), transparent 45%, rgba(255,255,255,.3)); pointer-events: none; }
.yuzen-kart {
  position: absolute; bottom: -26px; left: -30px;
  background: #fff;
  border: 1px solid var(--cizgi); border-radius: 16px;
  padding: 18px 24px; display: flex; align-items: center; gap: 16px;
  box-shadow: 0 20px 44px -10px rgba(0,0,0,.12);
  animation: yuz 5s ease-in-out infinite alternate;
}
@keyframes yuz { to { transform: translateY(-12px); } }
.yuzen-kart .sayi { font-family: var(--baslik-fontu); font-size: 1.9rem; font-weight: 800; color: var(--vurgu); }
.yuzen-kart .yazi { font-size: .82rem; color: var(--metin-soluk); line-height: 1.4; }

/* Güven şeridi */
.guven-seridi { border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); background: var(--zemin-2); margin-block: 8px 100px; }
.guven-ic { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; padding-block: 26px; }
.guven-oge { display: flex; align-items: center; gap: 12px; color: var(--metin-soluk); font-weight: 600; font-size: .92rem; }
.guven-oge svg { color: var(--vurgu); flex-shrink: 0; }

/* ============================================================
   BÖLÜMLER
   ============================================================ */
.bolum { padding-block: 96px; }
.bolum-baslik { max-width: 720px; margin-bottom: 58px; }
.bolum-baslik.orta { margin-inline: auto; text-align: center; }
.etiket {
  display: inline-block; font-size: .78rem; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: var(--vurgu);
  margin-bottom: 14px;
}
.bolum-baslik h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; }
.bolum-baslik p { color: var(--metin-soluk); margin-top: 14px; font-size: 1.04rem; }

/* Cam kartlar */
.cam-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .cam-kartlar { grid-template-columns: repeat(2, 1fr); } }
/* ============================================================
   URUNLER SAYFASI - tam ekran hero + metin blogu
   ============================================================ */
.urun-hero {
  position: relative; overflow: hidden;
  min-height: min(760px, calc(100vh - 76px));
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.urun-hero-fon {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
/* Beyaz yazinin turuncu fotograf uzerinde okunmasi icin karartma */
.urun-hero-kaplama {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,14,8,.52) 0%, rgba(26,14,8,.34) 45%, rgba(26,14,8,.60) 100%);
}
.urun-hero-ic { position: relative; z-index: 2; }
.urun-hero-ic h1 {
  color: #fff; font-weight: 400; letter-spacing: -.5px;
  font-size: clamp(2rem, 4.6vw, 4rem); text-transform: uppercase;
  margin-bottom: 18px; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.urun-hero-ic > p {
  color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.5vw, 1.35rem);
  max-width: 46ch; margin: 0 auto 34px; text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.kirilim-acik { color: rgba(255,255,255,.82); margin-bottom: 22px; justify-content: center; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.kirilim-acik a { color: rgba(255,255,255,.9); }
.kirilim-acik a:hover { color: #fff; }
.kirilim-acik span { color: rgba(255,255,255,.95); }
/* Referanstaki cerceveli beyaz dugme */
.dugme-hat-beyaz {
  border: 2px solid #fff; background: transparent; color: #fff;
  border-radius: 4px; padding: 16px 30px; font-size: .95rem;
  transition: background var(--gecis), color var(--gecis);
}
.dugme-hat-beyaz:hover { background: #fff; color: var(--metin); }

.urun-metin { max-width: 760px; }
.urun-metin h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); text-transform: uppercase; }
.urun-metin-cizgi { display: block; width: 54px; height: 3px; background: var(--vurgu); border-radius: 2px; margin: 18px 0 24px; }
.urun-metin p { color: var(--metin-soluk); font-size: 1.08rem; line-height: 1.8; }
.urun-metin-logo { display: block; height: 38px; width: auto; margin-top: 28px; }
.urun-metin-not { font-size: .82rem !important; margin-top: 14px; }

@media (max-width: 860px) {
  .urun-hero { min-height: 480px; }
  .urun-hero-ic .dugme-hat-beyaz { padding: 14px 24px; }
}

/* ============================================================
   HIZMET KARTLARI (gorselli)
   ============================================================ */
/* Menuden gelen kategori baglantisi yapiskan menunun altinda kalmasin */
.hizmet-grup { scroll-margin-top: 96px; }
@media (max-width: 860px) { .hizmet-grup { scroll-margin-top: 80px; } }
.hizmet-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .hizmet-kartlar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hizmet-kartlar { grid-template-columns: 1fr; } }
/* ============================================================
   KAYDIRILABILIR SERIT (anasayfa hizmetleri) — kendi kendine
   kaymaz; okla ve parmakla kaydirilir.
   ============================================================ */
.serit-sar { position: relative; }
.hizmet-kartlar.serit {
  display: flex; grid-template-columns: none;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  gap: 22px; padding: 4px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Az sayida kart varsa ortalanir; tasma oldugunda "safe" sayesinde
     basa yaslanir, ilk kart kirpilmaz. JS de ayni isi 'ortali' sinifiyla
     yapar (safe desteklemeyen tarayicilar icin). */
  justify-content: safe center;
}
.hizmet-kartlar.serit.ortali { justify-content: center; }
/* Blog seridi: kartlar ikiserli, hizmet/proje seridinden genis */
.hizmet-kartlar.blog-serit > * { flex: 0 0 calc((100% - 22px) / 2); }
@media (max-width: 760px) { .hizmet-kartlar.blog-serit > * { flex: 0 0 86%; } }
.hizmet-kartlar.serit::-webkit-scrollbar { display: none; }
.hizmet-kartlar.serit > .hizmet-kart {
  flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
}
/* Serit kirpma katmani: overflow:clip bir scroll kabi DEGILDIR, dikey tekerlegi
   yakalamaz; yatay tasmayi kirpar. Dikey golge/tasma icin y ekseni gorunur. */
.serit-vp { overflow-x: clip; overflow-y: visible; }
@media (pointer: fine) {
  .serit-vp > .hizmet-kartlar.serit.serit-transform {
    overflow: visible; scroll-snap-type: none;
    transition: transform .4s cubic-bezier(.22,.61,.36,1); will-change: transform;
  }
}
.serit-ok {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: 0 10px 28px -12px rgba(0,0,0,.35);
  transition: background var(--gecis), color var(--gecis), opacity var(--gecis);
}
.serit-ok:hover { background: var(--vurgu); color: #fff; border-color: transparent; }
.serit-ok[disabled] { opacity: .35; cursor: default; }
.serit-ok[disabled]:hover { background: #fff; color: var(--metin); border-color: var(--cizgi); }
.serit-once  { left: -18px; }
.serit-sonra { right: -18px; }
@media (max-width: 1180px) { .serit-once { left: 4px; } .serit-sonra { right: 4px; } }
@media (max-width: 980px) {
  .hizmet-kartlar.serit > .hizmet-kart { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 620px) {
  .hizmet-kartlar.serit { gap: 14px; }
  .hizmet-kartlar.serit > .hizmet-kart { flex: 0 0 82%; }
  .serit-ok { display: none; }
}


.hizmet-kart {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--cizgi);
  border-radius: var(--yaricap); overflow: hidden;
  color: inherit; text-decoration: none;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.35);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.hizmet-kart:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--vurgu-rgb),.35);
  box-shadow: 0 26px 50px -26px rgba(0,0,0,.32);
}
.hizmet-kart:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 3px; }

.hizmet-kart-resim { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--zemin-2); }
.hizmet-kart-resim img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--gecis);
}
.hizmet-kart:hover .hizmet-kart-resim img { transform: scale(1.06); }
/* Gorseli olmayan hizmet: desenli zemin, kart bos gorunmesin */
.hizmet-kart-desen {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--vurgu-rgb),.16), rgba(var(--vurgu-acik-rgb),.06)),
    var(--zemin-2);
}
.hizmet-kart-desen::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(var(--vurgu-rgb),.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--vurgu-rgb),.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* Fotografin uzerinde hizmet ikonu */
.hizmet-kart-ikon {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: #fff; color: var(--vurgu);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
}

.hizmet-kart-ic { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.hizmet-kart-ic h3 { font-size: 1.12rem; margin-bottom: 8px; }
.hizmet-kart-ic p { color: var(--metin-soluk); font-size: .93rem; margin-bottom: 16px; flex: 1; }
.hizmet-kart-ic .kart-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; }

@media (max-width: 620px) {
  .hizmet-kart-ic { padding: 18px 20px 20px; }
}

/* Hizmet/urun kartinin tamami tiklanabilir link olabilir */
a.cam-kart { color: inherit; text-decoration: none; display: block; }
a.cam-kart .kart-link { display: inline-flex; }
.panel-kart-aktif { color: var(--vurgu); font-weight: 700; }
.acilir-menu-tumu { border-top: 1px solid var(--cizgi); margin-top: 4px; padding-top: 8px; }
.cam-kart {
  position: relative; padding: 34px 28px; border-radius: var(--yaricap);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  transition: transform var(--gecis), border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
  overflow: hidden;
}
.cam-kart::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 20% 0%, rgba(var(--vurgu-rgb),.06), transparent 55%);
  transition: opacity var(--gecis);
  pointer-events: none;
}
.cam-kart:hover { transform: translateY(-8px); border-color: rgba(var(--vurgu-rgb),.25); background: var(--zemin-2); box-shadow: 0 28px 56px -20px rgba(0,0,0,.1); }
.cam-kart:hover::before { opacity: 1; }
.cam-kart h3 { font-size: 1.18rem; margin-bottom: 10px; position: relative; }
.cam-kart p { color: var(--metin-soluk); font-size: .94rem; position: relative; }
.cam-kart .kart-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  color: var(--vurgu-acik); font-weight: 700; font-size: .88rem; position: relative;
}
.cam-kart .kart-link svg { transition: transform var(--gecis); }
.cam-kart .kart-link:hover svg { transform: translateX(5px); }
.kart-ikon {
  width: 54px; height: 54px; border-radius: 14px; margin-bottom: 22px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--vurgu-rgb),.12), rgba(var(--vurgu-acik-rgb),.04));
  border: 1px solid rgba(var(--vurgu-rgb),.18); color: var(--vurgu);
  position: relative;
}

/* Görselli büyük kartlar (anasayfa 4'lü) */
.buyuk-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.buyuk-kart {
  position: relative; border-radius: var(--yaricap); overflow: hidden;
  aspect-ratio: 4/5; border: 1px solid var(--cizgi); isolation: isolate;
}
.buyuk-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--gecis); z-index: -2; position: relative; }
.buyuk-kart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(185deg, transparent 35%, rgba(21,35,50,.88) 88%); z-index: -1; }
.buyuk-kart:hover img { transform: scale(1.07); }
.buyuk-kart-ic { position: absolute; inset-inline: 0; bottom: 0; padding: 28px; }
.buyuk-kart-ic h3 { font-size: 1.25rem; margin-bottom: 6px; color: #fff; }
.buyuk-kart-ic p { color: #cdd5df; font-size: .88rem; margin-bottom: 14px; }
.buyuk-kart-ic .git { color: var(--vurgu-acik); font-weight: 700; font-size: .86rem; display: inline-flex; align-items: center; gap: 7px; }
.buyuk-kart::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  border: 1.5px solid rgba(var(--vurgu-rgb),0); transition: border-color var(--gecis); pointer-events: none;
}
.buyuk-kart:hover::before { border-color: rgba(var(--vurgu-rgb),.4); }

/* İstatistik sayaçları */
.istatistik-band { background: var(--zemin-2); border-block: 1px solid var(--cizgi); position: relative; overflow: hidden; }
.istatistik-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(var(--vurgu-rgb),.04), transparent 70%); pointer-events: none; }
.istatistikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; padding-block: 64px; }
.istatistik { text-align: center; position: relative; }
.sayac { font-family: var(--baslik-fontu); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: var(--metin); }
.sayac .ek { color: var(--vurgu); }
.istatistik p { color: var(--metin-soluk); font-weight: 600; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }

/* CTA bandı */
.cta-bant {
  position: relative; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--vurgu-rgb), .09) 0%, rgba(var(--vurgu-rgb), .2) 60%), #fff;
  border: 1px solid var(--cizgi);
  padding: clamp(36px, 6vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta-bant::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 20%, rgba(var(--vurgu-rgb),.15), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(var(--vurgu-rgb),.08), transparent 40%);
  pointer-events: none;
}
.cta-bant h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); position: relative; }
.cta-bant p { color: var(--metin-soluk); margin-top: 10px; position: relative; max-width: 52ch; }
.cta-bant .dugme { position: relative; }

/* Sayfa üstü banner (iç sayfalar) */
.sayfa-hero {
  position: relative; padding: clamp(70px, 10vw, 120px) 0 clamp(44px, 6vw, 64px);
  background:
    radial-gradient(ellipse 70% 90% at 80% 0%, rgba(var(--vurgu-rgb),.06), transparent 60%),
    linear-gradient(180deg, #e8ecf2 0%, var(--zemin) 100%);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
}
.sayfa-hero::after {
  content: ''; position: absolute; inset: 0; opacity: .4;
  background-image: linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.sayfa-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; position: relative; }
.sayfa-hero p { color: var(--metin-soluk); margin-top: 12px; font-size: 1.05rem; position: relative; }
.kirilim { margin-bottom: 18px; font-size: .84rem; color: var(--metin-soluk); display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
/* Panelden gorsel yuklenmis sayfa basligi: fotograf + koyu kaplama */
.sayfa-hero-resimli { border-bottom: 0; padding-block: clamp(84px, 11vw, 140px) clamp(52px, 7vw, 76px); }
.sayfa-hero-resimli::after { display: none; }
.sayfa-hero-fon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.sayfa-hero-kaplama {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,16,26,.72) 0%, rgba(10,16,26,.55) 55%, rgba(10,16,26,.78) 100%),
    linear-gradient(90deg, rgba(10,16,26,.55) 0%, transparent 70%);
}
.sayfa-hero-resimli > .konteyner { position: relative; z-index: 2; }
.sayfa-hero-resimli h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sayfa-hero-resimli p { color: rgba(255,255,255,.88); }
.sayfa-hero-resimli .kirilim { color: rgba(255,255,255,.72); }
.sayfa-hero-resimli .kirilim a { color: rgba(255,255,255,.72); }
.sayfa-hero-resimli .kirilim a:hover { color: #fff; }
.sayfa-hero-resimli .kirilim span { color: #fff; }
.sayfa-hero-resimli .geri-donus { color: rgba(255,255,255,.85); }
.sayfa-hero-resimli .geri-donus:hover { color: #fff; }
/* Gradyan yazi koyu zeminde okunmuyordu; parlak tona cevrildi */
.sayfa-hero-resimli .gradyan-metin {
  background: none; -webkit-text-fill-color: currentColor; color: var(--vurgu-parlak);
}

.kirilim a:hover { color: var(--vurgu-acik); }
.kirilim span { color: var(--vurgu); }

/* İçerik düzenleri */
.iki-sutun { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; }
.makale h2 { font-size: 1.5rem; margin: 34px 0 14px; }
.makale h2:first-child { margin-top: 0; }
.makale p { color: var(--metin-soluk); margin-bottom: 16px; }
.makale strong, .makale b { color: var(--metin); }
.makale h3 { font-size: 1.16rem; margin: 30px 0 12px; }
.makale h3:first-child { margin-top: 0; }
.makale ul { margin-bottom: 18px; }
.makale ul li { color: var(--metin-soluk); padding-left: 26px; position: relative; margin-bottom: 10px; }
.makale ul li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--vurgu), var(--vurgu-acik)); rotate: 45deg; }

/* Yan panel */
.yan-panel { display: grid; gap: 22px; position: sticky; top: 100px; }
.panel-kart {
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 26px;
}
.panel-kart h3 { font-size: 1.05rem; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.panel-kart ul li a {
  display: block; padding: 10px 14px; border-radius: 10px; color: var(--metin-soluk);
  font-size: .92rem; font-weight: 600;
}
.panel-kart ul li a:hover { background: var(--vurgu-yumuşak); color: var(--vurgu-acik); }

/* Özellik kutuları */
.ozellikler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ozellik {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px;
  transition: border-color var(--gecis), transform var(--gecis);
}
.ozellik:hover { border-color: rgba(var(--vurgu-rgb),.25); transform: translateY(-3px); }
.ozellik svg { color: var(--vurgu); flex-shrink: 0; margin-top: 3px; }
.ozellik span { font-size: .9rem; color: var(--metin); font-weight: 500; }

/* Galeri */
.galeri-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* Telefonda tek sutunda her kare 270px yer kapliyor ve galeri sayfanin
   yarisini yutuyordu; iki sutuna gecince liste dortte birine iniyor. */
@media (max-width: 560px) {
  .galeri-izgara { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.galeri-oge {
  position: relative; border-radius: 14px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--cizgi); aspect-ratio: 4/3;
  padding: 0; background: none; font: inherit; width: 100%;
}
.galeri-oge img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gecis); }
.galeri-oge::after {
  content: '\1F50D'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.6rem; color: #fff; background: rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity var(--gecis);
}
.galeri-oge:hover::after { opacity: 1; }
.galeri-oge:hover img { transform: scale(1.08); }

/* Projeler */

.proje-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.proje-kart {
  border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi);
  background: var(--yuzey); cursor: pointer;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis), opacity var(--gecis);
}
.proje-kart.gizli { display: none; }
.proje-kart:hover { transform: translateY(-7px); border-color: rgba(var(--vurgu-rgb),.3); box-shadow: 0 30px 60px -22px rgba(0,0,0,.1); }
.proje-resim { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.proje-resim img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gecis); }
.proje-kart:hover .proje-resim img { transform: scale(1.07); }
.proje-etiketi {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #fff;
  color: var(--vurgu); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(var(--vurgu-rgb),.2);
}
.proje-bilgi { padding: 22px 24px; }
.proje-bilgi h3 { font-size: 1.1rem; margin-bottom: 7px; }
.proje-bilgi p { color: var(--metin-soluk); font-size: .89rem; margin-bottom: 14px; }
.proje-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--metin-soluk); }
.proje-meta span { display: inline-flex; align-items: center; gap: 5px; }
.proje-meta svg { color: var(--vurgu); }

/* Referanslar — logo duvari */
.ref-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.ref-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 16px;
  padding: 18px 18px 20px; color: inherit; text-decoration: none;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.ref-kart:hover { transform: translateY(-6px); border-color: rgba(var(--vurgu-rgb),.3); box-shadow: 0 22px 44px -30px rgba(0,0,0,.4); }
a.ref-kart:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 3px; }

/* Logo alani: firma logolari genis ve farkli oranli olur; hepsi ayni
   yukseklikteki beyaz kutuda ortalanir ki duvar hizali gorunsun. */
.ref-logo {
  height: 92px; width: 100%; margin-bottom: 14px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
}
.ref-logo img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .72; transition: filter var(--gecis), opacity var(--gecis);
}
a.ref-kart:hover .ref-logo img { filter: none; opacity: 1; }
/* Dokunmatik cihazda hover yok: logolar dogrudan renkli gorunsun */
@media (hover: none) { .ref-logo img { filter: none; opacity: 1; } }
/* Logosu olmayan firma icin bas harften rozet */
.ref-harf {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--baslik-fontu); font-size: 1.5rem; font-weight: 800; color: var(--vurgu);
  background: var(--vurgu-yumuşak); border: 1px solid var(--cizgi);
}
.ref-kart h3 { font-size: 1.02rem; line-height: 1.35; }
.ref-kart p {
  margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--vurgu);
  background: var(--vurgu-yumuşak); border-radius: 999px; padding: 4px 11px;
}
.ref-git {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: .78rem; font-weight: 700; color: var(--vurgu);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--gecis), transform var(--gecis);
}
a.ref-kart:hover .ref-git, a.ref-kart:focus-visible .ref-git { opacity: 1; transform: none; }
@media (hover: none) { .ref-git { opacity: 1; transform: none; } }

.ref-tumu { text-align: center; margin-top: 34px; }

/* Bayilik seridi */
.ref-bayilik {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  margin-top: 48px; padding: 26px 30px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
}
.ref-bayilik p { color: var(--metin-soluk); font-size: .92rem; margin-top: 6px; }
.ref-bayilik-logolar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ref-bayilik-logolar img { height: 38px; width: auto; }
@media (max-width: 620px) {
  .ref-bayilik { justify-content: center; text-align: center; }
  .ref-bayilik-logolar { justify-content: center; gap: 20px; }
}

/* Haberler */
/* ============================================================
   PROJELER — sol kenar cubuklu editoryal duzen
   ============================================================ */
.pr-duzen { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 1000px) { .pr-duzen { grid-template-columns: 1fr; gap: 26px; } }

/* Kenar cubugu sayfadan bagimsiz kaysin: uzun listede yanda bosluk kalmasin */
.pr-yan {
  position: sticky; top: 88px; max-height: calc(100vh - 112px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; scrollbar-width: thin;
}
.pr-yan::-webkit-scrollbar { width: 6px; }
.pr-yan::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 999px; }
.pr-yan::-webkit-scrollbar-thumb:hover { background: var(--metin-soluk); }
/* Iki sutunu ayiran ince cizgi */
.pr-duzen { position: relative; }
.pr-duzen::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 312px;
  width: 1px; background: var(--cizgi);
}
@media (max-width: 1000px) {
  .pr-yan { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .pr-duzen::before { display: none; }
}
.pr-yan-ac { display: none; }
@media (max-width: 1000px) {
  .pr-yan-ac {
    display: inline-flex; align-items: center; gap: 9px; width: 100%; justify-content: center;
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    padding: 13px 18px; font: inherit; font-weight: 700; color: var(--metin); cursor: pointer;
  }
  .pr-yan-ic { display: none; margin-top: 14px; }
  .pr-yan-ic.acik { display: block; }
}

.pr-suzgec { list-style: none; margin: 0; padding: 0; }
.panel-kart .pr-suzgec a,
.panel-kart .pr-suzgec .pr-secim {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600;
  color: var(--metin-soluk); transition: background var(--gecis), color var(--gecis);
}
.panel-kart .pr-suzgec a:hover { background: var(--yuzey-guclu); color: var(--metin); }
.panel-kart .pr-suzgec a.aktif,
.panel-kart .pr-suzgec .pr-secim.aktif { background: var(--vurgu-yumuşak); color: var(--vurgu); }
.panel-kart .pr-suzgec a span,
.panel-kart .pr-suzgec .pr-secim span {
  min-width: 24px; text-align: center; font-size: .76rem; font-weight: 700;
  background: var(--yuzey-guclu); color: var(--metin-soluk); border-radius: 999px; padding: 2px 7px;
}
.panel-kart .pr-suzgec a.aktif span,
.panel-kart .pr-suzgec .pr-secim.aktif span { background: var(--vurgu); color: #fff; }
/* Cok secim: kutu isaretlenince secim listeye eklenir */
.pr-kutu {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 4px;
  border: 1.5px solid var(--cizgi); background: #fff; margin-right: 2px;
  transition: background var(--gecis), border-color var(--gecis);
}
.panel-kart .pr-secim { justify-content: flex-start; gap: 9px; }
.panel-kart .pr-secim > span { margin-left: auto; }
/* Kutucuklar tiklaninca liste hemen degismesin: secim formda toplanir,
   'Secilenleri Getir' butonuna basilinca uygulanir. */
.panel-kart .pr-secim { cursor: pointer; position: relative; }
.panel-kart .pr-secim input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.panel-kart .pr-secim:hover { background: var(--yuzey-guclu); color: var(--metin); }
.panel-kart .pr-secim:has(input:focus-visible) .pr-kutu { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.pr-uygula { width: 100%; justify-content: center; margin-top: 12px; }
/* Suzgec sonrasi capaya donerken yapiskan menunun altinda kalmasin */
#prSonuc { scroll-margin-top: 96px; }

.panel-kart .pr-secim:has(input:checked) .pr-kutu {
  background: var(--vurgu); border-color: var(--vurgu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}
/* Projesi olmayan catı tipi: listede kalir ama tiklanmaz */
.panel-kart .pr-bos {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600;
  color: var(--metin-soluk); opacity: .45; cursor: default;
}
.panel-kart .pr-bos span {
  min-width: 24px; text-align: center; font-size: .76rem; font-weight: 700;
  background: var(--yuzey-guclu); color: var(--metin-soluk); border-radius: 999px; padding: 2px 7px;
}
/* Yillar tek satira sigsin diye rozet degil, kompakt etiket */
.pr-yil { display: flex; flex-wrap: wrap; gap: 7px; }
.panel-kart .pr-yil a { padding: 7px 13px; border: 1px solid var(--cizgi); font-size: .85rem; }
.panel-kart .pr-yil a.aktif { background: var(--vurgu); color: #fff; border-color: transparent; }

.pr-yan-cta { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; }

.pr-ustbilgi {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--cizgi);
}
.pr-ustbilgi p { margin: 0; font-size: .9rem; color: var(--metin-soluk); }
.pr-ustbilgi strong { color: var(--metin); font-size: 1.05rem; }

.pr-liste { display: grid; gap: 30px; }
.pr-satir {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap); overflow: hidden;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.pr-satir:hover { border-color: rgba(var(--vurgu-rgb),.3); box-shadow: 0 26px 50px -34px rgba(0,0,0,.4); }
/* Tek/cift satirlarda gorsel yer degistirsin: liste tekduze akmasin */
.pr-satir:nth-child(even) .pr-kapak { order: 2; }

.pr-kapak { position: relative; display: block; overflow: hidden; background: var(--zemin-2); min-height: 280px; }
.pr-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--gecis); }
.pr-satir:hover .pr-kapak img { transform: scale(1.05); }
.pr-rozet {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: #fff; color: var(--vurgu); border-radius: 999px; padding: 5px 12px;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
/* Bir projede birden fazla sistem olabilir: rozetler yan yana dizilir */
.pr-rozetler {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px);
}
.pr-rozetler .pr-rozet { position: static; left: auto; top: auto; }
.pr-suzgec-ipucu { font-size: .78rem; color: var(--metin-soluk); margin: -4px 0 12px; line-height: 1.5; }
/* ============================================================
   BIZDEN HABERLER — manset + kucuk kartlar + kenar cubugu
   (blogdan farkli: blogda genis satir kartlar var)
   ============================================================ */
.bh-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.bh-ana { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.bh-yan { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px) { .bh-duzen { grid-template-columns: 1fr; gap: 34px; } }

/* Manset: en yeni haber, fotograf uzerine yazi */
.bh-manset {
  position: relative; display: block; border-radius: var(--yaricap); overflow: hidden;
  border: 1px solid var(--cizgi); color: inherit; text-decoration: none;
  min-height: 340px;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
a.bh-manset:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.bh-manset > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-manset-kaplama {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,16,26,.15) 0%, rgba(10,16,26,.55) 45%, rgba(10,16,26,.88) 100%);
}
.bh-manset-ic { position: relative; z-index: 2; padding: 30px 32px; margin-top: 150px; }
.bh-rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bh-rozet-son, .bh-rozet {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.bh-rozet-son { background: var(--vurgu); color: #fff; }
.bh-rozet { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.bh-manset-ic h2 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.25; }
.bh-manset-ic p { color: rgba(255,255,255,.85); margin-top: 10px; font-size: .96rem; max-width: 60ch; }
.bh-manset-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px;
  color: rgba(255,255,255,.75); font-size: .84rem;
}
.bh-manset-alt .kart-link { color: #fff; }

/* Kucuk haber kartlari: 2 sutun */
.bh-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 620px) { .bh-izgara { grid-template-columns: 1fr; } }
.bh-kart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  color: inherit; text-decoration: none;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.bh-kart:hover { transform: translateY(-5px); border-color: rgba(var(--vurgu-rgb),.3); box-shadow: 0 24px 48px -30px rgba(0,0,0,.45); }
.bh-kart-resim { position: relative; }
.bh-kart-resim img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.bh-kart-etiket {
  position: absolute; left: 12px; top: 12px;
  background: #fff; color: var(--vurgu); border-radius: 999px; padding: 4px 11px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.bh-kart-ic { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.bh-kart-ic h3 { font-size: 1.05rem; line-height: 1.4; margin: 8px 0 8px; }
.bh-kart-ic p { color: var(--metin-soluk); font-size: .9rem; line-height: 1.65; }
.bh-kart-ic .kart-link { display: inline-flex; margin-top: auto; padding-top: 14px; }

/* ============================================================
   ANASAYFA SON HABER — tek buyuk kart (proje satirlari gibi)
   ============================================================ */
.son-haber-blok {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yaricap); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.son-haber-blok:hover {
  transform: translateY(-5px); border-color: rgba(var(--vurgu-rgb),.3);
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.42);
}
.shb-resim { position: relative; }
.shb-resim img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.shb-etiket {
  position: absolute; left: 16px; top: 16px;
  background: #fff; color: var(--vurgu); border-radius: 999px; padding: 6px 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.shb-govde {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(26px, 4vw, 46px);
}
.shb-govde h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.3; margin: 10px 0 12px; }
.shb-govde p { color: var(--metin-soluk); font-size: 1rem; line-height: 1.75; }
.shb-govde .kart-link { display: inline-flex; align-self: flex-start; margin-top: 22px; font-size: .92rem; }
.son-haber-blok:hover .kart-link svg { transform: translateX(4px); }
@media (max-width: 860px) {
  .son-haber-blok { grid-template-columns: 1fr; }
  .shb-resim img { min-height: 220px; aspect-ratio: 16/9; }
}

/* ============================================================
   ANASAYFA BLOG & HABERLER — sol 2x2 blog, sag dikey haber
   ============================================================ */
.ab-guncel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.ab-guncel.tek { grid-template-columns: 1fr; }
.ab-guncel-sol, .ab-guncel-sag { display: flex; flex-direction: column; }
.ab-blog-izgara { display: grid; grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr)); gap: 20px; }
.ab-arsiv-link { text-align: center; margin-top: 26px; margin-bottom: 0; }
/* Sag dikey haber karti: gorsel ustte, govde altta; sol izgarayla ayni boyda durur */
.ab-haber {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  color: inherit; text-decoration: none;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.ab-haber:hover { transform: translateY(-5px); border-color: rgba(var(--vurgu-rgb),.3); box-shadow: 0 24px 48px -30px rgba(0,0,0,.45); }
.ab-haber-resim { position: relative; flex: 1; min-height: 260px; }
.ab-haber-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-haber-govde { display: flex; flex-direction: column; padding: 24px 26px 26px; }
.ab-haber-govde h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.35; margin: 8px 0 10px; }
.ab-haber-govde p { color: var(--metin-soluk); font-size: .94rem; line-height: 1.7; }
.ab-haber-govde .kart-link { display: inline-flex; align-self: flex-start; margin-top: 16px; }
a.ab-haber:hover .kart-link svg { transform: translateX(4px); }
/* Dar ekran: tek sutun, once haber sonra makaleler; izgara tekli olur */
@media (max-width: 900px) {
  .ab-guncel { grid-template-columns: 1fr; gap: 34px; }
  .ab-guncel-sag { order: -1; }
  .ab-haber-resim { min-height: 220px; }
}
@media (max-width: 560px) {
  .ab-blog-izgara { grid-template-columns: 1fr; }
}

/* Bu bolum cok iri duruyordu: gorseller ve yazilar kompaktlastirildi (yalniz anasayfa) */
.ab-guncel .bh-kart-resim img { aspect-ratio: auto; height: 172px; }
.ab-guncel .bh-kart-ic { padding: 14px 16px 16px; }
.ab-guncel .bh-kart-ic h3 { font-size: .98rem; margin: 6px 0 6px; }
.ab-guncel .bh-kart-ic p { font-size: .84rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ab-guncel .bh-kart-ic .kart-link { padding-top: 10px; font-size: .82rem; }
.ab-haber-resim { min-height: 172px; }
.ab-haber-govde { padding: 16px 18px 18px; }
.ab-haber-govde h3 { font-size: clamp(1.05rem, 1.5vw, 1.22rem); margin: 6px 0 8px; }
.ab-haber-govde p { font-size: .86rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ab-haber-govde .kart-link { font-size: .84rem; }
.ab-arsiv-link { margin-top: 20px; }

.pr-foto {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: rgba(17,26,38,.72); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: .74rem; font-weight: 600;
}

.pr-govde { padding: 30px 32px; display: flex; flex-direction: column; }
.pr-no { font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: var(--vurgu); margin-bottom: 10px; }
.pr-govde h2 { font-size: 1.32rem; line-height: 1.3; margin-bottom: 10px; }
.pr-govde h2 a { color: inherit; }
.pr-govde h2 a:hover { color: var(--vurgu); }
.pr-aciklama { color: var(--metin-soluk); font-size: .93rem; margin-bottom: 16px; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pr-meta span {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  color: var(--metin-soluk); background: var(--yuzey-guclu); border-radius: 999px; padding: 6px 12px;
}
.pr-meta svg { opacity: .6; flex-shrink: 0; }
.pr-serit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.pr-serit a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--cizgi); }
.pr-serit img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: opacity var(--gecis); }
.pr-serit a:hover img { opacity: .8; }
.pr-git { margin-top: auto; align-self: flex-start; }

@media (max-width: 760px) {
  .pr-satir { grid-template-columns: 1fr; }
  .pr-satir:nth-child(even) .pr-kapak { order: 0; }
  .pr-kapak { min-height: 0; aspect-ratio: 16/10; }
  .pr-govde { padding: 24px 22px; }
  .pr-govde h2 { font-size: 1.18rem; }
}

/* ============================================================
   BLOG — liste, kenar cubugu ve yazi sayfasi
   ============================================================ */
.blog-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px 44px; align-items: stretch; }
.blog-liste { grid-column: 1; grid-row: 1; }
.blog-yan   { grid-column: 2; grid-row: 1; }
.sayfalama  { grid-column: 1; grid-row: 2; }
@media (max-width: 980px) { .blog-duzen { grid-template-columns: 1fr; gap: 34px; } }

.blog-liste { display: flex; flex-direction: column; gap: 26px; }
/* Sayfa doluyken kartlar kenar cubugu boyuna uzar; son kartin alti yan sutunla ayni hizada biter */
.blog-liste.doldur > .blog-kart { flex: 1 1 auto; }
.blog-kart {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  overflow: hidden; color: inherit; text-decoration: none;
  box-shadow: 0 10px 30px -24px rgba(0,0,0,.35);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.blog-kart:hover { transform: translateY(-4px); border-color: rgba(var(--vurgu-rgb),.32); box-shadow: 0 24px 46px -28px rgba(0,0,0,.32); }
a.blog-kart:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 3px; }
/* Son sayfada tek kart kalinca kart kucuk goruniyordu; iki sutunlu duzende
   her kart en az dolu sayfadaki kadar yuksek olur, sayfalar arasi fark kalkar. */
@media (min-width: 621px) { .blog-kart { min-height: 320px; } }

@media (max-width: 620px) { .blog-kart { grid-template-columns: 1fr; } }

.blog-kart-resim { position: relative; min-height: 100%; overflow: hidden; background: var(--zemin-2); }
.blog-kart-resim img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--gecis); }
a.blog-kart:hover .blog-kart-resim img { transform: scale(1.05); }
.blog-etiket {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: #fff; color: var(--vurgu); border: 1px solid var(--cizgi);
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
@media (max-width: 620px) { .blog-kart-resim { min-height: 0; aspect-ratio: 16/9; } }
.blog-kart-ic { padding: 24px 26px; display: flex; flex-direction: column; }
.blog-kart-ic h2 { font-size: 1.2rem; margin: 8px 0 10px; }
.blog-kart-ic p { color: var(--metin-soluk); font-size: .93rem; margin-bottom: 14px; }
.blog-kart-ic .kart-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; }

/* Sayfa kutucuklari */
.sayfalama { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Projeler listesinde sayfalama listenin altinda kendi satirinda durur */
.pr-ana .sayfalama { margin-top: 34px; }
.pr-sayfa-bilgi { margin-left: 10px; color: var(--metin-soluk); font-size: .84rem; }

.sayfa-kutu {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 10px;
  font-size: .92rem; font-weight: 700; color: var(--metin-soluk);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
a.sayfa-kutu:hover { color: var(--vurgu); border-color: rgba(var(--vurgu-rgb),.35); transform: translateY(-2px); }
a.sayfa-kutu:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 2px; }
.sayfa-kutu.aktif { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.sayfa-kutu.pasif { opacity: .35; }

/* Kenar cubugu */
.blog-yan { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 980px) {
  .blog-duzen { align-items: start; }
  .blog-liste, .blog-yan, .sayfalama { grid-column: 1; grid-row: auto; }
  .blog-liste.doldur > .blog-kart { flex: 0 0 auto; }
}
.blog-kat-liste, .blog-son-liste { list-style: none; margin: 0; padding: 0; }
.panel-kart .blog-kat-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600;
  color: var(--metin-soluk); transition: background var(--gecis), color var(--gecis);
}
.panel-kart .blog-kat-liste a:hover { background: var(--yuzey-guclu); color: var(--metin); }
.panel-kart .blog-kat-liste a.aktif { background: var(--vurgu-yumuşak); color: var(--vurgu); }
.panel-kart .blog-kat-liste a span {
  min-width: 24px; text-align: center; font-size: .76rem; font-weight: 700;
  background: var(--yuzey-guclu); color: var(--metin-soluk); border-radius: 999px; padding: 2px 7px;
}
.panel-kart .blog-kat-liste a.aktif span { background: var(--vurgu); color: #fff; }
.blog-son-liste li { padding: 11px 0; border-bottom: 1px dashed var(--cizgi); }
.blog-son-liste li:last-child { border-bottom: 0; }
.panel-kart .blog-son-liste a, .panel-kart .blog-son-liste span { display: block; font-size: .9rem; font-weight: 600; line-height: 1.45; }
.panel-kart .blog-son-liste a:hover { color: var(--vurgu); }
.blog-son-liste time { display: block; font-size: .76rem; color: var(--metin-soluk); margin-top: 4px; }

/* Kenar cubugunda kategoriye tiklayinca yazi basliklari acilir */
.kat-acilir summary {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600;
  color: var(--metin-soluk); cursor: pointer; list-style: none;
  transition: background var(--gecis), color var(--gecis);
}
.kat-acilir summary::-webkit-details-marker { display: none; }
.kat-acilir summary:hover { background: var(--yuzey-guclu); color: var(--metin); }
.kat-acilir summary.aktif { background: var(--vurgu-yumuşak); color: var(--vurgu); }
.kat-ad { flex: 1; min-width: 0; }
.kat-acilir summary > span:last-child {
  min-width: 24px; text-align: center; font-size: .76rem; font-weight: 700;
  background: var(--yuzey-guclu); color: var(--metin-soluk); border-radius: 999px; padding: 2px 7px;
}
.kat-acilir summary.aktif > span:last-child { background: var(--vurgu); color: #fff; }
.kat-ok { display: inline-flex; flex-shrink: 0; margin-right: 2px; transition: transform var(--gecis); }
.kat-acilir[open] > summary .kat-ok { transform: rotate(90deg); }
.kat-acilir[open] > summary { color: var(--metin); }
.kat-yazilar { list-style: none; margin: 4px 0 10px; padding: 0 0 0 26px; display: grid; gap: 2px; }
.kat-yazilar li { border-left: 2px solid var(--cizgi); padding-left: 12px; }
.kat-yazilar a, .kat-yazilar span {
  display: block; padding: 7px 0; font-size: .86rem; font-weight: 600;
  color: var(--metin-soluk); line-height: 1.45;
}
.kat-yazilar a:hover { color: var(--vurgu); }
/* Okunmakta olan yazi kenar cubugunda belli olsun */
.kat-yazilar li.okunan { border-left-color: var(--vurgu); }
.kat-yazilar li.okunan span { color: var(--vurgu); }
.kat-yazilar .kat-tumu { border-left-color: transparent; }
.kat-yazilar .kat-tumu a { color: var(--vurgu); font-size: .82rem; }

/* Teklif karti en alta yaslanir: kisa kenar cubugunda da alt hiza korunur */
.blog-yan-cta { flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; margin-top: auto; }

/* Yazi sayfasi */
.yazi-ustbilgi { font-size: .9rem; color: var(--metin-soluk); }
.yazi-ustbilgi a { color: var(--vurgu); font-weight: 600; }
.blog-yazi-kapak { width: 100%; height: auto; border-radius: var(--yaricap); display: block; margin-bottom: 28px; }
.blog-yazi-ozet { font-size: 1.1rem; line-height: 1.75; color: var(--metin); font-weight: 500; margin-bottom: 20px; }
.blog-paylas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--cizgi);
}
.paylas-etiket { font-size: .86rem; font-weight: 700; color: var(--metin-soluk); margin-right: 4px; }

/* Paylasim dugmeleri: duz baglanti gibi gorunuyordu, marka renkleriyle dugmelestirildi */
.paylas-dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: #fff;
  font-size: .88rem; font-weight: 700; color: var(--metin);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis),
              transform var(--gecis), box-shadow var(--gecis);
}
.paylas-dugme svg { flex-shrink: 0; transition: transform var(--gecis); }
.paylas-dugme:hover, .paylas-dugme:focus-visible {
  color: #fff; border-color: transparent; transform: translateY(-3px);
}
.paylas-dugme:hover svg { transform: scale(1.12); }
.paylas-dugme:focus-visible { outline: 3px solid var(--vurgu-acik); outline-offset: 3px; }
.paylas-dugme:active { transform: translateY(-1px); }

.paylas-dugme.wa { color: #128c7e; border-color: rgba(18,140,126,.3); }
.paylas-dugme.wa:hover, .paylas-dugme.wa:focus-visible { background: #25d366; color: #fff; box-shadow: 0 12px 24px -12px rgba(18,140,126,.85); }
.paylas-dugme.fb { color: #1877f2; border-color: rgba(24,119,242,.3); }
.paylas-dugme.fb:hover, .paylas-dugme.fb:focus-visible { background: #1877f2; color: #fff; box-shadow: 0 12px 24px -12px rgba(24,119,242,.85); }
.paylas-dugme.x { color: #0f1419; border-color: rgba(15,20,25,.24); }
.paylas-dugme.x:hover, .paylas-dugme.x:focus-visible { background: #0f1419; color: #fff; box-shadow: 0 12px 24px -12px rgba(15,20,25,.8); }

@media (max-width: 460px) { .paylas-dugme { padding: 10px 14px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) {
  .paylas-dugme, .paylas-dugme:hover, .paylas-dugme svg, .paylas-dugme:hover svg { transform: none; }
}

/* auto-fit ile tek haber varken kart tum genislige yayilip gorsel siserdi */
.haber-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.haber-tarih { display: block; }
.haber-kart { border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi); background: var(--yuzey); transition: transform var(--gecis), border-color var(--gecis); }
.haber-kart:hover { transform: translateY(-6px); border-color: rgba(var(--vurgu-rgb),.3); }
.haber-resim { aspect-ratio: 16/9; overflow: hidden; }
.haber-resim img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.haber-kart:hover .haber-resim img { transform: scale(1.06); }
.haber-ic { padding: 24px; }
.haber-tarih { font-size: .78rem; color: var(--vurgu-acik); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.haber-ic h3 { font-size: 1.12rem; margin: 10px 0 8px; }
.haber-ic p { color: var(--metin-soluk); font-size: .9rem; }

/* Formlar */
.form-alani { display: grid; gap: 18px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alan label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 8px; color: var(--metin); }
.alan input, .alan textarea, .alan select {
  width: 100%; padding: 14px 18px; border-radius: 12px;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  color: var(--metin); font-family: inherit; font-size: .95rem;
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.alan input::placeholder, .alan textarea::placeholder { color: #8899aa; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none; border-color: var(--vurgu); background: var(--zemin-2);
  box-shadow: 0 0 0 4px rgba(var(--vurgu-rgb),.12);
}
.alan textarea { resize: vertical; min-height: 130px; }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }
.uyari-ok { padding: 16px 22px; border-radius: 12px; background: rgba(53, 190, 120, .08); border: 1px solid rgba(53,190,192,.25); color: #2e7d4f; font-weight: 600; }
.uyari-hata { padding: 16px 22px; border-radius: 12px; background: rgba(235, 87, 87, .08); border: 1px solid rgba(235,87,87,.25); color: #c62828; font-weight: 600; }

/* İletişim */
.iletisim-duzen { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.iletisim-kutusu { display: grid; gap: 16px; }
.iletisim-satir {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 20px;
}
.iletisim-satir .ikon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--vurgu-rgb),.1), rgba(var(--vurgu-acik-rgb),.03));
  border: 1px solid rgba(var(--vurgu-rgb),.15); color: var(--vurgu);
}
.iletisim-satir h3 { font-size: .98rem; margin-bottom: 4px; }
.iletisim-satir p, .iletisim-satir a { color: var(--metin-soluk); font-size: .92rem; word-break: break-word; }
.iletisim-satir a:hover { color: var(--vurgu-acik); }
.harita {
  border-radius: var(--yaricap); overflow: hidden;
  border: 1px solid var(--cizgi); margin-top: 40px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.15);
  filter: grayscale(.2) saturate(.92) brightness(1.04);
}
.harita iframe { display: block; width: 100%; border: 0; }

/* Teklif sayfası adımları */
.adimlar { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }
.adim { display: flex; align-items: center; gap: 10px; color: var(--metin-soluk); font-size: .88rem; font-weight: 600; }
.adim .no {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vurgu-yumuşak); color: var(--vurgu-acik);
  font-family: var(--baslik-fontu); font-weight: 800; font-size: .85rem;
  border: 1px solid rgba(var(--vurgu-rgb),.3);
}

/* ============================================================
   ALTBİLGİ
   ============================================================ */
.altbilgi { background: #101828; border-top: 1px solid rgba(255,255,255,.08); margin-top: 96px; color: #c8cdd6; }
.altbilgi-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding-block: 68px 52px; }
.altbilgi-kolon h3 { font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #e8ecf2; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.altbilgi-kolon h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--vurgu), var(--vurgu-acik)); }
.altbilgi-kolon p { color: #9aa5b5; font-size: .92rem; margin-bottom: 14px; }
.altbilgi-tel a { display: inline-block; color: #9aa5b5; font-weight: 600; font-size: .95rem; }
.altbilgi-tel a:hover { color: var(--vurgu-acik); }
.altbilgi-kolon address { font-style: normal; color: #9aa5b5; font-size: .92rem; margin-bottom: 16px; }
.altbilgi-kolon ul li a { display: inline-block; color: #9aa5b5; font-size: .92rem; padding: 5px 0; }
.altbilgi-kolon ul li a:hover { color: var(--vurgu-acik); padding-left: 6px; }
.sosyal { display: flex; gap: 10px; }
.sosyal a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #9aa5b5;
  transition: all var(--gecis);
}
.sosyal a:hover { background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu)); color: #fff; border-color: transparent; transform: translateY(-4px); }
.altbilgi-alt { border-top: 1px solid rgba(255,255,255,.08); padding-block: 22px; color: #98a2b3; }
.altbilgi-alt p { text-align: center; color: #98a2b3; font-size: .84rem; }

/* ============================================================
   WHATSAPP + LIGHTBOX
   ============================================================ */
.whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 0; margin: 0; line-height: 0;
  background: linear-gradient(135deg, #35be78, #1f9e5f);
  color: #fff; box-shadow: 0 14px 34px -8px rgba(31, 158, 95, .6);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.whatsapp:hover { transform: scale(1.12); box-shadow: 0 18px 40px -8px rgba(31, 158, 95, .75); }
.whatsapp svg { display: block; flex-shrink: 0; animation: nabiz-w 2.4s infinite; }
@keyframes nabiz-w { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 11, 15, .94); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 4vh 4vw;
}
.lightbox figure { max-width: min(1000px, 92vw); }
.lightbox img { max-height: 78vh; width: auto; max-width: 100%; border-radius: 14px; margin-inline: auto; box-shadow: 0 40px 90px -20px rgba(0,0,0,.9); }
.lightbox figcaption { text-align: center; color: #b9c2cf; margin-top: 16px; font-size: .92rem; }
.lightbox button {
  position: absolute; background: rgba(255,255,255,.07); border: 1px solid var(--cizgi);
  color: #fff; border-radius: 12px; width: 48px; height: 48px; font-size: 1.3rem;
  display: grid; place-items: center; transition: background var(--gecis), transform var(--gecis);
}
.lightbox button:hover { background: rgba(var(--vurgu-rgb),.85); transform: scale(1.08); }
.lightbox-kapat { top: 20px; right: 20px; }
.lightbox-once { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox-sonra { right: 16px; top: 50%; translate: 0 -50%; }
[hidden] { display: none !important; }

/* ============================================================
   ANİMASYONLAR (scroll reveal)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1); }
.reveal.gorundu { opacity: 1; transform: none; }
.reveal[data-gecikme="1"] { transition-delay: .1s; }
.reveal[data-gecikme="2"] { transition-delay: .2s; }
.reveal[data-gecikme="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-ic { grid-template-columns: 1fr; gap: 70px; padding-block: 64px 90px; }
  .hero-gorsel { max-width: 560px; }
  .iki-sutun, .iletisim-duzen { grid-template-columns: 1fr; }
  .yan-panel { position: static; }
  .altbilgi-izgara { grid-template-columns: 1fr 1fr; }
}

/* Yatay menu 1024px'in altinda sigmiyor ve sayfayi yatayda tasiriyordu;
   tablet ve dar dizustunde de acilir menuye geciyoruz. */
@media (max-width: 1024px) {
  .tel-quick { display: none; }
  .hamburger { display: flex; }
  .menu {
    position: fixed; inset: 76px 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(20px);
    padding: 18px 5% 30px; border-bottom: 1px solid var(--cizgi);
    max-height: calc(100vh - 76px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: all var(--gecis);
  }
  .menu.acik { transform: none; opacity: 1; visibility: visible; }
  .menu > a, .acilir-dugme { padding: 14px 16px; border-radius: 12px; font-size: 1rem; justify-content: space-between; }
  .acilir-menu {
    position: static; translate: none; transform: none;
    opacity: 1; visibility: visible; box-shadow: none; border: 0;
    background: transparent; padding: 0 0 6px 14px; display: none;
  }
  .acilir:hover .acilir-menu { display: block; }
  .acilir.acik .acilir-menu { display: block; }
  .acilir-menu::before { display: none; }
}

@media (max-width: 640px) {
  .bolum { padding-block: 68px; }
  .form-satir { grid-template-columns: 1fr; }
  .altbilgi-izgara { grid-template-columns: 1fr; gap: 34px; }
  .yuzen-kart { left: 12px; bottom: -20px; padding: 13px 18px; }
  .guven-ic { justify-content: center; }
  .hero :is(h1, .hero-baslik) br { display: none; }
}

/* ============================================================
   SÜREÇ / YORUMLAR / SSS (Aşama 1)
   ============================================================ */

/* ---- 4 adımlı süreç ---- */
.surec-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.surec-adim {
  position: relative; text-align: center;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 34px 22px 28px;
  transition: transform var(--gecis), border-color var(--gecis);
}
.surec-adim:hover { transform: translateY(-6px); border-color: rgba(var(--vurgu-rgb),.4); }
.surec-adim:not(:last-child)::after {
  content: ''; position: absolute; top: 62px; right: -18px; width: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--vurgu) 0 4px, transparent 4px 8px);
}
.surec-no {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--baslik-fontu); font-weight: 800; font-size: 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu));
  box-shadow: 0 10px 26px -8px rgba(var(--vurgu-rgb),.55);
}
.surec-adim h3 { font-size: 1.05rem; margin-bottom: 8px; }
.surec-adim p { color: var(--metin-soluk); font-size: .88rem; }
@media (max-width: 900px) {
  .surec-izgara { grid-template-columns: 1fr 1fr; }
  .surec-adim:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .surec-izgara { grid-template-columns: 1fr; }
  .surec-adim::after { display: none !important; }
}

/* Adimlarin altindaki cagri seridi: kartlarla ayni izgaraya oturur,
   ustunden inen kesik cizgi 4. adimdan sonraki dogal devami hissettirir. */
.surec-cta {
  position: relative; margin-top: 46px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px 32px;
  padding: clamp(24px, 3.4vw, 34px) clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  background:
    radial-gradient(circle at 92% 15%, var(--vurgu-yumuşak), transparent 55%),
    linear-gradient(135deg, var(--yuzey) 0%, #fff 65%);
  box-shadow: 0 22px 48px -34px rgba(0,0,0,.45);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.surec-cta::before {
  content: ''; position: absolute; left: 50%; top: -24px; width: 2px; height: 24px;
  background: repeating-linear-gradient(180deg, var(--vurgu) 0 4px, transparent 4px 8px);
}
.surec-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 3px 0 0 var(--vurgu);
}
.surec-cta:hover { border-color: var(--vurgu-acik); box-shadow: 0 26px 52px -32px rgba(0,0,0,.5); }
.surec-cta-yazi { flex: 1 1 340px; min-width: 0; }
.surec-cta-yazi h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); margin-bottom: 8px; }
.surec-cta-yazi p { color: var(--metin-soluk); font-size: .92rem; max-width: 56ch; margin: 0; }
.surec-cta-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
@media (max-width: 700px) {
  .surec-cta { text-align: center; justify-content: center; }
  .surec-cta::after { box-shadow: inset 0 3px 0 var(--vurgu); }
  .surec-cta-yazi p { margin-inline: auto; }
  .surec-cta-dugmeler { width: 100%; }
  .surec-cta-dugmeler .dugme { flex: 1 1 190px; justify-content: center; }
}

/* ---- Müşteri yorumları — Carousel ---- */
.yorum-carouser-wrap {
  overflow: hidden;
  padding: 10px 0 30px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.yorum-carouser {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: kaydir 40s linear infinite;
}
.yorum-carouser:hover,
.yorum-carouser.duraklat {
  animation-play-state: paused;
}
@keyframes kaydir {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.yorum-karti {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  width: 340px;
  padding: 28px 24px;
  background: var(--yuzey-guclu);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.yorum-karti:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--vurgu-rgb),.35);
  box-shadow: 0 12px 36px -10px rgba(var(--vurgu-rgb),.15);
}

.yorum-karti .ust {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.yorum-yildizlar { color: #ffb400; letter-spacing: 2px; font-size: .92rem; }
.yorum-google-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; font-weight: 600; color: var(--metin-soluk);
  background: rgba(0,0,0,.03); border: 1px solid var(--cizgi);
  border-radius: 999px; padding: 3px 8px;
}
.yorum-google-badge svg { width: 12px; height: 12px; }
.yorum-metin {
  color: var(--metin); font-size: .9rem; line-height: 1.7;
  flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.yorum-alt {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--cizgi);
}
.yorum-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--vurgu-rgb),.25), rgba(var(--vurgu-acik-rgb),.1));
  border: 1.5px solid rgba(var(--vurgu-rgb),.3);
  color: var(--vurgu); font-family: var(--baslik-fontu); font-weight: 800; font-size: .88rem;
}
.yorum-alt .bilgi strong { display: block; font-size: .88rem; color: var(--metin); }
.yorum-alt .bilgi span { color: var(--metin-soluk); font-size: .74rem; }

.yorumlar-orta {
  text-align: center; margin-top: 34px;
  color: var(--metin-soluk); font-size: .92rem;
}

/* --- Google yorum butonu (tumunu gor) --- */
.yorum-maps-dugme {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 999px;
  border: 1.5px solid var(--cizgi); background: #fff; color: var(--metin);
  font-weight: 700; font-size: .92rem; text-decoration: none;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.28);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s;
}
.yorum-maps-dugme svg { flex-shrink: 0; }
.yorum-maps-dugme .ok { color: #4285F4; font-weight: 800; transition: transform .22s; }
.yorum-maps-dugme:hover {
  transform: translateY(-3px);
  border-color: rgba(66,133,244,.5);
  box-shadow: 0 16px 34px -14px rgba(66,133,244,.45);
}
.yorum-maps-dugme:hover .ok { transform: translateX(5px); }

/* --- Tiklanabilir yorum karti --- */
.yorum-karti.tiklanir { position: relative; cursor: pointer; }
.yorum-kart-ortu { position: absolute; inset: 0; z-index: 3; border-radius: 18px; }
.yorum-karti.tiklanir:hover {
  transform: translateY(-8px);
  border-color: rgba(66,133,244,.45);
  box-shadow: 0 20px 46px -14px rgba(66,133,244,.28);
}
.yorum-karti.tiklanir::after {
  content: attr(data-gor) " \2197";
  position: absolute; top: 22px; right: 20px; z-index: 4;
  font-size: .68rem; font-weight: 700; color: #4285F4;
  background: rgba(66,133,244,.1); border: 1px solid rgba(66,133,244,.3);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.yorum-karti.tiklanir:hover::after { opacity: 1; transform: translateY(0); }
.yorum-karti.tiklanir:hover .yorum-google-badge { opacity: 0; transition: opacity .2s; }


@media (max-width: 768px) {
  .yorum-karti { width: 280px; padding: 22px 18px; }
  .yorum-carouser { gap: 16px; animation-duration: 30s; }
}

/* ---- SSS akordiyon ---- */
.sss-liste { max-width: 800px; margin-inline: auto; display: grid; gap: 12px; }
.sss-liste details {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
  overflow: hidden; transition: border-color var(--gecis), background var(--gecis);
}
.sss-liste details[open] { border-color: rgba(var(--vurgu-rgb),.45); background: var(--yuzey-guclu); }
.sss-liste summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 19px 54px 19px 22px; position: relative;
  font-weight: 700; font-size: .97rem;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vurgu-yumuşak); color: var(--vurgu-acik);
  font-weight: 700; transition: rotate var(--gecis), background var(--gecis);
}
.sss-liste details[open] summary::after { content: '\2212'; rotate: 180deg; background: var(--vurgu); color: #fff; }
.sss-cevap { padding: 0 22px 20px; color: var(--metin-soluk); font-size: .92rem; line-height: 1.75; }

/* ---- Garanti bandı ---- */
.garanti-bant {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 130% at 15% 0%, rgba(var(--vurgu-rgb),.1), transparent 55%),
    linear-gradient(135deg, rgba(var(--vurgu-rgb), .12), rgba(var(--vurgu-rgb), .26)), #fff;
  border: 1px solid rgba(var(--vurgu-rgb),.2); border-radius: 20px;
  padding: clamp(26px, 4vw, 40px) clamp(24px, 5vw, 56px);
}
.garanti-bant svg { color: var(--vurgu); filter: drop-shadow(0 6px 16px rgba(var(--vurgu-rgb),.2)); }
.garanti-yazi h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.garanti-yazi h3 .gradyan-metin { font-size: 1.9em; vertical-align: middle; margin-right: 8px; }
.garanti-yazi p { color: var(--metin-soluk); font-size: .92rem; }

/* Proje kartı fotoğraf sayacı */
.proje-foto-sayisi {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: #fff;
  color: var(--metin); font-size: .74rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cizgi);
}
a.proje-kart { display: block; color: inherit; }


/* ============================================================
   PROJE DETAY — KENDI GALERI SEMAMIZ (carousel)
   ============================================================ */
.galeri-carousel { max-width: 980px; margin-inline: auto; }
.gc-sahne {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--cizgi); background: #e8ecf2;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.15);
}
.gc-sahne img {
  width: 100%; aspect-ratio: 16/9; min-height: 300px; object-fit: cover; display: block;
  transition: opacity .25s ease;
}
.gc-ok {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92); color: var(--metin);
  font-size: 1.05rem; display: grid; place-items: center; cursor: pointer;
  transition: background var(--gecis), transform var(--gecis);
}
.gc-ok:hover { background: var(--vurgu); transform: translateY(-50%) scale(1.08); }
.gc-ok:active { transform: translateY(-50%) scale(.95); }
.gc-once { left: 16px; }
.gc-sonra { right: 16px; }
.gc-sayar {
  position: absolute; right: 16px; bottom: 14px; z-index: 3;
  background: #fff;
  color: var(--metin); font-size: .8rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--cizgi);
}
.gc-rozetler {
  position: absolute; left: 16px; bottom: 14px; z-index: 3;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.gc-rozetler .rozet { margin: 0; background: #fff; }
.gc-thumbler {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px;
  margin-top: 12px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--vurgu) transparent;
}
.gc-thumb {
  padding: 0; height: 76px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: none; cursor: pointer;
  opacity: .5; transition: opacity var(--gecis), border-color var(--gecis);
}
.gc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-thumb:hover { opacity: .85; }
.gc-thumb.aktif { border-color: var(--vurgu); opacity: 1; }
.gc-ipucu { text-align: center; margin-top: 16px; color: var(--metin-soluk); font-size: .85rem; }

/* Detay ust duzen + bilgi karti + garanti notu */
.detay-ust { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; margin-top: 64px; }

/* Proje detay: galeri + kunye yan yana, altinda aciklama + begeni kutusu */
.pd-ust {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr);
  gap: 32px; align-items: start;
}
.pd-ust .galeri-carousel { max-width: none; margin-inline: 0; }
.pd-ust .bilgi-karti { position: sticky; top: 100px; }
.pd-alt {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 28px; align-items: stretch;
}
.pd-kutu {
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--yaricap); padding: 32px 34px;
}
.pd-kutu p + p { margin-top: 14px; }
.pd-alt .cta-bant {
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 34px 30px; gap: 0;
}
.pd-alt .cta-bant h2 { font-size: 1.4rem; margin-top: 4px; }
.pd-alt .cta-bant p { margin-top: 12px; font-size: .93rem; }
.cta-begenti-dugmeler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 24px; position: relative;
}

@media (max-width: 1080px) {
  .pd-ust, .pd-alt { grid-template-columns: 1fr; gap: 26px; }
  .pd-ust .bilgi-karti { position: static; }
}
@media (max-width: 640px) {
  .pd-kutu { padding: 24px 22px; }
  .pd-alt .cta-bant { padding: 28px 22px; }
}
.detay-aciklama p { color: var(--metin-soluk); font-size: 1.02rem; line-height: 1.85; }
.garanti-not {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 26px;
  background: var(--vurgu-yumuşak); border: 1px solid rgba(var(--vurgu-rgb),.3);
  border-radius: 14px; padding: 18px 20px;
}
.garanti-not svg { color: var(--vurgu-acik); flex-shrink: 0; margin-top: 2px; }
.garanti-not p { color: var(--metin); font-size: .9rem; margin: 0 !important; }
.bilgi-karti {
  position: sticky; top: 100px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 26px;  /* yapiskan kartta backdrop-filter kaydirma sirasinda pahali, kaldirildi */
}
.bilgi-karti h3 { font-size: 1.02rem; letter-spacing: .04em; margin-bottom: 6px; }
.bilgi-satir {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px dashed var(--cizgi); font-size: .9rem;
}
.bilgi-satir:last-of-type { border-bottom: 0; }
.bilgi-satir .etiket-kucuk { color: var(--metin-soluk); }
.bilgi-satir .deger { color: var(--metin); font-weight: 700; text-align: right; }

/* Begendiniz mi? CTA */
.cta-begenti { text-align: center; justify-content: center; }
.cta-begenti .kalp {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--vurgu-rgb),.15), rgba(var(--vurgu-acik-rgb),.06));
  border: 1px solid rgba(var(--vurgu-rgb),.3); color: var(--vurgu);
  animation: kalp-at 1.8s ease-in-out infinite;
}
@keyframes kalp-at { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } }

@media (max-width: 900px) {
  .detay-ust { grid-template-columns: 1fr; }
  .bilgi-karti { position: static; }
}
@media (max-width: 640px) {
  .gc-thumb { height: 54px; }
  .gc-sahne img { min-height: 220px; }
  .gc-ok { width: 38px; height: 38px; }
}

/* ============================================================
   ORJINAL LOGO PLAKASI + DIL ANAHTARI + MOBIL IYILESTIRMELER
   ============================================================ */
.marka-plaka {
  display: grid; place-items: center;
  background: transparent;
  padding: 5px 10px;
  transition: transform var(--gecis);
}
.marka:hover .marka-plaka { transform: translateY(-1px); }
.marka-plaka img { display: block; height: 36px; width: auto; }

.dil-anahtar {
  display: inline-flex; border: 1px solid var(--cizgi); border-radius: 999px;
  overflow: hidden; flex-shrink: 0;
}
.dil-anahtar a {
  padding: 6px 11px; font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  color: var(--metin-soluk); transition: background var(--gecis), color var(--gecis);
}
.dil-anahtar a:hover { color: var(--metin); }
.dil-anahtar a.aktif { background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu)); color: #fff; }

/* ---- Mobil ince ayar ---- */
@media (max-width: 860px) {
  .ustbar-icin { height: 64px; }
  .menu { inset: 64px 0 auto 0; max-height: calc(100vh - 64px); }
  .dil-anahtar a { padding: 8px 12px; }
  .hero-ic { padding-block: 44px 70px; gap: 44px; }
  .hero :is(h1, .hero-baslik) { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero p.alt { font-size: 1rem; }
  .bolum-baslik { margin-bottom: 40px; }
  .cta-bant { text-align: center; justify-content: center; }
  .cta-bant .dugme { margin-inline: auto; }
  .sayfa-hero h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .proje-izgara { grid-template-columns: 1fr; }
  .buyuk-kartlar { grid-template-columns: 1fr 1fr; }
  /* Hero'yu mobilde kisalt: ekrana daha cok sigsin ve not satiri slayt
     kontrol bandinin altinda kalmasin */
  .hero .rozet { margin-bottom: 14px; }
  .hero :is(h1, .hero-baslik) { margin-bottom: 14px; }
  .hero p.alt { margin-bottom: 20px; }
  .hero .hero-dugmeler { margin-bottom: 18px; }
}
@media (max-width: 560px) {
  .hero-dugmeler { flex-direction: column; }
  .hero-dugmeler .dugme { width: 100%; justify-content: center; }
  .buyuk-kartlar { grid-template-columns: 1fr; }
  .buyuk-kart { aspect-ratio: 16/10; }
  .guven-oge { font-size: .84rem; }
  .adimlar { flex-direction: column; }
  .cam-kartlar { grid-template-columns: 1fr; }
  .yorum-karti { width: 260px; }
  .surec-izgara { grid-template-columns: 1fr; }
  .form-alani .dugme { width: 100%; justify-content: center; }
  .whatsapp { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .gc-rozetler .rozet:nth-child(3) { display: none; }
}

/* 1025-1200 arasinda yatay menu ancak sikisarak siginiyor */
@media (min-width: 1025px) and (max-width: 1200px) {
  .ustbar-icin { gap: 14px; }
  .menu { gap: 0; }
  .menu > a, .acilir-dugme { padding: 8px 9px; font-size: .88rem; }
  .ustbar-sag { gap: 10px; }
}

/* ---- Header duzenleme + dugme sarma onlemleri ---- */
.dugme { white-space: nowrap; }
.ustbar-sag { flex-shrink: 0; }
.ustbar-sag .dugme { flex-shrink: 0; }
.marka-yazi small { white-space: nowrap; }
.yuzen-kart .yazi { max-width: 8em; }

/* KVKK onay kutusu */
.onay-kutusu { display: flex; align-items: flex-start; gap: 10px; margin-top: 4px; }
.onay-kutusu input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--vurgu); flex-shrink: 0; cursor: pointer; }
.onay-kutusu label { font-size: .88rem; color: var(--metin-soluk); cursor: pointer; line-height: 1.55; }
.onay-kutusu label a { color: var(--vurgu); text-decoration: underline; }
.altbilgi-alt a { color: var(--vurgu-acik); }

/* Geri donus butonu */
.geri-donus {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 8px 0;
  font-size: .9rem; color: var(--vurgu); font-weight: 500;
  transition: color var(--gecis), gap var(--gecis);
}
.geri-donus:hover { color: var(--vurgu-koyu); gap: 10px; }
@media (max-width: 1180px) {
  .tel-quick { display: none; }
}
/* ============================================================
   HAKKIMIZDA
   ============================================================ */
.hk-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
@media (max-width: 1000px) { .hk-duzen { grid-template-columns: 1fr; gap: 32px; } }

.hk-yan { display: flex; flex-direction: column; gap: 20px; }
.hk-foto { margin: 0; border-radius: var(--yaricap); overflow: hidden; border: 1px solid var(--cizgi); }
.hk-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.hk-bayi { display: flex; align-items: center; gap: 16px; text-align: left; }
.hk-bayi img { width: 62px; height: auto; flex-shrink: 0; }
.hk-bayi h3 { font-size: 1rem; margin-bottom: 5px; }
.hk-bayi p { font-size: .85rem; color: var(--metin-soluk); }

/* Rakam seridi: sayilar panel verisinden geliyor */
.hk-rakam-bolum { padding-block: 0 64px; }
.hk-rakamlar {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  padding: 34px 26px; box-shadow: 0 16px 40px -32px rgba(0,0,0,.4);
}
.hk-galeri-alt { text-align: center; margin-top: 30px; }

/* ---- Teklif Al Modal ---- */
.teklif-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.teklif-modal.acik { opacity: 1; visibility: visible; }
.teklif-modal-mask {
  position: absolute; inset: 0;
  background: rgba(10,15,30,.7); backdrop-filter: blur(6px);
}
.teklif-modal-kutu {
  position: relative; z-index: 1;
  width: 94%; max-width: 520px; max-height: 90vh;
  background: #fff; border: none;
  border-radius: 20px; box-shadow: 0 32px 80px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
  overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(30px) scale(.95);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.teklif-modal.acik .teklif-modal-kutu { transform: translateY(0) scale(1); }

.teklif-modal-baslik {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--vurgu), var(--vurgu-koyu, #0d47a1));
  color: #fff;
}
.teklif-modal-baslik h2 { font-size: 1.15rem; margin: 0; color: #fff; font-weight: 700; }
.teklif-modal-kapat {
  width: 32px; height: 32px; border: none;
  background: rgba(255,255,255,.2); color: #fff;
  font-size: 1.3rem; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; line-height: 1;
  transition: background var(--gecis);
}
.teklif-modal-kapat:hover { background: rgba(255,255,255,.35); }

.teklif-modal-icerik {
  padding: 24px 24px 20px; overflow-y: auto; flex: 1;
  background: #fff;
}
.teklif-ipucu {
  font-size: .88rem; color: #666; margin-bottom: 20px;
  line-height: 1.6; padding-bottom: 16px; border-bottom: 1px solid #eee;
}
.teklif-basari {
  text-align: center; padding: 44px 20px;
}
.teklif-basari h3 { margin: 16px 0 8px; font-size: 1.15rem; color: #1a1a1a; }
.teklif-basari p { color: #666; font-size: .9rem; }
.teklif-basari-dugmeler {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px;
}
@media (max-width: 480px) {
  .teklif-basari-dugmeler { flex-direction: column; }
  .teklif-basari-dugmeler .dugme { width: 100%; justify-content: center; }
}

/* Form alanları modal içinde */
.teklif-modal-icerik .alan { margin-bottom: 14px; }
.teklif-modal-icerik .alan label { font-size: .82rem; font-weight: 600; color: #333; margin-bottom: 5px; display: block; }
.teklif-modal-icerik .alan input,
.teklif-modal-icerik .alan select,
.teklif-modal-icerik .alan textarea {
  width: 100%; padding: 11px 14px; font-size: .9rem;
  background: #f7f8fa; border: 1.5px solid #ddd; border-radius: 10px;
  color: #1a1a1a; transition: border-color var(--gecis), box-shadow var(--gecis);
  box-sizing: border-box;
}
.teklif-modal-icerik .alan input:focus,
.teklif-modal-icerik .alan select:focus,
.teklif-modal-icerik .alan textarea:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(var(--vurgu-rgb),.12);
  background: #fff;
}
.teklif-modal-icerik .form-satir { display: flex; gap: 12px; }
.teklif-modal-icerik .form-satir .alan { flex: 1; }
.teklif-modal-icerik .onay-kutusu { margin-top: 6px; }
.teklif-modal-icerik .onay-kutusu label { font-size: .8rem; color: #555; }
.teklif-modal-icerik .dugme-vurgu {
  width: 100%; margin-top: 8px; padding: 13px;
  font-size: .95rem; font-weight: 700; border-radius: 12px;
}

/* Fotoğraf yükleme alanı */
.teklif-foto-yukle { margin-top: 4px; }
.teklif-foto-dugme {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 2px dashed #ccc;
  border-radius: 10px; background: #fafafa; color: #555;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.teklif-foto-dugme:hover {
  border-color: var(--vurgu); background: rgba(var(--vurgu-rgb),.04); color: var(--vurgu);
}
.teklif-foto-ipucu {
  font-size: .73rem; color: #999; margin-top: 6px;
}
.teklif-foto-onizleme {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.teklif-foto-kare {
  position: relative; width: 72px; height: 72px;
  border-radius: 10px; overflow: hidden;
  border: 1.5px solid #e0e0e0;
}
.teklif-foto-kare img {
  width: 100%; height: 100%; object-fit: cover;
}
.teklif-foto-sil {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border: none;
  background: rgba(0,0,0,.55); color: #fff;
  border-radius: 50%; font-size: .65rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}

@media (max-width: 600px) {
  .teklif-modal-kutu { width: 100%; max-height: 100vh; border-radius: 0; }
  .teklif-modal-icerik .form-satir { flex-direction: column; gap: 0; }
}

/* ============================================================
   MOBIL DUZELTMELER
   Dosyanin sonunda: temel tanimlari ezmesi gerekiyor.
   ============================================================ */

/* Dar telefonlarda ust menu icerigi sigmiyordu (360px ekranda 513px yer
   istiyordu) ve sayfa yatayda tasiyordu. Ogeler kuculdu; dil anahtari
   iki dilli site icin acikta birakildi. */
@media (max-width: 560px) {
  .ustbar-icin { gap: 10px; }
  .ustbar-sag { gap: 8px; }
  .marka-plaka img { height: 28px; }
  .ustbar-sag .dugme-kucuk { padding: 8px 12px; font-size: .78rem; }
  .dil-anahtar a { padding: 6px 9px; font-size: .78rem; }
  .hamburger { width: 38px; height: 38px; }
}

/* Kisa ekranlarda (yatay telefon, kucuk cihazlar) hero metni slayt kontrol
   bandinin altina tasiyordu; dikey bosluklar daha da sikistirildi. */
@media (max-width: 860px) and (max-height: 700px) {
  .hero .rozet { margin-bottom: 10px; padding: 6px 14px; }
  .hero :is(h1, .hero-baslik) { margin-bottom: 10px; font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero p.alt { margin-bottom: 14px; font-size: .94rem; }
  .hero .hero-dugmeler { margin-bottom: 12px; gap: 10px; }
  .hero .hero-dugmeler .dugme { padding: 10px 18px; }
  .hero-slayt .hero-ic { padding-block: 28px 40px; }
  /* 640px yuksekliginde bu kadar icerik sigmiyor; ikincil not satiri gizlenir */
  .hero-slayt .guven-oge { display: none; }
}

/* ============================================================
   IS ORTAKLIGI - marka kartlari
   ============================================================ */
.marka-kartlar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: 48px;
}
.marka-kart {
  display: flex; flex-direction: column;
  padding: 32px 30px 28px; border-radius: var(--yaricap);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.marka-kart:hover { transform: translateY(-6px); border-color: rgba(var(--vurgu-rgb),.25); box-shadow: 0 28px 56px -24px rgba(0,0,0,.18); }
.marka-kart-logo {
  display: flex; align-items: center; min-height: 54px; margin-bottom: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--cizgi);
}
.marka-kart-logo img { height: 42px; width: auto; max-width: 100%; }
.marka-kart-etiket {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vurgu);
  background: var(--vurgu-yumuşak); border-radius: 999px; padding: 5px 12px;
}
.marka-kart h3 { font-size: 1.24rem; margin: 14px 0 10px; }
.marka-kart p { color: var(--metin-soluk); font-size: .95rem; line-height: 1.75; }
.marka-kart-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px;
  color: var(--vurgu); font-weight: 700; font-size: .88rem; align-self: flex-start;
}
.marka-kart-link svg { transition: transform var(--gecis); }
.marka-kart-link:hover svg { transform: translate(3px, -3px); }
.marka-kart-not { font-size: .82rem; color: var(--metin-soluk); margin-top: 18px; }

@media (max-width: 760px) {
  .marka-kartlar { grid-template-columns: 1fr; gap: 16px; }
  .marka-kart { padding: 26px 22px 24px; }
  .marka-kart-logo img { height: 36px; }
}

/* ============================================================
   ANASAYFA — SECILI PROJELER
   Kart govdesi hizmet kartiyla ayni (.hizmet-kart uzerine biner);
   burada yalnizca projeye ozgu rozet, foto sayaci ve meta satiri var.
   ============================================================ */
.proje-kart .hizmet-kart-resim { aspect-ratio: 4/3; }
.ap-rozetler {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px);
}
.ap-rozet {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--vurgu);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.4);
}
.ap-foto {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  font-size: .72rem; font-weight: 700; color: #fff;
  padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55);
}
/* Ozet iki satirla sinirli: kartlarin boyu esit kalsin */
.proje-kart .hizmet-kart-ic p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 12px; flex: 0 0 auto; min-height: 2.8em;
}
.ap-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 16px;
  font-size: .82rem; color: var(--metin-soluk); margin-top: auto;
}
.ap-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ap-meta span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cizgi); margin-right: 8px;
}
.proje-kart .kart-link { margin-top: 0; }
@media (max-width: 620px) {
  .ap-rozet { font-size: .66rem; padding: 4px 8px; }
}