/* =========================================
   ✅ GLOBAL (Masaüstü + Mobil ortak)
========================================= */

:root {
  --blue-dark: #0b2a66;
  --blue: #0c5ed7;

  --page: #f2f2f2;

  --text: #ffffff;
  --muted: rgba(255, 255, 255, .86);

  --radius: 24px;
  --shadow: 0 18px 45px rgba(0, 0, 0, .18);

  --btn-call: #2b2f36;
  --btn-call-hover: #1f2329;

  --btn-wa: #0A7C3E;
  --btn-wa-hover: #086432;

  --stroke: rgba(255, 255, 255, .14);
}

* {
  box-sizing: border-box;
}

/* =========================================
   ✅ MASAÜSTÜ / TABLET CSS
   (Desktop tasarım stilleri)
========================================= */

/* =========================================
   WRAP
========================================= */

.wrap {
  max-width: 1400px;
  margin: 80px auto;
  padding: 80px 18px;
}

/* =========================================
   HERO (MAVİ KART)
========================================= */

.hero {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(820px 260px at 18% 18%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(760px 260px at 84% 82%, rgba(30, 136, 255, .24), transparent 64%),
    linear-gradient(135deg, var(--blue), var(--blue-dark));
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  padding: 20px 40px;
  align-items: center;
}

/* SOL */

.copy {
  min-width: 0;
}

.title {
  font-size: 40px;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 12px 0;
}

.desc {
  color: var(--muted);
  line-height: 1.7;
  font-size: 15.5px;
  max-width: 70ch;
  margin: 0;
}

.badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.badge {
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--stroke);
  color: #fff;
}

/* BUTONLAR */

.actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  color: currentColor;
  shape-rendering: geometricPrecision;
}

/* Hemen Ara */

.btn-call {
  background: var(--btn-call);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

.btn-call:hover {
  background: var(--btn-call-hover);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .34);
}

/* WhatsApp */

.btn-wa {
  background: var(--btn-wa);
  box-shadow: 0 10px 22px rgba(10, 124, 62, .28);
}

.btn-wa:hover {
  background: var(--btn-wa-hover);
  box-shadow: 0 12px 26px rgba(10, 124, 62, .34);
}

/* SAĞ: sadece resim, ekstra siyah yok */

.media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  background: transparent;
  padding: 0;
}

.media-img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: 50% 70%;
}

/* ✅ MOBİL + TABLET'TE TAMAMEN GİZLE (sadece desktop kalsın) */

@media (max-width: 1023px) {
  .wrap {
    display: none !important;
  }
}

/* =========================================
   ITB: 2 RESİM – SEO METİN – 2 RESİM (PRO)
   Desktop only
========================================= */

.itb {
  margin: 60px 0;
}

.itb__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* 2'li satır */

.itb__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Kart */

.itb-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
  background: #000;
}

/* Resim */

.itb-card__img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

/* Overlay (siyah saydam) */

.itb-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .32),
    rgba(0, 0, 0, .46)
  );
  text-align: center;
}

/* Ortadaki çizgi */

.itb-card__line {
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .30);
}

/* Yazı */

.itb-card__text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #f2f2f2;
  text-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}

/* Hover (premium) */

.itb-card {
  transition: transform .22s ease, box-shadow .22s ease;
}

.itb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.itb-card:hover .itb-card__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .22),
    rgba(0, 0, 0, .38)
  );
}

/* SEO Metin kutusu */

.itb-seo {
  margin: 36px 0;
  padding: 32px 36px;
  background: #f2f2f2;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.itb-seo__title {
  margin: 0 0 14px;
  font-size: 26px;
  color: #0b2a66;
  letter-spacing: .2px;
}

.itb-seo__p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #444;
}

.itb-seo__p:last-child {
  margin-bottom: 0;
}

/* Desktop only: mobil/tablet gizle */

@media (max-width: 1023px) {
  .itb {
    display: none;
  }
}

/* =========================================
   SEO İlçe + Marka Bölümü (1280px)
   Desktop only
========================================= */

.seo-area {
  margin: 90px 0 50px;
}

.seo-area__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 18px;
}

.seo-area__head {
  margin-bottom: 26px;
}

.seo-area__title {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: -0.3px;
  color: #0b2a66;
}

.seo-area__lead {
  margin: 10px;
  font-size: 15.5px;
  line-height: 1.9;
  color: #444;
  max-width: 150ch;
}

/* grid */

.seo-area__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 34px;
}

/* item: kart gibi değil; sadece çizgili blok */

.seo-item {
  padding: 14px 0 0;
  border-top: 1px solid rgba(0, 0, 0, .10);
}

.seo-item__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #0b2a66;
  letter-spacing: -0.2px;
}

.seo-item__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: #444;
}

/* alt not */

.seo-area__note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0, 0, 0, .16);
}

.seo-area__noteText {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #555;
}

@media (max-width: 1023px) {
  .seo-area {
    display: none !important;
  }
}

/* =========================================
   KOMBI CARDS (DESKTOP)
========================================= */

@media (max-width: 1024px) {
  .kombi-cards-desktop {
    display: none;
  }
}

.kombi-cards-desktop {
  max-width: 1350px;
  margin: 64px auto;
  padding: 0 20px;
}

.kombi-cards-head h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 900;
  color: #0033AB;
}

/* GRID */

.kombi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* KART */

.kombi-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, .12);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  transition: transform .2s ease, box-shadow .2s ease;
}

.kombi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .16);
}

/* FOTO */

.kombi-card-image {
  position: relative;
  width: 100%;
  height: clamp(200px, 22vw, 240px);
}

.kombi-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TAG */

.kombi-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
}

.kombi-tag.bar {
  box-shadow: inset 0 0 0 999px rgba(29, 78, 216, .12);
}

.kombi-tag.ilk {
  box-shadow: inset 0 0 0 999px rgba(4, 120, 87, .12);
}

.kombi-tag.bakim {
  box-shadow: inset 0 0 0 999px rgba(109, 40, 217, .12);
}

.kombi-tag.hata {
  box-shadow: inset 0 0 0 999px rgba(185, 28, 28, .12);
}

.kombi-tag.isinma {
  box-shadow: inset 0 0 0 999px rgba(146, 64, 14, .12);
}

/* METİN */

.kombi-card-body {
  padding: 22px 24px 26px;
}

.kombi-card-body h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 900;
  color: #0b1b39;
}

.kombi-card-body p {
  margin: 0;
  font-size: 14.6px;
  line-height: 1.65;
  color: rgba(15, 23, 42, .74);
}

/* =========================================
   ✅ MOBİL CSS (Sadece <768px)
   Masaüstü + Tablet: tamamen gizli
========================================= */

@media (max-width: 767.98px) {
  .wrap,
  .itb,
  .seo-area,
  .kombi-cards-desktop {
    display: none !important;
  }
}

.mbl-only {
  display: none;
}

@media (max-width: 767.98px) {
  .mbl-only {
    display: block;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans";
    color: #0f172a;
    background: #fff;
  }
}

@media (min-width: 768px) {
  .mbl-only {
    display: none !important;
  }
}

.mbl-only * {
  box-sizing: border-box;
}

.mbl-only img {
  width: 100%;
  height: auto;
  display: block;
}

.mbl-sectionHead {
  padding: 18px 16px 10px;
}

.mbl-h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.2px;
}

.mbl-h2--blue {
  color: #1a73e8;
} /* Google mavisi */

.mbl-lead {
  margin: 6px 0 0;
  color: #475569;
  font-size: 13.5px;
  line-height: 1.45;
}

/* HERO */

.mbl-hero__media {
  position: relative;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  min-height: 260px;
}

.mbl-hero__media img {
  height: 310px;
  object-fit: cover;
}

.mbl-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, .18) 0%, rgba(2, 6, 23, .58) 55%, rgba(2, 6, 23, .84) 100%);
}

.mbl-hero__overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}

.mbl-chip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .95);
  font-size: 12px;
}

.mbl-title {
  margin: 10px 0 6px;
  color: #fff;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.5px;
}

.mbl-sub {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.35;
}

.mbl-hero__copy {
  padding: 14px 16px 12px;
}

.mbl-desc {
  margin: 0;
  font-size: 14.2px;
  line-height: 1.55;
  color: #0f172a;
}

/* badges */

.mbl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mbl-badge {
  padding: 8px 10px;
  font-size: 12.5px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  line-height: 1;
}

/* trust */

.mbl-trust {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
}

.mbl-trust__item {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  text-align: center;
  background: #fff;
  box-shadow: 0 10px 22px rgba(2, 6, 23, .06);
}

.mbl-trust__big {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.mbl-trust__text {
  display: block;
  font-size: 12px;
  color: #334155;
  font-weight: 800;
}

/* ITB grid */

.mbl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}

.mbl-picCard {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .06);
}

.mbl-picCard img {
  height: 120px;
  object-fit: cover;
}

.mbl-picCard__cap {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(2, 6, 23, .65);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  backdrop-filter: blur(8px);
}

/* SEO card */

.mbl-seoCard {
  margin: 0 16px 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 12px 26px rgba(2, 6, 23, .06);
}

.mbl-seoTitle {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.mbl-seoP {
  margin: 0 0 10px;
  color: #334155;
  font-size: 13.6px;
  line-height: 1.55;
}

.mbl-seoP:last-child {
  margin-bottom: 0;
}

/* highlight */

.mbl-highlight {
  margin: 0 16px 14px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #0b1220;
  color: #fff;
  padding: 14px;
  box-shadow: 0 14px 28px rgba(2, 6, 23, .18);
}

.mbl-highlight__title {
  margin: 0 0 6px;
  font-size: 14.5px;
}

.mbl-highlight__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

/* accordion */

.mbl-acc {
  padding: 0 16px;
  display: grid;
  gap: 10px;
}

.mbl-acc__item {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(2, 6, 23, .06);
}

.mbl-acc__sum {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
}

.mbl-acc__sum::-webkit-details-marker {
  display: none;
}

.mbl-acc__ttl {
  font-size: 13.8px;
  line-height: 1.25;
}

.mbl-acc__ico {
  font-size: 16px;
  opacity: .7;
  transition: transform .2s ease;
}

.mbl-acc__item[open] .mbl-acc__ico {
  transform: rotate(180deg);
}

.mbl-acc__body {
  padding: 0 12px 12px;
  color: #334155;
  font-size: 13.4px;
  line-height: 1.55;
}

.mbl-note {
  margin: 14px 16px 16px;
  padding: 12px;
  border-radius: 16px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

/* =========================================
   PRATİK BİLGİLER (BÜYÜK FOTO ÜSTTE + ŞIK KART)
========================================= */

.mbl-tips {
  padding: 6px 0 22px;
}

.mbl-tipGrid {
  padding: 0 16px;
  display: grid;
  gap: 14px;
}

.mbl-tipBig {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 28px rgba(2, 6, 23, .07);
}

.mbl-tipBig__media {
  position: relative;
  height: 132px; /* ✅ foto büyük */
  overflow: hidden;
  background: #0f172a;
}

.mbl-tipBig__media img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
}

/* üstte yumuşak karartma -> etiket daha net */

.mbl-tipBig__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, .15) 0%, rgba(2, 6, 23, .45) 100%);
}

/* ✅ etiket foto üstünde */

.mbl-tipBig__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  color: #0f172a;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(10px);
}

.mbl-tipBig__body {
  padding: 12px 12px 14px;
}

.mbl-tipBig__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.22;
  font-weight: 900;
  color: #0f172a;
}

.mbl-tipBig__text {
  margin: 8px 0 0;
  font-size: 13.6px;
  line-height: 1.55;
  color: #334155;
}