/* ==========================================================================
   HİKAYEMİZ — Zaman tüneli
   Yalnizca /hikayemiz sayfasinda yuklenir (partial/style.php icindeki kosul).
   Duzen olculeri referans tasarimdan tarayicida olculerek alindi; tipografi
   MAM'in mevcut Poppins tabanli dilinden geliyor.
   ========================================================================== */

.mam-tl {
   /* Duzen
      Kolon genisligi genis ekranlarda buyur: 1100px'in altina inmez, 70vw ile
      olceklenir, sitenin kendi header genisligi olan 1750px'te durur. Boylece
      1440px'te referansla ayni oranda, 3000px+ ekranlarda ise header ile ayni
      hizada kalir (sabit birakilirsa ortada kucucuk bir ada gibi duruyordu). */
   --mam-tl-col: min(1500px, max(1100px, 64vw));
   --mam-tl-card-w: 58%;          /* uste binen bilgi karti */
   --mam-tl-long-w: 66%;          /* genis gorsel */
   --mam-tl-square-w: 47%;        /* kare gorsel */
   --mam-tl-square-offset: 11%;   /* kare gorselin karsi kenardan icerlemesi */
   --mam-tl-card-top: 100px;
   --mam-tl-gap: 120px;           /* bolumler arasi bosluk */
   --mam-tl-desc-h: 15em;         /* metin penceresi; asan icerik sayfalanir */

   /* Renk */
   --mam-tl-accent: #FF8C42;
   --mam-tl-accent-deep: #ff6b35;
   --mam-tl-ink: #1a1a1a;
   --mam-tl-body: #5d5d5d;
   --mam-tl-surface: #ffffff;
   --mam-tl-band: #141414;

   /* Kose ve golge - sitenin mevcut kart dilinden:
      .px-service-5-item        -> radius 16px, 0 12px 32px rgba(255,140,66,.15)
      .hero-description-wrapper -> radius 20px, hover'da turuncu golge */
   --mam-tl-radius: 20px;
   --mam-tl-radius-lg: 28px;
   --mam-tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
   --mam-tl-shadow: 0 16px 48px rgba(255, 140, 66, 0.16), 0 4px 14px rgba(0, 0, 0, 0.04);
   --mam-tl-shadow-hover: 0 24px 64px rgba(255, 140, 66, 0.24), 0 6px 18px rgba(0, 0, 0, 0.05);
   --mam-tl-shadow-media: 0 18px 50px rgba(255, 140, 66, 0.14);
   --mam-tl-shadow-band: 0 20px 60px rgba(255, 140, 66, 0.18);

   position: relative;
   background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
   overflow: hidden;
}

/* --------------------------------------------------------------------------
   Giris bandi (zaman tunelinin ustundeki tanitim)
   -------------------------------------------------------------------------- */
.mam-tl__intro {
   max-width: var(--mam-tl-col);
   margin: 0 auto;
   padding: 0 20px 90px;
   text-align: center;
}

.mam-tl__intro-lead {
   font-family: Poppins, sans-serif;
   font-size: clamp(20px, 2.2vw, 28px);
   font-weight: 500;
   line-height: 1.6;
   letter-spacing: -0.5px;
   color: var(--mam-tl-ink);
   margin: 0 auto;
   max-width: 820px;
}

.mam-tl__intro-lead em {
   font-style: normal;
   color: var(--mam-tl-accent);
}

/* --------------------------------------------------------------------------
   Bolum (chapter)
   -------------------------------------------------------------------------- */
.mam-tl__chapter {
   position: relative;
   margin-bottom: var(--mam-tl-gap);
}

.mam-tl__chapter:last-child {
   margin-bottom: 0;
}

/* --- Alinti bandi --- */
.mam-tl__band {
   position: relative;
   z-index: 1;
   /* Sayfa enince tam genislik (full-bleed). Kose yuvarlatmasi burada
      uygulanmiyor: kenarlar ekran disinda kaldigi icin gorunmez, buna
      karsilik turuncu golge bandin alt/ustunde yumusak bir hale birakiyor. */
   width: 100%;
   min-height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 70px 24px;
   background-color: var(--mam-tl-band);
   box-shadow: var(--mam-tl-shadow-band);
   overflow: hidden;
}

/* Bandin ust kenarinda ince turuncu vurgu */
.mam-tl__band::before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 120px;
   height: 4px;
   border-radius: 0 0 4px 4px;
   background: linear-gradient(90deg, var(--mam-tl-accent) 0%, var(--mam-tl-accent-deep) 100%);
}

.mam-tl__band-inner {
   max-width: 900px;
}

.mam-tl__quote {
   font-family: Poppins, sans-serif;
   font-size: clamp(20px, 2.4vw, 30px);
   font-weight: 300;
   line-height: 1.55;
   letter-spacing: -0.4px;
   color: #ffffff;
   margin: 0 0 18px;
}

.mam-tl__speaker {
   font-family: Poppins, sans-serif;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--mam-tl-accent);
   margin: 0;
}

/* --- Icerik kolonu --- */
.mam-tl__content {
   position: relative;
   max-width: var(--mam-tl-col);
   margin: 0 auto;
   padding: 80px 20px;
}

.mam-tl__content::after {
   content: "";
   display: table;
   clear: both;
}

/* --- Gorseller --- */
.mam-tl__media {
   position: relative;
   width: 100%;
   margin-bottom: 24px;
}

.mam-tl__media-box {
   position: relative;
   overflow: hidden;
   /* 58% -> kart gorselden uzun kalsin (referanstaki hiyerarsi) ve 1920x1080
      kaynak gorseller neredeyse hic kirpilmadan otursun. */
   padding-top: 58%;
   border-radius: var(--mam-tl-radius);
   box-shadow: var(--mam-tl-shadow-media);
   /* Safari'de border-radius + transform edilen cocuk birlikte kirpilmiyor */
   -webkit-mask-image: -webkit-radial-gradient(white, black);
   transition: box-shadow 0.4s var(--mam-tl-ease), transform 0.4s var(--mam-tl-ease);
}

.mam-tl__media:hover .mam-tl__media-box {
   transform: translateY(-6px);
   box-shadow: var(--mam-tl-shadow-hover);
}

.mam-tl__figure {
   position: absolute;
   top: -8%;
   left: 0;
   width: 100%;
   height: 116%;      /* parallax icin ustte/altta pay */
   background-size: cover;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   will-change: transform;
}

.mam-tl__figure video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.mam-tl__media--square .mam-tl__media-box {
   padding-top: 100%;
}

.mam-tl__media--square {
   display: none;   /* ikincil gorsel kucuk ekranda gizli */
}

/* --- Bilgi karti --- */
.mam-tl__card {
   position: relative;
   width: 100%;
   background-color: var(--mam-tl-surface);
   text-align: center;
   padding: 45px 28px;
   border-radius: var(--mam-tl-radius);
   box-shadow: var(--mam-tl-shadow);
   transition: box-shadow 0.4s var(--mam-tl-ease), transform 0.4s var(--mam-tl-ease);
}

.mam-tl__card:hover {
   transform: translateY(-6px);
   box-shadow: var(--mam-tl-shadow-hover);
}

.mam-tl__year {
   display: block;
   font-family: Poppins, sans-serif;
   font-size: clamp(52px, 6vw, 88px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: -2.5px;
   color: var(--mam-tl-accent);
   margin: 0 0 10px;
}

.mam-tl__subyear {
   display: block;
   font-family: Poppins, sans-serif;
   font-size: clamp(22px, 2.4vw, 34px);
   font-weight: 600;
   line-height: 1;
   letter-spacing: -1px;
   color: var(--mam-tl-ink);
   margin: 0 0 22px;
}

.mam-tl__title {
   font-family: Poppins, sans-serif;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: 2.4px;
   text-transform: uppercase;
   color: var(--mam-tl-ink);
   /* Kart genis ekranda buyuyor; baslik ve govde olcusu okunabilir kalsin */
   max-width: 680px;
   margin: 0 auto 28px;
}

.mam-tl__title::after {
   content: "";
   display: block;
   width: 48px;
   height: 3px;
   margin: 22px auto 0;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--mam-tl-accent) 0%, var(--mam-tl-accent-deep) 100%);
}

.mam-tl__desc {
   font-family: Poppins, sans-serif;
   /* Kolonla birlikte olceklenir; kart genis ekranda bos gorunmesin */
   font-size: clamp(16px, 0.55vw, 18px);
   font-weight: 400;
   line-height: 1.85;
   letter-spacing: 0.2px;
   color: var(--mam-tl-body);
   text-align: left;   /* Turkce metinde justify nehir olusturuyor */
   max-width: 680px;   /* satir uzunlugu ~70 karakteri gecmesin */
   margin: 0 auto;
}

.mam-tl__desc p {
   margin: 0 0 1.5em;
}

.mam-tl__desc p:last-child {
   margin-bottom: 0;
}

/* --- Metin sayfalama (uzun metinler icin) ---------------------------------
   Kirpma bilerek CSS'te degil, JS'in ekledigi .is-paged sinifinda: JS
   calismazsa metin kirpilmadan tam gorunur. */
.mam-tl__desc.is-paged {
   max-height: var(--mam-tl-desc-h, 15em);
   overflow: hidden;
   /* Alt kenarda yumusak gecis: yarim kesilen satir "bozuk" degil
      "devami var" gibi okunsun. Son sayfada kapanir (.is-son). */
   -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
   mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent 100%);
}

.mam-tl__desc.is-paged.is-son {
   -webkit-mask-image: none;
   mask-image: none;
}

.mam-tl__desc-inner {
   transition: transform 0.5s var(--mam-tl-ease);
   will-change: transform;
}

.mam-tl__pager {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-top: 28px;
}

.mam-tl__pager[hidden] {
   display: none;
}

.mam-tl__pager-btn {
   width: 38px;
   height: 38px;
   flex: 0 0 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: transparent;
   color: var(--mam-tl-accent);
   box-shadow: inset 0 0 0 2px var(--mam-tl-accent);
   cursor: pointer;
   transition: color 0.3s var(--mam-tl-ease),
               box-shadow 0.3s var(--mam-tl-ease),
               transform 0.3s var(--mam-tl-ease);
}

.mam-tl__pager-btn:hover:not(:disabled),
.mam-tl__pager-btn:focus-visible {
   color: #ffffff;
   box-shadow: inset 0 0 0 19px var(--mam-tl-accent);
   transform: translateY(-2px);
}

.mam-tl__pager-btn:disabled {
   cursor: default;
   color: #c9c9c9;
   box-shadow: inset 0 0 0 2px #dcdcdc;
}

.mam-tl__pager-dots {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.mam-tl__pager-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background-color: #cfcfcf;
   transition: width 0.3s var(--mam-tl-ease),
               height 0.3s var(--mam-tl-ease),
               background-color 0.3s var(--mam-tl-ease);
}

.mam-tl__pager-dot.is-current {
   width: 10px;
   height: 10px;
   background-color: var(--mam-tl-accent);
}

.mam-tl__desc strong {
   color: var(--mam-tl-ink);
   font-weight: 600;
}

.mam-tl__desc em {
   font-style: normal;
   color: var(--mam-tl-accent);
   font-weight: 500;
}

/* --------------------------------------------------------------------------
   Masaustu (>=1200px): uste binen kart + tek/cift ayna duzeni
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

   .mam-tl__content {
      padding-top: 100px;
      padding-bottom: 100px;
   }

   .mam-tl__media {
      margin-bottom: 0;
   }

   /* Tek bolumler: kart solda, gorseller sagda */
   .mam-tl__media--long {
      float: right;
      width: var(--mam-tl-long-w);
   }

   .mam-tl__media--square {
      display: block;
      float: right;
      clear: both;
      width: var(--mam-tl-square-w);
      margin-top: clamp(90px, 6vw, 160px);
      margin-right: var(--mam-tl-square-offset);
      margin-left: 0;
   }

   .mam-tl__card {
      position: absolute;
      /* Kartin yalnizca kardesi olan gorselin (z-index auto) ustunde olmasi
         yeterli. Referans tasarimdaki 10 degeri sitenin sabit header'ini
         (.px-header-area, z-index 9) gecip kartin header uzerine binmesine
         yol aciyordu. */
      z-index: 2;
      top: var(--mam-tl-card-top);
      left: 20px;
      width: var(--mam-tl-card-w);
      padding: clamp(45px, 2.5vw, 70px) clamp(60px, 5vw, 90px);
   }

   /* Cift bolumler: ayna */
   .mam-tl__chapter:nth-of-type(2n) .mam-tl__card {
      left: auto;
      right: 20px;
   }

   .mam-tl__chapter:nth-of-type(2n) .mam-tl__media--long {
      float: left;
   }

   .mam-tl__chapter:nth-of-type(2n) .mam-tl__media--square {
      float: left;
      margin-left: var(--mam-tl-square-offset);
      margin-right: 0;
   }
}

/* --------------------------------------------------------------------------
   Erisilebilirlik: hareket azaltma tercihi her seyin onunde gelir
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

   .mam-tl__figure {
      transform: none !important;
      top: 0;
      height: 100%;
   }

   /* Hover'daki yukselme hareketi de kapansin; golge degisimi kalabilir */
   .mam-tl__card,
   .mam-tl__media-box {
      transition: box-shadow 0.15s linear;
   }

   .mam-tl__card:hover,
   .mam-tl__media:hover .mam-tl__media-box {
      transform: none;
   }

   /* Sayfalama calismaya devam etsin, sadece kayma animasyonu aninda olsun */
   .mam-tl__desc-inner {
      transition: none;
   }

   .mam-tl__pager-btn:hover:not(:disabled) {
      transform: none;
   }
}