/* =============================================================
   MOSSAICA — TASARIM SISTEMI
   -------------------------------------------------------------
   Yeni gorsel kimligin temel katmani.
   Bu asamada SADECE masthead (header) ve hero uygulanmistir.
   Diger bolumler hala eski tema + theme-dark.css ile calisiyor;
   sirayla bu sisteme tasinacak.

   Onek kurali: yeni sistemin her sinifi "mos-" ile baslar.
   Eski tema sinifi (themesflat-, tp-, owl-, fa-) kullanilmaz.
   ============================================================= */

/* -------------------------------------------------------------
   1. JETONLAR
   ------------------------------------------------------------- */
:root {
  /* --- Zemin ailesi "Ink" — saf siyah yok ---
     Tum aile ~%12 aciga alindi (lacivert ton acisi korunarak).
     Kademeler arasi fark aynen korundu ki kartlar zeminden
     ayrilmaya devam etsin. */
  --ink-950: #101822;
  --ink-900: #16202D;   /* sayfa zemini */
  --ink-800: #1F2B3A;   /* kart yuzeyi  */
  --ink-700: #263447;   /* hover / girinti */
  --ink-600: #2F3F53;

  /* --- Metin — saf beyaz yok --- */
  --text-primary:   #EDF1F5;
  --text-secondary: #98A6B6;
  --text-tertiary:  #5F7285;

  /* --- Vurgu: logonun celik mavisi --- */
  --accent:        #6FA3CE;
  --accent-bright: #A8CDE8;
  --accent-deep:   #1F3852;

  /* --- Sicak nota, cok az kullanilir --- */
  --bone: #D8CFC2;

  /* --- Kil cizgi: tek ayirici elemanimiz --- */
  --hairline:        rgba(237, 241, 245, 0.08);
  --hairline-strong: rgba(237, 241, 245, 0.16);

  /* --- Atmosfer katmani ---
     Ton kaymasi kasten cok kucuk: yan yana bakilinca fark edilmez,
     kaydirirken "baska bir bolum" hissi verir. */
  --ink-atmo:      #192432;

  /* --- Kart yuzeyi ---
     Zemin acilinca kartlarin ayrismasi icin ince kenarlik ve
     cok hafif golge. Gosteri degil, katman ayrimi.
     Kart/zemin farki bir tik acildi ve kenarlik guclendi. */
  --card-border: rgba(237, 241, 245, 0.14);
  --card-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
                 0 14px 38px rgba(6, 10, 16, 0.26);
  /* Kartin ust kenarinda hissedilen cok hafif isik; gradient
     asiriya kacmasin diye tek yonlu ve %2'nin altinda. */
  --card-sheen: linear-gradient(180deg,
                  rgba(237, 241, 245, 0.018) 0%,
                  rgba(237, 241, 245, 0) 42%);

  /* --- Mozaik duvar katmani ---
     Yuzeyin ALTINDA hissedilen mimari cam mozaik duvar.
     Iki kademe: tessera derzi (ince) + levha eki (bir tik belirgin).
     Gercek mozaik levhalari ~30cm karelerdir; levha ekleri o yuzden
     tessera derzinden farkli agirlikta. */
  /* Zemin acilinca izgara one cikmaya basladi; opaklik ~%30 dusuruldu.
     Amac hissedilmesi, fark edilmesi degil. */
  --grout-tessera: rgba(237, 241, 245, 0.018);   /* tas arasi derz  ~%1.8 */
  --grout-sheet:   rgba(237, 241, 245, 0.027);   /* levha eki       ~%2.7 */
  --wall-plane:    rgba(237, 241, 245, 0.005);   /* yuzey duzlemi         */

  /* --- Masthead yuzeyi ---
     Logo lacivert ve dosyaya dokunulmuyor; koyu zeminde okunmadigi
     icin masthead acik bir "kunye seridi" olarak tasarlandi.
     Ileride acik renkli bir logo dosyasi gelirse bu iki degeri
     koyuya cevirmek yeterli. */
  --head-surface:   #F0F3F7;
  --head-text:      #101A25;
  --head-muted:     #64748B;
  --head-hairline:  rgba(10, 16, 23, 0.10);

  /* --- Kose yariçapi: keskin ama modern --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;   /* studyo kartlari; brief'teki ust sinir 10px'ti,
                     "daha modern kose" istegi icin bir kademe acildi */

  /* --- Golge: sadece derinlik, gosteri degil --- */
  --shadow-soft:  0 1px 2px rgba(5, 10, 16, 0.16), 0 10px 30px rgba(5, 10, 16, 0.14);
  --shadow-lift:  0 2px 6px rgba(5, 10, 16, 0.20), 0 18px 48px rgba(5, 10, 16, 0.24);

  /* --- Hareket --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 240ms;
  --t-media: 700ms;

  /* --- Boşluk olcegi --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px; --s-12: 200px;

  /* --- Olcuye dayali degiskenler --- */
  --head-h: 106px;        /* daha ferah kunye seridi */
  --head-h-min: 78px;
  --logo-h: 76px;         /* 46 -> 60 -> 66 -> 76px (header yuksekligi sabit) */
  --logo-h-min: 57px;
  /* --- Ortak genislik sistemi ---
     Sitedeki HER bolum ayni kabi kullanir: min(90vw, 1520px).
     Boylece sol/sag eksen tum sayfalarda ayni yerde baslar.
     Onceki durumda uc farkli eksen vardi (olculdu, 1440px):
       header  58px | ana sayfa bolumleri 40px | araclar 135px
     Dar ekranda 90vw kenarlarda ~20px birakir (390px -> 19.5px). */
  --shell-max: 1520px;
  --shell-w: min(90vw, var(--shell-max));

  /* Uzun metin okuma olcusu — kaba genislikten bagimsiz */
  --prose-max: 760px;

  /* --- Baslik olcegi ---
     Once dagiliktI (1440px'te olculdu): sayfa basliklari 76/68/62/56,
     bolum basliklari 54. Sayfa basligi bolum basligindan buyuk olmali
     ama ikisi de bu kadar iri olmamali. Iki jetona indirildi:
       sayfa  76 -> 52 -> 38   bolum  54 -> 46 -> 34
     Ikinci tur: 52 hala iri duruyordu. Butun basliklar bu iki
     jetondan besleniyor, yani degeri degistirmek hepsini birden
     tasiyor — sayfa basliklari da bolum basliklari da. */
  --title-page: clamp(26px, 2.6vw, 38px);
  --title-section: clamp(23px, 2.3vw, 34px);

  /* Eski jetonlar: sadece geride kalan tekil kullanimlar icin */
  --shell-pad: clamp(20px, 4vw, 80px);
  --hero-pad: clamp(20px, 2.8vw, 54px);

  /* --- Yazi aileleri --- */
  --font-ui: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
}

/* -------------------------------------------------------------
   2. KAP
   ------------------------------------------------------------- */
/* Ortak kap. Kenar boslugu padding ile degil, kabin kendi
   genisligiyle olusur: boylece tam kanamali (bleed) bolumlerin
   ic hizasi da ayni eksene oturur. */
.mos-shell {
  width: var(--shell-w);
  margin-inline: auto;
}

/* Uzeri ustu etiket — sistemin imzasi */
.mos-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}

/* Ekran okuyucu icin */
.mos-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------
   2.5 KOPRU — eski layout sarmallari
   Layout'ta icerik hala .container icinde ve py-5/my-5 bosluklari
   var. Hero'nun masthead'e yaslanmasi icin bunlar sifirlanir.
   Ic sayfalarin ust boslugu #featured-title uzerinden verilir.
   (Bu blok, layout yeni sisteme tasininca silinecek.)
   ------------------------------------------------------------- */
/* Eski tema body'ye overflow-x:hidden veriyordu; bu, sticky masthead'i
   kiriyordu (hidden bir kaydirma kabi olusturur). "clip" ayni yatay
   tasma korumasini verir ama sticky'yi bozmaz. */
body.page {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

#main-content { padding-top: 0 !important; }

#content-wrap.container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ic sayfalarda baslik seridi ile icerik arasi bosluk azaltildi:
   icerik yukari cikinca sayfa daha ferah aciliyor. */
#featured-title + #main-content { padding-top: 24px !important; }

/* Baslik seridi olmayan sayfalarda ust bosluk buradan gelir,
   yoksa icerik sticky masthead'e yapisiyor. */
#main-content:has(.mos-studio),
#main-content:has(.mos-ambience) { padding-top: clamp(30px, 4vh, 52px) !important; }

/* Statik sayfalar kendi buyuk basligini basiyor; serit ikinci bir
   baslik olusturuyordu. Serit sadece BU sablonun kullanildigi
   sayfalarda gizleniyor — ayni controller metodu urun/proje
   detaylarini da bastigi icin metoda gore kapatilamazdi. */
#featured-title:has(+ #main-content .mos-page),
#featured-title:has(+ #main-content .mos-index),
#featured-title:has(+ #main-content .mos-case),
#featured-title:has(+ #main-content .mos-catalog),
#featured-title:has(+ #main-content .mos-item),
#featured-title:has(+ #main-content .mos-vault),
#featured-title:has(+ #main-content .mos-contact),
#featured-title:has(+ #main-content .mos-docs) { display: none; }

/* Ozgulluk notu: "#featured-title + #main-content" iki ID tasiyor
   ve ust dolguyu !important ile veriyor; asagisi onu gecmek icin
   ayni zincire :has ekliyor. */
#featured-title + #main-content:has(.mos-page),
#featured-title + #main-content:has(.mos-index),
#featured-title + #main-content:has(.mos-case),
#featured-title + #main-content:has(.mos-catalog),
#featured-title + #main-content:has(.mos-item),
#featured-title + #main-content:has(.mos-vault),
#featured-title + #main-content:has(.mos-contact),
#featured-title + #main-content:has(.mos-docs) {
  padding-top: clamp(30px, 4vh, 52px) !important;
}

/* Gorsel olarak gizli ama okunabilir (ekran okuyucu / arama motoru).
   display:none KULLANILMAZ: o zaman icerik agacindan tamamen duser. */
.mos-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Baslik seridinin dikey dolgusu eski temadan geliyordu ve ust uste
   binmis uc katmandaydi (serit + inner-wrap + heading-wrap = ~78px).
   Uctu de kisaldi; serit 120px -> ~78px. */
#featured-title {
  padding-top: clamp(16px, 2vh, 26px) !important;
  padding-bottom: clamp(12px, 1.6vh, 20px) !important;
}

#featured-title .featured-title-inner-wrap {
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}

#featured-title .featured-title-heading-wrap,
#featured-title .featured-title-inner-wrap > div {
  padding-top: 0 !important;
}

/* Ic sayfa basligi eski temadan "Bree Serif" 14.5px/600 aliyordu —
   sistemde olmayan bir font. Ana sayfanin serif ailesine cekildi. */
.feautured-title-heading {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2vw, 30px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
}


/* =============================================================
   3. MASTHEAD
   ============================================================= */

/* Masthead sticky, yani normal akista yer kapliyor. Kaydirinca
   kuculunce (107 -> 79px) altindaki BUTUN sayfa 28px yukari
   kayiyordu; yukari dogru kaydirirken icerik gecis suresince
   zipliyor, header titriyormus gibi gorunuyordu.
   Olculdu (icerigin kaydirmaya gore sapmasi, yukari kaydirma):
     mevcut hali            en buyuk sapma 10.6px
     gecis kapali           en buyuk sapma 28.0px (tek seferde)
     SABIT AKIS YUKSEKLIGI  en buyuk sapma  0.0px

   Cozum: .mos-head'in AKIStaki yuksekligi sabit kaliyor; gorunen
   beyaz serit ise ::before olarak kuculuyor. Boylece efekt duruyor,
   sayfa hic kaymiyor. */
.mos-head {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: calc(var(--head-h) + 1px);
  font-family: var(--font-ui);
  /* Kuculunce altta kalan seffaf serit tiklamalari yutmasin */
  pointer-events: none;
}

/* Gorunen serit */
.mos-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--head-h) + 1px);
  background-color: var(--head-surface);
  border-bottom: 1px solid var(--head-hairline);
  pointer-events: auto;
  transition: height var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-head[data-state="scrolled"]::before {
  height: calc(var(--head-h-min) + 1px);
  box-shadow: var(--shadow-soft);
}

/* Icerik seridin uzerinde ve tiklanabilir kalir */
.mos-head__inner,
.mos-head .mos-search {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.mos-head__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 44px);
  height: var(--head-h);
  transition: height var(--t-micro) var(--ease);
}

.mos-head[data-state="scrolled"] .mos-head__inner {
  height: var(--head-h-min);
}

/* --- Logo: renklerine dokunulmuyor, sadece olceklenir --- */
.mos-head__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.mos-head__logo img {
  display: block;
  width: auto;
  height: var(--logo-h);
  transition: height var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}

.mos-head[data-state="scrolled"] .mos-head__logo img {
  height: var(--logo-h-min);
}

.mos-head__logo:hover img { opacity: 0.7; }

/* --- Ana menu --- */
.mos-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.mos-nav__list {
  display: flex;
  align-items: center;
  /* daha sakin ritim: ogeler arasi bosluk artirildi */
  gap: clamp(13px, 2.1vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mos-nav__item { position: relative; }

/* Olcek 12-13 bandinda; agirlik 450 -> 400 ve harf araligi bir tik
   acildi. Ayni punto daha hafif ve daha rafine okunuyor. */
.mos-nav__link {
  position: relative;
  display: block;
  padding: 12px 0;
  font-size: clamp(11.5px, 0.8vw, 12.5px);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--head-text);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}

/* Alt cizgi soldan saga cizilir — buyume/zıplama yok.
   Cizgi tam opak yerine sonuk: aktif oge bagirmiyor. */
.mos-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 1px;
  background-color: var(--head-text);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-micro) var(--ease);
}

.mos-nav__link:hover,
.mos-nav__link:focus-visible { color: var(--head-text); }
.mos-nav__link:hover::after,
.mos-nav__link:focus-visible::after { transform: scaleX(1); }

.mos-nav__item.is-current > .mos-nav__link::after { transform: scaleX(1); }

/* --- Alt menu: kart degil, ince yuzey --- */
.mos-sub {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 208px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid var(--head-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  /* Urun agaci derin; menu ekrandan tasmasin */
  max-height: min(72vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease),
              visibility var(--t-micro);
}

/* Alt menudeki ust seviye baslik (ornek: "Havuz") link degil, etiket gibi.
   Once 13px/500 idi ve ana navdan (12px) BUYUK duruyordu; artik
   ana navla ayni bantta ve bir tik daha sessiz. */
.mos-sub > li > a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--head-muted);
}

/* Ikinci seviye: asil tiklanan linkler */
.mos-sub ul a {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--head-text);
}

.mos-nav__item:hover > .mos-sub,
.mos-nav__item:focus-within > .mos-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mos-sub a {
  display: block;
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--head-text);
  text-decoration: none;
  transition: background-color var(--t-micro) var(--ease),
              padding-left var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}

.mos-sub a:hover {
  background-color: var(--head-surface);
  color: var(--head-text);
  padding-left: 22px;
}

.mos-sub ul { list-style: none; margin: 0; padding: 0 0 0 14px; }

/* --- Yardimci alan: dil + arama --- */
.mos-head__utils {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
}

/* Dil: kure ikonu + acilir kutu yerine duz metin — daha kurumsal */
.mos-lang {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: clamp(12px, 1.4vw, 22px);
  border-left: 1px solid var(--head-hairline);
}

.mos-lang a {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--head-muted);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}

.mos-lang a:hover { color: var(--head-text); }
.mos-lang a.is-current { color: var(--head-text); }

.mos-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  color: var(--head-text) !important;
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-iconbtn:hover {
  background-color: rgba(10, 16, 23, 0.05) !important;
  transform: none !important;
}

.mos-iconbtn svg { width: 18px; height: 18px; display: block; }

/* --- Mobil menu dugmesi: 2 cizgi, 1px --- */
/* Eski tema tum <button>'lara dolu zemin + hover yukselmesi veriyor */
.mos-burger,
.mos-burger:hover,
.mos-burger:focus {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  position: relative;
}

.mos-burger span {
  position: absolute;
  left: 7px;
  width: 20px;
  height: 1px;
  background-color: var(--head-text);
  transition: transform var(--t-micro) var(--ease),
              opacity var(--t-micro) var(--ease);
}

.mos-burger span:nth-child(1) { top: 14px; }
.mos-burger span:nth-child(2) { top: 20px; }

body.mos-menu-open .mos-burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.mos-menu-open .mos-burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- Arama: acilir kutu degil, tam genislikte ince serit --- */
/* Zemini kendisi tasir: masthead'in beyaz seridi artik ::before
   ve yalnizca bar yuksekliginde. Onceden header'in zemini bu
   seridi de ortuyordu; oyle olmayinca arama alani sayfa
   icerigi uzerinde seffaf kaliyordu. */
.mos-search {
  display: grid;
  grid-template-rows: 0fr;
  background-color: var(--head-surface);
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}

.mos-search.is-open {
  grid-template-rows: 1fr;
  border-top-color: var(--head-hairline);
  border-bottom: 1px solid var(--head-hairline);
}

.mos-search__wrap { overflow: hidden; }

.mos-search form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0 24px;
}

.mos-search input[type="text"] {
  flex: 1 1 auto;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--head-hairline) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 300;
  color: var(--head-text) !important;
  box-shadow: none !important;
  transition: border-color var(--t-micro) var(--ease);
}

.mos-search input[type="text"]::placeholder { color: #A9B4C2 !important; }

/* Eski tema input'lara cerceve + odak halkasi basiyor; alt cizgi
   disindaki her seyi kesiyoruz. */
.mos-search input[type="text"]:focus {
  border: 0 !important;
  border-bottom: 1px solid var(--head-text) !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}


/* =============================================================
   4. MOBIL MENU KATMANI
   ============================================================= */

.mos-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: var(--ink-950);
  /* Yatay bosluk ortak sistemle ayni: 90vw kabin kenar payi */
  padding: calc(var(--head-h) + 32px) max(20px, 5vw) 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-micro) var(--ease), visibility var(--t-micro);
}

body.mos-menu-open .mos-menu { opacity: 1; visibility: visible; }
body.mos-menu-open { overflow: hidden; }

.mos-menu ul { list-style: none; margin: 0; padding: 0; }

.mos-menu__list > li { border-bottom: 1px solid var(--hairline); }

/* Mobil menu basliklari 26px'ti ve dar ekranda iri duruyordu;
   21-22px bandinda hem rahat okunuyor hem kaba durmuyor. */
.mos-menu__list > li > a {
  display: block;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 5.4vw, 22px);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--text-primary);
  text-decoration: none;
}

.mos-menu__list > li > a:hover { color: var(--accent-bright); }

.mos-menu__sub { padding: 0 0 14px 0; }
.mos-menu__sub a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--text-secondary);
  text-decoration: none;
}
.mos-menu__sub a:hover { color: var(--accent); }

.mos-menu__meta {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mos-menu__meta a {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
}

.mos-menu__meta a:hover { color: var(--text-primary); }


/* =============================================================
   5. BUTONLAR
   Sayfa basina TEK dolu (filled) CTA; digerleri outline / metin.
   ============================================================= */

.mos-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 38px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  /* transform/box-shadow daha kisa surede: dokunus hissi geciktikce
     agir gorunuyor, renk gecisi ise yumusak kalmali. */
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease),
              transform 170ms var(--ease),
              box-shadow 170ms var(--ease);
}

/* Birincil — sayfada yalnizca bir tane */
.mos-btn--filled {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 64%);
  color: var(--ink-950);
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(111, 163, 206, 0.16);
}

.mos-btn--filled:hover {
  background-color: var(--accent-bright);
  background-image: linear-gradient(180deg, #C2DCEF 0%, var(--accent-bright) 64%);
  border-color: var(--accent-bright);
  color: var(--ink-950);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(111, 163, 206, 0.28);
}

.mos-btn:active { transform: translateY(0); }

/* Ikincil */
.mos-btn--outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--hairline-strong);
}

.mos-btn--outline:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* --- Editoryal baglanti ---
   Buton degil. Buyuk harf/genis harf araligi yok; cumle duzeni,
   ince bir alt cizgi ve 1px cizilmis ok. Filled CTA'nin yaninda
   sessiz kalir, ikisi birbiriyle yarismaz. */
.mos-link {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
  /* baslikla ayni serif aile: buton degil, metin hissi */
  font-family: var(--font-display);
  font-size: clamp(16px, 1.32vw, 21px);
  font-weight: 300;
  letter-spacing: 0.004em;
  color: var(--text-primary);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--t-micro) var(--ease);
}

.mos-link__text {
  position: relative;
  padding-bottom: 6px;
}

.mos-link__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0.24;
  transform-origin: left center;
  transition: opacity var(--t-micro) var(--ease);
}

.mos-link__arrow {
  width: 40px;
  height: 8px;
  flex: 0 0 auto;
  overflow: visible;
  stroke-width: 0.7;         /* daha ince cizgi */
  opacity: 0.72;
  align-self: center;
  transition: transform var(--t-media) var(--ease),
              opacity var(--t-micro) var(--ease);
}

.mos-link:hover {
  color: var(--accent-bright);
}

.mos-link:hover .mos-link__text::after { opacity: 0.9; }
.mos-link:hover .mos-link__arrow { transform: translateX(10px); opacity: 1; }


/* =============================================================
   6. HERO
   ============================================================= */

.mos-hero {
  /* Icerik layout'ta .container icinde; hero tam ekrana tasar */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* ilk ekran biraz daha nefes alsin: 82vh -> 90vh (~+70px) */
  height: clamp(640px, 90vh, 960px);
  overflow: hidden;
  background-color: var(--ink-950);
  isolation: isolate;
}

/* --- Gorsel katmani --- */
.mos-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mos-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1400ms var(--ease);
  will-change: opacity, transform;
}

.mos-hero__slide.is-active {
  opacity: 1;
  /* cok yavas yaklasma — fark edilmemeli, sadece "canli" hissettirmeli */
  animation: mos-kenburns 9000ms var(--ease) forwards;
}

@keyframes mos-kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.10); }
}

/* --- Okunabilirlik perdesi: sadece metnin oldugu tarafta --- */
/* Perde hafifletildi: mozaik dokusu gorunsun ama metin okunur kalsin.
   Alt perde metnin oturdugu bolgede yogun, ustte neredeyse yok;
   soldaki perde daha dar bir alana ve daha dusuk yogunluga cekildi. */
/* Perde iki katmanli:
   1) Tum gorsel uzerinde COK hafif bir alt karartma — doku gorunur kalir.
   2) Sadece metnin oturdugu sol-alt kosede yerel bir yumusama —
      okunabilirlik burada saglanir, gorselin geri kalani acilir.
   Boylece "overlay'i azalt" ile "yazi okunsun" ayni anda saglaniyor. */
.mos-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Metin sutunu: sola yasli, dikeyde uzun elips.
       Yatay yaricap ~%74 -> perde ekranin sag yarisina hic ulasmiyor,
       mozaik orada tam parlakliginda kaliyor. Olculdu: sag bolge p90
       parlaklik 195 (dokusu gorunur), metin altinda 85 civari. */
    radial-gradient(74% 130% at -6% 82%,
      rgba(10, 16, 23, 0.94) 0%,
      rgba(10, 16, 23, 0.86) 22%,
      rgba(10, 16, 23, 0.66) 42%,
      rgba(10, 16, 23, 0.34) 62%,
      rgba(10, 16, 23, 0.00) 80%),
    /* tum gorsel: cok hafif taban */
    linear-gradient(to top,
      rgba(10, 16, 23, 0.34) 0%,
      rgba(10, 16, 23, 0.12) 28%,
      rgba(10, 16, 23, 0.00) 54%,
      rgba(10, 16, 23, 0.08) 100%);
  pointer-events: none;
}

/* --- Metin --- */
.mos-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  /* Blok alta bagli: hero buyudukce zaten asagi kayiyor.
     Alt payi da bir tik daralttik; toplam dusus olculdu (~+80px). */
  bottom: clamp(16px, 2.2vh, 38px);
  z-index: 2;
  /* Kenar boslugu artik .mos-shell'in kendi genisliginden geliyor;
     hero metni de diger bolumlerle AYNI eksende basliyor. */
}

.mos-hero__inner { max-width: 780px; }

.mos-hero .mos-eyebrow {
  color: var(--accent-bright);
}

/* Yogun desenli gorsellerde metnin kenarlarini ayirir — perdeyi
   artirmadan okunabilirlik kazandiran sessiz bir katman. */
.mos-hero__title,
.mos-hero__lead,
.mos-hero .mos-eyebrow {
  text-shadow: 0 1px 22px rgba(10, 16, 23, 0.55);
}

.mos-hero__title {
  margin: var(--s-5) 0 0;
  font-family: var(--font-display);
  /* sayfanin ana odagi: olcek bir kademe yukseltildi */
  font-size: clamp(38px, 5.9vw, 84px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  max-width: 14ch;
  /* satirlari dengeler: tek kelimelik "oksuz" son satir olusmaz.
     Uc dilde de basligin kirilma noktasini tarayici hesaplar. */
  text-wrap: balance;
}

.mos-hero__lead {
  margin: var(--s-5) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 52ch;
}

.mos-hero__actions {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  margin-top: var(--s-7);
  flex-wrap: wrap;
}

/* Slayt gostergesi kaldirildi (nokta, numara, cubuk — hicbiri yok).
   Gorseller sessizce gecer; ekranda sayac hissi olusmaz. */

/* --- Asagi kaydirma isareti ---
   Metin bloku asagi inince sol alt kose doldu; isaret sag kenara alindi. */
.mos-hero__cue {
  position: absolute;
  left: auto;
  right: var(--hero-pad);
  bottom: 0;
  z-index: 3;
  width: 1px;
  height: 46px;
  background-color: var(--hairline-strong);
  overflow: hidden;
}

.mos-hero__cue::after {
  content: "";
  position: absolute;
  top: -46px;
  left: 0;
  width: 1px;
  height: 46px;
  background-color: var(--accent-bright);
  animation: mos-cue 2600ms var(--ease) infinite;
}

@keyframes mos-cue {
  0%   { transform: translateY(0); }
  60%  { transform: translateY(92px); }
  100% { transform: translateY(92px); }
}


/* =============================================================
   6.9 ATMOSFER KATMANI  (.mos-atmo)
   -------------------------------------------------------------
   Hero'dan sonraki koyu alan tek duz renk olmaktan cikar.
   Yeni kutu / kart / icerik EKLEMEZ; sadece zemin dilidir.

   Uc arac, hepsi neredeyse gorunmez siddette:
     1) Dusey izgara cizgileri — icerik sutunlariyla AYNI yerde,
        sayfa boyunca sureklilik kurar (mimari cizim dili).
     2) Ton kaymasi — komsu bolumler birkac birim farkli zeminde;
        fark edilmez ama "baska bir oda" hissi verir.
     3) Tessera dokusu — mozaik levhasi referansi, sadece genis
        bos alanlarda ve kenarlarda sonumlenerek.
   Ayrica bolum sirasini tasiyan dev, cok silik numara (data-num).
   ============================================================= */

.mos-atmo {
  position: relative;
  background-color: var(--ink-900);
}

/* Icerik her zaman atmosfer katmaninin ustunde kalir */
.mos-atmo > * {
  position: relative;
  z-index: 1;
}

/* --- Ton kaymasi: komsu bolum bir tik farkli zeminde --- */
.mos-atmo--alt {
  background-color: var(--ink-atmo);
}

/* --- Gecis cizgisi: bolum baslangicinda ince yatay hairline --- */
.mos-atmo--rule {
  border-top: 1px solid var(--hairline);
}


/* -------------------------------------------------------------
   MOZAIK DUVAR  (.mos-wall)
   -------------------------------------------------------------
   Dekoratif cizgi degil: koyu yuzeyin ALTINDA duran mimari bir
   cam mozaik duvar hissi. Gercek foto veya tas dokusu yok.

   Iki kademeli derz — gercek mozaik levhalarinin mantigi:
     - tessera derzi : tas arasi ince cizgiler
     - levha eki     : ~7 tas'ta bir, bir tik belirgin
   Ustune cok hafif bir yuzey duzlemi (plane) eklenir; boylece
   sadece cizgi degil, "orada bir duvar var" hissi olusur.

   Paneller sayfayi KAPLAMAZ: maskeyle belirip kaybolur, bazi
   bolumlerde hic yoktur. Her panel farkli olcek/konumda —
   duvardaki farkli levhalar gibi.
   ------------------------------------------------------------- */

.mos-wall::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: var(--wall-plane);
  background-image:
    /* levha ekleri (kalin kademe) */
    repeating-linear-gradient(90deg, var(--grout-sheet) 0 1px, transparent 1px var(--sheet)),
    repeating-linear-gradient(0deg,  var(--grout-sheet) 0 1px, transparent 1px var(--sheet)),
    /* tessera derzleri (ince kademe) */
    repeating-linear-gradient(90deg, var(--grout-tessera) 0 1px, transparent 1px var(--tess)),
    repeating-linear-gradient(0deg,  var(--grout-tessera) 0 1px, transparent 1px var(--tess));
}

/* --- Panel A: saglı, dikey, sag kenardan tasar --- */
.mos-wall--right::before {
  --tess: 46px;
  --sheet: 322px;   /* 7 tessera = bir levha */
  right: -8%;
  top: 4%;
  width: min(56vw, 780px);
  height: 92%;
  -webkit-mask-image: radial-gradient(78% 62% at 62% 46%, #000 12%, rgba(0,0,0,0.45) 52%, transparent 84%);
          mask-image: radial-gradient(78% 62% at 62% 46%, #000 12%, rgba(0,0,0,0.45) 52%, transparent 84%);
}

/* --- Panel B: sollu, farkli tessera olcegi (baska bir levha) --- */
.mos-wall--left::before {
  --tess: 34px;
  --sheet: 238px;
  left: -10%;
  top: 0;
  width: min(52vw, 700px);
  height: 88%;
  -webkit-mask-image: radial-gradient(72% 66% at 34% 42%, #000 10%, rgba(0,0,0,0.4) 48%, transparent 82%);
          mask-image: radial-gradient(72% 66% at 34% 42%, #000 10%, rgba(0,0,0,0.4) 48%, transparent 82%);
}

/* --- Panel C: bolum sinirini asan genis ve alcak duvar ---
   Ust bolumde belirip bu bolumde kaybolur: gecis burada olur. */
.mos-wall--seam::before {
  --tess: 56px;
  --sheet: 392px;
  left: -4%;
  top: -220px;
  width: 84vw;
  height: 620px;
  -webkit-mask-image: radial-gradient(64% 58% at 42% 50%, #000 8%, rgba(0,0,0,0.42) 46%, transparent 80%);
          mask-image: radial-gradient(64% 58% at 42% 50%, #000 8%, rgba(0,0,0,0.42) 46%, transparent 80%);
}

/* --- Panel D: teknik plan — desen olustur sayfasi icin ---
   Daha genis, daha alcak kontrastli; sayfanin ustunden altina
   dogru sonumlenerek "cizim masasi" hissi verir. */
.mos-wall--plan::before {
  --tess: 40px;
  --sheet: 280px;
  left: 50%;
  transform: translateX(-50%);
  top: -60px;
  width: 118vw;
  height: 78%;
  -webkit-mask-image: radial-gradient(58% 54% at 50% 26%, #000 6%, rgba(0,0,0,0.34) 44%, transparent 78%);
          mask-image: radial-gradient(58% 54% at 50% 26%, #000 6%, rgba(0,0,0,0.34) 44%, transparent 78%);
}

@media (max-width: 900px) {
  /* dar ekranda duvar daha kucuk olcekte ve daha sonuk kalir */
  .mos-wall::before { opacity: 0.65; }
  .mos-wall--plan::before { --tess: 30px; --sheet: 210px; }
  .mos-wall--right::before { --tess: 34px; --sheet: 238px; width: 86vw; right: -18%; }
  .mos-wall--left::before  { --tess: 30px; --sheet: 210px; width: 84vw; left: -20%; }
  .mos-wall--seam::before  { --tess: 40px; --sheet: 280px; width: 110vw; }
}

/* =============================================================
   7. BOLUM: OZELLIK ANLATIMI  (.mos-feature)
   Ilk kullanim: "Polidot Sistem".
   Kutu yok — zemin sayfayla ayni, ayrim sadece bosluk ve kil cizgi.
   Metin sutunu hero ile ayni sol eksende hizalanir.
   ============================================================= */

/* Icerik layout'ta 1170px'lik .container icinde. Bolumler bu kutudan
   tasmazsa metin ekseni x=175'e dusuyor ve hero (x=40) ile hizasiz
   kaliyor. Asagidaki tasma, tum bolumleri hero'nun ekseninde toplar. */
.mos-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.mos-feature {
  padding-block: clamp(72px, 11vh, 152px);
  font-family: var(--font-ui);
}

.mos-feature__inner {
  width: var(--shell-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(40px, 6vw, 108px);
  align-items: center;
}

/* --- Metin sutunu --- */
.mos-feature__text {
  max-width: 640px;
}

.mos-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-section);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary) !important;
  text-wrap: balance;
}

/* --- Ozellik listesi: kutu degil, kil cizgiyle ayrilmis satirlar --- */
.mos-speclist {
  list-style: none;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.mos-speclist__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.mos-speclist__mark {
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: var(--accent);
  opacity: 0.85;
  flex: 0 0 auto;
}

.mos-speclist__text {
  font-size: clamp(14.5px, 1.02vw, 16px);
  font-weight: 400;
  line-height: 1.72;
  color: var(--text-secondary) !important;
  /* uzun maddeler rahat okunsun */
  max-width: 58ch;
}

.mos-feature__action {
  margin-top: clamp(32px, 4vw, 48px);
}

/* --- Gorsel: katalog plakasi ---
   Kaynak 512x512. Buyutulup bulaniklasmasin diye kare ve
   en fazla 520px. Arkasindaki kil cizgi cerceve, mimari cizim
   dilinden geliyor; gorseli buyutmeden agirlik kazandiriyor. */
.mos-feature__media {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  position: relative;
}

.mos-feature__plate {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.mos-feature__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform var(--t-media) var(--ease);
}

.mos-feature__media:hover .mos-feature__plate img {
  transform: scale(1.045);
}

/* Not: burada kaydirilmis dekoratif bir cerceve vardi, kaldirildi.
   Bu bolumde urunun kendisi on planda; ek katman/efekt eklenmeyecek. */

.mos-feature__caption {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
}


/* =============================================================
   7.5 BOLUM: PROJE RAYI  (.mos-projects)
   Kart yok — cerceve, zemin, golge kullanilmaz. Gorsel tasir.
   18 proje yatay rayda; owl carousel yerine native scroll-snap.
   ============================================================= */

.mos-projects {
  padding-block: clamp(64px, 9vh, 132px);
  font-family: var(--font-ui);
}

/* Polidot ile ayni kap: sol VE sag kenar birebir hizali. */
.mos-projects__head,
.mos-projects__grid {
  width: var(--shell-w);
  margin-inline: auto;
}

/* --- Baslik satiri: baslik solda, telefon sagda, ayni yatay hizada --- */
.mos-projects__head {
  margin-bottom: clamp(30px, 3.6vw, 52px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.mos-projects__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-section);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary) !important;
}

/* Baslik artik baglanti: gorunumu bozulmuyor, sadece ucundaki
   kucuk ok ve hoverdaki ince alt cizgi tiklanabilirligi belli ediyor. */
.mos-projects__link {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(14px, 1.4vw, 22px);
  color: inherit;
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}

.mos-projects__label {
  position: relative;
  padding-bottom: 6px;
}

.mos-projects__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-micro) var(--ease),
              opacity var(--t-micro) var(--ease);
}

.mos-projects__arrow {
  width: clamp(20px, 1.7vw, 26px);
  height: 8px;
  flex: 0 0 auto;
  stroke-width: 0.8;
  opacity: 0.5;
  align-self: center;
  transition: transform var(--t-micro) var(--ease),
              opacity var(--t-micro) var(--ease);
}

.mos-projects__link:hover { color: var(--accent-bright); }
.mos-projects__link:hover .mos-projects__label::after { opacity: 0.5; transform: scaleX(1); }
.mos-projects__link:hover .mos-projects__arrow { opacity: 1; transform: translateX(5px); }

/* --- Telefon: sessiz iletisim baglantisi, buton degil --- */
.mos-projects__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}

.mos-projects__phone svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
  transition: color var(--t-micro) var(--ease);
}

/* Etiket sessiz kalir, numara okunakli olsun diye bir tik acik */
.mos-projects__phone-label {
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.mos-projects__phone-num {
  color: var(--text-primary);
  letter-spacing: 0.07em;
}

.mos-projects__phone:hover .mos-projects__phone-label,
.mos-projects__phone:hover .mos-projects__phone-num,
.mos-projects__phone:hover svg { color: var(--accent-bright); }

/* --- Izgara: 3 secilmis proje, yatay kaydirma yok --- */
.mos-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

/* --- Tek proje: kart degil, gorsel + altyazi --- */
.mos-tile {
  display: block;
  text-decoration: none;
}

.mos-tile__frame {
  position: relative;
  /* Kaynak fotograflar yatay. 4:3 portfolyo hissi icin daha fazla
     govde veriyor (427x320) ama hala DIKEYDE kisa; onceki dikey
     kart 330x440'ti ve sayfayi yukseklikle domine ediyordu.
     Uc kart birebir ayni olcude: farkli boyutta kart yok. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

/* Alttan yukari sonumlenen ince bir koyulasma: fotograf kenari
   zeminle carpismaz, gorsel "yerlesmis" durur. Overlay/yazi yok. */
.mos-tile__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(10, 16, 23, 0.34) 0%,
              rgba(10, 16, 23, 0) 100%);
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease);
}

.mos-tile:hover .mos-tile__frame {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 22px 52px rgba(6, 10, 16, 0.34);
}

.mos-tile:hover .mos-tile__frame::after { opacity: 1; }

.mos-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 900ms var(--ease);
}

/* Hover cok sade: gorselde neredeyse fark edilmeyen bir yaklasma
   ve proje adinin renk degistirmesi. Kalkma, golge, overlay yok. */
.mos-tile:hover .mos-tile__frame img {
  transform: scale(1.04);
}

.mos-tile__meta {
  padding-top: 18px;
  /* aciklamasi olan/olmayan projeler ayni hizada bitsin */
  min-height: 56px;
}

.mos-tile__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(15.5px, 1.2vw, 18.5px);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--text-primary) !important;
  transition: color var(--t-micro) var(--ease);
}

.mos-tile:hover .mos-tile__name { color: var(--accent-bright) !important; }

.mos-tile__note {
  margin: 7px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
}


/* =============================================================
   7.65 DEGERLER  (.mos-values)  — "Mozaik Icin En Iyi Seciminiz"
   Kart yok, daire ikon yok, cerceve yok, golge yok.
   Ritmi numaralar, ince ust cizgiler ve bosluk kurar.
   ============================================================= */

.mos-values {
  padding-block: clamp(76px, 12vh, 156px);
  font-family: var(--font-ui);
}

.mos-values__inner {
  /* tum bolum ayni izgaraya kilitlenir: baslik, aciklama, uc blok */
  --val-gap: clamp(32px, 5vw, 88px);
  width: var(--shell-w);
  margin-inline: auto;
}

/* --- Baslik blogu: izgaraya oturur --- */
.mos-values__head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(var(--val-gap) / 2);
  margin-bottom: clamp(52px, 6.5vw, 96px);
}

.mos-values__head > * { grid-column: 1 / -1; }

/* Aciklama iki sutun genisliginde biter -> sag kenari izgara
   cizgisine tam oturur, hizalama "kazara" degil kasitli okunur. */
.mos-values__head > .mos-values__lead { grid-column: 1 / 3; }

.mos-values__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--title-section);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary) !important;
  text-wrap: balance;
}

.mos-values__lead {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-secondary) !important;
  text-wrap: pretty;
}

/* --- Uc ozellik: kutu degil; kesintisiz ust cizgi + dikey ayiricilar --- */
.mos-values__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* gercek bosluk = val-gap; yarisi ayirici cizginin solunda,
     yarisi saginda kalir, boylece cizgi tam ortada durur */
  column-gap: calc(var(--val-gap) / 2);
  /* uc blok da ayni yukseklikte biter */
  align-items: stretch;
}

/* Uzun hairline: uc blogun tamamini kat eden tek bir cizgi.
   Onceden her blok kendi kisa cizgisini tasiyordu. */
.mos-values__list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--hairline);
}

.mos-value {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: clamp(26px, 2.8vw, 38px);
}

/* Not: numaralar (01/02/03) ve blueprint olcu cizigi kaldirildi.
   Odak ikon + baslik + aciklamada; daha az eleman, daha net hiyerarsi. */

/* Hoverda soldan saga dolan vurgu cizgisi */
.mos-value::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-micro) var(--ease);
}

.mos-value:hover::after { transform: scaleX(1); }

/* Bloklar arasi cok ince dikey ayirici, boslugun tam ortasinda.
   Ust hairline ile kesistigi yerde temiz bir izgara kosesi olusur. */
.mos-value + .mos-value {
  border-left: 1px solid var(--hairline);
  padding-left: calc(var(--val-gap) / 2);
}

/* --- Ikon: blogun tek gorsel capasi. Buyuk ama ince. --- */
.mos-value__icon {
  display: block;
  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  margin-bottom: clamp(26px, 3vw, 40px);
  color: var(--accent);
  /* olcek buyudugu icin kontur inceltildi: gorsel kalinlik ~1.7px */
  stroke-width: 0.85;
  opacity: 0.8;
  transition: opacity var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-value:hover .mos-value__icon {
  opacity: 1;
  transform: translateY(-3px);
}

/* Numara gidince baslik blogun ikinci kademesi oldu; bir tik buyudu
   ve altina ince bir ayirim cizgisi aldi. */
.mos-value__title {
  position: relative;
  margin: 0;
  padding-bottom: clamp(14px, 1.5vw, 20px);
  font-family: var(--font-ui);
  font-size: clamp(12.5px, 0.98vw, 14.5px);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-primary) !important;
  transition: color var(--t-micro) var(--ease);
}

.mos-value__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 1px;
  background-color: var(--hairline-strong);
  transition: width var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease);
}

.mos-value:hover .mos-value__title::after {
  width: 54px;
  background-color: var(--accent);
}

/* Hoverda accent'e cok hafif yaklasir - tam accent olmaz */
.mos-value:hover .mos-value__title { color: #C6D9EA !important; }

.mos-value__desc {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  font-size: clamp(14px, 1vw, 15.5px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-secondary) !important;
  /* satirlar esit uzunlukta dagilsin, son satir tek kelime kalmasin */
  text-wrap: balance;
  /* uc blogun alt hizasi ayni olsun */
  flex: 1 1 auto;
}

/* --- Hakkimizda: dolu buton degil, editoryal baglanti --- */
.mos-values__action {
  margin-top: clamp(48px, 6vw, 88px);
}


/* =============================================================
   7.7 SERTIFIKALAR  (.mos-certs)
   Kart yok: plaka, cerceve, golge, kose yariçapi kullanilmaz.
   Belgeler ortak yukseklikte, koyu zemin uzerinde durur.
   ============================================================= */

.mos-certs {
  padding-block: clamp(72px, 11vh, 148px);
  font-family: var(--font-ui);
}

.mos-certs__inner {
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-certs__title {
  margin: 0 0 clamp(40px, 5vw, 72px);
  font-family: var(--font-display);
  font-size: var(--title-section);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary) !important;
}

/* Sabit genislikli sutunlar eksen boyunca esit dagilir: belgeler
   ayni olcude durur, sag kenar diger bolumlerle hizali kalir. */
.mos-certs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 215px));
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.mos-cert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Belgeler farkli oranlarda (3 dikey + 1 yatay).
   Ortak olculu beyaz kagit yuzeyi hepsini ayni ritme sokar.
   Kart degil: cerceve, golge, kose yariçapi YOK. Kagit sadece kagit. */
.mos-cert__sheet {
  width: 100%;
  /* aspect-ratio yerine kesin yukseklik: gorselin dogal boyu
     aspect-ratio'yu eziyordu ve kagitlar farkli boyda kaliyordu */
  height: clamp(212px, 18vw, 266px);
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  margin-bottom: 20px;
}

.mos-cert__sheet img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.mos-cert__name {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-primary) !important;
}

.mos-cert__note {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-tertiary) !important;
}


/* =============================================================
   7.8 DESEN OLUSTUR STUDYOSU  (.mos-studio)
   -------------------------------------------------------------
   Sadece gorunum. Butun ID'ler, JS baglantilari, hesaplamalar
   ve input davranislari korunmustur.

   Onemli ozgulluk notlari:
   - JS bazi renkleri INLINE yaziyor (.css("color","#888")).
     jQuery .css() ucuncu argumani yok saydigi icin bunlar
     !important DEGIL; asagidaki !important kurallari kazanir.
   - Yuzde gostergesinin kirmizi/normal sinyali kaybolmasin diye
     inline rengi okuyan bir oznitelik secicisi kullanildi.
   - td olculeri mosaic CSS'inde !important; sadece #malla ve
     #tablero kapsaminda ayni ozgullukte buyutuldu.
   ============================================================= */

/* KRITIK: mosaic/css/style.css icinde MEDYA SORGUSUZ ".container
   { width: 1140px }" var ve o dosya sadece bu sayfada yukleniyor.
   Mobilde layout kabini 1140px'e kilitliyor, .mos-bleed'in
   "50% - 50vw" hesabi da bolumleri ekranin 375px sagina itiyordu:
   sayfa bos gorunuyordu. Asagisi sadece bu sayfayi hedefler. */
#content-wrap:has(.mos-studio),
#content-wrap:has(.mos-ambience),
.rezervasyondiv.container,
.mos-studio .container-tablero {
  width: auto !important;
  max-width: 100% !important;
}

.mos-studio {
  position: relative;
  padding-block: clamp(20px, 2.4vh, 34px) clamp(48px, 6vh, 84px);
  font-family: var(--font-ui);
  --blueprint: rgba(237, 241, 245, 0.05);
}

/* --- Mimari cizim katmani ---
   Duvar izgarasi (.mos-wall--plan, ::before) sayfanin genel dokusunu
   verir. Bu katman onun uzerine, SADECE birkac bolgeye, tekrarsiz
   mozaik modulleri ve kisa derz parcalari birakir: 3x3 / 4x4 / 2x2
   modul + iki ince cizgi. Hepsi ::after'da tek elemanda toplandi,
   DOM'a hicbir sey eklenmedi. */
.mos-studio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    /* 3x3 modul (44px hucre) — sag ust */
    repeating-linear-gradient(90deg, var(--blueprint) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  var(--blueprint) 0 1px, transparent 1px 44px),
    /* 4x4 modul (30px hucre) — sag alt, daha ince dokulu */
    repeating-linear-gradient(90deg, var(--blueprint) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  var(--blueprint) 0 1px, transparent 1px 30px),
    /* 2x2 modul (58px hucre) — sol orta */
    repeating-linear-gradient(90deg, var(--blueprint) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg,  var(--blueprint) 0 1px, transparent 1px 58px),
    /* kisa derz parcalari: yatay ve dikey birer cizgi */
    linear-gradient(90deg, var(--blueprint), var(--blueprint)),
    linear-gradient(90deg, var(--blueprint), var(--blueprint));
  background-size:
    133px 133px, 133px 133px,
    121px 121px, 121px 121px,
    117px 117px, 117px 117px,
    190px 1px, 1px 128px;
  background-position:
    right 7% top 12%, right 7% top 12%,
    right 15% bottom 14%, right 15% bottom 14%,
    left 4% top 58%, left 4% top 58%,
    left 6% top 32%, right 32% top 26%;
}

/* Sahne 800px'le sinirlanmisti; --shell-max (1560px) kap icinde
   sagda buyuk bir bosluk kaliyor ve blok sola yapisik duruyordu.
   Kap iceriğe gore daraltildi: 320 panel + ~49 bosluk + 800 sahne.
   Aciklama metni de ayni kapta oldugu icin panelle ayni sol
   eksende kaliyor. */
.mos-studio__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

/* --- Studyo girisi ---
   Sayfa dogrudan araca girmiyor: once kim/ne oldugunu soyleyen
   kisa bir kompozisyon. Ana sayfanin hero dilinin sakin hali. */
.mos-studio__intro {
  position: relative;
  margin: 0 0 clamp(30px, 3.6vw, 52px);
  padding-bottom: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--hairline);
}

.mos-studio__heading {
  margin: 14px 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-studio__lead {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: var(--text-secondary) !important;
}

/* --- Iki sutun: solda 320px kontrol karti, sagda odak alani --- */
/* Panel sol kenara oturur. Sahne sag kenara YAPISMAZ: panelin
   bittigi yer ile sayfanin sag kenari arasinda ortalanir.
   (Sahnenin 800px'lik islevsel siniri korunuyor — daha genisi
   onizleme kartinda olu alan birakiyordu.) */
.mos-studio__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  /* Sutun araligi SIFIR: bosluk sahnenin kendi kenar payindan
     geliyor. Izgara araligi birakilinca ortalama o kadar saga
     kayiyordu (panelden 115px, sag kenardan 66px). */
  column-gap: 0;
  row-gap: clamp(28px, 3.4vw, 64px);
  align-items: start;
}

/* --- Kontrol paneli: tek kart, icinde bolumler --- */
.mos-studio__panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--ink-800);
  background-image: var(--card-sheen);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.mos-studio__block {
  padding: clamp(20px, 1.8vw, 26px);
}

.mos-studio__block + .mos-studio__block {
  border-top: 1px solid var(--hairline);
}

.mos-studio__label {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Sutun basliklari: mozaik adi solda, oran sagda.
   Genislikler asagidaki satir duzeniyle birebir ayni. */
.mos-studio__cols {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mos-studio__cols span:last-child { padding-right: 18px; }

/* --- Mozaik satirlari (p#color-N) ---
   JS satirin ic HTML'ini komple degistiriyor; bu yuzden duzen
   sadece flex ile, sarmalayici eklenmeden kuruluyor. */
.mos-studio__panel .container-piezas { margin: 0; }

/* Satirin tamami tiklanabilir hissi versin: hover'da zemin acilir.
   Negatif margin + esit padding ile blok kenarina kadar uzanir. */
.mos-studio__panel .container-piezas p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 calc(-1 * clamp(20px, 1.8vw, 26px));
  padding: 11px clamp(20px, 1.8vw, 26px);
  font-size: 12px;
  color: var(--text-tertiary) !important;   /* satir sonundaki "%" */
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--t-micro) var(--ease);
}

.mos-studio__panel .container-piezas p:hover {
  background-color: rgba(237, 241, 245, 0.022);
}

.mos-studio__panel img.img-pieza {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong) !important;
  background-color: var(--ink-700);
  object-fit: cover;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-studio__panel .container-piezas p:hover img.img-pieza {
  border-color: var(--accent) !important;
  transform: scale(1.05);
}

.mos-studio__panel input.select-pieza {
  flex: 1 1 auto;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-ui);
  font-size: 14px !important;
  color: var(--text-primary) !important;
  cursor: pointer;
  text-overflow: ellipsis;
}

.mos-studio__panel input.select-pieza::placeholder { color: var(--text-tertiary) !important; }

.mos-studio__panel input.select-cantidad {
  flex: 0 0 auto;
  width: 78px !important;
  height: auto !important;
  padding: 12px 12px !important;
  text-align: right;
  background-color: var(--ink-900) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-ui);
  font-size: 14px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-studio__panel input.select-cantidad:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(111, 163, 206, 0.15) !important;
  outline: none !important;
}

.mos-studio__panel input.select-cantidad:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Renk ekle (JS baslangicta gizliyor, gorununce hazir) --- */
.mos-studio__panel input.boton {
  width: 100%;
  margin-top: 16px;
  padding: 11px 16px !important;
  background-color: transparent !important;
  border: 1px dashed var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui);
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-micro) var(--ease);
}

.mos-studio__panel input.boton:hover {
  border-color: var(--accent) !important;
  color: var(--accent-bright) !important;
}

/* Derz rengi arayuzden cikarildi; #full ve spectrum'un urettigi
   swatch gizli (JS baglantilari bozulmasin diye DOM'da duruyor). */
.mos-studio__hidden,
.mos-studio .sp-replacer { display: none !important; }

/* --- Aksiyon butonlari ---
   JS inline renk yaziyor (!important degil); asagisi kazanir.
   Durum artik :disabled uzerinden okunuyor. */
/* Mosaic CSS #opciones'a margin-top:200px; margin-left:-200px veriyor;
   panelde dev bosluk birakip butonlari kutunun disina tasiyordu. */
.mos-studio__panel #opciones {
  margin: 0 !important;
}

/* Ana sayfadaki CTA dili: tam genislik, ust uste, guclu.
   Hiyerarsi: Desen Olustur dolu -> digerleri outline -> Sifirla sessiz. */
.mos-studio__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mos-studio__actions .generar {
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  padding: 17px 18px !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--hairline-strong) !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  cursor: pointer;
  /* "all" yerine acik liste: transform ve box-shadow'un suresi
     kontrollu kalsin, JS'in yazdigi inline renk zipladamasin. */
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease),
              transform 160ms var(--ease),
              box-shadow 160ms var(--ease);
}

/* sayfanin tek dolu CTA'si: deseni ureten buton.
   Cok hafif gradient — duz dolgudan bir tik canli, parlak degil. */
.mos-studio__actions #generar-malla {
  background-color: var(--accent) !important;
  background-image: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 62%) !important;
  border-color: var(--accent) !important;
  color: var(--ink-950) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(111, 163, 206, 0.16);
}

/* Sifirla en sessiz aksiyon — ama cerceve tasir, yoksa pasif gorunuyor */
.mos-studio__actions #borrar {
  border-color: var(--hairline) !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.16em;
}

.mos-studio__actions #borrar:hover:not(:disabled) {
  border-color: var(--hairline-strong) !important;
  color: var(--text-primary) !important;
}

.mos-studio__actions #borrar:disabled {
  border-color: var(--hairline) !important;
  color: var(--text-tertiary) !important;
}

/* Hover: hafif yukselme + golge + renk gecisi (160ms) */
.mos-studio__actions .generar:hover:not(:disabled) {
  border-color: var(--accent) !important;
  color: var(--accent-bright) !important;
  background-color: rgba(111, 163, 206, 0.07) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(6, 10, 16, 0.32);
}

.mos-studio__actions #generar-malla:hover:not(:disabled) {
  background-color: var(--accent-bright) !important;
  background-image: linear-gradient(180deg, #C2DCEF 0%, var(--accent-bright) 62%) !important;
  border-color: var(--accent-bright) !important;
  color: var(--ink-950) !important;
  box-shadow: 0 10px 26px rgba(111, 163, 206, 0.26);
}

/* Basma aninda yukselme geri alinir: dokunma hissi */
.mos-studio__actions .generar:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(6, 10, 16, 0.28);
}

.mos-studio__actions .generar:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(111, 163, 206, 0.22);
}

.mos-studio__actions .generar:disabled {
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--hairline) !important;
  color: var(--text-tertiary) !important;
  box-shadow: none !important;
  transform: none;
  cursor: not-allowed;
}

/* --- Yuzde gostergesi ---
   JS gecerli durumda #333, hatali durumda #FF0000 yaziyor.
   #333 koyu zeminde okunmuyor; taban rengi eziliyor ama
   KIRMIZI SINYAL korunuyor (inline degeri okuyan secici). */
.mos-studio__meter {
  margin: 22px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.6;
  color: var(--text-secondary) !important;
}

#porcentajeActual {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--text-primary) !important;
}

#porcentajeActual[style*="255, 0, 0"],
#porcentajeActual[style*="#FF0000"],
#porcentajeActual[style*="#ff0000"] {
  color: #E4796F !important;
}

/* Uyari mesaji: gorunurlugunu JS yonetiyor (visibility), dokunulmuyor.
   Sadece rengi koyu zemine uygun bir uyari tonuna cekildi. */
.mos-studio__panel .alert_antideslizantes {
  margin: 14px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.65;
  color: #E4796F !important;
}

/* --- Sag sutun: onizlemeler --- */
/* Kartlar genislikte icerige gore hizalanir: duvar tablosu en genis
   parca oldugu icin sutunu o belirler. Onceden sutun 990px'e kadar
   aciliyordu ama desen izgarasi 495px'ti; kartin yarisi bos kaliyordu. */
.mos-studio__stage {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
  min-width: 0;
  /* Kalan alanin TAM ortasina. Genislik ust siniri, panelle
     arasinda her zaman en az bir bosluk kalacak sekilde
     kisitlandi: dar iki sutunlu genisliklerde panele yapismaz. */
  max-width: min(800px, calc(100% - 2 * clamp(28px, 3.4vw, 64px)));
  margin-inline: auto;
}

/* ID ile yazilmis mosaic kurallari (#box-malla{padding:20px 0})
   sinif kuralini eziyordu; malla kartinin yatay dolgusu sifirdi. */
.mos-preview,
#box-malla.mos-preview,
#box-tablero.mos-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--ink-800);
  background-image: var(--card-sheen);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  padding: clamp(24px, 2.4vw, 40px) !important;
  overflow-x: auto;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

/* Kart hover: cok hafif: kenarlik uyanir, golge derinlesir. */
.mos-preview:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 20px 48px rgba(6, 10, 16, 0.32);
}

/* Baslik: eski tema negatif margin veriyordu; sifirlandi ve
   ana sayfanin serif basligiyla ayni dile getirildi.
   Sag sutun sayfanin odagi: baslik olcegi belirgin buyutuldu. */
#malla-titulo,
#tablero-titulo {
  margin: 0 0 clamp(20px, 2vw, 28px) !important;
  text-align: left !important;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-transform: none;
  color: var(--text-primary) !important;
}

/* Onizleme govdesi ortalanir; uretilmeden once bos kutu degil,
   teknik plan izgarasi gibi durur. */
.mos-preview > table {
  align-self: center;
  margin-block: auto !important;
}

/* Tablolar ortalanir; eski float/margin kurallari sifirlanir */
#malla,
#tablero {
  margin: 0 auto !important;
  float: none !important;
  border-collapse: collapse;
}

.tmalla #tablero { margin-right: auto !important; }

/* Tas gorselleri kendi dogal boyutlarini dayatip hucreleri
   genislettigi icin taslar dikdortgen cikiyordu. table-layout:fixed
   + gorselin hucreyi doldurmasi ile kareler yeniden kare oluyor. */
#malla,
#tablero {
  table-layout: fixed;
  width: auto !important;
}

#malla td img,
#tablero td img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bos hucreler: derz cizgisi gibi ince, teknik plan hissi.
   JS derz secildiginde td'lere INLINE border-color yaziyor;
   bu kural !important tasimadigi icin onu ezmez. */
#malla td,
#tablero td {
  border-color: rgba(237, 241, 245, 0.09);
}

/* --- Bos durum ---
   Desen uretilince hucrelere .img-td geliyor. Asagisi sadece
   "henuz gorsel yok" halinde calisir; JS'e hic dokunulmadi.

   1) Izgara bos bir kutu gibi durmasin diye birkac hucre cok
      hafif tonlanir: seyrek, ornek bir mozaik dizilimi hissi.
      Kosullar HEM satir HEM sutun uzerinden veriliyor; yalniz
      sutundan verilince tonlama dikey seride donusuyordu.
      Adimlar aralarinda asal secildi ki desen tekrar etmesin. */
#malla:not(:has(.img-td)) tr:nth-child(3n + 1) td:nth-child(4n + 2),
#malla:not(:has(.img-td)) tr:nth-child(4n + 3) td:nth-child(7n + 5),
#tablero:not(:has(.img-td)) tr:nth-child(3n + 2) td:nth-child(8n + 3),
#tablero:not(:has(.img-td)) tr:nth-child(5n + 4) td:nth-child(11n + 7) {
  background-color: rgba(237, 241, 245, 0.032);
}

#malla:not(:has(.img-td)) tr:nth-child(5n + 2) td:nth-child(9n + 6),
#tablero:not(:has(.img-td)) tr:nth-child(7n + 5) td:nth-child(13n + 9) {
  background-color: rgba(111, 163, 206, 0.07);
}

/* 2) Ortada sakin bir yonlendirme metni. */
.mos-preview__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 2.4vw, 40px);
  transform: translateX(-50%);
  margin: 0 !important;
  padding: 8px 16px;
  max-width: calc(100% - 2 * clamp(24px, 2.4vw, 40px));
  background-color: rgba(22, 32, 45, 0.82);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-secondary) !important;
  pointer-events: none;
  transition: opacity var(--t-micro) var(--ease);
}

.mos-preview:has(.img-td) .mos-preview__hint {
  opacity: 0;
  visibility: hidden;
}

/* 3) Desen uretildigi an: tablo yumusakca beliriyor ve altina
   bir zemin golgesi giriyor — sonuc "yerlesmis" duruyor.
   Kural bos halde eslesmedigi icin, ilk gorsel geldiginde
   kendiliginden calisir; JS tetiklemesi gerekmiyor. */
.mos-anim #malla:has(.img-td),
.mos-anim #tablero:has(.img-td) {
  animation: mos-fade 620ms var(--ease) both;
}

#malla:has(.img-td),
#tablero:has(.img-td) {
  box-shadow: 0 18px 44px rgba(6, 10, 16, 0.40);
}

/* Onizleme buyutuldu. td olculeri mosaic CSS'inde !important
   oldugu icin ayni ozgullukte, sadece bu iki tablo kapsaminda. */

#malla td {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
}

/* Duvar 38 sutun genis; sutun genisligini bu tablo belirliyor.
   23 -> 19px: kart 875 yerine 722px'e dusuyor, desen izgarasinin
   yanindaki olu alan da ayni oranda kapaniyor. */
#tablero td {
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
}

/* --- Mozaik secici penceresi --- */
.mos-studio .container-tablero { position: static; }

.mos-studio #selector.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 92vw);
  max-height: 82vh;
  margin: 0 !important;
  z-index: 1200;
  background-color: var(--ink-800) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-md) !important;
  /* Ikinci golge yeni bir eleman eklemeden arka plani karartir.
     (JS bir #unclickable perdesi ariyor ama o eleman sayfada yok.) */
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6),
              0 0 0 100vmax rgba(8, 13, 20, 0.72) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Acilis: pencere hafifce buyuyerek gelir. Sinifi JS degistiriyor
   (.show), animasyon o an kendiliginden calisir. */
@keyframes mos-picker-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.mos-anim .mos-studio #selector.popup.show {
  animation: mos-picker-in 260ms var(--ease) both;
}

/* Govde: son satirin alt yazisi kirpiliyordu (icerik 659px,
   kap 588px). Yukseklik sinirini basliktan sonra kalan alana
   gore veriyoruz ve alt dolgu birakiyoruz. */
.mos-studio #selector > .popup-content {
  height: auto !important;
  max-height: calc(82vh - 108px);
  padding: clamp(20px, 2vw, 30px) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ince kaydirma cubugu: koyu zeminde varsayilan cubuk kirli duruyor */
.mos-studio #selector > .popup-content::-webkit-scrollbar { width: 10px; }
.mos-studio #selector > .popup-content::-webkit-scrollbar-track { background: transparent; }
.mos-studio #selector > .popup-content::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border: 3px solid var(--ink-800);
  border-radius: 999px;
}

/* --- Eski mosaic/bootstrap CSS'ini studyo kapsaminda bastir ---
   assets/site/mosaic/css/style.css sayfa icin gerekli (td olculeri,
   tablo yapisi) ama Open Sans'i, siyah/beyaz form gorunumunu ve
   BS3 tipografisini de getiriyordu. Asagisi SADECE bu kapsamda
   yaziyi ve form elemanlarini yeni sisteme baglar. */
/* Eleman bazli secici gerekiyor: mosaic CSS'i p / input / select'e
   DOGRUDAN kural veriyor, bolume yazilan font miras yoluyla
   gecmiyor. Serif basliklar asagidaki !important kuraliyla
   bu kapsamin disinda tutuluyor. */
.mos-studio,
.mos-studio *,
#selector,
#selector * {
  font-family: var(--font-ui);
}

/* Serif basliklar bu kuralin disinda kalir */
.mos-studio__heading,
.mos-picker__title,
#malla-titulo,
#tablero-titulo,
#porcentajeActual {
  font-family: var(--font-display) !important;
}

/* --- Secici basligi: kimlik + seri filtresi + kapatma --- */
.mos-studio #selector .mos-picker__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 30px);
  border-bottom: 1px solid var(--hairline);
  background-image: var(--card-sheen);
}

.mos-studio #selector .mos-picker__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.mos-studio #selector .mos-picker__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mos-studio #selector .mos-picker__title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

/* #coleccion eski temada mutlak konumlu bir seritti; artik
   basligin icinde akan bir filtre grubu. */
.mos-studio #selector #coleccion {
  flex: 0 0 auto;
  position: static !important;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
}

.mos-studio #selector #coleccion p {
  margin: 0 !important;
  float: none !important;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary) !important;
}

.mos-studio #selector #select-serie {
  width: auto !important;
  min-width: 180px;
  height: auto !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  background-color: var(--ink-900) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease);
}

.mos-studio #selector #select-serie:hover,
.mos-studio #selector #select-serie:focus {
  border-color: var(--accent) !important;
  outline: none;
}

.mos-studio #selector #select-serie option {
  background-color: var(--ink-800) !important;
  color: var(--text-primary) !important;
}

/* Kapatma: sol ustteki centik yerine baslikta yuvarlak dugme */
.mos-studio #selector .close-popup {
  position: static !important;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  float: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}

.mos-studio #selector .close-popup svg {
  width: 15px;
  height: 15px;
}

.mos-studio #selector .close-popup:hover,
.mos-studio #selector .close-popup:focus-visible {
  background-color: var(--ink-700) !important;
  border-color: var(--accent) !important;
  color: var(--text-primary);
  outline: none;
}

/* --- Malzeme izgarasi ---
   JS her mozaik icin .item-container > img.item-img + p.item-title
   basiyor. Eski tema bunlari float/inline-block ile diziyordu ve
   80px'te birakiyordu; artik gercek bir izgara ve tasin kendisi
   one cikiyor: bu sayfanin yildizi mozaik gorselleri. */
.mos-studio #selector .items-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  align-content: start;
}

.mos-studio #selector .item-container {
  display: block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  cursor: pointer;
  color: var(--text-secondary) !important;
}

.mos-studio #selector .item-container img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 !important;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background-color: var(--ink-900);
  transition: border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-studio #selector .item-container .item-title {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: left;
  color: var(--text-tertiary) !important;
  transition: color var(--t-micro) var(--ease);
}

.mos-studio #selector .item-container:hover img {
  border-color: var(--accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(6, 10, 16, 0.42);
}

.mos-studio #selector .item-container:hover .item-title {
  color: var(--text-primary) !important;
}

/* --- Desen gonderme formu ---
   Gorunurlugunu JS yonetiyor (.rezervasyondiv baslangicta gizli).
   Sadece gorunum: studyo paneliyle ayni dil. */
.rezervasyondiv {
  max-width: 820px;
  margin: 0 auto clamp(64px, 9vh, 120px);
  padding: clamp(26px, 2.6vw, 44px);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  font-family: var(--font-ui);
}

.rezervasyondiv .form-label {
  display: block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary) !important;
}

.rezervasyondiv .row > [class*="col-"] { margin-bottom: 20px; }

.rezervasyondiv .form-control {
  width: 100%;
  padding: 12px 14px !important;
  background-color: var(--ink-900) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui);
  font-size: 14px !important;
  box-shadow: none !important;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.rezervasyondiv .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(111, 163, 206, 0.15) !important;
  outline: none !important;
}

/* Buton inline style="background:black" tasiyor -> !important gerekli */
.rezervasyondiv button[type="submit"] {
  width: auto;
  white-space: nowrap;
  padding: 14px 34px !important;
  background-color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-950) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: all var(--t-micro) var(--ease);
}

.rezervasyondiv button[type="submit"]:hover {
  background-color: var(--accent-bright) !important;
  border-color: var(--accent-bright) !important;
  transform: none !important;
}

@media (max-width: 1400px) {
  #tablero td {
    width: 19px !important;
    height: 19px !important;
    max-width: 19px !important;
    max-height: 19px !important;
  }
}

/* Tek sutun: once kontrol paneli, sonra desen, sonra duvar.
   Kaynak sirasi zaten bu; grid tek sutuna dusunce korunuyor. */
@media (max-width: 1024px) {
  .mos-studio__grid { grid-template-columns: minmax(0, 1fr); }
  .mos-studio__panel { max-width: 420px; }
  #malla td {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  /* Dar ekranda dev serif baslik satira sigmiyordu */
  #malla-titulo,
  #tablero-titulo { font-size: clamp(24px, 5.4vw, 34px); }

  /* Cizim katmani dar ekranda kalabaliklasiyor: modul sayisi azaldi */
  .mos-studio::after { opacity: 0.6; }
}

/* Secici basligi dar ekranda tek satira sigmiyordu: baslik uc satira
   dusup seri etiketiyle cakisiyordu. Iki satira ayriliyor —
   ustte baslik + kapatma, altta tam genislikte seri filtresi. */
@media (max-width: 720px) {
  .mos-studio #selector .mos-picker__head {
    flex-wrap: wrap;
    gap: 14px 12px;
  }

  /* Uc satira dusen tek parca buydu; dar ekranda baslik yetiyor */
  .mos-studio #selector .mos-picker__eyebrow { display: none; }

  .mos-studio #selector .mos-picker__titles { order: 1; flex: 1 1 auto; }
  .mos-studio #selector .close-popup { order: 2; }

  .mos-studio #selector #coleccion {
    order: 3;
    flex: 1 1 100%;
  }

  .mos-studio #selector #coleccion p {
    width: 100%;
    justify-content: space-between;
    gap: 14px;
  }

  .mos-studio #selector #select-serie {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mos-studio #selector .items-container {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  }
}

@media (max-width: 560px) {
  .mos-studio__panel { max-width: 100%; }

  #malla td {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
  #tablero td {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
  }

  /* Ipucu balonu dar kartta iki satira dusuyordu */
  .mos-preview__hint {
    bottom: 18px;
    padding: 8px 14px;
    font-size: 11.5px !important;
  }
}


/* =============================================================
   7.9 BOLUM: FUARLAR / DUYURULAR  (.mos-news)
   Editoryal serit. Projeler izgarasindan kasitli olarak farkli:
   bunlar haber niteliginde, o yuzden kart degil, kil cizgiyle
   ayrilan satirlar. Gorsel solda dar bir sutunda kalir.
   ============================================================= */

.mos-news {
  position: relative;
  padding-block: clamp(56px, 8vh, 108px);
  font-family: var(--font-ui);
}

.mos-news__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;   /* hero ile ayni sol eksen */
}

.mos-news__title {
  margin: 0 0 clamp(26px, 2.8vw, 42px);
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--text-primary);
}

.mos-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.mos-news__item {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 46px);
  align-items: center;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--hairline);
}

.mos-news__thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.mos-news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-media) var(--ease);
}

/* Hover: gorsel cok hafif yaklasir — surukleyici degil, canli */
.mos-news__item:hover .mos-news__thumb img { transform: scale(1.045); }

.mos-news__name {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
}

.mos-news__note {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-secondary);
  text-wrap: pretty;
}


/* =============================================================
   7.955 PROJE INDEKSI  (.mos-index)
   Karo dizisi degil, editoryal bir portfolyo sayfasi.

   IZGARA MANTIGI — 6 sutun, bes projelik tekrar eden ritim:
     1. proje  4 sutun genis, oran 16:10  -> yukseklik 2.5 birim
     2. proje  2 sutun genis, oran  4:5   -> yukseklik 2.5 birim
     3-5.      2 sutun genis, oran  4:3   -> yukseklik 1.5 birim
   Ilk iki karonun yuksekligi ESIT cikacak sekilde oranlar
   secildi; boylece cesitlilik var ama satirlar hizali kaliyor
   ve proje sayisi ne olursa olsun duzen bozulmuyor.
   ============================================================= */

.mos-index {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-index__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-index__head {
  margin-bottom: clamp(30px, 3.6vw, 54px);
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline);
}

.mos-index__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.02;
  text-transform: none;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-index__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}

/* --- Proje karosu --- */
/* Karo kendi icinde iki satir: gorsel (kalan alan) + ad.
   Bu sayede satir yuksekligini komsusundan alan karonun gorseli
   kendiliginden uyum sagliyor (asagidaki 5n+2 kurali). */
.mos-project {
  grid-column: span 2;
  display: grid;
  grid-template-rows: 1fr auto;
  text-decoration: none;
  min-width: 0;
}

.mos-project:nth-child(5n + 1) { grid-column: span 4; }

.mos-project__frame {
  position: relative;
  aspect-ratio: 4 / 3;          /* ritmin 3-5. karolari */
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

/* Satir yuksekligini genis karo belirler */
.mos-project:nth-child(5n + 1) .mos-project__frame { aspect-ratio: 16 / 10; }

/* Yanindaki dikey karo SABIT oran kullanmaz: sabit oranda satir
   yuksekligi sutun boslugu yuzunden birkac piksel kayiyordu
   (900x562 yanina 440x550). Bunun yerine satirin verdigi
   yuksekligi doldurur — hiza her genislikte birebir. */
.mos-project:nth-child(5n + 2) .mos-project__frame {
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}

.mos-project__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 900ms var(--ease);
}

/* Alttan yukari sonumlenen ince koyulasma: ad gorselin uzerinde
   degil ama gorsel de zeminle carpismiyor. */
.mos-project__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(10, 16, 23, 0.38) 0%,
              rgba(10, 16, 23, 0) 100%);
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease);
}

.mos-project:hover .mos-project__frame {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 26px 60px rgba(6, 10, 16, 0.42);
}

.mos-project:hover .mos-project__frame img { transform: scale(1.05); }
.mos-project:hover .mos-project__frame::after { opacity: 1; }

.mos-project__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 16px;
}

.mos-project__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: var(--text-primary);
  transition: color var(--t-micro) var(--ease);
}

.mos-project:hover .mos-project__name { color: var(--accent-bright); }

.mos-project__note {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Giris sirasi: satir icinde kisa ve dongusel. Genel kural
   6. karodan sonra sabit 340ms bekletiyor; 18 karolu bir
   izgarada bu, gec gelen her karoda hissedilir gecikme demek. */
.mos-index__grid [data-mos-reveal] { transition-delay: 0ms; }
.mos-index__grid [data-mos-reveal]:nth-child(5n + 2) { transition-delay: 70ms; }
.mos-index__grid [data-mos-reveal]:nth-child(5n + 3) { transition-delay: 100ms; }
.mos-index__grid [data-mos-reveal]:nth-child(5n + 4) { transition-delay: 150ms; }
.mos-index__grid [data-mos-reveal]:nth-child(5n + 5) { transition-delay: 200ms; }


/* =============================================================
   7.956 URUN KATALOGU  (.mos-catalog / .mos-card / .mos-rail)
   Tum Urunler, arama ve kategori sayfalari AYNI sistemi kullanir:
   kullanici menuden de gelse aramadan da gelse ayni vitrini gorur.

   Performans notu: sayfada 673'e kadar kart olabiliyor. Bu yuzden
   burada scroll reveal YOK (yuzlerce elemana gecis bindirmek
   kaydirmayi bogyor), hover efektleri de yalnizca compositor'da
   calisan transform/opacity ile sinirli.
   ============================================================= */

.mos-catalog {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-catalog__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-catalog__head {
  margin-bottom: clamp(24px, 2.8vw, 38px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--hairline);
}

.mos-catalog__back { margin-bottom: clamp(16px, 1.8vw, 24px); }

.mos-catalog__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-transform: none;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-catalog__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.7;
  color: var(--text-secondary);
}

.mos-catalog__query {
  font-family: var(--font-display);
  font-size: 1.2em;
  color: var(--text-primary);
}

/* --- Filtre rayi ---
   23 alt kategori var; sarmak yerine tek satirda kayan bir ray
   daha okunakli ve mobilde de ayni davraniyor. */
.mos-rail {
  margin-bottom: clamp(22px, 2.6vw, 34px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* Kenarlarda kesildigi belli olsun ama cizgi/golge olmasin */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px,
                      #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 18px,
                      #000 calc(100% - 18px), transparent 100%);
}

.mos-rail::-webkit-scrollbar { height: 4px; }
.mos-rail::-webkit-scrollbar-track { background: transparent; }
.mos-rail::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 999px;
}

.mos-rail__track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 2px 18px;
}

/* Gecis katmani butun <button>'lara !important ile koyu mavi zemin
   basiyor (theme-dark.css: background/border/color/radius). Cipler
   de <button> oldugu icin ayni ozgullukte geri aliniyor. */
.mos-rail__chip {
  flex: 0 0 auto;
  /* Tema butun <button>'lara "width: 100%" veriyor; cip rayda
     1252px'e yayiliyordu. Icerik genisliginde kalmali. */
  width: auto !important;
  padding: 9px 16px !important;
  background-color: transparent !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease) !important;
}

/* Alt seviyeler daha sessiz: agac derinligi renkle okunuyor */
.mos-rail__chip--l2 { color: var(--text-tertiary) !important; }
.mos-rail__chip--l3 { color: var(--text-tertiary) !important; font-size: 11px; }

.mos-rail__chip:hover {
  border-color: var(--hairline-strong) !important;
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

.mos-rail__chip.is-active {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--ink-950) !important;
}

/* --- Katalog izgarasi --- */
.mos-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: clamp(14px, 1.5vw, 26px);
}

/* Dar ekranda 214px'lik alt sinir tek sutuna dusuruyordu; katalog
   tek sutunda numune degil poster gibi duruyor. En az iki sutun. */
@media (max-width: 620px) {
  .mos-catalog__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .mos-card__meta { padding-top: 9px; }
  .mos-card__name { font-size: 12.5px; }
  .mos-card__cat { font-size: 9.5px; letter-spacing: 0.14em; }
}

.mos-card {
  display: block;
  text-decoration: none;
  min-width: 0;
}

.mos-card.is-hidden { display: none; }

.mos-card__frame {
  position: relative;
  aspect-ratio: 1 / 1;      /* numune karesi */
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform var(--t-media) var(--ease);
}

.mos-card:hover .mos-card__frame {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.24),
              0 16px 36px rgba(6, 10, 16, 0.34);
}

.mos-card:hover .mos-card__frame img { transform: scale(1.06); }

.mos-card__meta { padding-top: 12px; }

.mos-card__name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(13px, 0.98vw, 15px);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: var(--text-primary);
  transition: color var(--t-micro) var(--ease);
}

.mos-card:hover .mos-card__name { color: var(--accent-bright); }

.mos-card__cat {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mos-catalog__empty {
  margin: clamp(40px, 6vh, 80px) 0 0;
  font-size: 15px;
  color: var(--text-secondary);
}

.mos-catalog__empty[hidden] { display: none; }


/* =============================================================
   7.95 FOOTER  (.mos-footer)
   Sayfanin en koyu yuzeyi; ustunde tek bir kil cizgi ile ayrilir.
   Gecis katmani #footer'a kendi zeminini ve widget stillerini
   basiyordu, hepsi burada ayni ozgullukte geri aliniyor.
   ============================================================= */

#footer.mos-footer {
  background-color: var(--ink-950) !important;
  border-top: 1px solid var(--hairline) !important;
  padding: clamp(48px, 6vw, 84px) 0 clamp(28px, 3vw, 40px) !important;
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

.mos-footer__inner {
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* --- Marka --- */
.mos-footer__mark {
  display: block;
  margin-bottom: clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-primary);
}

.mos-footer__reach {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mos-footer__reach li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.mos-footer__icon {
  flex: 0 0 auto;
  color: var(--accent);
}

.mos-footer__icon svg { width: 17px; height: 17px; display: block; }

.mos-footer__val {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t-micro) var(--ease);
}

a.mos-footer__val:hover { color: var(--accent-bright); }

/* --- Sutun basliklari --- */
.mos-footer__label {
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--font-ui) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-tertiary);
  border: 0;
}

/* Eski tema widget-title'a alt cizgi/dekor basiyordu */
.mos-footer__label::before,
.mos-footer__label::after { content: none !important; }

/* --- Bagli listeler --- */
.mos-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mos-footer__links li {
  margin: 0;
  padding: 0;
  border: 0;
}

.mos-footer__links a {
  display: block;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-footer__links a:hover {
  color: var(--text-primary);
  transform: translateX(3px);
}

/* --- Desen Olustur: sessiz ama ayrisan aksiyon --- */
.mos-footer__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}

.mos-footer__action svg {
  width: 22px;
  height: 7px;
  transition: transform var(--t-micro) var(--ease);
}

.mos-footer__action:hover { color: var(--text-primary); }
.mos-footer__action:hover svg { transform: translateX(4px); }

/* --- Alt satir --- */
.mos-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.mos-footer__sep { color: var(--hairline-strong); }

@media (max-width: 900px) {
  .mos-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 5vw, 40px);
  }

  /* Marka sutunu tam genislik: adres uzun */
  .mos-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .mos-footer__grid { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================
   7.953 GALERI  (.mos-page--gallery)
   Galeri, Hakkimizda ile ayni sablondan (page) geliyor ama icerigi
   metin degil: tek paragraf icinde 73 kucuk resim, hepsi ~320px
   sabit yukseklikte. Bu yuzden okuma olcusu degil, sutunlu bir
   arsiv duzeni kullaniliyor — gorsel kirpilmiyor, oran korunuyor
   ve gorsel sayisi degisince duzen bozulmuyor.
   ============================================================= */

/* Metin sayfasinin okuma sinirlari galeride gecersiz */
.mos-page--gallery .mos-prose { max-width: none; }

.mos-page--gallery .mos-prose p:has(img) {
  display: block;         /* .mos-prose'un flex izgarasini ezer */
  columns: 5;
  column-gap: clamp(10px, 1.1vw, 16px);
  margin: 0;
}

.mos-page--gallery .mos-prose img {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  margin: 0 0 clamp(10px, 1.1vw, 16px);
  display: block;
  break-inside: avoid;
  border-radius: var(--r-sm);
  border: 1px solid var(--card-border);
  background-color: var(--ink-800);
  cursor: zoom-in;
  transition: transform var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-page--gallery .mos-prose img:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(6, 10, 16, 0.42);
}

/* Icerikteki tek <a> butun gorselleri sariyor (editor kazasi) —
   satir ici davranmasin, sutun duzenini bozmasin. */
.mos-page--gallery .mos-prose a {
  display: contents;
  text-decoration: none;
}

@media (max-width: 1200px) { .mos-page--gallery .mos-prose p:has(img) { columns: 4; } }
@media (max-width: 900px)  { .mos-page--gallery .mos-prose p:has(img) { columns: 3; } }
@media (max-width: 620px)  { .mos-page--gallery .mos-prose p:has(img) { columns: 2; } }

/* --- Buyutme katmani (lightbox) ---
   Kutuphane yok. Kucuk resmin yolundan orijinali turetiliyor:
   /uploads/images/galeri/__thumbs/<dosya>/<dosya>__WxH.jpg
   -> /uploads/images/galeri/<dosya>
   Turetilemezse kucuk resmin kendisi gosteriliyor. */
.mos-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background-color: rgba(8, 13, 20, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-micro) var(--ease), visibility var(--t-micro);
}

.mos-lightbox.is-open { opacity: 1; visibility: visible; }

.mos-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  background-color: var(--ink-800);
}

.mos-anim .mos-lightbox.is-open .mos-lightbox__img {
  animation: mos-fade 300ms var(--ease) both;
}

.mos-lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tema butun <button>'lara zemin/genislik basiyor */
  width: 46px !important;
  height: 46px;
  padding: 0 !important;
  background-color: rgba(12, 18, 26, 0.72) !important;
  border: 1px solid rgba(237, 241, 245, 0.22) !important;
  border-radius: 50% !important;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease) !important;
}

/* Gecis katmani butun <button>:hover'lara "transform:
   translateY(-1px)" veriyor. Ileri/geri dugmeleri dikey ortalamayi
   translateY(-50%) ile yaptigi icin bu, dugmeyi ~23px asagi
   ziplatiyordu. Her dugmenin hover donusumu kendi kuralinda. */
.mos-lightbox__btn:hover {
  background-color: rgba(12, 18, 26, 0.95) !important;
  border-color: var(--accent) !important;
  /* Tema button:hover'a color:#0D1520 !important veriyor; ikonlar
     currentColor kullandigi icin koyu zeminde kayboluyordu. */
  color: var(--text-primary) !important;
  transform: none;
}

.mos-lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); }
.mos-lightbox__next:hover { transform: translateY(-50%) translateX(2px); }
.mos-lightbox__close:hover { transform: none; }

.mos-lightbox__btn svg { width: 17px; height: 17px; }

.mos-lightbox__close { top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px); }
.mos-lightbox__prev  { left: clamp(10px, 2vw, 26px);  top: 50%; transform: translateY(-50%); }
.mos-lightbox__next  { right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); }

.mos-lightbox__count {
  position: absolute;
  bottom: clamp(14px, 2.4vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
}

@media (max-width: 560px) {
  .mos-lightbox__btn { width: 38px !important; height: 38px; }
}


/* =============================================================
   7.954 ILETISIM  (.mos-contact)
   Uc ikon kutusu + duz form degil: kil cizgiyle ayrilan iletisim
   satirlari, koyu yuzeyde net bir form ve cerceveli harita sahnesi.
   ============================================================= */

.mos-contact {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-contact__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-contact__head {
  margin-bottom: clamp(26px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--hairline);
}

.mos-contact__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-transform: none;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-contact__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- Iletisim satirlari --- */
.mos-reach {
  list-style: none;
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(16px, 2vw, 36px);
}

.mos-reach__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.mos-reach__icon {
  flex: 0 0 auto;
  display: block;
  color: var(--accent);
}

.mos-reach__icon svg { width: 20px; height: 20px; display: block; }

.mos-reach__value {
  min-width: 0;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t-micro) var(--ease);
}

a.mos-reach__value:hover { color: var(--accent-bright); }

/* --- Yerlesim: form + harita --- */
.mos-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}

/* --- Form --- */
.mos-form__row { margin-bottom: 12px; }

/* Eski tema input'lara kendi cercevesini ve odak halkasini
   basiyor; hepsi ayni ozgullukte geri aliniyor. */
.mos-form input[type="text"],
.mos-form input[type="tel"],
.mos-form input[type="email"],
.mos-form textarea {
  width: 100% !important;
  padding: 15px 16px !important;
  background-color: var(--ink-800) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-size: 14.5px !important;
  line-height: 1.5;
  color: var(--text-primary) !important;
  transition: border-color var(--t-micro) var(--ease),
              background-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease) !important;
}

.mos-form textarea {
  min-height: 150px;
  resize: vertical;
}

.mos-form input::placeholder,
.mos-form textarea::placeholder { color: var(--text-tertiary) !important; }

.mos-form input:focus,
.mos-form textarea:focus {
  border-color: var(--accent) !important;
  background-color: var(--ink-700) !important;
  box-shadow: 0 0 0 3px rgba(111, 163, 206, 0.15) !important;
  outline: none !important;
}

.mos-form__captcha { margin: 18px 0; }

/* reCAPTCHA cercevesi dar ekranda tasiyordu */
.mos-form__captcha .g-recaptcha { max-width: 100%; overflow: hidden; }

.mos-form__submit {
  width: auto !important;
  padding: 16px 40px !important;
  background-color: var(--accent) !important;
  background-image: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 64%) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-950) !important;
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(111, 163, 206, 0.16);
  transition: background-color var(--t-micro) var(--ease),
              transform 170ms var(--ease),
              box-shadow 170ms var(--ease) !important;
}

.mos-form__submit:hover {
  background-image: linear-gradient(180deg, #C2DCEF 0%, var(--accent-bright) 64%) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(111, 163, 206, 0.28);
}

.mos-form__submit:active { transform: translateY(0); }

/* --- Uyari mesajlari (Bootstrap alert degil) --- */
.mos-note {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  background-color: rgba(111, 163, 206, 0.09);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.mos-note--warn {
  border-left-color: #E4796F;
  background-color: rgba(228, 121, 111, 0.10);
}

/* --- Harita sahnesi --- */
.mos-contact__map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}

.mos-contact__map:hover,
.mos-contact__map:focus-within {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 22px 50px rgba(6, 10, 16, 0.38);
}

.mos-contact__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- intl-tel-input: koyu temaya uyarlama ---
   Eklenti input'u .iti ile sariyor ve solda bayrak acilir menusu
   koyuyor. Varsayilan stilleri acik tema icin. */
.mos-form .iti { width: 100%; display: block; }

/* Bayrak kabi 49px genisliginde ve input'un UZERINDE duruyor.
   Eklenti sol dolguyu kendi CSS'inden veriyor, bizim !important'li
   padding kurali onu eziyordu: bayrak yer tutucu metnin ustune
   biniyordu. Sol dolgu bayragi acikta birakacak sekilde veriliyor. */
.mos-form input[type="tel"] { padding-left: 62px !important; }

.mos-form .iti__flag-container { border-right: 1px solid var(--hairline); }

.mos-form .iti--separate-dial-code .iti__selected-flag,
.mos-form .iti__selected-flag {
  background-color: transparent !important;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.mos-form .iti__selected-flag:hover,
.mos-form .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(237, 241, 245, 0.05) !important;
}

.mos-form .iti__arrow { border-top-color: var(--text-tertiary); }
.mos-form .iti__arrow--up { border-bottom-color: var(--text-tertiary); }

/* Ulke listesi: koyu yuzey, ekrandan tasmayan genislik */
.mos-form .iti__country-list {
  background-color: var(--ink-800);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
  max-width: min(360px, 88vw);
  max-height: 260px;
}

.mos-form .iti__country { padding: 8px 12px; }
.mos-form .iti__country.iti__highlight { background-color: var(--ink-700); }
.mos-form .iti__dial-code { color: var(--text-tertiary); }
.mos-form .iti__divider { border-bottom-color: var(--hairline); }

@media (max-width: 900px) {
  .mos-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 5vw, 40px);
  }

  .mos-contact__map { aspect-ratio: 3 / 2; }
}

@media (max-width: 560px) {
  .mos-reach { gap: 14px; }
  .mos-contact__map { aspect-ratio: 1 / 1; }
  /* reCAPTCHA sabit 304px genisliginde; dar ekranda olcekleniyor */
  .mos-form__captcha .g-recaptcha {
    transform: scale(0.88);
    transform-origin: left top;
    height: 68px;
  }
}


/* =============================================================
   7.9553 KATALOGLAR  (.mos-docs)
   Sertifikalar (.mos-vault) ile ayni aileden, iki farkla:
   kapaklar zaten koyu lacivert tasarimlar oldugu icin kagit
   yuzeyi yok (tam kanamali) ve kartlar daha buyuk — az sayida,
   agirligi olan parca.
   ============================================================= */

.mos-docs {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-docs__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-docs__head {
  margin-bottom: clamp(30px, 3.6vw, 52px);
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline);
}

.mos-docs__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-transform: none;
  color: var(--text-primary);
  text-wrap: balance;
}

/* 340px alt sinir: genis ekranda 3 katalog bir satira oturuyor,
   sayi artarsa kendiliginden sariyor. */
.mos-docs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

.mos-doc {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* Kapak tam kanamali: kaynak gorsel 868x867 (kare), kirpilmiyor */
.mos-doc__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-doc__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform var(--t-media) var(--ease);
}

/* Kapak koyu bir tasarim; ustune perde atmak yerine kenarlik ve
   golge konusuyor — gorsel kendi kimligini koruyor. */
.mos-doc:hover .mos-doc__cover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 28px 60px rgba(6, 10, 16, 0.46);
}

.mos-doc:hover .mos-doc__cover img { transform: scale(1.045); }

.mos-doc__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
}

.mos-doc__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary);
  transition: color var(--t-micro) var(--ease);
}

.mos-doc:hover .mos-doc__name { color: var(--accent-bright); }

.mos-doc__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary);
  transition: color var(--t-micro) var(--ease);
}

.mos-doc__action svg {
  width: 15px;
  height: 15px;
  transition: transform var(--t-micro) var(--ease);
}

.mos-doc:hover .mos-doc__action { color: var(--accent-bright); }
.mos-doc:hover .mos-doc__action svg { transform: translateY(2px); }

@media (max-width: 700px) {
  .mos-docs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 34px);
  }

  .mos-doc__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 14px;
  }
}


/* =============================================================
   7.9555 SERTIFIKALAR  (.mos-vault)
   Belge arsivi. Ana sayfadaki .mos-certs ile ayni aileden: kagit
   kendi beyazinda duruyor, cerceve/golge ile bagirmiyor. Fark:
   burada belgeler daha buyuk ve her birinin kendi aksiyonu var.
   ============================================================= */

.mos-vault {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-vault__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-vault__head {
  margin-bottom: clamp(30px, 3.6vw, 52px);
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline);
}

.mos-vault__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-transform: none;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Sertifika sayisi artarsa kendiliginden sarar */
.mos-vault__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

.mos-vault__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* --- Belge yuzeyi ---
   Kagit kendi beyazinda ama koyu zeminde patlamasin diye cok hafif
   kirilmis bir beyaz ve ince bir kenarlik kullaniliyor. */
.mos-vault__sheet {
  position: relative;
  aspect-ratio: 3 / 4;          /* belge orani */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.4vw, 22px);
  background-color: #F2F4F7;
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

.mos-vault__sheet img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform var(--t-media) var(--ease);
}

/* Baglantisi olan belge yukselir; olmayan sabit durur */
.mos-vault__card:hover .mos-vault__sheet {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 26px 56px rgba(6, 10, 16, 0.44);
}

.mos-vault__card:hover .mos-vault__sheet img { transform: scale(1.03); }

.mos-vault__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
}

.mos-vault__name {
  margin: 0;
  font-size: clamp(12px, 0.92vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color var(--t-micro) var(--ease);
}

.mos-vault__card:hover .mos-vault__name { color: var(--accent-bright); }

/* Aksiyon etiketi icerikten geliyor ("PDF Indir" gibi) */
.mos-vault__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary);
  transition: color var(--t-micro) var(--ease);
}

.mos-vault__action svg {
  width: 20px;
  height: 6px;
  transition: transform var(--t-micro) var(--ease);
}

.mos-vault__card:hover .mos-vault__action { color: var(--accent-bright); }
.mos-vault__card:hover .mos-vault__action svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .mos-vault__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
  }

  .mos-vault__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-top: 12px;
  }

  .mos-vault__name { font-size: 11px; letter-spacing: 0.12em; }
}


/* =============================================================
   7.9565 URUN DETAYI  (.mos-item)
   Numune sayfasi: solda gorsel sahnesi, sagda kimlik + kunye.
   Aciklama alani teknik kunye satirlarindan olusuyor (her urunde
   dolu), Content ise pratikte hicbir urunde yok — bu yuzden
   agirlik gorselde ve kunyede.
   ============================================================= */

.mos-item {
  position: relative;
  padding-block: clamp(20px, 2.6vh, 36px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-item__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

.mos-item__back { margin-bottom: clamp(20px, 2.4vw, 32px); }

.mos-item__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* --- Gorsel sahnesi --- */
.mos-item__hero {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;      /* numune karesi — katalog karosuyla ayni dil */
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.mos-item__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Gorsel degisince yumusak gecis; JS sadece src'yi degistiriyor */
  animation: mos-fade 420ms var(--ease) both;
}

/* --- Gorsel uzerinde ileri/geri ---
   Eski Owl carousel'in ok davranisi. Her zaman goruntuluyor ama
   sessiz; sahnenin uzerine gelince belirginlesiyor. Dokunmatikte
   hover olmadigi icin gorunurluk hover'a BAGLANMADI. */
.mos-item__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tema butun <button>'lara zemin/genislik/kenarlik basiyor */
  width: 44px !important;
  height: 44px;
  padding: 0 !important;
  /* Eleman opakligi kullanilmiyor: daireyi de ikonu da birden
     soluklastirip parlak mozaik uzerinde eritiyordu. Kontrast
     zeminin kendi saydamligindan geliyor. */
  background-color: rgba(12, 18, 26, 0.72) !important;
  border: 1px solid rgba(237, 241, 245, 0.22) !important;
  border-radius: 50% !important;
  color: var(--text-primary);
  box-shadow: 0 2px 12px rgba(6, 10, 16, 0.34);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease) !important;
}

.mos-item__nav--prev { left: 14px; }
.mos-item__nav--next { right: 14px; }

.mos-item__nav svg { width: 17px; height: 17px; }

.mos-item__nav:hover,
.mos-item__nav:focus-visible {
  background-color: rgba(12, 18, 26, 0.92) !important;
  border-color: var(--accent) !important;
  /* Tema button:hover'a color:#0D1520 !important veriyor; ok
     ikonu currentColor kullandigi icin kayboluyordu. */
  color: var(--text-primary) !important;
  outline: none;
}

.mos-item__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.mos-item__nav--next:hover { transform: translateY(-50%) translateX(2px); }

@media (max-width: 560px) {
  .mos-item__nav { width: 38px !important; height: 38px; }
  .mos-item__nav--prev { left: 10px; }
  .mos-item__nav--next { right: 10px; }
}

.mos-item__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.mos-item__thumb {
  flex: 0 0 auto;
  /* Tema butun <button>'lara zemin/kenarlik/genislik basiyor */
  width: 84px !important;
  height: 84px;
  padding: 0 !important;
  overflow: hidden;
  background-color: var(--ink-800) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease) !important;
}

.mos-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mos-item__thumb:hover {
  border-color: var(--hairline-strong) !important;
  transform: translateY(-2px);
  background-color: var(--ink-800) !important;
}

.mos-item__thumb.is-active {
  border-color: var(--accent) !important;
  background-color: var(--ink-800) !important;
}

/* --- Kimlik + kunye --- */
.mos-item__panel { min-width: 0; }

.mos-item__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-item__spec {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--hairline);
}

.mos-item__spec-label {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Ikonlu liste degil: etiket solda, deger sagda, arada kil cizgi */
.mos-spec { margin: 0; }

.mos-spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.mos-spec__row:first-child { padding-top: 0; }

.mos-spec dt {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mos-spec dd {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.5;
  text-align: right;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* --- Icerik (pratikte cok nadir dolu) --- */
.mos-item__content {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--hairline);
}

.mos-item__content-title {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-size: var(--title-section);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

.mos-item__content .mos-prose { max-width: var(--prose-max); }

@media (max-width: 900px) {
  .mos-item__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 5vw, 36px);
  }

  /* Dar ekranda kunye once kimlikle birlikte okunsun diye
     sahne ustte kaliyor; sira zaten kaynak sirasi. */
  .mos-item__thumb { width: 68px !important; height: 68px; }
}


/* =============================================================
   7.957 PROJE DETAYI  (.mos-case)
   Blog yazisi degil, bir uygulama sunumu. 18 projenin 15'inde
   metin YOK; sayfa baslik ve kapak gorseliyle ayakta durabilmeli.
   Bu yuzden agirlik gorselde ve tipografide, kutuda degil.
   ============================================================= */

.mos-case {
  position: relative;
  padding-block: clamp(20px, 2.6vh, 36px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-case__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

/* --- Geri baglantisi --- */
.mos-case__back {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* Ok geriye bakiyor: hover'da da geriye kaysin */
.mos-link__arrow--back { transform: none; }
.mos-link:hover .mos-link__arrow--back { transform: translateX(-6px); }

/* --- Baslik --- */
.mos-case__head {
  margin-bottom: clamp(26px, 3vw, 44px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
  border-bottom: 1px solid var(--hairline);
}

.mos-case__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--text-primary);
  text-wrap: balance;
}

/* --- Kapak gorseli: sayfanin agirlik merkezi --- */
.mos-case__cover {
  position: relative;
  margin: 0 0 clamp(34px, 4.4vw, 66px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.mos-case__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Cok yavas bir yaklasma: sayfa acilirken gorsel canlanir,
     dongusel degil, bir kez calisir. */
  transform: scale(1.02);
  transition: transform 1200ms var(--ease);
}

.mos-anim .mos-case__cover[data-mos-reveal].is-in img { transform: scale(1); }

/* Alt kenarda cok hafif koyulasma — gorsel zeminle carpismaz */
.mos-case__cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(10, 16, 23, 0.30) 0%,
              rgba(10, 16, 23, 0) 100%);
}

/* --- Icerik ---
   Bicimlendirme .mos-prose'tan geliyor (Hakkimizda ile ortak).
   Buradaki tek fark okuma olcusu ve ust bosluk. */
.mos-case__body { max-width: var(--prose-max); }

/* Icerikteki gorseller bu sayfada daha buyuk kullanilir:
   CMS satir ici olcu yaziyor (500x400), izgara onu esitler. */
.mos-case__body p:has(img) {
  gap: clamp(12px, 1.4vw, 22px);
}

.mos-case__body p:has(img) img {
  flex: 1 1 320px;
  min-width: 0;
  width: auto;
}


/* =============================================================
   7.96 STATIK SAYFA  (.mos-page)
   Yonetim panelinden gelen serbest HTML'i koyu temaya baglar.
   Icerige HIC dokunulmuyor: paragraf, baslik, liste, gorsel,
   tablo ve baglantilarin tamami burada bicimlendiriliyor.

   Temel gorunum genel amacli (Galeri gibi sayfalar da bu sablonu
   kullaniyor). Hakkimizda'ya ozel olanlar --about varyantinda.
   ============================================================= */

.mos-page {
  position: relative;
  padding-block: clamp(24px, 3vh, 44px) clamp(64px, 9vh, 120px);
  font-family: var(--font-ui);
}

.mos-page__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

/* --- Baslik --- */
.mos-page__head {
  margin-bottom: clamp(30px, 3.6vw, 52px);
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--hairline);
}

.mos-page__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.02;
  color: var(--text-primary);
  text-wrap: balance;
}

/* --- Video sahnesi (yalnizca Hakkimizda) --- */
.mos-page__stage {
  position: relative;
  margin: 0 0 clamp(40px, 5vw, 76px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--ink-800);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* Kaynak 1280x720. Oran kutuya sabitleniyor: metadata gelmeden
   de yer ayrilir, video yuklenince sayfa zipla­maz (CLS yok).
   Buyuk ekranda sayfayi tamamen domine etmesin diye ust sinir. */
.mos-page__stage {
  aspect-ratio: 16 / 9;
  max-height: 68vh;
}

.mos-page__stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--ink-900);
}

/* Tarayicinin yerlesik kontrol cubugu koyu zeminde beyaz bir
   kapsul olarak duruyordu. Chrome'da golge DOM'a erisilebilen
   kadari koyulastiriliyor; diger tarayicilar etkilenmiyor,
   kontroller ve davranis aynen duruyor. */
.mos-page__stage video::-webkit-media-controls-panel {
  background-image: linear-gradient(to top,
                    rgba(10, 16, 23, 0.86) 0%,
                    rgba(10, 16, 23, 0.28) 60%,
                    rgba(10, 16, 23, 0) 100%) !important;
}

/* Videonun ust kenarinda cok hafif isik — kart diliyle ayni */
.mos-page__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--card-sheen);
}

/* --- Icerik govdesi --- */
.mos-prose {
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.85;
  color: var(--text-secondary);
}

/* Okuma olcusu yalnizca duz metin sayfalarinda daraltilir.
   Galeri gibi gorsel yogun sayfalarda tam genislik gerekiyor. */
.mos-page--about .mos-prose { max-width: var(--prose-max); }

.mos-prose p {
  margin: 0 0 1.35em;
  text-wrap: pretty;
}

.mos-prose > p:last-child { margin-bottom: 0; }

/* Ilk paragraf giris gibi okunur — metin degismeden, sadece
   olcek ve renkle. Hardcode bir "lead" eklenmedi. */
.mos-page--about .mos-prose > p:first-of-type {
  font-size: clamp(17.5px, 1.4vw, 21px);
  line-height: 1.7;
  color: var(--text-primary);
}

.mos-prose strong,
.mos-prose b {
  font-weight: 500;
  color: var(--text-primary);
}

.mos-prose em, .mos-prose i { color: var(--text-primary); }

.mos-prose h1,
.mos-prose h2,
.mos-prose h3,
.mos-prose h4 {
  margin: 2em 0 0.7em;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.mos-prose h1 { font-size: clamp(26px, 2.8vw, 38px); }
.mos-prose h2 { font-size: clamp(23px, 2.4vw, 32px); }
.mos-prose h3 { font-size: clamp(20px, 1.9vw, 26px); }
.mos-prose h4 { font-size: clamp(18px, 1.5vw, 22px); }

.mos-prose a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(168, 205, 232, 0.4);
  transition: text-decoration-color var(--t-micro) var(--ease);
}

.mos-prose a:hover { text-decoration-color: var(--accent-bright); }

/* Listeler: tema isaretcisi yerine kil cizgi tonunda ince im */
.mos-prose ul,
.mos-prose ol {
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}

.mos-prose li { margin-bottom: 0.5em; }
.mos-prose ul li::marker { color: var(--accent); }
.mos-prose ol li::marker { color: var(--text-tertiary); }

.mos-prose blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px clamp(20px, 2vw, 32px);
  border-left: 1px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-primary);
}

/* --- Icerikteki gorseller ---
   CMS satir ici olcu yaziyor (style="height:320px; width:240px").
   Genislik sinirlanip yukseklik orana birakiliyor ki tasma olmasin. */
.mos-prose img {
  max-width: 100%;
  height: auto !important;
  border-radius: var(--r-md);
  border: 1px solid var(--card-border);
  background-color: var(--ink-800);
}

.mos-prose a:has(img) {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.mos-prose a img {
  transition: transform var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}

.mos-prose a:hover img {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Sadece gorsel iceren paragraflar (Galeri sayfasi boyle geliyor)
   duzenli bir izgaraya donusur; metin paragraflari etkilenmez. */
.mos-prose p:has(img) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(10px, 1.1vw, 16px);
  margin-bottom: clamp(10px, 1.1vw, 16px);
}

.mos-prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 14.5px;
}

.mos-prose th,
.mos-prose td {
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  text-align: left;
}

.mos-prose th {
  background-color: var(--ink-800);
  font-weight: 500;
  color: var(--text-primary);
}

.mos-prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* Eski tema kalintilarini bu kapsamda sustur */
.mos-prose,
.mos-prose * { font-family: var(--font-ui); }

.mos-prose h1, .mos-prose h2,
.mos-prose h3, .mos-prose h4,
.mos-prose blockquote { font-family: var(--font-display) !important; }


/* =============================================================
   7.97 ATMOSFER  (.mos-ambience)
   Desen Olustur akisinin final sahnesi: kullanicinin urettigi
   duvar, mekan kurgularinin arkasinda gorunur.

   Olcu sistemi: her sey tek bir jetondan (--tas) turetilir.
   Duvar tablosu 104 sutun x 66 satir; kart = 104*--tas genis,
   66*--tas yuksek. Mobilya gorseli TAM olarak ayni kutuyu
   kapladigi icin iki katman her ekran boyutunda hizali kalir.
   (Eski kodda kart 417x270, buyuk gorunum 833x605'ti; iki
   gorunumde mobilya farkli oranda geriliyordu.)
   ============================================================= */

.mos-ambience {
  --tas: 5px;
  position: relative;
  padding-block: clamp(30px, 4vh, 56px) clamp(56px, 8vh, 104px);
  font-family: var(--font-ui);
}

.mos-ambience__inner {
  position: relative;
  z-index: 1;
  width: var(--shell-w);
  margin-inline: auto;
}

/* KRITIK: JS goster/gizle islemini .hidden sinifiyla yapiyor ama
   bu sinif Bootstrap 3 CSS'inden geliyor ve bu sayfada YALNIZCA
   bootstrap'in JS'i yukleniyor. Yani sinif ekleniyor, hicbir sey
   olmuyordu: secili atmosfer paneli sayfa acilir acilmaz bos
   halde duruyor, mekan secilince de kart izgarasi kaybolmuyordu.
   Sadece bu sayfa kapsaminda tanimlaniyor. */
.mos-ambience .hidden { display: none !important; }

/* Yazdirma: .no-print eski print.css'ten geliyordu, o dosya bu
   sayfada yuklenmiyor. Ayni davranis burada tanimli. */
@media print {
  .mos-ambience .no-print,
  .mos-ambience__spinner { display: none !important; }

  .mos-ambience,
  .mos-ambience .escenario,
  .mos-ambience .ambiente-seleccionado {
    box-shadow: none !important;
    border-color: #999 !important;
  }
}

/* --- Giris --- */
.mos-ambience__intro {
  margin: 0 0 clamp(30px, 3.6vw, 52px);
  padding-bottom: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--hairline);
}

.mos-ambience__heading {
  margin: 14px 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--title-page);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--text-primary);
  text-wrap: balance;
}

.mos-ambience__lead {
  margin: clamp(14px, 1.4vw, 20px) 0 0;
  max-width: 62ch;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.75;
  color: var(--text-secondary);
}

/* Geri: eski "X" kutusu yerine editoryal baglanti.
   Eski kural mutlak konumlu, 35px genisliginde, #231F20 zeminli
   bir kutuydu (position:absolute; right:0; top:-40px) — metin
   uc satira kirilip sag ustte asili duruyordu. Sifirlaniyor. */
.mos-ambience .close-ambiente-padre {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  text-align: left !important;
}

.mos-ambience__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--t-micro) var(--ease);
}

.mos-ambience__back svg {
  width: 34px;
  height: 8px;
  transition: transform var(--t-micro) var(--ease);
}

.mos-ambience__back:hover { color: var(--accent-bright); }
.mos-ambience__back:hover svg { transform: translateX(-5px); }

/* --- Mekan kartlari --- */
.mos-ambience__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 1.8vw, 26px);
  margin: 0 !important;
  /* Eski tema .select-ambiente'ye #231F20 (kahverengi) zemin
     veriyordu; kartlarin arkasinda sicak bir dikdortgen kaliyordu. */
  background-color: transparent !important;
}

/* =============================================================
   PERFORMANS — bu sayfanin kritik noktasi
   JS uretilen duvari HER .wall elemanina basiyor: 4 kart + buyuk
   gorunum + #idoculto = 6 tablo x 6864 hucre. Sayfada 41.184 <td>
   ve 41.185 <img> olusuyor (toplam ~83.000 eleman) — oysa sadece
   16 farkli gorsel var. Kaydirirken kare suresi p95 121ms'ye,
   en kotu 280ms'ye ciktigi olculdu.

   JS'e dokunulamadigi icin eleman sayisi azaltilamaz; bunun
   yerine tarayiciya bu agaclarin BAGIMSIZ oldugu ve ekran
   disindayken hic boyanmamasi gerektigi soyleniyor.
   ============================================================= */

/* COZUM: her duvar kendi compositor katmanina aliniyor. Boylece
   tablo BIR KEZ rasterize ediliyor, kaydirma sirasinda sadece
   hazir katman tasiniyor — 41.000 eleman yeniden boyanmiyor.

   Olculen (1440px, sayfa boyunca kaydirma, kare suresi ms):
     once                          p95 110   en kotu 256
     content-visibility: auto      p95 132   en kotu 170   (daha kotu:
       kartlar ekrana girip cikarken alt agac yeniden yerlesiyor)
     KATMAN PROMOSYONU             p95  50   en kotu  55
     duvarlar tamamen gizli        p95  41   en kotu  71   (ust sinir)
   Yani boyama artik darbogaz degil. */
.mos-ambience .wall {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Kartin ic boyamasi disariya tasmaz: hover'da 6864 hucrelik
   agac degil, sadece kartin kendi alani yeniden boyanir. */
.mos-ambience .escenario {
  contain: layout paint style;
}

/* 41.000 gorsel uzerinde isaretci testi yapilmasin — bu hucreler
   tiklanabilir degil, olay hedefi de degiller. */
.mos-ambience .wall,
.mos-ambience .pared,
.mos-ambience .pared td,
.mos-ambience .pared td img {
  pointer-events: none;
}

/* Eski tema kartlari 417x270'e ve gri #515455 zemine sabitliyordu.
   flex-basis sifirlanmali: .col-md-6'nin "flex: 0 0 50%" degeri
   width'i eziyordu (kart 579px cikiyordu, duvar 520px'ti). */
.mos-ambience .escenario {
  position: relative;
  float: none !important;
  flex: 0 0 auto !important;
  width: calc(104 * var(--tas)) !important;
  height: calc(66 * var(--tas)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background-color: var(--ink-800) !important;
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}

/* Hover'da kartin KENDISI tasinmiyor: translate/scale, altindaki
   6864 hucrelik tabloyu yeniden boyatiyordu. Ayni his kenarlik ve
   golgeyle veriliyor — ikisi de kartin disina tasmayan islemler. */
.mos-ambience .escenario:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(6, 10, 16, 0.26),
              0 26px 60px rgba(6, 10, 16, 0.42);
}

/* Mobilya katmani kartin tamamini kaplar (z-index 2, eski koddan).
   Bu tek bir arka plan katmani, alti bos: olceklemesi ucuz.

   Eski temada ".ambiente-mobiliario { width: calc(100% - 12px) }"
   vardi: gorsel kartin sag kenarina 12px kala bitiyor, arkasindaki
   kart zemini serit halinde gorunuyordu. Sifirlaniyor. */
.mos-ambience .ambiente-mobiliario,
.mos-ambience .fondo-pared {
  width: 100% !important;
  height: 100% !important;
  right: auto !important;
}

.mos-ambience .ambiente-mobiliario {
  transition: transform var(--t-media) var(--ease);
}

.mos-ambience .escenario:hover .ambiente-mobiliario { transform: scale(1.025); }

/* --- Uretilen duvar ---
   table-layout:fixed oldugu icin sutun genisligini TABLONUN
   genisligi belirliyordu; tablo kabina yayilinca hucreler
   5px yerine 5.4px oluyor ve duvar kartla hizasini kaybediyordu.
   Tablo genisligi de jetondan veriliyor. */
.mos-ambience .pared {
  width: calc(104 * var(--tas)) !important;
  margin: 0 !important;
  table-layout: fixed;
  border-collapse: collapse;
}

/* padding SIFIRLANMALI: global stylesheet'te "th, td { padding:
   8px 12px }" var. Kart duvarinda etkisizdi (orada padding:0
   kurali vardi) ama buyuk duvarda her hucreye 24px yatay dolgu
   ekliyordu: sutunlar 10px yerine 25px oluyor, table-layout
   fixed'de tablo sutun toplamina kadar buyudugu icin duvar
   1040 yerine 2601px cikiyordu. */
.mos-ambience .pared td {
  width: var(--tas) !important;
  height: var(--tas) !important;
  padding: 0 !important;
}

/* Tas gorselleri dogal boyutlarindaydi (237x239) ve hucreyi
   doldurmuyordu; hucrenin tamamini kaplasin. */
.mos-ambience .pared td img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alt serit: mekan adi + aksiyon. Eski .texto-escenario ortada
   yuzen bir bloktu (margin-top:75px); alta sabitlendi. */
.mos-ambience .texto-escenario {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 !important;
  padding: 18px 20px;
  text-align: left;
  background: linear-gradient(to top,
              rgba(10, 16, 23, 0.86) 0%,
              rgba(10, 16, 23, 0.52) 62%,
              rgba(10, 16, 23, 0) 100%);
}

.mos-ambience .texto-escenario h4 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-transform: none;
  color: var(--text-primary) !important;
}

/* Eski "VER" input butonu */
.mos-ambience .ver-escenario {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  padding: 11px 22px !important;
  background-color: rgba(237, 241, 245, 0.06) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}

.mos-ambience .escenario:hover .ver-escenario,
.mos-ambience .ver-escenario:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--ink-950) !important;
}

/* --- Secili atmosfer sahnesi --- */
.mos-ambience .mos-stage {
  --tas: 10px;
  width: 100% !important;
  max-width: calc(104 * var(--tas));
  margin: 0 auto !important;
}

.mos-anim .mos-ambience .mos-stage:not(.hidden) {
  animation: mos-fade 420ms var(--ease) both;
}

.mos-ambience .mos-stage__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 clamp(16px, 1.8vw, 24px) !important;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

/* Mekan adi + JS'in ekledigi mozaik/oran bilgileri */
.mos-ambience .titulo-ambiente {
  flex: 1 1 auto;
  width: auto !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

/* JS bunlari ", %25 FBZM 006" seklinde basiyor */
.mos-ambience .titulo-ambiente .datos-piezas {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.mos-ambience .close-ambiente {
  flex: 0 0 auto;
  width: 40px !important;
  padding: 0 !important;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease);
}

.mos-ambience .close-ambiente svg { width: 15px; height: 15px; }

.mos-ambience .close-ambiente:hover {
  background-color: var(--ink-700);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Buyuk gorunum: kartlarla ayni kompozisyon, sadece daha buyuk */
.mos-ambience .ambiente-seleccionado {
  position: relative;
  width: calc(104 * var(--tas)) !important;
  height: calc(66 * var(--tas)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  background-color: var(--ink-800) !important;
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
}

.mos-ambience .fondo-muebles {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

.mos-ambience .ambiente-seleccionado .pared { margin: 0 !important; }


/* --- Yukleniyor ---
   spin.js siyah cizgiler ciziyordu (opts.color '#000', JS'te ve
   dokunulmuyor). Renk ve konum CSS'ten aliniyor: kap sadece
   spinner varken tam ekran bir perdeye donusuyor. */
.mos-ambience__spinner {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  opacity: 0;
  background-color: rgba(14, 20, 28, 0.62);
  transition: opacity var(--t-micro) var(--ease);
}

.mos-ambience__spinner:has(.spinner) { opacity: 1; }

.mos-ambience__spinner .spinner div {
  background-color: var(--accent-bright) !important;
  opacity: 0.9 !important;
}

/* Eski tema bu sayfada da Open Sans / BS3 tipografisi basiyor */
.mos-ambience,
.mos-ambience * {
  font-family: var(--font-ui);
}

.mos-ambience__heading,
.mos-ambience .texto-escenario h4,
.mos-ambience .titulo-ambiente {
  font-family: var(--font-display) !important;
}


/* =============================================================
   7.95 HAREKET
   Kural: hareket bir sey ANLATMALI (giris sirasi, odak, derinlik).
   Susleme amacli, dongusel, dikkat cagiran hicbir sey yok.
   Tumu prefers-reduced-motion ile kapanir; ayrica .mos-anim
   sinifi <head>'deki kucuk betikle ekleniyor — JS calismazsa
   icerik gizli kalmaz.
   ============================================================= */

@keyframes mos-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes mos-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Hero girisi: katmanlar sirayla acilir --- */
.mos-anim .mos-hero__media {
  animation: mos-fade 1400ms var(--ease) both;
}

.mos-anim .mos-hero__inner > * {
  animation: mos-rise 900ms var(--ease) both;
}

.mos-anim .mos-hero__inner > .mos-eyebrow      { animation-delay: 140ms; }
.mos-anim .mos-hero__inner > .mos-hero__title  { animation-delay: 260ms; }
.mos-anim .mos-hero__inner > .mos-hero__lead   { animation-delay: 400ms; }
.mos-anim .mos-hero__inner > .mos-hero__actions{ animation-delay: 540ms; }

/* --- Scroll reveal ---
   Isaret PHP'de (data-mos-reveal), gorunur olma sinifini JS
   ekliyor. Boylece ilk boyamada zaten gizliler: yanip sonme yok. */
.mos-anim [data-mos-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.mos-anim [data-mos-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
}

/* Kardesler sirayla girer; 6'dan sonrasi ayni gecikmede kalir ki
   uzun listelerde bekleme hissi olusmasin. */
.mos-anim [data-mos-reveal]:nth-child(2)  { transition-delay: 80ms; }
.mos-anim [data-mos-reveal]:nth-child(3)  { transition-delay: 160ms; }
.mos-anim [data-mos-reveal]:nth-child(4)  { transition-delay: 240ms; }
.mos-anim [data-mos-reveal]:nth-child(5)  { transition-delay: 300ms; }
.mos-anim [data-mos-reveal]:nth-child(n+6){ transition-delay: 340ms; }

/* --- Mimari duvarda cok yavas surukleme ---
   90 saniyede 18px: bakinca fark edilmez, ama zemin olu durmaz.
   transform kullaniliyor (compositor'da kalir, repaint yok).
   --plan varyanti kendi translateX'iyle ortalandigi icin disarida:
   transform'u ezmek onu ekranin disina atardi. */
@keyframes mos-wall-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -18px, 0); }
}

.mos-anim .mos-wall:not(.mos-wall--plan)::before {
  animation: mos-wall-drift 90s var(--ease) infinite alternate;
  will-change: transform;
}

/* Mobilde hareket daha sakin: surekli calisan tek animasyon olan
   zemin suruklemesi tamamen durur (pil ve dikkat).
   Ayni secici tekrarlaniyor: daha dusuk ozgullukte yazilinca
   yukaridaki kural kazaniyordu. */
@media (max-width: 900px) {
  .mos-anim .mos-wall:not(.mos-wall--plan)::before {
    animation: none;
    will-change: auto;
  }
}

/* --- Hareket azaltma: her sey aninda son haline gecer --- */
@media (prefers-reduced-motion: reduce) {
  .mos-anim .mos-hero__media,
  .mos-anim .mos-hero__inner > *,
  .mos-anim .mos-wall::before {
    animation: none !important;
  }

  .mos-anim [data-mos-reveal],
  .mos-anim [data-mos-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =============================================================
   8. KIRILIMLAR
   ============================================================= */

@media (max-width: 980px) {
  .mos-feature__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 7vw, 56px);
  }

  .mos-feature__text { max-width: 100%; order: 1; }

  .mos-feature__media {
    order: 2;
    justify-self: start;
    max-width: 460px;
  }

  /* 3 proje -> 2 sutun (biri alta duser, bosluk kasitli kalir) */
  .mos-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mos-certs__grid {
    grid-template-columns: repeat(2, minmax(0, 215px));
    justify-content: start;
    gap: clamp(28px, 6vw, 56px);
  }

  /* uc ozellik alt alta: dikey ayirici yerine her blok kendi
     ust cizgisiyle ayrilir */
  .mos-values__list {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .mos-value {
    padding-block: clamp(26px, 4vw, 36px);
  }

  .mos-value + .mos-value {
    border-left: 0;
    padding-left: 0;
  }

  .mos-value:last-child {
    border-bottom: 1px solid var(--hairline);
  }

  .mos-value__desc { max-width: 60ch; }
}

@media (max-width: 1100px) {
  .mos-nav { display: none; }
  .mos-burger,
  .mos-burger:hover,
  .mos-burger:focus { display: block; }
  .mos-lang { border-left: 0; padding-left: 0; }
}

@media (max-width: 860px) {
  /* Serit tek sutuna duser; gorsel ustte, metin altta */
  .mos-news__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .mos-news__thumb { max-width: 320px; }
}

@media (max-width: 640px) {
  :root {
    --head-h: 76px;
    --head-h-min: 64px;
    --logo-h: 53px;
    --logo-h-min: 46px;
  }

  .mos-hero { height: clamp(580px, 82vh, 800px); }
  .mos-hero__cue { display: none; }
  .mos-hero__actions { gap: 6px; flex-direction: column; align-items: flex-start; }
  .mos-btn { padding: 15px 26px; font-size: 11px; letter-spacing: 0.14em; }
  .mos-link { font-size: 14px; }
  .mos-hero__title { max-width: 100%; }

  /* dar ekranda baslik ve "Tum Projeler" ayni satirda sikisiyordu */
  .mos-projects__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .mos-projects__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .mos-certs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  /* Dar ekranda metin gorselin en yogun yerine denk geliyor;
     perde daha yukaridan ve daha koyu baslar */
  .mos-hero__scrim {
    background: linear-gradient(to top,
      rgba(10, 16, 23, 0.96) 0%,
      rgba(10, 16, 23, 0.88) 30%,
      rgba(10, 16, 23, 0.55) 62%,
      rgba(10, 16, 23, 0.22) 100%);
  }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  .mos-hero__slide.is-active { animation: none; transform: none; }
  .mos-hero__cue::after { animation: none; }
  .mos-hero__dot.is-active::after { transition: none; }
}


/* =============================================================
   9. ATMOSFER KIRILIMLARI
   Bu blok dosyanin SONUNDA olmali: .mos-ambience temel kurallari
   (--tas: 5px) daha asagida tanimliydi ve ayni ozgullukteki
   medya sorgusunu eziyordu.
   ============================================================= */

/* --- Proje indeksi ---
   Sutun sayisi dustukce ritim de sadelesiyor. Oranlar her
   kirilimda satir yuksekligi ayni kalacak sekilde secildi. */
@media (max-width: 1100px) {
  .mos-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mos-project { grid-column: span 2; }
  .mos-project:nth-child(5n + 1) { grid-column: span 4; }
  /* 4 sutunda genis karo tek basina bir satir; komsusu yok,
     bu yuzden ikinci karo da normal orana doner */
  .mos-project:nth-child(5n + 1) .mos-project__frame { aspect-ratio: 16 / 9; }
  .mos-project:nth-child(5n + 2) .mos-project__frame {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

@media (max-width: 700px) {
  /* Tek sutun: her gorsel tam genislikte ve guclu kalir */
  .mos-index__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 5vw, 32px);
  }

  .mos-project,
  .mos-project:nth-child(5n + 1) { grid-column: span 1; }

  .mos-project__frame,
  .mos-project:nth-child(5n + 1) .mos-project__frame,
  .mos-project:nth-child(5n + 2) .mos-project__frame {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .mos-project__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}


@media (max-width: 1180px) {
  .mos-ambience { --tas: 4px; }
  .mos-ambience .mos-stage { --tas: 8px; }
}

@media (max-width: 900px) {
  .mos-ambience .mos-stage { --tas: 6px; }
}

@media (max-width: 700px) {
  .mos-ambience__grid { justify-content: center; }
  .mos-ambience .mos-stage { --tas: 5px; }
}

@media (max-width: 560px) {
  .mos-ambience { --tas: 3px; }
  .mos-ambience .mos-stage { --tas: 3px; }
  .mos-ambience .texto-escenario { padding: 12px 14px; }
  .mos-ambience .ver-escenario { padding: 9px 14px !important; font-size: 10px !important; }
}