/* ==========================================================================
   PORTFOLYO — /portfolyo ve /portfolyo/<slug>

   Yalnizca bu iki sayfada yuklenir (partial/style.php icindeki kosul).
   Renk ve golge dili hikayemiz.css'ten devralinir; kullanici acik zemin
   sectigi icin kartlarin ayrismasi tamamen turuncu golgeye birakildi.

   NOT: .px-header-area sabit (fixed) ve z-index: 9. Bu dosyadaki hicbir
   kural 9'a ulasmaz — hikayemiz'de kart menunun ustune cikip sorun
   olmustu, tekrarlanmiyor.
   ========================================================================== */

/* Token'lar her ust duzey blokta ayri ayri tanimlanir. .mam-pf__cta ve
   .mam-pfd__hero, .mam-pf / .mam-pfd'nin ALTI degil KARDESI oldugu icin
   yalnizca o iki sinifa yazmak yetmiyordu: degiskenler cozumlenmeyip
   CTA butonu seffaf zemin uzerinde beyaz yaziya donuyordu. */
.mam-pf,
.mam-pf__cta,
.mam-pfd,
.mam-pfd__hero {
   --mam-pf-accent:       #FF8C42;
   --mam-pf-accent-deep:  #ff6b35;
   --mam-pf-ink:          #141414;
   --mam-pf-ink-soft:     #6b6b6b;
   --mam-pf-line:         #ececec;
   --mam-pf-radius:       20px;
   --mam-pf-radius-lg:    28px;
   --mam-pf-ease:         cubic-bezier(0.4, 0, 0.2, 1);
   --mam-pf-shadow:       0 16px 48px rgba(255, 140, 66, .16), 0 4px 14px rgba(0, 0, 0, .04);
   --mam-pf-shadow-hover: 0 24px 64px rgba(255, 140, 66, .26), 0 6px 18px rgba(0, 0, 0, .05);
}

/* ==========================================================================
   LISTE
   ========================================================================== */

.mam-pf__card {
   margin-bottom: 60px;
}

.mam-pf__link {
   display: block;
   color: inherit;
   text-decoration: none;
}

.mam-pf__link:hover,
.mam-pf__link:focus {
   color: inherit;
}

.mam-pf__link:focus-visible {
   outline: 2px solid var(--mam-pf-accent-deep);
   outline-offset: 6px;
   border-radius: var(--mam-pf-radius);
}

.mam-pf__cover {
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   border-radius: var(--mam-pf-radius);
   background: #f4f4f4;
   box-shadow: var(--mam-pf-shadow);
   transition: box-shadow .45s var(--mam-pf-ease);
}

/* Kapak henuz yuklenmemis kayit: kirik gorsel yerine notr bir alan */
.mam-pf__cover.is-bos {
   background:
      linear-gradient(135deg, rgba(255, 140, 66, .10), rgba(255, 107, 53, .04)),
      #f7f7f7;
}

.mam-pf__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s var(--mam-pf-ease);
}

.mam-pf__link:hover .mam-pf__cover {
   box-shadow: var(--mam-pf-shadow-hover);
}

.mam-pf__link:hover .mam-pf__cover img {
   transform: scale(1.03);
}

.mam-pf__meta {
   padding-top: 22px;
}

.mam-pf__baslik {
   font-size: clamp(22px, 1.9vw, 30px);
   line-height: 1.2;
   margin: 0 0 8px;
   color: var(--mam-pf-ink);
   transition: color .3s var(--mam-pf-ease);
}

.mam-pf__link:hover .mam-pf__baslik {
   color: var(--mam-pf-accent-deep);
}

.mam-pf__ozet {
   margin: 0;
   font-size: 16px;
   line-height: 1.6;
   color: var(--mam-pf-ink-soft);
   max-width: 52ch;
}

.mam-pf__bos-mesaj {
   text-align: center;
   color: var(--mam-pf-ink-soft);
   padding: 60px 0;
   margin: 0;
}

/* --- Kapanis CTA --------------------------------------------------------- */

.mam-pf__cta {
   padding: 0 0 120px;
}

.mam-pf__cta-kutu {
   text-align: center;
   padding: clamp(40px, 5vw, 72px) 30px;
   border-radius: var(--mam-pf-radius-lg);
   background: linear-gradient(135deg, rgba(255, 140, 66, .09), rgba(255, 107, 53, .04));
   box-shadow: var(--mam-pf-shadow);
}

.mam-pf__cta-baslik {
   font-size: clamp(26px, 2.6vw, 40px);
   margin: 0 0 12px;
   color: var(--mam-pf-ink);
}

.mam-pf__cta-metin {
   margin: 0 0 28px;
   color: var(--mam-pf-ink-soft);
}

.mam-pf__cta-buton {
   display: inline-block;
   padding: 15px 38px;
   border-radius: 999px;
   background: var(--mam-pf-ink);
   color: #fff;
   font-weight: 600;
   text-decoration: none;
   transition: background .3s var(--mam-pf-ease), box-shadow .3s var(--mam-pf-ease);
}

.mam-pf__cta-buton:hover,
.mam-pf__cta-buton:focus {
   background: var(--mam-pf-accent-deep);
   color: #fff;
   box-shadow: var(--mam-pf-shadow-hover);
}

/* ==========================================================================
   DETAY
   ========================================================================== */

/* Hero: gorsel sabit menunun altindan gecebilir, ama metin gecemez.
   Bu yuzden icerik alta hizalanir — pt-200 gibi bir ust bosluga gerek kalmaz. */
.mam-pfd__hero {
   position: relative;
   min-height: min(62vh, 620px);
   display: flex;
   align-items: flex-end;
   overflow: hidden;
   background: var(--mam-pf-ink);
}

.mam-pfd__hero.is-bos {
   background: linear-gradient(135deg, #2a2a2a, #141414);
}

.mam-pfd__hero-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mam-pfd__hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .10) 40%, rgba(0, 0, 0, .78) 100%);
}

.mam-pfd__hero-icerik {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 1230px;
   margin: 0 auto;
   padding: 0 30px clamp(40px, 5vw, 76px);
   color: #fff;
}

.mam-pfd__hero-baslik {
   font-size: clamp(36px, 5.4vw, 82px);
   line-height: 1.05;
   margin: 0 0 14px;
   color: #fff;
}

.mam-pfd__hero-ozet {
   margin: 0;
   font-size: clamp(16px, 1.3vw, 20px);
   line-height: 1.55;
   color: rgba(255, 255, 255, .82);
   max-width: 60ch;
}

/* --- Metin bolumleri ----------------------------------------------------- */

.mam-pfd__bolum {
   padding: clamp(56px, 6vw, 96px) 0 0;
}

.mam-pfd__baslik {
   font-size: clamp(28px, 3vw, 46px);
   line-height: 1.15;
   margin: 0 0 22px;
   color: var(--mam-pf-ink);
}

.mam-pfd__metin {
   font-size: 17px;
   line-height: 1.75;
   color: var(--mam-pf-ink-soft);
   max-width: 68ch;
}

.mam-pfd__metin p {
   margin: 0 0 18px;
}

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

.mam-pfd__metin strong {
   color: var(--mam-pf-ink);
}

/* Sonuclar: rakamlarin one ciktigi tek bolum */
.mam-pfd__bolum--sonuc {
   margin-top: clamp(56px, 6vw, 96px);
   padding: clamp(36px, 4vw, 60px);
   border-radius: var(--mam-pf-radius-lg);
   background: linear-gradient(135deg, rgba(255, 140, 66, .10), rgba(255, 107, 53, .04));
   box-shadow: var(--mam-pf-shadow);
}

.mam-pfd__metin--sonuc {
   font-size: 19px;
}

.mam-pfd__metin--sonuc strong {
   color: var(--mam-pf-accent-deep);
   font-size: 1.25em;
   letter-spacing: -0.01em;
}

/* --- Gorseller ----------------------------------------------------------- */

/* ESKI: medya konuma gore basilirken ilk gorsel bu sinifla tam genislikte
   cikiyordu. Artik genislik kayit basina seciliyor ve tam genislikli oge
   .mam-pfd__galeri-oge--tam ile ayni izgarada duruyor. Kural, elle yazilmis
   eski iceriklerde kullanilmis olabilir diye birakildi. */
.mam-pfd__genis {
   margin: clamp(48px, 5vw, 80px) 0 0;
}

.mam-pfd__genis img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--mam-pf-radius);
   box-shadow: var(--mam-pf-shadow);
}

.mam-pfd__galeri {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
   margin-top: clamp(48px, 5vw, 80px);
}

.mam-pfd__galeri-oge {
   margin: 0;
}

.mam-pfd__galeri-oge img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: var(--mam-pf-radius);
   box-shadow: var(--mam-pf-shadow);
}

/* Tam genislik: ayri bir kapsayiciya gerek yok, ayni izgarada iki sutunu
   kaplar. Mobilde izgara zaten tek sutuna indigi icin (asagidaki 767px
   blogu) 1 / -1 orada da dogru davranir. */
.mam-pfd__galeri-oge--tam {
   grid-column: 1 / -1;
}

/* Video: dosya degil, YouTube/Vimeo gomulu oynatici (portfolyo_video_embed).
   iframe'in kendi doğal orani yok, 16:9'u sarmalayici veriyor. */
.mam-pfd__galeri-oge--video {
   position: relative;
   aspect-ratio: 16 / 9;
}

.mam-pfd__galeri-oge--video iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   border-radius: var(--mam-pf-radius);
   box-shadow: var(--mam-pf-shadow);
}

/* --- Alt bloklar --------------------------------------------------------- */

.mam-pfd__alt {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 40px;
   margin-top: clamp(56px, 6vw, 96px);
   padding-top: clamp(36px, 4vw, 56px);
   border-top: 1px solid var(--mam-pf-line);
}

.mam-pfd__alt-baslik {
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--mam-pf-ink-soft);
   margin: 0 0 18px;
}

.mam-pfd__etiketler {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.mam-pfd__etiketler a {
   display: inline-block;
   padding: 9px 20px;
   border-radius: 999px;
   border: 1px solid var(--mam-pf-line);
   color: var(--mam-pf-ink);
   font-size: 15px;
   text-decoration: none;
   transition: border-color .3s var(--mam-pf-ease), color .3s var(--mam-pf-ease), box-shadow .3s var(--mam-pf-ease);
}

.mam-pfd__etiketler a:hover,
.mam-pfd__etiketler a:focus {
   border-color: var(--mam-pf-accent);
   color: var(--mam-pf-accent-deep);
   box-shadow: 0 8px 24px rgba(255, 140, 66, .18);
}

/* --- Gezinme ------------------------------------------------------------- */

.mam-pfd__gezinme {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   margin-top: clamp(48px, 5vw, 72px);
   padding-top: clamp(28px, 3vw, 40px);
   border-top: 1px solid var(--mam-pf-line);
}

.mam-pfd__gezinme-link {
   display: flex;
   flex-direction: column;
   gap: 4px;
   text-decoration: none;
   color: var(--mam-pf-ink);
   transition: color .3s var(--mam-pf-ease);
}

.mam-pfd__gezinme-link--sag {
   text-align: right;
   margin-left: auto;
}

.mam-pfd__gezinme-link:hover,
.mam-pfd__gezinme-link:focus {
   color: var(--mam-pf-accent-deep);
}

.mam-pfd__gezinme-etiket {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--mam-pf-ink-soft);
}

.mam-pfd__gezinme-ad {
   font-size: clamp(18px, 1.6vw, 24px);
   font-weight: 600;
   line-height: 1.2;
}

.mam-pfd__geri {
   padding: clamp(40px, 4vw, 56px) 0 clamp(80px, 8vw, 120px);
}

.mam-pfd__geri a {
   color: var(--mam-pf-ink-soft);
   text-decoration: none;
   font-size: 16px;
   transition: color .3s var(--mam-pf-ease);
}

.mam-pfd__geri a:hover,
.mam-pfd__geri a:focus {
   color: var(--mam-pf-accent-deep);
}

/* ==========================================================================
   IMLEC ROZETI — "Projeyi Gor"
   Kapak gorselinin uzerinde yerel imlecin yerini alan, fareyi yumusak
   gecikmeyle takip eden pill. DOM: inc/portfolyo.php, surus: js/portfolyo.js.
   ========================================================================== */

/* Transform sorumlulugu bilincli olarak IKIYE bolunuyor: dis kutuyu JS her
   karede translate3d ile tasir, ic etiketin transform'u tamamen CSS'in
   tekelindedir. Ayni ozellige iki taraftan yazilsaydi biri digerini ezerdi. */
.mam-pf__cursor {
   position: fixed;
   top: 0;
   left: 0;
   /* 8, tesadufi degil: .px-header-area fixed ve z-index: 9 — dosyanin
      basindaki nota gore buradaki hicbir kural 9'a ulasmaz. Dogru davranis
      da bu: sabit menu bir kartin uzerine bindiginde imlec zaten karttan
      cikmis olur, rozet menunun altinda kalarak sonumlenir. */
   z-index: 8;
   pointer-events: none;
   will-change: transform;
   opacity: 0;
   transition: opacity .3s ease;
}

.mam-pf__cursor.is-aktif {
   opacity: 1;
}

/* translate(-50%, -50%) rozeti imlecin merkezine oturtur.
   scale .6 -> 1 gecisi son ceyrekte hafifce tasar (cubic-bezier'in 1.55'i),
   boylece belirme "yerine oturuyor" hissi verir. */
.mam-pf__cursor-etiket {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 8px 8px 8px 20px;
   border-radius: 100px;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: -.01em;
   line-height: 1;
   white-space: nowrap;
   color: #fff;
   background: linear-gradient(135deg, var(--mam-pf-accent), var(--mam-pf-accent-deep));
   box-shadow: var(--mam-pf-shadow-hover);
   transform: translate(-50%, -50%) scale(.6);
   transition: transform .4s cubic-bezier(.34, 1.55, .5, 1);
}

.mam-pf__cursor.is-aktif .mam-pf__cursor-etiket {
   transform: translate(-50%, -50%) scale(1);
}

.mam-pf__cursor-etiket svg {
   flex-shrink: 0;
   width: 30px;
   height: 30px;
   padding: 7px;
   border-radius: 50%;
   background: #fff;
   color: var(--mam-pf-accent-deep);
}

/* Kapak karartma: turuncu rozet acik renkli kapaklarda da okunsun diye.
   .mam-pf__cover zaten position: relative + overflow: hidden, ayri bir
   sarmalayiciya gerek yok; katman yuvarlak koselere kirpilir.
   Tetikleyici .mam-pf__link:hover — mevcut zoom ve golge de oradan
   tetikleniyor, kart tek parca davranmaya devam etsin. */
.mam-pf__cover::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(10, 10, 10, .28);
   opacity: 0;
   transition: opacity .45s var(--mam-pf-ease);
}

.mam-pf__link:hover .mam-pf__cover::after {
   opacity: 1;
}

/* Yerel imleci gizleme kurali, JS'in GERCEKTEN kuruldugunu bildiren
   modifier'a bagli — script yuklenmezse kullanici imlecsiz kalmaz.
   @media sarmalayicisi ayrica resize'i cozer: pencere 992px altina
   indiginde rozet display: none olurken imlec geri gelir, JS tarafinda
   resize dinleyicisine gerek kalmaz. */
@media (min-width: 992px) {
   .mam-pf--imlec-hazir .mam-pf__cover {
      cursor: none;
   }
}

@media (max-width: 991px) {
   .mam-pf__cursor {
      display: none;
   }
}

/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 767px) {
   .mam-pf__card {
      margin-bottom: 44px;
   }

   .mam-pf__meta {
      padding-top: 18px;
   }

   .mam-pfd__hero {
      min-height: 58vh;
   }

   .mam-pfd__hero-icerik {
      padding-left: 20px;
      padding-right: 20px;
   }

   .mam-pfd__galeri {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .mam-pfd__gezinme {
      flex-direction: column;
   }

   .mam-pfd__gezinme-link--sag {
      text-align: left;
      margin-left: 0;
   }
}

/* ==========================================================================
   ERISILEBILIRLIK
   Hareket azaltma tercihi diger her seyin onunde gelir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

   .mam-pf__cover,
   .mam-pf__cover::after,
   .mam-pf__cover img,
   .mam-pf__baslik,
   .mam-pf__cta-buton,
   .mam-pfd__etiketler a,
   .mam-pfd__gezinme-link,
   .mam-pfd__geri a {
      transition: none;
   }

   .mam-pf__link:hover .mam-pf__cover img {
      transform: none;
   }

   /* js/portfolyo.js zaten bu tercihte hic kurulmuyor (dolayisiyla
      .mam-pf--imlec-hazir da eklenmez, imlec kaybolmaz). Bu kural
      script onbellekten eski surumle gelse bile rozeti kapatir. */
   .mam-pf__cursor {
      display: none;
   }
}