/* templates/base.html icindeki <style> blogundan cikarildi.
   Inline CSS her sayfa yuklenisinde yeniden iniyordu; ayri dosya
   tarayicida onbellege alinabiliyor. Konum birebir korundu, yani
   kurallarin siralamasi (cascade) degismedi. */
/* CranioCatch mega menu (Urunlerimiz + Kaynaklar) - kendine ait, benzersiz
   sinif adlariyla (cc-mm__*) yazildi; sayfalarda ayni isimli baska sinif
   (ornegin .products-section, .explore-section) ile hicbir cakismasi yok,
   bu yuzden anasayfa disindaki sayfalarda bozulma yapmiyor. */
/* Mega menu acikken sayfayi karartan katman. Menunun ARKASINDA (z-index 999,
   .cc-mm 1000) ve navbar'in altinda kaliyor; boylece menu ile ust menu
   cubugu net, geri kalan sayfa koyu gorunuyor.
   position: fixed - sayfa kaydirilsa bile tum ekrani kapatir. */
.cc-mm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 999;
  opacity: 0;
  transition: opacity .2s ease;
}
.cc-mm-overlay.is-visible {
  opacity: 1;
}
/* Hareket azaltma tercihi olan kullanicida solmayi kapat. */
@media (prefers-reduced-motion: reduce) {
  .cc-mm-overlay {
    transition: none;
  }
}

/* Header ile menu arasindaki boslugu kaplayan gorunmez hover seridi.
   Konumu/olculeri JS'te (positionDropdown) linkin altina yaziliyor.
   Gorsel olarak hicbir sey ciziyor degil - sadece imlec bosluktan gecerken
   menunun kapanmamasi icin hover alani. */
.cc-mm-bridge {
  display: none;
  /* Menu gibi fixed: header sticky oldugu icin ikisi de viewport'a gore
     konumlaniyor, scroll'da birlikte hareket ediyorlar. */
  position: fixed;
  z-index: 1000;
}

.cc-mm {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 1000;
  max-height: 90vh;
  /* Menu artik ekrani boydan boya kaplamiyor: ortalanmis, azami genisligi
     sinirli bir kart. left/width JS'ten kaldirildi (positionDropdown yalnizca
     dikey konumu veriyor), yatay yerlesim burada. */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1060px;
  /* Kart gorunumu: dort kose de ayni 20px. Tam genislikteyken ustte ince bir
     ayirici cizgi (border-top) vardi; kartta gereksiz, kaldirildi. */
  border-radius: 20px;
  /* Kose yuvarlakligi icerigi de kirpsin: ust satirdaki gorsel ve alttaki
     footer seridi koseden tasmasin. */
  overflow: hidden;
  overflow-y: auto;
}

.cc-mm__grid {
  display: grid;
  align-items: stretch;
  /* Esit bolusum: 1060px kartta iki sutun da 530px.
     Banner sutunu 530x437 -> kutu orani 1.213. Onizleme gorselleri TAM bu
     orana gore uretildi (icerikleri kesilmeden, etraflarindaki saydam alan
     ayarlanarak), boylece dordu de kutuya birebir oturuyor: hicbir kenarda
     ne kesme ne bosluk var.
     Not: sol sutunda 40px yatay padding oldugu icin metin alani 450px,
     yani gorsel biraz daha genis duruyor - bu bilincli, kutu oranini
     gorsellere yakin tutup eklenen saydam alani en aza indiriyor. */
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-width: 0;
}
.cc-mm__grid--resources {
  /* Uc esit liste sutunu + banner. Banner payi ~%36; eskiden 9/30 = %30 ile
     daha dar kaliyordu ve gorsel alani urunler menusundekiyle ayni
     olcude durmuyordu. */
  grid-template-columns: 1fr 1fr 1fr 1.7fr;
  /* Yukseklik banner GORSELINE gore: banner sutunu 1060px kartta 383px
     (1.7/4.7) ve teklif gorselinin orani 2168/1820 = 1.191, yani kutunun
     383/1.191 = 322px olmasi gerekiyor ki gorsel her kenara sifir otursun.

     Bu deger urunler menusunun 437px'inden kisa, yani iki menu artik ayni
     boyda DEGIL - bilincli tercih. Esitlemek icin ya kart 1511px'e
     genisletilmeli (liste sutunlari sikismasin diye) ya da kaynaklar
     banneri 383x437 = 0.88 dikey orana gore yeniden tasarlanmali; mevcut
     yatay gorsel o orana kirpilamiyor cunku altta CTA seridi var ve
     etrafinda hic saydam pay yok.

     322px, en uzun liste sutunu olan Platformlar'i (baslik + 6 link,
     ~314px) da tasirmiyor. min-height degil sabit height: liste icerigi
     buyurse kolon uzar ve oran yine bozulurdu. */
  height: 322px;
}
.cc-mm__col {
  min-width: 0;
  padding: 32px clamp(24px, 3vw, 40px);
}
.cc-mm__col--list + .cc-mm__col--list {
  border-left: 1px solid #f0f0f0;
}
.cc-mm__heading {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-ink, #0B0B0F);
}
.cc-mm__list {
  display: flex;
  flex-direction: column;
  /* Item'lar 10px dikey padding aldi (hover zemini icin); araliklar
     ust uste binmesin ve listenin toplam ritmi degismesin diye gap
     16'dan 6'ya cekildi: 6 + 10 + 10 = eskiden gorulen ~16px'lik nefes. */
  gap: 6px;
}
.cc-mm__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  /* Hover zemini metne bitismesin diye ic bosluk. Yatayda ayni miktarda
     negatif margin var, boylece zemin metnin soluna/saginda tasarken metnin
     sutun icindeki hizasi degismiyor. Dikeyde negatif margin YOK: gap ile
     birlesince kutular ust uste biniyordu, onun yerine gap kucultuldu. */
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 14px;
  /* background-image de gecise dahil: aktif satirda hover zemini
     background-color degil, iki katmanli background-image ile veriliyor. */
  transition: background-color .2s ease, background-image .2s ease;
}
.cc-mm__item:hover {
  background-color: rgba(179, 185, 194, .12);
}

/* Aktif modul (bulundugumuz sayfanin modulu): kenarlik gradyan.
   Hover zeminiyle birlikte de calisir - hover ayri bir arka plan RENGI,
   bu ise kenarlik; ikisi cakismiyor.

   Gradyan bir kenarlik border-color ile verilemez. border-image ise
   border-radius'u yok sayip koseleri dikleştirir. Bu yuzden klasik iki
   katmanli maske: dis katman gradyan (border-box'a boyanir), ic katman
   duz beyaz (padding-box'ta durur); aradaki 1px'lik serit gradyan olarak
   goruniyor. background-origin/clip cifti bu iki alani ayiriyor. */
.cc-mm__item.active {
  border: 1px solid transparent;
  /* Kenarlik 1px eklendi; padding'den ayni miktarda dusuluyor ki aktif
     satir digerlerinden 2px daha yuksek/genis durmasin. */
  padding: 9px 11px;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #FF6262 0%, #7640E8 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
/* Aktif satirin uzerine gelinince ic katman hover tonuna donuyor.
   Renk OPAK yazildi (#F6F7F8 = rgba(179,185,194,.12)'nin beyaz uzerindeki
   karsiligi): yari saydam birakilsa altindaki gradyan katman ic alandan
   sizip hover tonunu kirletirdi. */
.cc-mm__item.active:hover {
  background-image:
    linear-gradient(#F6F7F8, #F6F7F8),
    linear-gradient(90deg, #FF6262 0%, #7640E8 100%);
}
.cc-mm__icon {
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.cc-mm__icon.active {
  background-image: url("/static/images/dropdowns/active-module.ac7f141adf83.svg") !important;
}
.cc-mm__item-body {
  min-width: 0;
}
.cc-mm__item-body a {
  display: block;
  text-decoration: none;
}
.cc-mm__item-body h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink, #0B0B0F);
}
.cc-mm__item-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cc-muted, #666D7C);
}
/* Kaynaklar menusundeki liste linkleri. Gorsel dil urunler menusundeki
   .cc-mm__item ile ayni: hover'da B3B9C2 %12 zemin, 14px yuvarlaklik. */
.cc-mm__link {
  display: block;
  /* Zemin metne bitismesin diye ic bosluk; yatayda ayni miktarda negatif
     margin, boylece metnin sutun icindeki hizasi degismiyor. */
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 14px;
  color: var(--cc-text, #575C6B);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.cc-mm__link:hover {
  color: var(--cc-ink, #0B0B0F);
  background-color: rgba(179, 185, 194, .12);
}

/* Banner sutunu. Iki sey gosteriyor: hover yokken varsayilan teklif banneri
   (ustte kisi, altta "Size ozel teklifinizi..." + "Toplanti Planla" gradyan
   seridi), bir modulun uzerine gelindiginde o modulun mockup gorseli.

   Ikisi FARKLI davraniyor, cunku kirpmaya toleranslari ayni degil:

   - Modul onizlemeleri sutunu bastan sona DOLDURUR (cover). Sutun oraninda
     kirpma yatayda olusuyor ve bu guvenli: dosyalarinda cihazin iki yaninda
     genis saydam pay var. Sabit bir oran kutusu vermek (denendi, 1.43:1)
     sutun ondan uzun oldugunda ustte bosluk birakiyordu.

   - Varsayilan banner ise kendi orani korunarak SIGDIRILIR (contain).
     Doldurmak onu dikeyden %6-17 keser ve kesilen yer tam alt seritteki
     CTA. O gorselde saydam pay da yok, yani kirpilacak fazlalik yok. */
.cc-mm__col--banner {
  padding: 0;
  min-width: 0;
  /* Banner kutusu sutunu bastan sona kaplasin: gorsel ustte kart kenarindan
     baslayip altta footer seridine kadar insin, arada beyaz pay kalmasin.
     (Ortalamak ya da alta dayamak, sutun gorselden uzun oldugunda diger
     ucta bosluk birakiyordu.) */
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Banner sutunun tam enini kaplasin: flex ogesi olarak varsayilan
   genisligi icerige gore daralmasin. */
.cc-mm__col--banner > .cc-mm__banner {
  flex: 1 1 auto;
  min-width: 0;
  /* Kutu sutunu bastan sona kaplar: ustte kart kenarindan altta footer
     seridine kadar, arada pay kalmadan. */
  align-self: stretch;
}
.cc-mm__banner {
  display: block;
  /* Sabit oran YOK: kutu sutunun yuksekligini aliyor, boylece hicbir kenarda
     pay kalmiyor. (Sabit 1.43:1 denendi; sutun ondan uzun oldugunda ustte
     bosluk kaliyordu.) */
  height: 100%;
  /* Sutunun tam enini kaplar: max-width vermek gorselin iki yaninda
     (ozellikle sagda, menunun kenarinda) beyaz bosluk birakiyordu. */
  width: 100%;
  overflow: hidden;
}
.cc-mm__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain: alt seritteki CTA metni hicbir kosulda kirpilmasin. */
  object-fit: contain;
  /* Gorsel kutudan daha dik oldugu icin contain yatayda pay birakiyor.
     Saga dayayarak bu payi kart kenarindan alip metin sutunu tarafina
     tasiyoruz - gorsel menunun sag kenarina sifir oturuyor. */
  object-position: right center;
}

/* Modul onizlemesi (bir urunun uzerine gelindiginde).

   Kutu gorsellerin oranina (~1.43:1) sabitlenmis ve kart genisligi de buna
   gore secilmis: 1060px kartta esit bolusumlu grid banner sutununu ~530px
   yapiyor, sutun yuksekligi (~372px, urun listesi kadar) ile birlikte oran
   1.43'e denk geliyor. Yani kutu sutunu dogal olarak dolduruyor ve gorseli
   kirpmaya gerek kalmiyor.

   Denenip birakilanlar:
   - Kutuyu sutuna gerdirip cover: 900px kartta kutu neredeyse kareye
     dusuyordu, gorseller her yandan %13-19 kesiliyordu.
   - contain + pay'i alta/uste dayamak: payi yok etmiyor, diger uca tasiyor.

   angle (1.66:1) digerlerinden daha yatay oldugu icin kutu yuksekliginin
   %86'sini kapliyor - bir tik kucuk durur ama kesilmez.

   Kutu .cc-mm__banner'da tanimli; varsayilan banner da ayni kutuyu
   kullaniyor. Fark object-fit'te: varsayilan banner contain (alt seritteki
   CTA kirpilmasin), onizlemeler cover (sutunu doldursun). Ikisi de saga
   dayali. */
.cc-mm__banner.is-preview .cc-mm__banner-img {
  /* Onizleme dosyalari banner sutununun oraniyla (530/437 = 1.213) BIREBIR
     ayni orana getirildi: icerikleri kesilmeden, etraflarindaki saydam alan
     o orana gore ayarlandi. Oranlar esit oldugu icin contain de cover da
     ayni sonucu verir - contain yaziliyor ki ileride kutu orani kayarsa
     gorsel kesilmek yerine sigsin. */
  object-fit: contain;
}

.cc-mm__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Zemin menunun geri kalaniyla ayni beyaz; eskiden #f0f0fa serit vardi.
     Beyaz olunca footer icerikten ayrismadigi icin ust kenara ince bir
     ayirici cizgi konuyor. */
  border-top: 1px solid #f0f0f0;
  padding: 16px clamp(24px, 3vw, 40px);
}
.cc-mm__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: var(--cc-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cc-mm__footer-arrow {
  flex: 0 0 auto;
  display: inline-block;
  width: 11px;
  height: 12px;
  background-color: #FF6262;
  -webkit-mask-image: url("/static/images/svg/arrow-link.b33c6ab5d8fe.svg");
  mask-image: url("/static/images/svg/arrow-link.b33c6ab5d8fe.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.cc-mm__footer-divider {
  color: #0D0F2C;
  opacity: .15;
}
@media (max-width: 992px) {
  .cc-mm__grid,
  .cc-mm__grid--resources {
    grid-template-columns: 1fr;
  }
  .cc-mm__col--list + .cc-mm__col--list {
    border-left: none;
    border-top: 1px solid #f0f0f0;
  }

  /* Burada grid tek sutuna dustugu icin banner menunun TAM enini kapliyor;
     kendi oraniyla (~1.19:1) 900px genislikte ~755px yuksekliginde bir blok
     olur ve menuyu sisirirdi. Masaustunun aksine burada genisligi sinirlamak
     gerekiyor; ortalanmis olmasi da tek sutunlu duzende dogru duruyor. */
  .cc-mm__col--banner > .cc-mm__banner {
    flex: 0 1 auto;
    max-width: 420px;
    margin: 0 auto;
  }
  .cc-mm__col--banner {
    justify-content: center;
    padding: 24px clamp(24px, 3vw, 40px);
  }
}