/* ============================================================
   ANASAYFA — projeye ozel bolumler
   ------------------------------------------------------------
   Yalnizca $sayfa === 'anasayfa' oldugunda yuklenir (bkz.
   partial/style.php) - diger sayfalara agirlik binmez. Ayni
   desen css/portfolyo.css ve css/hikayemiz.css'te de var:
   tokenlar bolum kokunde, main.css'e (tema) DOKUNULMUYOR.

   TASARIM YONU: "ritimli kontrast".
   Sicak kirik-beyaz zemin (--mam-ana-paper) + dev Thunder
   basliklar + turuncu aksan; arada iki KOYU bant (CTA seridi ve
   hizmet vitrini) noktalama gorevi goruyor. Enerji kontrasttan,
   klas his bosluktan ve tipografiden geliyor.

   TIPOGRAFI: projede ZATEN yerel olan Thunder (--tp-ff-thunder)
   ve Morganite (--tp-ff-morganite-bold) display fontlari sayfaya
   yayildi - eskiden yalnizca kapsul toplarindaydilar. Turkce
   glifleri (s/g/I/i/c/o/u) tam desteklendigi dogrulandi. Ek ag
   maliyeti YOK; kimlik kazanci buyuk.
   Basliklarda text-transform:uppercase KULLANILMIYOR - Thunder'in
   "LC" kesimi ve mevcut .px-capsule-title kullanimi cumle
   duzeninde kanitlanmis durumda. Uppercase yalnizca kucuk
   Poppins etiketlerde.

   HAREKET: tum scroll animasyonlari js/anasayfa.js'te, GSAP ile.
   ONEMLI - animasyon oncesi GIZLI DURUM BU DOSYADA TANIMLI DEGIL
   (opacity:0 yok). Gizleme yalnizca JS'ten yapilir; JS calismazsa
   veya hata alirsa icerik TAM GORUNUR kalir (SEO + erisilebilirlik).
   ============================================================ */

:root {
   /* Aksan: eski --mam-ana-accent (#FF8C42) ile --mam-ana-accent-deep
      (#ff6b35) yer degistirdi - #FF6B35 artik ANA aksan (butonlar,
      vurgular), #FF8C42 gradyanlarin acik ucu. Isim korundu ki
      dosyada zaten var olan kullanimlar bozulmasin. */
   --mam-ana-accent: #FF6B35;
   --mam-ana-accent-2: #FF8C42;
   --mam-ana-accent-deep: #E85A24;
   --mam-ana-accent-soft: rgba(255, 107, 53, .10);

   --mam-ana-paper: #FAF8F5;   /* sicak kirik beyaz - sayfanin yeni zemini */
   --mam-ana-surface: #ffffff;
   --mam-ana-ink: #0A0A0A;
   --mam-ana-band: #0E0E0E;    /* koyu bantlar */
   --mam-ana-body: #5A5450;    /* eski #6D6868'den daha sicak */
   --mam-ana-line: rgba(10, 10, 10, .10);

   --mam-ana-radius: 20px;
   --mam-ana-radius-lg: 28px;

   /* expo-out: hizli baslayip yumusak oturan egri. "Enerjik ama
      oturakli" istegin karsiligi tam olarak burada - hareket
      cabuk basliyor, sonu sakin. */
   --mam-ana-ease: cubic-bezier(.22, 1, .36, 1);
   --mam-ana-ease-io: cubic-bezier(.65, 0, .35, 1);

   --mam-ana-shadow: 0 12px 32px rgba(255, 107, 53, .15);
   --mam-ana-shadow-lg: 0 24px 64px rgba(255, 107, 53, .20);
}

/* ------------------------------------------------------------
   0. ORTAK ANIMASYON YARDIMCILARI
   ------------------------------------------------------------
   .mam-satir-anim  -> js/anasayfa.js SplitType ile satir/kelimeye
                       boler, maskeli acilis yapar.
   .mam-yukselt     -> basit fade + yukselme.
   .mam-kart-anim   -> kademeli (stagger) kart girisi.
   Hicbiri burada gizlenmiyor; asagidaki kurallar yalnizca maskenin
   GEOMETRISINI hazirliyor. */

.mam-satir-anim .line {
   /* Maskeleme kutusu. padding/negatif margin ikilisi ZORUNLU:
      duz overflow:hidden Turkce alt-uzantilari (g, c, s, y, p)
      keserdi. Kutu asagi dogru buyutulup ayni miktar geri
      cekiliyor - satir araligi degismiyor, harfler kesilmiyor. */
   overflow: hidden;
   padding-bottom: .16em;
   margin-bottom: -.16em;
}

.mam-satir-anim .word {
   display: inline-block;
   will-change: transform;
}

/* Ic etiket barindiran basliklar (orn. manifesto basligindaki
   .mam-felsefe-vurgu) SplitType'a verilmiyor - kelime bolme ic
   markup'i bozabiliyor. Onlar tek parca halinde maskeden kayiyor.
   Bu iki sinifi js/anasayfa.js gecici olarak ekleyip animasyon
   bitince KALDIRIYOR (orijinal HTML geri geliyor). */
.mam-mask-dis {
   overflow: hidden;
   padding-bottom: .16em;
   margin-bottom: -.16em;
}

.mam-mask-ic {
   display: block;
   will-change: transform;
}

/* ============================================================
   1. HERO / SLIDER (manifesto)
   ------------------------------------------------------------
   Bu bolum semihson.zip'ten OLDUGU GIBI alindi (kullanici talebi):
   tam alan (100svh), sol manifesto kartlari + sol alt "Toplanti
   Ayarla" CTA, sag gorsel.

   Tokenlar (:root) BU DOSYANIN kendi setinden geliyor - zip'in daha
   eski token seti BILEREK alinmadi, cunku sayfanin diger bolumleri
   (kapsul, hizmet vitrini, blog, SSS) mevcut setin uzerine kurulu.
   Hero'nun kullandigi tum tokenlar (accent, accent-deep, body, ease,
   ink, line, radius, radius-lg, surface) mevcut :root'ta zaten var.

   NOT: asagidaki ".mam-hero-cta" kurallari eski hero CTA'sindan
   kalma - yeni hero markup'inda (partial/slider.php) bu sinif YOK.
   CTA bandi (partial/anasayfa-cta.php) ayni sinifi kullaniyor ama
   oradaki kurallar ".mam-cta-serit" ile kapsamli ve dosyada DAHA
   SONRA geldigi icin ezme sirasi dogru, cakisma yok.
   ============================================================ */

.mam-hero {
   position: relative;
   background: var(--mam-ana-surface);
   height: 100svh;
   min-height: 0;
   overflow: hidden;
}

.mam-hero-kanvas {
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
   height: 100svh;
   min-height: 0;
   align-items: stretch;
   --mam-hero-pad-top: clamp(68px, 6.5vw, 80px);
   --mam-hero-pad-bottom: clamp(20px, 3vh, 32px);
}

.mam-hero-metin-alan {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
   height: 100%;
   z-index: 2;
   padding:
      var(--mam-hero-pad-top)
      clamp(20px, 3vw, 40px)
      var(--mam-hero-pad-bottom)
      clamp(24px, 3.5vw, 48px);
}

.mam-hero-metin-ic {
   flex: 1 1 auto;
   min-height: 0;
   height: 100%;
   max-width: 100%;
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: clamp(12px, 1.6vh, 18px);
   align-content: stretch;
}

.mam-hero-manifesto-baslik {
   font-size: clamp(32px, 3.35vw, 50px);
   font-weight: 700;
   line-height: 1.18;
   letter-spacing: -.025em;
   color: var(--mam-ana-ink);
   margin: 0;
   padding-bottom: 0.3em;
   overflow: visible;
   animation: mam-hero-giris 0.95s cubic-bezier(.22, 1, .36, 1) 0.12s both;
}

.mam-hero-manifesto-govde {
   display: flex;
   flex-direction: column;
   gap: clamp(8px, 1.1vh, 12px);
   overflow: visible;
   min-height: 0;
}

.mam-hero-manifesto-kart {
   position: relative;
   padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px);
   border-radius: var(--mam-ana-radius);
   background: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%);
   border: 1px solid var(--mam-ana-line);
   box-shadow: 0 4px 16px rgba(10, 10, 10, .04);
   transition:
      border-color .35s var(--mam-ana-ease),
      box-shadow .35s var(--mam-ana-ease),
      transform .35s var(--mam-ana-ease);
   animation: mam-hero-giris 0.8s cubic-bezier(.22, 1, .36, 1) both;
}

@media (min-width: 992px) {
   .mam-hero-manifesto-kart {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      align-items: center;
   }
}

.mam-hero-manifesto-kart::before {
   content: "";
   position: absolute;
   left: 0;
   top: 12px;
   bottom: 12px;
   width: 3px;
   border-radius: 3px;
   background: linear-gradient(180deg, var(--mam-ana-accent), var(--mam-ana-accent-deep));
   opacity: .5;
   transition: opacity .35s var(--mam-ana-ease);
}

.mam-hero-manifesto-kart:hover {
   border-color: rgba(255, 140, 66, .32);
   box-shadow: 0 8px 22px rgba(255, 140, 66, .1);
   transform: translateY(-2px);
}

.mam-hero-manifesto-kart:hover::before {
   opacity: 1;
}

.mam-hero-manifesto-kart:nth-child(1) { animation-delay: 0.3s; }
.mam-hero-manifesto-kart:nth-child(2) { animation-delay: 0.38s; }
.mam-hero-manifesto-kart:nth-child(3) { animation-delay: 0.46s; }

.mam-hero-manifesto-kart-metin {
   font-size: clamp(13.5px, 0.95vw, 15.5px);
   line-height: 1.68;
   color: var(--mam-ana-ink);
   margin: 0;
   padding-left: 8px;
}

.mam-hero-manifesto-kart-metin .mam-manifesto-em {
   color: var(--mam-ana-accent-deep);
   font-weight: 700;
}

/* Kapanis bandi — punchline + CTA */
.mam-hero-kapanis-band {
   position: relative;
   flex: none;
   margin-top: 0;
   padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px);
   border-radius: var(--mam-ana-radius);
   background:
      linear-gradient(135deg, rgba(255, 140, 66, .09) 0%, rgba(255, 107, 53, .03) 55%, rgba(255, 248, 242, .88) 100%);
   border: 1px solid rgba(255, 140, 66, .2);
   box-shadow: 0 8px 22px rgba(255, 140, 66, .08);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(14px, 2vw, 22px);
   overflow: visible;
   animation: mam-hero-giris 0.85s cubic-bezier(.22, 1, .36, 1) 0.54s both;
}

.mam-hero-kapanis-band::before {
   content: "";
   position: absolute;
   left: 0;
   top: 14%;
   bottom: 14%;
   width: 3px;
   border-radius: 3px;
   background: linear-gradient(180deg, var(--mam-ana-accent), var(--mam-ana-accent-deep));
}

.mam-hero-kapanis-metin {
   flex: 1 1 auto;
   min-width: 0;
   padding-left: 10px;
}

.mam-hero-manifesto-kapanis {
   font-size: clamp(16px, 1.35vw, 20px);
   font-weight: 600;
   line-height: 1.42;
   letter-spacing: -.02em;
   color: var(--mam-ana-ink);
   margin: 0;
   padding-bottom: 0.12em;
   overflow: visible;
}

.mam-hero-kapanis-cta {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.mam-hero-kapanis-cta-not {
   font-size: 12px;
   font-weight: 500;
   color: var(--mam-ana-body);
   margin: 0;
   text-align: center;
   white-space: nowrap;
}

/* Toplanti CTA butonu */
.mam-hero-toplanti-btn {
   position: relative;
   isolation: isolate;
   display: inline-flex;
   align-items: center;
   gap: 14px;
   padding: 16px 26px 16px 18px;
   border: none;
   border-radius: 100px;
   font-family: var(--tp-ff-body, inherit);
   cursor: pointer;
   color: #fff;
   background: linear-gradient(135deg, #FF8C42 0%, var(--mam-ana-accent-deep) 52%, #e86f00 100%);
   background-size: 220% 220%;
   background-position: 0% 50%;
   box-shadow:
      0 10px 32px rgba(255, 107, 53, .45),
      inset 0 1px 0 rgba(255, 255, 255, .22);
   animation: mam-hero-btn-gradient 5s ease infinite;
   transition:
      transform .32s cubic-bezier(.22, 1, .36, 1),
      box-shadow .32s ease;
   white-space: nowrap;
}

.mam-vurgu-inner {
   position: relative;
   display: inline-block;
   line-height: 1.15;
   padding-bottom: 0.12em;
}

.mam-felsefe-vurgu {
   display: inline-flex;
   align-items: baseline;
   color: var(--mam-ana-accent);
}

.mam-vurgu-prefix {
   color: var(--mam-ana-ink);
}

.mam-vurgu-cizgi {
   position: absolute;
   left: -4%;
   bottom: 0;
   width: 108%;
   height: 0.42em;
   color: var(--mam-ana-accent);
   pointer-events: none;
}

.mam-manifesto-em {
   color: var(--mam-ana-ink);
   font-weight: 700;
}

.mam-hero-toplanti-btn::after {
   content: "";
   position: absolute;
   top: -45%;
   left: 0;
   width: 44%;
   height: 190%;
   background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, .05) 38%,
      rgba(255, 255, 255, .55) 50%,
      rgba(255, 255, 255, .05) 62%,
      transparent 100%
   );
   transform: translateX(-220%) skewX(-16deg);
   animation: mam-hero-btn-shine 2.4s ease-in-out infinite;
   pointer-events: none;
   z-index: 1;
}

.mam-hero-toplanti-pulse {
   position: absolute;
   inset: -3px;
   border-radius: inherit;
   border: 2px solid rgba(255, 140, 66, .55);
   animation: mam-hero-btn-pulse 2.1s cubic-bezier(.22, 1, .36, 1) infinite;
   pointer-events: none;
   z-index: 0;
}

.mam-hero-toplanti-btn > *:not(.mam-hero-toplanti-pulse) {
   position: relative;
   z-index: 2;
}

.mam-hero-toplanti-ikon {
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .16);
   display: grid;
   place-content: center;
   animation: mam-hero-btn-bounce 2.8s ease-in-out infinite;
}

.mam-hero-toplanti-ikon svg {
   width: 20px;
   height: 20px;
}

.mam-hero-toplanti-yazi {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   line-height: 1.15;
}

.mam-hero-toplanti-etiket {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .08em;
   text-transform: uppercase;
   opacity: .88;
}

.mam-hero-toplanti-metin {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -.01em;
}

.mam-hero-toplanti-ok {
   flex: none;
   width: 28px;
   height: 28px;
   display: grid;
   place-content: center;
   transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.mam-hero-toplanti-ok svg {
   width: 18px;
   height: 18px;
}

.mam-hero-toplanti-btn:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow:
      0 14px 36px rgba(255, 107, 53, .48),
      inset 0 1px 0 rgba(255, 255, 255, .24);
   background-position: 100% 50%;
}

.mam-hero-toplanti-btn:hover .mam-hero-toplanti-ok {
   transform: translateX(4px);
}

.mam-hero-toplanti-btn:active {
   transform: translateY(-1px) scale(1);
}

@keyframes mam-hero-btn-gradient {
   0%, 100% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
}

@keyframes mam-hero-btn-shine {
   0%, 46% {
      transform: translateX(-220%) skewX(-16deg);
      opacity: 0;
   }
   52% { opacity: 1; }
   66% {
      transform: translateX(340%) skewX(-16deg);
      opacity: 0;
   }
   100% {
      transform: translateX(340%) skewX(-16deg);
      opacity: 0;
   }
}

@keyframes mam-hero-btn-pulse {
   0% {
      transform: scale(1);
      opacity: .85;
   }
   70%, 100% {
      transform: scale(1.14);
      opacity: 0;
   }
}

@keyframes mam-hero-btn-bounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-3px); }
}

@keyframes mam-hero-giris {
   from {
      opacity: 0;
      transform: translateY(22px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.mam-hero-gorsel {
   position: relative;
   overflow: hidden;
   height: 100%;
   min-height: 0;
   box-sizing: border-box;
   padding:
      var(--mam-hero-pad-top, clamp(68px, 6.5vw, 80px))
      0
      var(--mam-hero-pad-bottom, clamp(20px, 3vh, 32px))
      0;
}

.mam-hero-gorsel img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 68% center;
   border-radius: 0 0 0 var(--mam-ana-radius-lg);
   animation: mam-hero-gorsel-giris 1.1s cubic-bezier(.22, 1, .36, 1) 0.08s both;
}

@keyframes mam-hero-gorsel-giris {
   from { opacity: 0; }
   to { opacity: 1; }
}

.mam-hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 30px;
}
.mam-hero-cta .tp-btn-px { border: none; cursor: pointer; }
.mam-hero-cta .tp-btn-border { cursor: pointer; }

@media (min-width: 992px) and (max-height: 820px) {
   .mam-hero-kanvas {
      --mam-hero-pad-top: clamp(64px, 7vw, 76px);
      --mam-hero-pad-bottom: clamp(16px, 2.5vh, 24px);
   }
   .mam-hero-manifesto-kart-metin {
      font-size: 13.5px;
      line-height: 1.62;
   }
   .mam-hero-manifesto-baslik {
      font-size: clamp(27px, 3vw, 36px);
   }
   .mam-hero-manifesto-kapanis {
      font-size: clamp(14px, 1.1vw, 17px);
   }
}

@media (max-width: 1199px) {
   .mam-hero-kanvas {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.75fr);
   }
}

@media (max-width: 991px) {
   .mam-hero-kanvas {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 0;
   }
   .mam-hero {
      height: auto;
      min-height: 100svh;
      overflow: visible;
   }
   .mam-hero-gorsel {
      order: -1;
      height: auto;
      max-height: 36vh;
      min-height: 200px;
      padding: 0;
   }
   .mam-hero-gorsel img {
      border-radius: 0 0 var(--mam-ana-radius-lg) var(--mam-ana-radius-lg);
   }
   .mam-hero-metin-ic {
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
   }
   .mam-hero-metin-alan {
      height: auto;
      padding-top: clamp(72px, 10vw, 84px);
      padding-bottom: clamp(32px, 5vw, 48px);
   }
   .mam-hero-kapanis-band {
      flex-direction: column;
      align-items: stretch;
      margin-top: 0;
   }
   .mam-hero-kapanis-cta {
      align-items: stretch;
   }
   .mam-hero-toplanti-btn {
      justify-content: center;
      width: 100%;
   }
   .mam-hero-manifesto-govde {
      gap: 10px;
   }
   .mam-hero-manifesto-kart {
      padding: 14px 16px;
   }
}

@media (max-width: 575px) {
   .mam-hero-manifesto-baslik { font-size: 30px; }
   .mam-hero-manifesto-kapanis { font-size: 18px; }
   .mam-hero-kapanis-band { padding: 20px 18px; }
   .mam-hero-toplanti-btn {
      padding: 14px 20px 14px 16px;
      gap: 10px;
   }
   .mam-hero-toplanti-ikon {
      width: 36px;
      height: 36px;
   }
   .mam-hero-cta { flex-direction: column; align-items: stretch; }
   .mam-hero-cta a, .mam-hero-cta button { text-align: center; }
}

/* ============================================================
   2. MARKA DUVARI  (sosyal kanit / otorite)
   ============================================================
   Sayfadaki en guclu ikna varligi. Eskiden 40px, grayscale(1),
   opacity .55 ile neredeyse gorunmezdi; artik 52px ve UC satirli
   akan bir serit.
   Hareket buradan DEGIL, js/slider-active.js "mamMarkaMarqueeKur"
   icinden suruluyor (gerekce icin bkz. o dosya ve
   partial/anasayfa-markalar.php'deki uzun yorum). Buradaki kurallar
   yalnizca duragan gorunumu tanimliyor. */

.mam-markalar {
   padding: clamp(56px, 6vw, 88px) 0 clamp(50px, 5vw, 76px);
   background: var(--mam-ana-paper);
}

.mam-markalar-etiket {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 0 14px;
   text-align: center;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--mam-ana-body);
   margin: 0 0 clamp(28px, 3.5vw, 46px);
}

/* Kopya degismedi - "160+" yalnizca gorsel bir capa haline geldi.
   Morganite ultra-condensed oldugu icin cok buyuk puntoda bile
   satiri sismiyor. */
.mam-markalar-sayi {
   font-family: var(--tp-ff-morganite-bold), 'Poppins', sans-serif;
   font-size: clamp(46px, 5vw, 76px);
   font-weight: 700;
   line-height: .8;
   letter-spacing: 0;
   text-transform: none;
   color: var(--mam-ana-accent);
   transform: translateY(.06em);
}

.mam-markalar-duvar {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: clamp(14px, 1.6vw, 26px);
}

/* Kenarlarda yumusak bitis - eskiden -webkit-mask-image ile yapiliyordu,
   ama bir mask altindaki ICERIK repaint oldugunda (hover, logo
   filter/opacity gecisleri) tarayici mask'i TASIYAN katmanin TAMAMINI
   (uc satirin tumu) yeniden birlestiriyor - bu da seride "atlama/kirilma"
   olarak yansiyordu. Gercek overlay <div>'ler ayri, degismeyen bir
   katman: alttaki animasyonlu icerigin repaint'inden etkilenmiyor. */
.mam-markalar-fade {
   position: absolute;
   top: 0;
   bottom: 0;
   width: clamp(40px, 6vw, 96px);
   z-index: 2;
   pointer-events: none;
}
.mam-markalar-fade-sol {
   left: 0;
   background: linear-gradient(90deg, var(--mam-ana-paper) 0%, transparent 100%);
}
.mam-markalar-fade-sag {
   right: 0;
   background: linear-gradient(270deg, var(--mam-ana-paper) 0%, transparent 100%);
}

.mam-markalar-slider { overflow: hidden; }

/* Konum (translateX) JS tarafindan her karede yaziliyor - burada
   animation/keyframes YOK. Track kendi icerigi kadar genis; icerik 2
   kopya halinde basiliyor (bkz. partial/anasayfa-markalar.php "_x2"
   diziler). JS calismazsa satirlar hareketsiz ama TAM OKUNUR kalir. */
.mam-markalar-track {
   display: flex;
   align-items: center;
   width: max-content;
   will-change: transform;
}

.mam-marka-slide {
   width: auto !important;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 clamp(20px, 2.4vw, 38px);
   flex: none;
}

.mam-marka-slide img {
   height: 52px;
   width: auto;
   max-width: 150px;
   object-fit: contain;
   filter: grayscale(1);
   opacity: .72;
   transition: filter .4s var(--mam-ana-ease), opacity .4s var(--mam-ana-ease), transform .4s var(--mam-ana-ease);
}

.mam-marka-slide:hover img {
   filter: grayscale(0);
   opacity: 1;
   transform: scale(1.06);
}

.mam-markalar-link {
   margin-top: clamp(26px, 3vw, 44px);
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .02em;
}

.mam-markalar-link a { color: var(--mam-ana-ink); }

@media (max-width: 575px) {
   .mam-marka-slide { padding: 0 16px; }
   .mam-marka-slide img { height: 34px; max-width: 104px; }
}

/* ============================================================
   3. CTA SERIDI  (ilk koyu bant / taahhut ani)
   ============================================================
   Eskiden beyaz zeminde ciplak iki butondu. Artik sayfanin ilk
   koyu duraklamasi: ritim olarak paper -> koyu -> paper.
   TUM buton ezmeleri .mam-cta-serit altinda KAPSAMLI - .tp-btn-px
   ve .tp-btn diger sayfalarda da kullaniliyor. */

.mam-cta-serit {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding: clamp(56px, 5.5vw, 84px) 0;
   background: var(--mam-ana-band);
   text-align: center;
}

/* Turuncu radial isima - koyu bandi duz bir dikdortgen olmaktan
   cikariyor, gozu butonlara cekiyor. Salt dekoratif. */
.mam-cta-isik {
   position: absolute;
   z-index: -1;
   top: 50%;
   left: 50%;
   width: min(900px, 120vw);
   aspect-ratio: 1;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 107, 53, .30) 0%, rgba(255, 107, 53, .08) 42%, transparent 68%);
   animation: mam-cta-nefes 7s ease-in-out infinite;
   pointer-events: none;
}

@keyframes mam-cta-nefes {
   0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
   50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* Baslik alani (etiket + baslik + aciklama). Olculer ve renkler
   .mam-hizmet-baslik-alani ile BILINCLI olarak ayni - o da koyu bant
   uzerinde duruyor, iki koyu bolum tipografik olarak tutarli okunsun.
   max-width: baslik Thunder ile cok genis kutuda tek satira yayilip
   butonlarla bagini kaybetmesin diye sinirli. */
.mam-cta-baslik-alani {
   text-align: center;
   max-width: 760px;
   margin: 0 auto clamp(32px, 3.6vw, 52px);
}

.mam-cta-baslik {
   font-family: var(--tp-ff-thunder), 'Poppins', sans-serif;
   font-size: clamp(38px, 5vw, 78px);
   font-weight: 700;
   line-height: .92;
   letter-spacing: -.005em;
   color: #ffffff;
   margin: 0 0 20px;
}

.mam-cta-aciklama {
   font-size: clamp(15.5px, 1.2vw, 17px);
   line-height: 1.75;
   color: rgba(255, 255, 255, .62);
   margin: 0 auto;
   max-width: 620px;
}

.mam-cta-serit .mam-hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
   margin: 0;
}

.mam-cta-serit .tp-btn-px {
   border: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1;
   padding: 21px 42px;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--mam-ana-accent-2), var(--mam-ana-accent));
   box-shadow: 0 14px 40px rgba(255, 107, 53, .32);
   transition: box-shadow .4s var(--mam-ana-ease), filter .4s var(--mam-ana-ease);
}

.mam-cta-serit .tp-btn-px:hover {
   box-shadow: 0 20px 56px rgba(255, 107, 53, .46);
   filter: brightness(1.06);
}

.mam-cta-serit .tp-btn.tp-btn-border {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1;
   padding: 20px 40px;
   font-size: 16px;
   font-weight: 600;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .26);
   color: #ffffff;
   transition: background .4s var(--mam-ana-ease), border-color .4s var(--mam-ana-ease), color .4s var(--mam-ana-ease);
}

.mam-cta-serit .tp-btn.tp-btn-border:hover {
   background: #ffffff;
   border-color: #ffffff;
   color: var(--mam-ana-ink);
}

@media (max-width: 575px) {
   .mam-cta-serit .mam-hero-cta { flex-direction: column; align-items: stretch; }
   .mam-cta-serit .tp-btn-px,
   .mam-cta-serit .tp-btn.tp-btn-border { text-align: center; }
}

/* ============================================================
   4. KAPSULLER (fizik balonlari) + mobil kurtarma
   ============================================================
   Balon renkleri PHP'de (partial/urunler.php $mam_kapsul_renkleri),
   data-bg-color -> js/main.js:24-25 uzerinden uygulaniyor. Eski
   seker paleti (pembe/mavi/sari/yesil) marka paletine cevrildi.

   Korunan eski duzeltmeler:
   1) Baslik toplarin ARDINDA kaliyordu -> .mam-kapsul-baslik-on
   2) Cap ve font PHP'de metne gore hesaplaniyor (inline gelir)
   3) <a>'nin native suruklemesi Matter.js ile catisiyordu ->
      -webkit-user-drag:none */

.mam-kapsul-alan { background: var(--mam-ana-paper); }

.mam-kapsul-alan .px-capsule-inner {
   border: 1px solid var(--mam-ana-line);
   border-radius: var(--mam-ana-radius-lg);
   background: var(--mam-ana-surface);
}

.mam-kapsul-alan .px-capsule-subtitle {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--mam-ana-accent-deep);
   margin-bottom: 18px;
}

.mam-kapsul-alan .px-capsule-title {
   letter-spacing: -.005em;
   text-transform: none;
   color: var(--mam-ana-ink);
}

.mam-kapsul-baslik-on {
   position: relative;
   z-index: 5;
}

.mam-kapsul-top {
   -webkit-user-drag: none;
   user-select: none;
   text-align: center;
   line-height: 1.2;
   padding: 6px;
   word-break: keep-all;
   overflow-wrap: break-word;
   font-weight: 600;
   color: var(--mam-ana-ink);
   box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .05);
   /* font-size PHP'de her balon icin ayri hesaplanip inline geliyor
      (mam_kapsul_font()) - burada sabit deger YOK, cakismasin. */
}

@media (max-width: 575px) {
   .mam-kapsul-top { font-size: 13px !important; }
}

/* --- Fizik kapsulleri: mobilde tamamen kapali ---
   css/main.css:602 zaten <768px'te .px-capsule-area'yi gizliyordu, ama
   TELEFON YATAY cevrildiginde (orn. iPhone yatayda 844px) ve
   tabletlerde 768px esigi asiliyor ve dusen kapsuller geri geliyordu.
   Kullanici talebi: mobilde hic gorunmesinler. Esik 992px'e cekildi -
   telefonun iki yonu de, kucuk tabletler de kapsam icinde.
   Fizik motoru (Matter.js) ayrica JS tarafinda da hic baslatilmiyor,
   bkz. partial/footer.php icindeki koruma. */
@media (max-width: 991.98px) {
   .px-capsule-area { display: none !important; }
}

/* --- Mobil kurtarma listesi KALDIRILDI (kullanici talebi) ---
   Kapsuller mobilde gizlenince oradaki 27 ic link kaybolmasin diye
   statik bir etiket listesi gosteriliyordu. Kullanici mobilde bu
   bolgenin komple bos kalmasini istedi; markup da partial/urunler.php
   icinden cikarildi.
   Kaldirmadan once link kaybi olmadigi dogrulandi: mobil menu 27
   hizmetin tamamini iceriyor ve .px-capsule-area markup'i (27 link)
   gizli de olsa DOM'da kalmaya devam ediyor. */

/* ============================================================
   5. HIZMET VITRINI  (ikinci koyu bant / somut teklif)
   ============================================================
   NOT: hizmet gorselleri 528x331px. Kart genisligi bilerek
   ~420px'te tutuluyor (container-1320 / 3 sutun) - daha buyuk
   formatta bu gorseller bulaniklasir. */

.mam-hizmet-vitrin {
   padding: clamp(80px, 9vw, 130px) 0 clamp(90px, 10vw, 140px);
   background: var(--mam-ana-band);
}

.mam-hizmet-baslik-alani {
   text-align: center;
   max-width: 720px;
   margin: 0 auto clamp(44px, 5vw, 72px);
}

.mam-hizmet-baslik-alani .tp-section-subtitle {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .16em;
   color: var(--mam-ana-accent-2);
   margin-right: 0;
}

.mam-hizmet-baslik {
   font-family: var(--tp-ff-thunder), 'Poppins', sans-serif;
   font-size: clamp(40px, 5.4vw, 86px);
   font-weight: 700;
   line-height: .92;
   letter-spacing: -.005em;
   color: #ffffff;
   margin: 14px 0 20px;
}

.mam-hizmet-aciklama {
   font-size: clamp(15.5px, 1.2vw, 17px);
   line-height: 1.75;
   color: rgba(255, 255, 255, .58);
   margin: 0 auto;
   max-width: 600px;
}

.mam-hizmet-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(18px, 2vw, 28px);
}

.mam-hizmet-kart {
   display: block;
   background: #171717;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--mam-ana-radius-lg);
   overflow: hidden;
   transition: transform .5s var(--mam-ana-ease), box-shadow .5s var(--mam-ana-ease), border-color .5s var(--mam-ana-ease);
}

.mam-hizmet-kart:hover {
   transform: translateY(-10px);
   box-shadow: var(--mam-ana-shadow-lg);
   border-color: rgba(255, 140, 66, .38);
}

.mam-hizmet-kart-gorsel {
   position: relative;
   aspect-ratio: 4 / 3;
   overflow: hidden;
}

.mam-hizmet-kart-gorsel img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .7s var(--mam-ana-ease);
}

.mam-hizmet-kart:hover .mam-hizmet-kart-gorsel img { transform: scale(1.08); }

.mam-hizmet-kart-gorsel::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .62) 100%);
}

/* Bu kural eskiden TANIMLIYDI ama hicbir markup uretmiyordu (olu
   CSS). Artik dev Morganite sira numarasi - kartlara ritim ve
   "kapsamli bir hizmet seti" algisi veriyor. */
.mam-hizmet-kart-no {
   position: absolute;
   z-index: 1;
   right: 16px;
   bottom: -.16em;
   font-family: var(--tp-ff-morganite-bold), 'Poppins', sans-serif;
   font-size: clamp(64px, 7vw, 104px);
   font-weight: 700;
   line-height: .8;
   letter-spacing: .01em;
   color: rgba(255, 255, 255, .30);
   transition: color .5s var(--mam-ana-ease), transform .5s var(--mam-ana-ease);
   pointer-events: none;
}

.mam-hizmet-kart:hover .mam-hizmet-kart-no {
   color: var(--mam-ana-accent-2);
   transform: translateY(-6px);
}

.mam-hizmet-kart-govde {
   padding: clamp(20px, 2vw, 28px);
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.mam-hizmet-kart-baslik {
   font-size: clamp(19px, 1.6vw, 22px);
   font-weight: 700;
   letter-spacing: -.01em;
   color: #ffffff;
   margin: 0;
   line-height: 1.3;
}

.mam-hizmet-kart-ozet {
   font-size: 14.5px;
   line-height: 1.7;
   color: rgba(255, 255, 255, .55);
   margin: 0;
}

.mam-hizmet-kart-ok {
   align-self: flex-end;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .18);
   display: grid;
   place-content: center;
   color: #ffffff;
   transition: background .4s var(--mam-ana-ease), border-color .4s var(--mam-ana-ease), transform .4s var(--mam-ana-ease);
}

.mam-hizmet-kart:hover .mam-hizmet-kart-ok {
   background: linear-gradient(135deg, var(--mam-ana-accent-2), var(--mam-ana-accent));
   border-color: transparent;
   transform: rotate(45deg);
}

.mam-hizmet-cta { text-align: center; margin-top: clamp(40px, 5vw, 68px); }

.mam-hizmet-cta .tp-btn-px {
   padding: 21px 42px;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--mam-ana-accent-2), var(--mam-ana-accent));
   box-shadow: 0 14px 40px rgba(255, 107, 53, .28);
   transition: box-shadow .4s var(--mam-ana-ease), filter .4s var(--mam-ana-ease);
}

.mam-hizmet-cta .tp-btn-px:hover {
   box-shadow: 0 20px 56px rgba(255, 107, 53, .42);
   filter: brightness(1.06);
}

@media (max-width: 1199px) {
   .mam-hizmet-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
   .mam-hizmet-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   6. BLOG  (uzmanlik sinyali)
   ============================================================
   DIKKAT: .tp-blog-* siniflari /bloglar sayfasinda da kullaniliyor.
   TUM ezmeler ".mam-blog" altinda kapsamli. */

.mam-blog {
   padding-bottom: clamp(20px, 3vw, 40px);
   background: var(--mam-ana-paper);
}

.mam-blog-baslik {
   font-family: var(--tp-ff-thunder), 'Poppins', sans-serif;
   font-size: clamp(44px, 5.6vw, 92px);
   font-weight: 700;
   line-height: .9;
   letter-spacing: -.005em;
   color: var(--mam-ana-ink);
}

.mam-blog .tp-blog-btn .tp-btn {
   padding: 15px 32px;
   font-size: 15px;
   font-weight: 600;
   border: 1px solid var(--mam-ana-line);
   background: transparent;
   color: var(--mam-ana-ink);
   transition: background .4s var(--mam-ana-ease), color .4s var(--mam-ana-ease), border-color .4s var(--mam-ana-ease);
}

.mam-blog .tp-blog-btn .tp-btn:hover {
   background: var(--mam-ana-ink);
   border-color: var(--mam-ana-ink);
   color: #ffffff;
}

.mam-blog .tp-blog-thumb {
   border-radius: var(--mam-ana-radius);
   overflow: hidden;
   background: rgba(10, 10, 10, .04);
   aspect-ratio: 16 / 11;
}

.mam-blog .tp-blog-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: var(--mam-ana-radius);
   transition: transform .7s var(--mam-ana-ease);
}

.mam-blog .tp-blog-item:hover .tp-blog-thumb img { transform: scale(1.07); }

.mam-blog .tp-blog-tag {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--mam-ana-accent-deep);
   background: var(--mam-ana-accent-soft);
   padding: 6px 14px;
}

.mam-blog .tp-blog-date {
   font-size: 13.5px;
   font-weight: 500;
   color: var(--mam-ana-body);
}

.mam-blog .tp-blog-tittle {
   font-size: clamp(19px, 1.6vw, 22px);
   font-weight: 600;
   line-height: 1.4;
   letter-spacing: -.01em;
}

.mam-blog .tp-blog-tittle a { color: var(--mam-ana-ink); }

/* ============================================================
   7. SSS  (itiraz giderme / risk azaltma)
   ============================================================
   Bootstrap collapse yapisi ve "faq-active" deseni aynen korundu
   (js/main.js:260 zaten dinliyor, ek JS yazilmadi). */

.mam-sss {
   padding: clamp(70px, 8vw, 110px) 0 clamp(80px, 9vw, 124px);
   background: var(--mam-ana-paper);
}

.mam-sss-baslik-alani {
   text-align: center;
   margin-bottom: clamp(36px, 4.5vw, 60px);
}

.mam-sss-baslik-alani .tp-section-subtitle {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .16em;
   color: var(--mam-ana-body);
   margin-right: 0;
}

.mam-sss-baslik {
   font-family: var(--tp-ff-thunder), 'Poppins', sans-serif;
   font-size: clamp(38px, 5vw, 80px);
   font-weight: 700;
   line-height: .92;
   letter-spacing: -.005em;
   color: var(--mam-ana-ink);
   margin: 14px 0 0;
}

.mam-sss-accordion .accordion-items {
   border-bottom: 1px solid var(--mam-ana-line);
   transition: background .35s var(--mam-ana-ease);
}

.mam-sss-accordion .accordion-items.faq-active {
   /* Acik olan madde hafifce one cikiyor - hangi sorunun okundugu
      goz ucuyla belli olsun. */
   background: linear-gradient(90deg, var(--mam-ana-accent-soft), transparent 55%);
}

.mam-sss-accordion .accordion-buttons {
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   /* Ucuncu bir oge (numara) eklendi - space-between yerine grid ile
      hizalaniyor, boylece uzun sorularda ikon kaymiyor. */
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: clamp(14px, 1.6vw, 24px);
   padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 22px);
   cursor: pointer;
}

.mam-sss-no {
   font-family: var(--tp-ff-morganite-bold), 'Poppins', sans-serif;
   font-size: clamp(30px, 3vw, 44px);
   font-weight: 700;
   line-height: .8;
   color: var(--mam-ana-accent);
   opacity: .55;
   transition: opacity .35s var(--mam-ana-ease);
}

.mam-sss-accordion .accordion-items.faq-active .mam-sss-no { opacity: 1; }

.mam-sss-soru {
   font-size: clamp(16.5px, 1.5vw, 20px);
   font-weight: 600;
   line-height: 1.45;
   letter-spacing: -.01em;
   color: var(--mam-ana-ink);
}

.mam-sss-accordion .accordion-icon {
   flex: none;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 1px solid var(--mam-ana-line);
   position: relative;
   transition: background .35s var(--mam-ana-ease), border-color .35s var(--mam-ana-ease);
}

.mam-sss-accordion .accordion-items.faq-active .accordion-icon {
   background: var(--mam-ana-accent);
   border-color: var(--mam-ana-accent);
}

.mam-sss-accordion .accordion-icon::before,
.mam-sss-accordion .accordion-icon::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   background: var(--mam-ana-ink);
   transform: translate(-50%, -50%);
   transition: background .35s var(--mam-ana-ease), transform .3s var(--mam-ana-ease);
}

.mam-sss-accordion .accordion-icon::before { width: 11px; height: 1.5px; }
.mam-sss-accordion .accordion-icon::after  { width: 1.5px; height: 11px; }

.mam-sss-accordion .accordion-items.faq-active .accordion-icon::before,
.mam-sss-accordion .accordion-items.faq-active .accordion-icon::after { background: #ffffff; }

.mam-sss-accordion .accordion-buttons[aria-expanded="true"] .accordion-icon::after {
   transform: translate(-50%, -50%) scaleY(0);
}

.mam-sss-accordion .accordion-body {
   /* Cevap sorunun metniyle hizali kalsin diye sol padding numara
      sutununun genisligi kadar. */
   padding: 0 clamp(14px, 1.6vw, 22px) clamp(24px, 2.6vw, 32px);
   padding-left: clamp(58px, 6vw, 90px);
   color: var(--mam-ana-body);
   font-size: 16px;
   line-height: 1.8;
   max-width: 76ch;
}

.mam-sss-accordion .accordion-body p { margin: 0; }

.mam-sss-link {
   text-align: center;
   margin: clamp(30px, 3.5vw, 46px) 0 0;
   font-size: 15px;
}

.mam-sss-link a {
   color: var(--mam-ana-accent-deep);
   font-weight: 600;
   border-bottom: 1px solid transparent;
   transition: border-color .35s var(--mam-ana-ease);
}

.mam-sss-link a:hover { border-bottom-color: currentColor; }

@media (max-width: 575px) {
   .mam-sss-accordion .accordion-buttons { gap: 12px; padding-left: 0; padding-right: 0; }
   .mam-sss-accordion .accordion-body { padding-left: 44px; padding-right: 0; }
}

/* ============================================================
   8. HAREKET AZALTMA
   ============================================================
   js/anasayfa.js zaten prefers-reduced-motion'da hicbir scroll
   animasyonu kurmuyor (icerik son haliyle gorunur kalir). Burada
   yalnizca saf CSS kaynakli surekli hareketler durduruluyor. */

@media (prefers-reduced-motion: reduce) {
   /* Marka seridi: hareketi JS kuruyor ve kendisi zaten
      prefers-reduced-motion'da hic baslamiyor (bkz. slider-active.js). */
   .mam-cta-isik { animation: none; }
   .mam-hero *,
   .mam-marka-slide img,
   .mam-hizmet-kart,
   .mam-hizmet-kart *,
   .mam-blog .tp-blog-thumb img { transition: none !important; }
}