/* ============================================================
   marka.css — TR FABRİKA KURUMSAL KİMLİK KATMANI (2026-07-27)
   ------------------------------------------------------------
   Kaynak: logo (tr fabrika — koyu slate + gökkuşağı çubuklar).
   Amaç : "oturmuş SaaS ürünü" algısı — Wix tonunda kurumsal UI.
   Yükleme sırası: head.asp'te EN SON (skin + responsive'den sonra);
   buradaki kurallar chestnut-rose skin'ini bilinçli olarak ezer.

   PALET (logodan örneklendi):
     Slate (marka)   : #323C4E   koyu metin/bant  (#232B3A en koyu)
     Kırmızı (aksiyon): #E8493A  hover: #CF3B2D
     Turuncu         : #F49B1F
     Sarı            : #FFC20E
     Yeşil           : #6CBE45
     Açık yeşil      : #A8C93A
     Mavi            : #56B3E4
     Zemin grisi     : #F5F7FA   çizgi: #E7EBF0
   ============================================================ */

:root {
  --mk-slate:      #323C4E;
  --mk-slate-koyu: #232B3A;
  --mk-kirmizi:    #E8493A;
  --mk-kirmizi-h:  #CF3B2D;
  --mk-turuncu:    #F49B1F;
  --mk-sari:       #FFC20E;
  --mk-yesil:      #6CBE45;
  --mk-ayesil:     #A8C93A;
  --mk-mavi:       #56B3E4;
  --mk-zemin:      #F5F7FA;
  --mk-cizgi:      #E7EBF0;
  --mk-golge:      0 12px 34px rgba(35,43,58,.10);
}

/* ============================================================
   OKUNABİLİRLİK — TİPOGRAFİ ÖLÇEĞİ  (2026-08-23)
   ------------------------------------------------------------
   Webster teması 2016 ölçeğiyle geldi: gövde 14px, menü 14px.
   Bugünün standardı 16px; 14px küçük ekranda ve 40 yaş üstü
   kullanıcıda okunabilirlik kaybı yaratıyor.

   🔴 TEMA FONTLARI KORUNDU: Poppins (gövde) + Montserrat (başlık).
   Değişen yalnızca ÖLÇEK ve satır yüksekliğidir; tema kimliği aynı.

   Ölçek +2px kaydırıldı:  14 → 16 (gövde/menü),  13 → 15 (küçük metin)
   ============================================================ */
body {
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ana menü — kullanıcı geri bildirimi: "harfler çok küçük kalıyor"
   Not: punto 15px'te tutuluyor (orijinal 14px). 16px denendi ama
   9 menü öğesi tek satıra sığmayıp beyaz kutunun altına taştı.
   Kalınlık 600'e çıkarılarak okunabilirlik korundu. */
.mega-menu .menu-links > li > a {
  font-weight: 700;          /* 600 -> 700 (istek: bold) */
  line-height: 22px;
  letter-spacing: .1px;
}

/* ============================================================
   AÇILIR MENÜ — METİN KUTUYA SIĞSIN  (2026-08-23 revizyon)
   ------------------------------------------------------------
   "İşletme Web Paketi" gibi başlıklar alt satıra kırılıyordu.
   Sebep tek bir punto değil, ÜÇ KISITIN ÇARPIMI:
     1) plugins/mega_menu.css -> .drop-down-multilevel
            { width:100%; max-width: 220px }        <- kutu dar
     2) plugins/mega_menu.css -> .drop-down-multilevel a
            { padding: 10px 30px }                  <- 60px'i dolgu yiyor
     3) buradaki 17px punto
   220 - 60 = metne kalan yalnızca 160px. Üçü birden düzeltilmezse
   sorun geri gelir: punto tek başına küçültülse kutu yine dar kalır,
   kutu tek başına genişletilse uzun başlıklar yine taşar.
   ------------------------------------------------------------ */

/* 1) Kutu genişler: 220 -> 300px */
.mega-menu .drop-down-multilevel {
  max-width: 300px !important;
}

/* 2) Yatay dolgu kısılır: 30 -> 20px (metne 40px daha yer açar) */
/* 3) Punto 17 -> 15px (istek: 1-2 punto küçült) */
.mega-menu .menu-links > li .drop-down-multilevel a,
.mega-menu .menu-links > li .drop-down a,
.mega-menu .menu-links > li .drop-down-multilevel li a,
.mega-menu .drop-down-multilevel a,
.mega-menu .drop-down a {
  font-size: 13px !important;   /* 15 -> 13px (istek) */
  font-weight: 700;             /* madde etiketleri bold */
  line-height: 1.5;
  padding: 10px 20px;
}
/* Mega panel başlıkları da orantılı küçülür */
.mega-menu .drop-down .list-unstyled > li > a,
.mega-menu .drop-down h6 { font-size: 13px !important; }

/* 🔴 <small> ACIKLAMALARI BOLD OLMAZ.
   Yukaridaki font-weight bağlantının TAMAMINA uygulanır ve
   Emlak mega panelindeki `<small>` alt açıklamaları da kalınlaşır
   ("Tüm özellikler tek sayfada" gibi). O satırlar ikincil bilgidir;
   kalınlaşınca başlıkla aynı ağırlığa gelip hiyerarşiyi bozar. */
.mega-menu .drop-down a small,
.mega-menu .drop-down .em-mn-aciklama {
  font-weight: 400;
}

/* Sonuç: metne kalan alan 160px -> 260px (%62 artış), punto 2 küçük.
   Not: mega panelin (grid-col-12) kendi genişliği zaten tam satır,
   yukarıdaki max-width yalnız TEK SÜTUNLU açılır menüyü etkiler. */

/* Üst bant (telefon/e-posta) — 12px'ti, okunmuyordu */
.topbar, .topbar ul li a, .topbar-call ul li, .topbar .text-right a { font-size: 14px; }

/* Gövde metni ve listeler */
p { font-size: 16px; line-height: 1.75; }
.lead { font-size: 19px; line-height: 1.7; }
small, .small { font-size: 14px; }

/* Başlık ölçeği — akıcı (küçük ekranda taşmasın) */
h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.18; letter-spacing: -.5px; }
h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.25; letter-spacing: -.3px; }
h3 { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.3; }
h4 { font-size: 20px; line-height: 1.4; }
h5 { font-size: 17px; line-height: 1.45; }
h6 { font-size: 15px; line-height: 1.5; }

/* Başlıklar uzun kelimelerde dengeli kırılsın */
h1, h2, h3 { text-wrap: balance; }

/* Düğme ve form metinleri de ölçeğe uysun */
.button, .btn { font-size: 15px; }
.form-control { font-size: 15px; }

/* ============================================================
   TOPBAR BİRİNCİL EYLEM  (2026-08-23)
   ------------------------------------------------------------
   Önce menü satırına ayrı bir CTA düğmesi konmuştu; topbar'da
   zaten "Üye Ol" olduğu için tekrar oluyordu ve menü satırını
   TAŞIRIYORDU (menü alt satıra, ikonlar üçüncü satıra düşüyordu).
   Düğme kaldırıldı, vurgu topbar'daki asıl düğmeye alındı.
   ============================================================ */
.topbar .button.x-small.tb-birincil {
  background: var(--mk-kirmizi) !important;
  border-color: var(--mk-kirmizi) !important;
  color: #fff !important;
  font-weight: 700;
}
.topbar .button.x-small.tb-birincil:hover {
  background: var(--mk-kirmizi-h) !important;
  border-color: var(--mk-kirmizi-h) !important;
}

/* ============================================================
   HEADER TAŞMA KORUMASI
   ------------------------------------------------------------
   Menü +2 punto büyüdüğü için yatay alan daraldı. Menü ile
   arama/sepet aynı satırda kalmalı; satır atlarsa header üç
   satıra yayılıyor. Flex + nowrap bunu garanti eder.
   ============================================================ */
/* ------------------------------------------------------------
   MENÜ SATIRA SIĞSIN — tema yapısına DOKUNMADAN
   ------------------------------------------------------------
   Önce .menu-list-items flex'e çevrilmişti; mega-menu kendi JS'i ile
   DOM'u yönettiği için logo ile menü ÜST ÜSTE bindi (görüldü).
   Tema float düzeni KORUNUR; menünün genişlik talebi düşürülür:
   punto 15→13px (-2) ve öğe arası boşluk kısılır. Kaybedilen
   okunabilirlik açılır menüde iki katı geri veriliyor (17px).

   2026-08-23 — başlıklar kısalınca (97→57 karakter) yatay alan
   boşaldı. Punto DEĞİŞMEDİ; boşalan yer öğe arası boşluğa verildi
   (11→15px). Küçük punto + geniş aralık SaaS menü karakteridir;
   puntoyu geri büyütmek istenen "-2 punto" kararını bozardı.
   ------------------------------------------------------------ */
.mega-menu .menu-links > li > a {
  /* 2026-08-23: 13 -> 14px (+1 punto) ve kalinlik 700.
     Kalinlik artisi genisligi de buyutur; basliklar kisaltilmis
     oldugu icin (97->57 karakter) satira sigiyor. 1024px'te
     dogrulandi. Yatay dolgu 15 -> 13px ile fark dengelendi. */
  font-size: 14px !important;
  padding-left: 13px;
  padding-right: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.mega-menu .menu-links > li > a .fa-indicator { margin-left: 4px; }

/* ============================================================
   FANCY BAŞLIĞIN İMZA DAVRANIŞI — TEMAYA GERİ DÖNÜLDÜ
   ------------------------------------------------------------
   Temanın orijinal kuralı (style.css:213):
     .header.fancy .mega-menu > section.menu-list-items
        { background:#fff; padding:0 25px; box-shadow:0 0 20px rgba(0,0,0,.1) }
   Bu tek satır temanın karakterini kuruyor: durağanken slider'ın
   üzerinde YÜZEN, kapsayıcı genişliğinde beyaz bir bar; sayfa
   kaydırılınca `.desktopTopFixed` ile position:fixed olup TÜM
   SAYFA GENİŞLİĞİNE açılıyor.

   Bir ara bu zemini şeffaf yapıp beyazı `.menu`ye taşımıştım —
   o zaman menü logonun altına düşüyordu ve tam genişlik beyaz
   bant tek çıkar yol gibi görünmüştü. Sonra yerleşim float +
   inline-block ikilisiyle düzeldi, yani o çözüm gereksiz kaldı;
   ama yüzen bar karakteri de kaybolmuştu. Üstelik sabit duruma
   geçince `.menu-list-items` `.menu`nin kutusundan çıktığı için
   beyaz zemin geride kalıyor ve çubuk şeffaflaşıyordu.

   Artık zemin yine temanın verdiği yerde: her iki durumda da
   `.menu-list-items` üzerinde. Sabit durum kendiliğinden doğru.
   Buradaki tek fark dolgu: üst/alt 0 -> 5px (istek üzerine),
   yatay 25px temanın değeriyle aynı bırakıldı. */
.header.fancy .mega-menu > section.menu-list-items {
  padding: 5px 25px;
}
/* ------------------------------------------------------------
   LOGO SOLDA, MENÜ SAĞINDA — TEK SATIR
   ------------------------------------------------------------
   Temanın kendi "sabit başlık" (desktopTopFixed) durumu tam olarak
   bu yerleşimi kuruyor (style.css:198-202). Eksik parça float değil,
   float + display:inline-block İKİLİSİYDİ — tek başına float
   verildiğinde ul blok kalıp tam genişlik kapladığı için menüyü
   aşağı itiyordu. Aynı kurallar normal (sabit olmayan) duruma
   uygulanır; tema yapısı değişmez.
   ------------------------------------------------------------ */
/* 🔴 `.menu` ZEMİNSİZ KALIR — beyaz artık .menu-list-items'ta.
   Burada bir süre `background:#fff` vardı; yüzen bar karakteri
   geri geldiği için ikisi birden beyaz olsaydı bar kenardan
   kenara uzayıp yine tam genişlik bant gibi görünürdü. */
.header.fancy .menu {
  background: transparent;
  box-shadow: none;
}
.header.fancy .mega-menu .menu-logo {
  float: left !important;
  display: inline-block !important;
  padding: 14px 0 !important;
  margin: 0;
}
.header.fancy .mega-menu .menu-logo > li > a { float: left; }
.header.fancy .mega-menu .menu-logo img { float: left; margin: 0; }
.header.fancy .menu-bar { float: right !important; }
/* Float'lu çocukları saran kutu */
.header.fancy .mega-menu > section.menu-list-items::after {
  content: ""; display: table; clear: both;
}

/* ============================================================
   ÜST BANT SAĞ BLOK — TEK SATIR, İKONLAR DÜĞME GÖRÜNÜMÜNDE
   ------------------------------------------------------------
   ÜST ÜSTE BİNME NEDENİ (ekran görüntüsüyle görüldü):
   Tema "fancy" başlığında üst bandın alt dolgusu 70px ve beyaz
   menü kutusu onun ÜZERİNE biniyor (style.css:206 ve :212 —
   `.topbar{padding:15px 0 70px}` + `.topbar+.menu{top:60px}`).
   Bu bilinçli bir tema tasarımı; sağ blok TEK SATIR kaldığı
   sürece sorun yok. Ama beş öğe (arama, sepet, tema, giriş,
   CTA) satıra sığmayıp alta kayınca ikinci satır tam menü
   kutusunun altında kalıyor ve iç içe geçmiş gibi görünüyor.

   İki yönlü çözüm:
     1) Sağ blok sarmayan tek flex satırı olur -> ikinci satır
        oluşamaz, yani binme yapısal olarak imkânsız hale gelir.
     2) Düğme satırı ile beyaz kutu arasındaki açıklık büyütülür
        (aşağıda .header.fancy .topbar / .topbar + .menu).
   ============================================================ */
.topbar .text-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}
/* Aralık artık gap ile veriliyor; eski margin'ler çift boşluk yapardı */
.topbar .topbar-arac { margin-right: 0; }
/* 🔴 Flex öğeleri varsayılan olarak BÜZÜLÜR. 1024px'te "ÜYE GİRİŞİ" ve
   "ÜCRETSİZ BAŞLA" iki satıra bölünüyordu (render'da görüldü).
   Düğmeler doğal genişliklerini korur, metin kırılmaz. */
.topbar .text-right .button.x-small {
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar .topbar-arac,
.topbar .tema-dugme { flex: 0 0 auto; }

.topbar .topbar-arac { display: inline-flex; align-items: center; vertical-align: middle; }
.topbar .topbar-arac .search-cart { display: inline-flex; align-items: center; gap: 10px; }
/* Tema kuralı yatay dolgu veriyordu (style.css:88); gap devraldı.
   height/margin sıfırlamaları responsive.css:897-900 içindir — orada
   ikonlar 60px yüksekliğinde menü çubuğu ögesi varsayılıyor. */
.topbar .topbar-arac .search {
  padding-left: 0;
  padding-right: 0;
  height: auto;
}
.topbar .topbar-arac .search-cart .search + .shpping-cart { padding-left: 0; }

/* 🔴 Açılır kutuların çıpası.
   .search-box ve .cart `position:absolute; top:100%` ile konumlanır
   ama tema bu ögeleri menü çubuğunda varsayıp `.search`e
   position:relative VERMEZ. Üst banda taşındıklarında çıpa
   kaybolup kutular sayfanın alakasız bir yerine açılırdı. */
.topbar .topbar-arac .search,
.topbar .topbar-arac .shpping-cart { position: relative; }

/* Arama · sepet · tema: üyelik düğmeleriyle AYNI kabuk.
   Değerler "benzer" değil, .topbar .button.x-small ile BİREBİR:
     yarıçap 8px  -> marka.css `.button { border-radius: 8px }`
     kenarlık 1px rgba(255,255,255,.18)
     zemin    rgba(255,255,255,.08)
     hover    marka kırmızısı (düğmelerle aynı tepki)
   Önce yarıçap 6px'ti ve hover yarı saydam beyazdı; yan yana
   durunca ikonlar düğmelerden farklı bir aileden görünüyordu. */
.topbar .topbar-arac .search .search-btn,
.topbar .topbar-arac .cart-btn,
.topbar .tema-dugme {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 0;          /* responsive.css:898 -> .search-btn{margin-top:16px} */
  line-height: 1;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #cfd6e0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.topbar .topbar-arac .search .search-btn:hover,
.topbar .topbar-arac .cart-btn:hover,
.topbar .tema-dugme:hover,
.topbar .topbar-arac .search.search-open .search-btn {
  background: var(--mk-kirmizi);
  border-color: var(--mk-kirmizi);
  color: #ffffff;
}
.topbar .topbar-arac .search .search-btn:hover i.icon,
.topbar .topbar-arac .cart-btn:hover i.icon { color: #ffffff !important; }

/* 🔴 AÇILIR KUTULAR MENÜNÜN ALTINDA KALIYORDU
   ------------------------------------------------------------
   Sebep tek satır: plugins/mega_menu.css içinde
       .mega-menu { z-index: 999 }
   Mega menü kendi yığınlama bağlamını 999'da kuruyor. Temanın
   arama kutusu ise 888'de (style.css:100) ve sepet açılırında
   z-index HİÇ YOK (auto). İkonlar menü çubuğundayken bu sorun
   çıkmıyordu — ikisi de aynı bağlamın içindeydi. Üst banda
   taşınınca kutular mega menünün ALTINA düştü: arama kutusunun
   üstüne menü bağlantıları basıyor, sepet açılırı ise neredeyse
   tamamen gizleniyordu (kutular zorla görünür kılınıp doğrulandı).

   Çözüm: 999'un üstüne çıkmak. 1005 seçildi — Bootstrap'in
   modal-backdrop'u (1040) ve modal'ı (1050) hâlâ üstte kalsın. */
.topbar .topbar-arac .search-box,
.topbar .topbar-arac .shpping-cart .cart {
  z-index: 1005;
}
/* Arama ikonu: tema onu `text-indent:-9999px` + mutlak :before ile
   çiziyor. Kabuk büyüyünce :before sol üstte kalıyordu; ortalanır. */
.topbar .topbar-arac .search .search-btn {
  text-indent: -9999px;
  overflow: hidden;
}
.topbar .topbar-arac .search .search-btn:before {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}
.topbar .topbar-arac .search-cart i.icon {
  color: inherit !important;
  font-size: 15px;
  line-height: 1;
}
/* Sepet rozeti düğmenin köşesine oturur; üst bant renginde halka
   ile çevrelenir ki komşu düğmenin üstüne binmiş gibi durmasın. */
.topbar .topbar-arac .shpping-cart strong.item {
  background-color: var(--mk-kirmizi) !important;
  top: -6px;
  right: -6px;
  box-shadow: 0 0 0 2px var(--mk-slate-koyu);
}
/* Boş sepette rozet gösterilmez (sınıfı header.asp'deki gözlemci koyar) */
.topbar .topbar-arac .shpping-cart strong.item.sepet-bos { display: none; }
/* Açılır arama kutusundaki metin koyu zeminde okunur kalsın */
.topbar .topbar-arac .search-box { color: #323232; }

/* ---------- Düğme satırı ile beyaz menü kutusu arasını aç ----------
   🔴 YALNIZ MASAÜSTÜ. Bu geometri (üst bandın altına binen beyaz
   kutu) sadece geniş ekranda var. responsive.css @media(max-width:992px)
   içinde `.header.fancy .topbar{padding:10px 0}` ve `.topbar+.menu{top:0}`
   ile düzeni sıfırlıyor; marka.css ondan SONRA yüklendiği için koşulsuz
   yazılırsa o sıfırlamayı da ezer ve mobilde 84px'lik boş bir bant
   kalırdı (medya sorgusu özgüllük eklemez, sonra gelen kazanır). */
@media (min-width: 993px) {
  /* Düğme satırı y=16..50 arasında. Menü kutusu 82'de başlar ->
     aradaki net açıklık 32px. (Önce 74/24px'ti; istek üzerine
     8px daha açıldı.) Üst bandın alt dolgusu menü kutusunun
     yüksekliğini karşılayacak kadar birlikte büyütülür, yoksa
     kutu bandın dışına taşar. */
  .header.fancy .topbar { padding: 16px 0 92px; }
  .header.fancy .topbar + .menu { top: 82px; }
}

/* 🔴 Menü başlıkları KENDİ İÇİNDE kırılmasın.
   Flex daraltınca "Emlak Çözümleri" iki satıra bölünüyordu
   (ekran görüntüsüyle görüldü). Yatay boşluk azaltılır, metin bölünmez.

   ⚠️ AMA `white-space` KALITSALDIR.
   Burada bir süre `.mega-menu .menu-links > li { white-space: nowrap }`
   vardı; kural tüm <li>'ye uygulandığı için AÇILIR PANELİN İÇİNE de
   sızıyordu. Emlak mega panelindeki vitrin kartının paragrafı
   sarmıyor, kart kenarından TAŞIP KESİLİYORDU ("...10 ilan detay şa").
   Aynı sızıntı alt başlıkların <small> açıklamalarını da etkiliyordu.
   Çözüm: nowrap YALNIZ üst seviye bağlantıda kalır; panel içinde
   açıkça normal'e döndürülür. */
.mega-menu .menu-links > li > a { white-space: nowrap; }
.mega-menu .menu-links > li .drop-down,
.mega-menu .menu-links > li .drop-down-multilevel { white-space: normal; }

/* Dar ekranda tema mobil menüye geçer; flex kuralları geri alınır */
@media (max-width: 991px) {
  .menu-bar { display: block; }
  .search-cart { display: block; }
  /* 🔴 Üstteki `.search-cart{display:block}` ikonlar MENÜ ÇUBUĞUNDAYKEN
     yazılmıştı. Artık üst banttalar; blok yapılırsa arama ve sepet
     alt alta dizilir. Üst bant kapsamında satır düzeni korunur.

     `position: static` ise responsive.css:612 içindir:
       .search-cart { position:absolute; right:60px; top:0; z-index:999 }
     Tema ikonları mobilde hamburger'in yanına ÇİVİLİYOR. Üst banda
     taşındıkları için o çivi onları akıştan koparıp "Ücretsiz Başla"
     düğmesinin üstüne atıyordu (480px render'ında görüldü). */
  .topbar .topbar-arac .search-cart {
    display: inline-flex;
    position: static;
    right: auto;
    top: auto;
  }
  /* Telefonda beş öğe tek satıra sığmaz; burada sarmak serbest —
     mobilde beyaz menü kutusu üst banda binmiyor (responsive.css:486). */
  .topbar .text-right { flex-wrap: wrap; row-gap: 8px; }
}

/* Telefon: beş öğe 480px'e sığmayıp sağdan taşıyordu (render'da görüldü).
   Tema zaten bu genişlikte üst bandı ortalıyor (responsive.css:1019-1020);
   düğme satırı da aynı hizaya alınır ve yatay dolgu kısılır. */
@media (max-width: 767px) {
  .topbar .text-right {
    justify-content: center;
    gap: 8px;
  }
  .topbar .text-right .button.x-small { padding: 8px 10px; font-size: 11px; }
  .topbar .topbar-arac .search-cart { gap: 8px; }
  /* NOT: Bir ara telefonda arama gizlenmişti; gerekçe hatalı bir
     ölçümdü. Chrome headless `--window-size=375` istendiğinde
     yerleşimi daha geniş kuruyor ve görüntüyü 375'e KIRPIYOR;
     kırpılan sağ kenar "taşma" sanılmıştı. 500px'lik render'da
     satır eksiksiz ve düzgün. Beş kontrol de her ekranda durur;
     dar ekranda yukarıdaki `flex-wrap: wrap` iki satıra indirir. */
}

/* ---------- MARKA İMZASI: sayfanın en üstünde gökkuşağı şerit ---------- */
body:before {
  content: ""; display: block; height: 4px; width: 100%;
  background: linear-gradient(90deg,
    #56B3E4 0%, #6CBE45 22%, #A8C93A 40%, #FFC20E 58%, #F49B1F 78%, #E8493A 100%);
}

/* ---------- ÜST BANT: kırmızı yerine kurumsal slate ---------- */
.topbar { background: var(--mk-slate-koyu) !important; }
.topbar ul li a, .topbar-call ul li, .topbar .text-right a { color: #cfd6e0 !important; }
.topbar ul li a:hover { color: #fff !important; }
.topbar-call ul li i { color: var(--mk-sari) !important; }
.topbar .button.x-small { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.topbar .button.x-small:hover { background: var(--mk-kirmizi); border-color: var(--mk-kirmizi); }

/* ---------- TİPOGRAFİ: koyu slate başlıklar ---------- */
h1, h2, h3, h4, h5, h6,
.section-title h2, .page-title-name h1 { color: var(--mk-slate-koyu); }
.section-title h6 { color: var(--mk-kirmizi); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5,
.theme-bg h1, .theme-bg h2, .theme-bg h3, .theme-bg h4, .theme-bg h5,
.page-title h1, .page-title-name h1 { color: #fff; }

/* ---------- AKSİYON RENGİ: tek kırmızı (logo kırmızısı) ---------- */
a { color: var(--mk-kirmizi); }
a:hover, a:focus { color: var(--mk-kirmizi-h); }
.theme-color,
ul.list.theme-color li i,
.feature-icon span.theme-color,
.pricing-content .pricing-table-list ul li i { color: var(--mk-kirmizi) !important; }

.button { background: var(--mk-kirmizi); border-radius: 8px; }
.button:hover, .button:focus { background: var(--mk-kirmizi-h); color: #fff; }
.button.arrow i { color: inherit; }
.button.border { background: transparent; border: 2px solid var(--mk-slate); color: var(--mk-slate); }
.button.border:hover { background: var(--mk-slate); color: #fff; }
.button.white { background: #fff; }
.button.white span, .button.white { color: var(--mk-kirmizi) !important; }

/* ---------- KOYU BANTLAR: kırmızı yıkamayı slate degradeye çevir ---------- */
.theme-bg { background: linear-gradient(135deg, var(--mk-slate) 0%, var(--mk-slate-koyu) 100%) !important; }
.theme-bg .button.white span { color: var(--mk-slate-koyu) !important; }
.theme-bg .counter .icon i { color: var(--mk-sari); }

/* ---------- MENÜ ---------- */
.mega-menu .menu-links > li.active > a,
.mega-menu .menu-links > li > a:hover,
.header.fancy .mega-menu .menu-links > li.active > a,
.header.fancy .mega-menu .menu-links > li > a:hover { color: var(--mk-kirmizi) !important; }
.mega-menu .drop-down-multilevel li:hover > a,
.mega-menu .drop-down a:hover { color: var(--mk-kirmizi) !important; }
.mega-menu .drop-down .em-mn-baslik { color: var(--mk-kirmizi) !important; }
.mega-menu .drop-down .em-mn-vitrin { background: var(--mk-zemin); }
.mega-menu .drop-down, .mega-menu .drop-down-multilevel { border-radius: 0 0 14px 14px !important; box-shadow: 0 24px 60px rgba(35,43,58,.16) !important; }

/* ---------- GRİ ZEMİN: mavi-gri kurumsal ton ---------- */
.gray-bg { background-color: var(--mk-zemin) !important; }

/* ---------- KARTLAR: yumuşak gölge + yuvarlak köşe (SaaS görünümü) ---------- */
.feature-text.box-shadow, .box-shadow { box-shadow: var(--mk-golge) !important; border-radius: 14px; }
.pricing-table, .membership-pricing-table table { border-radius: 14px; overflow: hidden; }
.panel.panel-default { border-radius: 12px; border: 1px solid var(--mk-cizgi); box-shadow: none; }

/* ---------- AKORDİYON / SEKME ---------- */
.accordion .acd-group.acd-active .acd-heading,
.accordion.shadow .acd-group.acd-active .acd-heading,
.accordion.shadow .acd-group .acd-heading:hover,
.accordion .acd-group .acd-heading:hover { color: #fff; background: var(--mk-slate) !important; }
.accordion.shadow .acd-heading { border-radius: 12px !important; }
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:focus,
.nav.nav-tabs > li.active > a:hover { color: var(--mk-kirmizi) !important; border-bottom-color: var(--mk-kirmizi) !important; }

/* ---------- FORMLAR ---------- */
.form-control:focus { border-color: var(--mk-mavi); box-shadow: 0 0 0 3px rgba(86,179,228,.18); }

/* ---------- SEÇİM / KAYDIRMA ---------- */
::selection { background: var(--mk-kirmizi); color: #fff; }

/* ---------- YARDIMCI MARKA SINIFLARI ---------- */
.mk-serit { height: 4px; border: 0; margin: 0;
  background: linear-gradient(90deg,#56B3E4,#6CBE45,#A8C93A,#FFC20E,#F49B1F,#E8493A); }
.mk-rozet { display:inline-block; padding:5px 14px; border-radius:30px; font-size:12px;
  font-weight:700; letter-spacing:.4px; background:rgba(232,73,58,.10); color:var(--mk-kirmizi); }

/* ==========================================================
   FIYAT KARTLARI + PAKET OZELLIK MATRISI        (2026-08-24)
   ----------------------------------------------------------
   Dort paket YAN YANA duracak ve aradaki bosluk dar olacak.
   Bootstrap 3'un varsayilan olugu 30px (satirda -15, hucrede
   +15). Dort sutunda bu, kartlarin arasini kartin kendi ic
   dolgusundan genis birakiyor; kartlar bir GRUP gibi degil,
   dagilmis dort ayri kutu gibi okunuyordu. Oluk 14px'e
   indirildi (satirda -7, hucrede +7).
   ========================================================== */
.fp-izgara { margin-left: -7px; margin-right: -7px; }
.fp-kutu   { padding-left: 7px; padding-right: 7px; margin-bottom: 14px; }

/* Kartlar esit yukseklikte olmali; yoksa "Paketi Incele" butonlari
   farkli hizalarda kalir ve tablo bozuk gorunur. flex ile alt alta
   dizip butonu auto margin ile en dibe itiyoruz. */
.fp-izgara { display: flex; flex-wrap: wrap; }
.fp-izgara > .fp-kutu { display: flex; }

.fp-kart {
  display: flex; flex-direction: column; width: 100%;
  background: var(--tm-kart, #ffffff);
  border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 24px 18px 20px;
  position: relative;
}
.fp-kart.fp-secili {
  border-color: var(--mk-kirmizi, #E8493A);
  box-shadow: 0 10px 30px rgba(232, 73, 58, .12);
}
.fp-rozet {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--mk-kirmizi, #E8493A); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}

.fp-ad { font-size: 16px; font-weight: 700; color: var(--tm-baslik, #232B3A); margin: 4px 0 12px; }

/* Yillik rakam vitrindeki EN BUYUK sey - hedeflenen satin alma bu. */
.fp-fiyat {
  font-size: 33px; font-weight: 800; line-height: 1;
  color: var(--tm-baslik, #232B3A); letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}
.fp-fiyat .fp-para { font-size: 19px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.fp-bedava { color: #6CBE45; font-size: 29px; }
.fp-donem { font-size: 12px; color: var(--tm-metin-3, #98A2AE); margin-top: 5px; }
.fp-alt   { font-size: 12.5px; color: var(--tm-metin-2, #69737F); margin-top: 8px; min-height: 56px; }

/* Aylik karsiligi: bilerek KUCUK ve kutu icinde. Musteri "ayda kaca
   gelir" sorusunun cevabini gorsun ama karar yillik uzerinden kalsin. */
.fp-kutucuk {
  background: var(--tm-zemin-alt, #F5F7FA);
  border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 8px; padding: 10px 11px; margin: 12px 0 8px;
}
.fp-satir-ust { font-size: 11px; color: var(--tm-metin-3, #98A2AE); text-transform: uppercase; letter-spacing: .3px; }
.fp-aylik { font-size: 17px; font-weight: 700; color: var(--tm-baslik, #232B3A); margin: 2px 0 1px; font-variant-numeric: tabular-nums; }
.fp-aylik span { font-size: 12px; font-weight: 500; color: var(--tm-metin-3, #98A2AE); }
.fp-carpim { font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); font-variant-numeric: tabular-nums; }
.fp-avantaj { font-size: 12px; color: #457F2B; margin-top: 5px; line-height: 1.45; }
.fp-avantaj b { font-weight: 700; }
.fp-bedava-etiket {
  display: inline-block; margin-top: 6px; background: #E8F5E2; color: #3C7024;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.fp-kdv { font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); }

.fp-liste { list-style: none; padding: 0; margin: 14px 0 18px; text-align: left; font-size: 12.8px; line-height: 1.62; }
.fp-liste li { padding: 3px 0 3px 19px; position: relative; color: var(--tm-metin-2, #4A5464); }
.fp-liste li i { position: absolute; left: 0; top: 6px; font-size: 11px; color: #6CBE45; }
.fp-liste li b { font-weight: 700; color: var(--tm-baslik, #232B3A); }
/* Pakette OLMAYAN ozellik de basilir - soluk. Yalnizca "var"lar
   basilsaydi Demo ile Pro karti benzer uzunlukta gorunur ve fark
   okunmazdi. Farki gostermenin en durust yolu bu. */
.fp-liste li.pv-k-yok { color: var(--tm-metin-3, #A9B2BD); }
.fp-liste li.pv-k-yok i { color: #C9D0D8; }

.fp-buton { margin-top: auto; width: 100%; text-align: center; }

.fp-kapsam li { position: relative; padding: 4px 0 4px 16px; line-height: 1.7; }
.fp-kapsam li:before { content: "·"; position: absolute; left: 3px; font-weight: 700; color: var(--tm-metin-3, #98A2AE); }

/* ---------- Alan adi iki yol ---------- */
.fp-yol {
  background: var(--tm-kart, #ffffff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 26px 24px; height: 100%;
}
.fp-yol h4 { margin: 12px 0 8px; font-size: 17px; color: var(--tm-baslik, #232B3A); }
.fp-yol p { font-size: 13.5px; line-height: 1.7; color: var(--tm-metin-2, #69737F); margin-bottom: 10px; }
.fp-yol-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--tm-zemin-alt, #F5F7FA); color: var(--mk-kirmizi, #E8493A); font-size: 18px;
}
.fp-ns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.fp-ns code {
  background: var(--tm-baslik, #232B3A); color: #fff; border: 0;
  font-size: 13px; padding: 7px 12px; border-radius: 6px; letter-spacing: .2px;
}
.fp-uzanti { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.fp-uz {
  background: var(--tm-zemin-alt, #F5F7FA); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 6px; padding: 5px 9px; font-size: 12.5px;
  color: var(--tm-metin-2, #69737F); font-variant-numeric: tabular-nums;
}
.fp-uz b { color: var(--tm-baslik, #232B3A); font-weight: 700; }
.fp-yol-not { font-size: 12.5px !important; color: var(--tm-metin-3, #98A2AE) !important; }
.fp-yol-etiket {
  display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 6px;
}
.fp-yesil { background: #E8F5E2; color: #3C7024; }
.fp-mavi  { background: #E4EDF8; color: #2B5A93; }

/* ---------- E-posta ek hizmet seridi ---------- */
.fp-eposta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--tm-kart, #ffffff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 22px 26px;
}
.fp-eposta-sol { display: flex; align-items: flex-start; gap: 16px; }
.fp-eposta-sol h4 { margin: 0 0 5px; font-size: 16px; color: var(--tm-baslik, #232B3A); }
.fp-eposta-sol p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--tm-metin-2, #69737F); }
.fp-eposta-sag { text-align: right; flex-shrink: 0; }
.fp-eposta-fiyat { font-size: 25px; font-weight: 800; color: var(--tm-baslik, #232B3A); letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.fp-eposta-fiyat span { font-size: 13px; font-weight: 500; color: var(--tm-metin-3, #98A2AE); letter-spacing: 0; }
.fp-eposta-not { font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); }

/* ==========================================================
   GENIS KARSILASTIRMA TABLOSU (paket sayfalari)
   ========================================================== */
.pv-grup td {
  background: var(--tm-zemin-alt, #F5F7FA) !important;
  font-weight: 700 !important; font-size: 12.5px !important;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--tm-baslik, #232B3A) !important;
  text-align: left !important; padding: 11px 14px !important;
}
.pv-ad { text-align: left !important; font-size: 13.5px; }
.pv-ipucu { color: #B7C0CB; font-size: 12px; cursor: help; margin-left: 3px; }
.pv-var { color: #6CBE45; font-size: 15px; }
.pv-yok { color: #C9D0D8; font-size: 16px; }
.pv-metin { font-size: 13px; font-weight: 600; color: var(--tm-baslik, #232B3A); }

/* ---------- Karanlik ----------
   Yuzeyler icin AYRI kural YOK: yukaridaki --tm-* tokenlari
   tema-mod.css'te karanlikta zaten donuyor. Burada yalnizca
   sabit renkli rozetler var - onlarin aydinlik tonu koyu
   zeminde okunmuyor. */
:root[data-theme="dark"] .fp-ns code { background: #0B0F15; }
:root[data-theme="dark"] .fp-bedava-etiket,
:root[data-theme="dark"] .fp-yesil { background: rgba(108,190,69,.16); color: #8FD46E; }
:root[data-theme="dark"] .fp-mavi  { background: rgba(70,130,200,.18); color: #8FB6E4; }
:root[data-theme="dark"] .fp-avantaj { color: #8FD46E; }
:root[data-theme="dark"] .fp-liste li.pv-k-yok i,
:root[data-theme="dark"] .pv-yok { color: #4A5464; }

/* ---------- Dar ekran ----------
   993px altinda Bootstrap zaten col-sm-6'ya duser (ikili). Kart ic
   dolgusu ve fiyat punto biraz buyutulur; dar ekranda 33px rakam
   iki satira bolunuyordu. */
@media (max-width: 991px) {
  .fp-izgara { margin-left: -8px; margin-right: -8px; }
  .fp-kutu { padding-left: 8px; padding-right: 8px; }
  .fp-eposta { flex-direction: column; align-items: flex-start; }
  .fp-eposta-sag { text-align: left; }
}
@media (max-width: 767px) {
  .fp-izgara { display: block; }
  .fp-izgara > .fp-kutu { display: block; }
  .fp-kart { height: auto; }
}

/* ==========================================================
   SEPET — IKI SUTUNLU YERLESIM                  (2026-08-24)
   ----------------------------------------------------------
   Solda kalem kartlari, sagda YAPISIK siparis ozeti. Ozetin
   sticky olmasinin sebebi: musteri sol sutunda sure/adet
   degistirirken toplamin degistigini ANINDA gormeli. Eski
   tabloda toplam sayfanin dibindeydi ve degisiklik gorunmuyordu.
   ========================================================== */
.sp-sayfa { padding: 34px 0 70px; background: var(--tm-zemin-alt, #F5F7FA); }

.sp-adimlar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 13px; color: var(--tm-metin-3, #98A2AE); }
.sp-adim { display: inline-flex; align-items: center; gap: 7px; }
.sp-adim b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tm-cizgi, #E7EBF0); color: var(--tm-metin-3, #98A2AE);
  font-size: 11.5px; font-weight: 700;
}
.sp-adim.sp-etkin { color: var(--tm-baslik, #232B3A); font-weight: 600; }
.sp-adim.sp-etkin b { background: var(--mk-kirmizi, #E8493A); color: #fff; }
.sp-adimlar > .fa { font-size: 12px; color: var(--tm-cizgi-koyu, #D9DEE5); }

.sp-baslik { font-size: 22px; margin: 0 0 16px; color: var(--tm-baslik, #232B3A); }

/* ---------- Kalem karti ---------- */
.sp-kalem {
  background: var(--tm-kart, #fff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 14px;
}
.sp-kalem-ust { display: flex; align-items: flex-start; gap: 13px; }
.sp-ikon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--tm-zemin-alt, #F5F7FA); color: var(--mk-kirmizi, #E8493A); font-size: 16px;
}
.sp-kalem-ad { flex: 1; font-size: 16px; font-weight: 700; color: var(--tm-baslik, #232B3A); line-height: 1.4; }
.sp-kalem-acik { font-size: 12.5px; font-weight: 400; color: var(--tm-metin-3, #98A2AE); margin-top: 3px; line-height: 1.5; }
.sp-etiket { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-left: 5px; }
.sp-mavi { background: #E4EDF8; color: #2B5A93; }
.sp-sil { flex-shrink: 0; color: var(--tm-metin-3, #B7C0CB); font-size: 15px; padding: 2px 4px; }
.sp-sil:hover { color: var(--mk-kirmizi, #E8493A); }

.sp-kalem-orta {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--tm-cizgi, #E7EBF0);
}
.sp-alan label { display: block; font-size: 11.5px; font-weight: 600; color: var(--tm-metin-3, #98A2AE); margin-bottom: 4px; }
.sp-alan .form-control { height: 38px; padding: 6px 10px; font-size: 13.5px; width: 110px; }
.sp-adet-alan .form-control { width: 74px; }
.sp-kalem-fiyat { margin-left: auto; text-align: right; }
.sp-tutar { font-size: 20px; font-weight: 800; color: var(--tm-baslik, #232B3A); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.sp-ustucizili { font-size: 12.5px; color: var(--tm-metin-3, #98A2AE); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.sp-kazanc { display: inline-block; background: #E8F5E2; color: #3C7024; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; }

.sp-kalem-alt { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--tm-cizgi, #E7EBF0); }
.sp-tik { font-size: 13px; line-height: 1.85; color: var(--tm-metin-2, #69737F); }
.sp-tik i { color: #6CBE45; margin-right: 6px; }
.sp-tik b { color: var(--tm-baslik, #232B3A); }
.sp-tik.sp-nott i { color: var(--mk-turuncu, #F49B1F); }

/* ---------- DNS kutusu ---------- */
.sp-dns {
  background: var(--tm-kart, #fff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-left: 3px solid var(--mk-mavi, #56B3E4);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 14px;
}
.sp-dns h4 { margin: 0 0 9px; font-size: 16px; color: var(--tm-baslik, #232B3A); }
.sp-dns h4 i { color: var(--mk-mavi, #56B3E4); margin-right: 7px; }
.sp-dns p { font-size: 13.5px; line-height: 1.7; color: var(--tm-metin-2, #69737F); margin-bottom: 10px; }
.sp-dns-not { font-size: 12.5px !important; color: var(--tm-metin-3, #98A2AE) !important; margin-bottom: 0 !important; }
.sp-ns { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sp-ns code { background: var(--tm-baslik, #232B3A); color: #fff; border: 0; font-size: 13px; padding: 7px 12px; border-radius: 6px; }

/* ---------- Ek hizmet onerisi ---------- */
.sp-oneri {
  background: #F0F3FB; border: 1px solid #DDE3F3;
  border-radius: 12px; padding: 20px 22px; margin-bottom: 14px;
}
.sp-oneri-ust { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.sp-oneri-ikon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; background: #5B62C4; color: #fff; font-size: 16px;
}
.sp-oneri-etiket { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #5B62C4; }
.sp-oneri h4 { margin: 2px 0 0; font-size: 16px; color: var(--tm-baslik, #232B3A); }
.sp-oneri p { font-size: 13.5px; line-height: 1.7; color: var(--tm-metin-2, #69737F); margin-bottom: 13px; }
.sp-oneri-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-oneri-fiyat { font-size: 20px; font-weight: 800; color: var(--tm-baslik, #232B3A); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.sp-oneri-fiyat span { font-size: 12.5px; font-weight: 500; color: var(--tm-metin-3, #98A2AE); letter-spacing: 0; }

.sp-bosalt { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--tm-metin-3, #98A2AE); }
.sp-bosalt:hover { color: var(--mk-kirmizi, #E8493A); }

/* ---------- Siparis ozeti (yapisik) ---------- */
.sp-ozet-sarmal { position: sticky; top: 92px; }
.sp-ozet {
  background: var(--tm-kart, #fff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 22px 22px 24px;
}
.sp-ozet h3 { margin: 0 0 16px; font-size: 18px; color: var(--tm-baslik, #232B3A); }
.sp-ozet-satir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13.5px; color: var(--tm-metin-2, #69737F); padding: 6px 0;
}
.sp-ozet-ad small, .sp-ozet-satir small { display: block; font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); }
.sp-ozet-satir > span > small { display: inline; }
.sp-ozet-tutar { flex-shrink: 0; font-weight: 600; color: var(--tm-baslik, #232B3A); font-variant-numeric: tabular-nums; }
.sp-ozet-satir.sp-yesil, .sp-ozet-satir.sp-yesil .sp-ozet-tutar { color: #457F2B; }
.sp-ozet-ayrac { height: 1px; background: var(--tm-cizgi, #E7EBF0); margin: 11px 0; }
.sp-ozet-toplam {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--tm-baslik, #232B3A);
}
.sp-ozet-toplam span:last-child { font-size: 24px; font-weight: 800; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.sp-ozet-not { font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); margin-top: 2px; }
.sp-ozet-kazanc {
  background: #E8F5E2; color: #3C7024; border-radius: 8px;
  padding: 10px 12px; margin-top: 13px; font-size: 12.5px; line-height: 1.6;
}
.sp-ozet-kazanc i { margin-right: 5px; }

.sp-kupon { margin: 15px 0 4px; font-size: 13px; }
.sp-kupon > a { color: var(--mk-kirmizi, #E8493A); }
.sp-kupon #sysKuponKutu { display: flex; gap: 7px; margin-top: 9px; }
.sp-kupon .form-control { height: 38px; font-size: 13.5px; }
.sp-kupon-uygulandi { background: #E8F5E2; color: #3C7024; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; }
.sp-kupon-uygulandi a { color: #3C7024; text-decoration: underline; margin-left: 7px; }

.sp-devam { width: 100%; text-align: center; margin-top: 14px; }
.sp-giris-not { font-size: 12px; color: var(--tm-metin-3, #98A2AE); margin-top: 9px; line-height: 1.6; }

.sp-guvence { margin-top: 16px; padding: 0 4px; font-size: 12.5px; color: var(--tm-metin-3, #98A2AE); line-height: 2; }
.sp-guvence i { color: #6CBE45; width: 17px; }
.sp-guvence p { margin: 7px 0 0; font-size: 12px; }

/* ---------- Bos sepet ---------- */
.sp-bos {
  background: var(--tm-kart, #fff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 60px 24px; text-align: center; max-width: 520px; margin: 0 auto;
}
.sp-bos > i { font-size: 42px; color: var(--tm-cizgi-koyu, #D9DEE5); }
.sp-bos h4 { margin: 16px 0 7px; color: var(--tm-baslik, #232B3A); }
.sp-bos p { color: var(--tm-metin-2, #69737F); margin-bottom: 18px; }

/* ---------- Karanlik ----------
   Yuzeyler --tm-* uzerinden zaten donuyor; burada yalnizca sabit
   renkli kutular var. */
:root[data-theme="dark"] .sp-oneri { background: #1F2536; border-color: #2E3650; }
:root[data-theme="dark"] .sp-oneri-etiket { color: #98A0E4; }
:root[data-theme="dark"] .sp-ns code { background: #0B0F15; }
:root[data-theme="dark"] .sp-mavi { background: rgba(70,130,200,.18); color: #8FB6E4; }
:root[data-theme="dark"] .sp-kazanc,
:root[data-theme="dark"] .sp-ozet-kazanc,
:root[data-theme="dark"] .sp-kupon-uygulandi { background: rgba(108,190,69,.16); color: #8FD46E; }
:root[data-theme="dark"] .sp-kupon-uygulandi a { color: #8FD46E; }
:root[data-theme="dark"] .sp-ozet-satir.sp-yesil,
:root[data-theme="dark"] .sp-ozet-satir.sp-yesil .sp-ozet-tutar { color: #8FD46E; }

/* ---------- Dar ekran ----------
   992px altinda ozet artik yapisik DEGIL: dar ekranda sticky bir
   kutu ekranin yarisini kaplar ve kalem kartlarini okunmaz hale
   getirir. Ozet, kalemlerin altina duser. */
@media (max-width: 991px) {
  .sp-ozet-sarmal { position: static; margin-top: 22px; }
  .sp-duzen { display: flex; flex-direction: column; }
}
@media (max-width: 575px) {
  .sp-kalem-orta { align-items: stretch; }
  .sp-kalem-fiyat { margin-left: 0; text-align: left; width: 100%; }
  .sp-alan .form-control { width: 100%; }
  .sp-adet-alan { flex: 0 0 84px; }
  .sp-alan { flex: 1; }
}

.sp-gri { background: var(--tm-cizgi, #E7EBF0); color: var(--tm-metin-2, #69737F); }
:root[data-theme="dark"] .sp-gri { background: #2A323E; color: #9AA5B4; }

/* ==========================================================
   PAKET SAYFASI — ALAN ADI SECIM PENCERESI      (2026-08-24)
   ----------------------------------------------------------
   Eski pencere iki radyo dugmesini yan yana duz metin olarak
   soruyordu ve secimin NE ANLAMA geldigi yazmiyordu. Musteri
   "mevcut alan adimi kullanmak istiyorum" derken ne yapmasi
   gerektigini bilmiyordu. Artik her secenek ne olacagini ve
   ne odeyecegini kendi icinde anlatiyor.
   ========================================================== */
.pk-modal { padding: 20px 22px; }
.pk-secim {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--tm-cizgi, #E7EBF0); border-radius: 10px;
  padding: 14px 15px; margin-bottom: 10px; font-weight: 400;
  transition: border-color .15s ease, background .15s ease;
}
.pk-secim:hover { border-color: var(--mk-kirmizi, #E8493A); }
.pk-secim input { margin: 3px 0 0; flex-shrink: 0; }
.pk-secim-ic b { display: block; font-size: 14.5px; color: var(--tm-baslik, #232B3A); margin-bottom: 3px; }
.pk-secim-ic small { display: block; font-size: 12.5px; line-height: 1.65; color: var(--tm-metin-2, #69737F); }
.pk-secim-ic code {
  background: var(--tm-zemin-alt, #F5F7FA); color: var(--tm-baslik, #232B3A);
  border: 0; font-size: 12px; padding: 1px 5px; border-radius: 4px;
}
.pk-domain-kutu { display: none; margin: 14px 0 4px; }
.pk-etiket { display: block; font-size: 12.5px; font-weight: 600; color: var(--tm-metin-2, #69737F); margin-bottom: 6px; }
.pk-domain-satir { display: flex; gap: 8px; }
.pk-domain-satir #sysDomain { flex: 1; }
.pk-domain-satir #sysDomainUzanti { width: 122px; flex-shrink: 0; }
.pk-domain-fiyat { margin-top: 9px; font-size: 12.5px; line-height: 1.6; }
.pk-ucretsiz { color: #3C7024; }
.pk-ucretsiz i { margin-right: 4px; }
.pk-ucretli { color: var(--tm-metin-2, #69737F); }
.pk-ucretli b { color: var(--tm-baslik, #232B3A); }
.pk-bilgi {
  background: var(--tm-zemin-alt, #F5F7FA); border-radius: 8px;
  padding: 11px 13px; margin-top: 15px; font-size: 12.5px; line-height: 1.65;
  color: var(--tm-metin-2, #69737F);
}
.pk-bilgi i { color: #6CBE45; margin-right: 5px; }
.pk-bilgi b { color: var(--tm-baslik, #232B3A); }

/* Fiyat basligindaki aylik karsiligi */
.pk-aylik { display: block; font-size: 12px; color: #8892a0; margin-top: 5px; line-height: 1.55; font-weight: 400; }
.pk-avantaj { color: #457F2B; }

:root[data-theme="dark"] .pk-avantaj { color: #8FD46E; }
:root[data-theme="dark"] .pk-ucretsiz { color: #8FD46E; }

.pricing-plan-price .pk-bedava { font-size: 26px; color: #6CBE45; font-weight: 700; }

/* 🔴 PLAN BASLIGI KONTRASTI
   .pk-aylik (#8892a0) ve .pk-avantaj (#457F2B) AYDINLIK zemin icin
   secilmisti. Paket sayfasindaki plan basliklari ise KOYU (siyah) ve
   onerilen sutun KIRMIZI. O renkler bu zeminlerde okunmuyordu -
   ozellikle kirmizi sutunda koyu yesil neredeyse gorunmuyordu.
   Baslik kapsaminda ikisi de aciliyor. */
.plan-header .pk-aylik   { color: rgba(255,255,255,.72); }
.plan-header .pk-aylik b { color: #fff; }
.plan-header .pk-avantaj { color: #A9E08A; }
.plan-header-standard .pk-aylik   { color: rgba(255,255,255,.85); }
.plan-header-standard .pk-avantaj { color: #FFF3C4; }
.plan-header .pricing-plan-period { opacity: 1; }

/* Emlak sayfalarindaki paylasilan paket tablosu (_paket-tablosu.asp)
   fiyatlandirma.asp ile AYNI gorunume oturtuldu: yillik one, aylik alta. */
.pricing-table .ep-fiyat { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; color: var(--tm-baslik, #232B3A); font-variant-numeric: tabular-nums; }
.pricing-table .ep-fiyat sup { font-size: 15px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.pricing-table .ep-fiyat del { font-size: 14px; color: var(--tm-metin-3, #98A2AE); letter-spacing: 0; }
.pricing-table .ep-bedava { color: #6CBE45; font-size: 27px; }
.pricing-table .ep-donem { margin: 6px 0 0; font-size: 12px; color: var(--tm-metin-3, #98A2AE); }
.pricing-table .ep-kutucuk { background: var(--tm-zemin-alt, #F5F7FA); border: 1px solid var(--tm-cizgi, #E7EBF0); border-radius: 8px; padding: 9px 10px; margin: 11px 0 0; text-align: left; }
.pricing-table .ep-ust { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--tm-metin-3, #98A2AE); }
.pricing-table .ep-aylik { font-size: 16px; font-weight: 700; color: var(--tm-baslik, #232B3A); font-variant-numeric: tabular-nums; }
.pricing-table .ep-aylik span { font-size: 11.5px; font-weight: 500; color: var(--tm-metin-3, #98A2AE); }
.pricing-table .ep-avantaj { font-size: 11.5px; line-height: 1.5; color: #457F2B; margin-top: 3px; }
:root[data-theme="dark"] .pricing-table .ep-avantaj { color: #8FD46E; }

/* Emlak paket tablosu: kartlar ESIT YUKSEKLIK.
   "En Cok Tercih Edilen" karti fazladan bir etiket satiri tasidigi
   icin digerlerinden uzundu; "Incele" butonlari farkli hizalarda
   kaliyor ve satir bozuk gorunuyordu. */
.ep-izgara { display: flex; flex-wrap: wrap; }
.ep-izgara > .ep-kutu { display: flex; }
.ep-izgara > .ep-kutu > .pricing-table { display: flex; flex-direction: column; width: 100%; }
.ep-izgara > .ep-kutu > .pricing-table > .button { margin-top: auto; }
@media (max-width: 767px) {
  .ep-izgara { display: block; }
  .ep-izgara > .ep-kutu { display: block; }
}

/* ==========================================================
   BOLUM NAVIGASYONU                              (2026-08-24)
   ----------------------------------------------------------
   Emlak hattinda 9 sayfa var. Menuye dev bir dropdown asmak
   yerine "paketler/emlak-web-paketi" MERKEZ sayfa yapildi.
   Iki parca: merkezdeki IZGARA, alt sayfalardaki DONUS CUBUGU.
   Ikisi de emlak-parcalar/_bolum-haritasi.asp'den uretilir.
   ========================================================== */

/* ---------- Merkez izgara ---------- */
.bh-eyebrow {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--mk-kirmizi, #E8493A); margin-bottom: 8px;
}
.bh-grup-satir { margin-bottom: 8px; }
.bh-grup {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--tm-cizgi, #E7EBF0);
  padding-top: 20px; margin: 22px 15px 16px;
}
.bh-grup-ad {
  font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--tm-baslik, #232B3A);
}
.bh-grup-alt { font-size: 13px; color: var(--tm-metin-3, #98A2AE); }
.bh-sutun { margin-bottom: 14px; }

/* Kart YATAY: ikon solda, metin ortada, ok sagda. Onceki dikey
   ortalanmis kart, dokuz kutu yan yana gelince cok dikey yer
   kapliyordu ve sayfanin ILK bolumu olarak ekrani dolduruyordu. */
.bh-kutu {
  display: flex; align-items: center; gap: 13px; height: 100%;
  background: var(--tm-kart, #fff); border: 1px solid var(--tm-cizgi, #E7EBF0);
  border-radius: 12px; padding: 15px 16px; text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bh-kutu:hover {
  transform: translateY(-2px); border-color: var(--mk-kirmizi, #E8493A);
  box-shadow: 0 10px 24px rgba(35, 43, 58, .10); text-decoration: none;
}
.bh-ikon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tm-zemin-alt, #F5F7FA); color: var(--mk-kirmizi, #E8493A); font-size: 17px;
}
.bh-kutu-ic { flex: 1; min-width: 0; }
.bh-kutu-ic b {
  display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35;
  color: var(--tm-baslik, #232B3A); margin-bottom: 2px;
}
.bh-kutu-ic small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--tm-metin-3, #98A2AE); }
.bh-ok { flex-shrink: 0; font-size: 16px; color: var(--tm-cizgi-koyu, #C9D0D8); }
.bh-kutu:hover .bh-ok { color: var(--mk-kirmizi, #E8493A); }

/* ---------- Alt sayfa donus cubugu ---------- */
.bh-cubuk {
  background: var(--tm-kart, #fff);
  border-bottom: 1px solid var(--tm-cizgi, #E7EBF0);
  padding: 11px 0;
}
.bh-cubuk-ic { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bh-geri { display: inline-flex; align-items: center; gap: 9px; color: var(--tm-baslik, #232B3A); }
.bh-geri:hover { color: var(--mk-kirmizi, #E8493A); text-decoration: none; }
.bh-geri > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tm-zemin-alt, #F5F7FA); font-size: 15px;
}
.bh-geri:hover > i { background: var(--mk-kirmizi, #E8493A); color: #fff; }
.bh-geri b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.bh-geri small { display: block; font-size: 11.5px; color: var(--tm-metin-3, #98A2AE); }

.bh-kardes { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bh-kardes-ad {
  font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--tm-metin-3, #98A2AE); margin-right: 2px;
}
.bh-cip {
  display: inline-block; font-size: 12.5px; line-height: 1;
  padding: 7px 12px; border-radius: 20px;
  border: 1px solid var(--tm-cizgi, #E7EBF0);
  background: var(--tm-kart, #fff); color: var(--tm-metin-2, #69737F);
}
a.bh-cip:hover { border-color: var(--mk-kirmizi, #E8493A); color: var(--mk-kirmizi, #E8493A); text-decoration: none; }
/* Aktif sayfa TIKLANMAZ: kendine giden bir baglanti, ziyaretciye
   "buradasin" demez, bozuk his verir. <span> olarak basilir. */
/* 🔴 Aktif cipin zemini MARKA RENGI, metin tokeni DEGIL.
   Onceki hali background: var(--tm-baslik) idi. O bir METIN
   tokenidir: aydinlikta koyu lacivert, KARANLIKTA ise neredeyse
   beyaz. Tema donunce cip beyaz zemin + beyaz yazi oluyor ve
   aktif sayfanin adi tamamen kayboluyordu. Marka kirmizisi her
   iki zeminde de beyaz yaziyla okunur. */
.bh-cip-aktif {
  background: var(--mk-kirmizi, #E8493A); border-color: var(--mk-kirmizi, #E8493A);
  color: #fff; font-weight: 600; cursor: default;
}

@media (max-width: 767px) {
  .bh-cubuk-ic { flex-direction: column; align-items: stretch; gap: 11px; }
  .bh-kardes { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .bh-cip { white-space: nowrap; }
  .bh-grup { margin-left: 0; margin-right: 0; }
}

/* ==========================================================
   CEREZ ONAY BILDIRIMI                          (2026-08-25)
   ----------------------------------------------------------
   Ekranin altina yapisir ama iceriGI ENGELLEMEZ. KVKK sitenin
   kullanilamaz hale getirilmesini gerektirmiyor; zorunlu
   cerezler icin zaten riza aranmiyor. Modal bir duvar kurmak
   ziyaretciyi "Kabul Et"e mecbur birakmak olurdu - bu da
   rizanin "ozgur irade" sartini zedeler.
   ========================================================== */
.trf-cerez {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
  background: var(--tm-kart, #fff);
  border-top: 1px solid var(--tm-cizgi, #E7EBF0);
  box-shadow: 0 -6px 24px rgba(35, 43, 58, .10);
  padding: 14px 0;
}
.trf-cerez[hidden] { display: none; }
.trf-cerez-ic {
  max-width: 1170px; margin: 0 auto; padding: 0 15px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.trf-cerez-metin {
  flex: 1 1 380px; font-size: 13.5px; line-height: 1.65;
  color: var(--tm-metin-2, #69737F);
}
.trf-cerez-metin b { color: var(--tm-baslik, #232B3A); }
.trf-cerez-metin a { color: var(--mk-kirmizi, #E8493A); text-decoration: underline; }
.trf-cerez-dugme { display: flex; gap: 9px; flex-shrink: 0; }

/* 🔴 REDDET, KABUL ILE AYNI AGIRLIKTA.
   KVKK rizanin ozgur olmasini sarti kosar; reddi soluk gri kucuk
   bir yaziya donusturmek "karanlik desen"dir. Iki dugme de ayni
   boyutta, ayni yazi kaliniginda. Fark yalnizca renk. */
.trf-cerez-dugme button {
  font-size: 13.5px; font-weight: 600; line-height: 1;
  padding: 11px 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--tm-cizgi-koyu, #D9DEE5);
  background: var(--tm-kart, #fff); color: var(--tm-baslik, #232B3A);
  transition: background .15s ease, border-color .15s ease;
}
.trf-cerez-dugme button:hover { border-color: var(--tm-metin-3, #98A2AE); }
.trf-cerez-dugme .trf-cerez-birincil {
  background: var(--mk-kirmizi, #E8493A); border-color: var(--mk-kirmizi, #E8493A); color: #fff;
}
.trf-cerez-dugme .trf-cerez-birincil:hover { background: var(--mk-kirmizi-h, #CF3B2D); border-color: var(--mk-kirmizi-h, #CF3B2D); }
.trf-cerez-dugme button:focus-visible { outline: 2px solid var(--mk-kirmizi, #E8493A); outline-offset: 2px; }

@media (max-width: 575px) {
  .trf-cerez-ic { gap: 12px; }
  .trf-cerez-dugme { width: 100%; }
  .trf-cerez-dugme button { flex: 1; }
}

/* Hukuki metinlerdeki cerez tablosu */
.hk-tablo-sarmal { overflow-x: auto; margin: 18px 0 26px; }
.hk-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.hk-tablo th, .hk-tablo td {
  border: 1px solid var(--tm-cizgi, #E7EBF0); padding: 10px 12px;
  text-align: left; vertical-align: top; line-height: 1.6;
}
.hk-tablo th { background: var(--tm-zemin-alt, #F5F7FA); font-weight: 700; color: var(--tm-baslik, #232B3A); }
.hk-tablo code { background: var(--tm-zemin-alt, #F5F7FA); border: 0; font-size: 12.5px; padding: 2px 6px; border-radius: 4px; color: var(--tm-baslik, #232B3A); }

/* Musteri paneli — pakete bagli ek hizmetler (musteri/paketlerim.asp) */
.pk-alt { margin: 7px 0 0 4px; padding-left: 12px; border-left: 2px solid var(--tm-cizgi, #E7EBF0); font-size: 13px; }
.pk-alt > .fa { color: var(--tm-metin-3, #98A2AE); margin-right: 3px; }
.pk-alt-ad { color: var(--tm-metin, #323232); font-weight: 500; }
.pk-alt-bilgi { font-size: 12px; color: var(--tm-metin-3, #98A2AE); margin-top: 1px; font-variant-numeric: tabular-nums; }
.pk-etiket { display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 6px; border-radius: 3px; margin-left: 4px;
  background: var(--tm-zemin-alt, #F5F7FA); color: var(--tm-metin-2, #69737F); }
.pk-etiket.pk-iptal { background: #FBE3E1; color: #A4322A; }
.pk-yakin { color: #B7701A; font-weight: 600; }
.pk-gecti { color: #D7263D; font-weight: 600; }
:root[data-theme="dark"] .pk-etiket.pk-iptal { background: rgba(215,38,61,.18); color: #FF8A80; }

.pk-alt-yenile { margin-left: 6px; font-size: 12px; color: var(--mk-kirmizi, #E8493A); white-space: nowrap; }
.pk-alt-yenile:hover { text-decoration: underline; }