/* CSS Document */


/* book style cover - effect shadow — DEVRE DIŞI (kullanıcı istemedi) */
.cover:after {
    display: none !important;
}



/* =====================================================
   PORTFOLIO SKELETON / LAZY-LOAD SYSTEM
   ===================================================== */

/* Shimmer keyframe */
@keyframes portfolioShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* Skeleton placeholder — sits inside .media-box, shown while image loads */
.port-skeleton {
    display: block;
    width: 100%;
    /* 3:2 aspect ratio — adjust to match your typical portfolio image */
    padding-top: 66.67%;
    position: relative;
    background: #e8e8e8;
    background: linear-gradient(
        90deg,
        #e8e8e8 25%,
        #f5f5f5 50%,
        #e8e8e8 75%
    );
    background-size: 800px 100%;
    animation: portfolioShimmer 1.4s infinite linear;
    border-radius: 1px;
}

/* The real image — hidden until loaded */
.portfolio-items .hentry img.port-lazy {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
    position: absolute;
    top: 0; left: 0;
}

/* Once loaded: fade in + remove absolute positioning */
.portfolio-items .hentry img.port-lazy.port-lazy-done {
    opacity: 1;
    position: static;
}

/* Wrapper that holds both skeleton + image together */
.port-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0; /* remove gap under inline img */
}

/* When image is loaded, kill skeleton */
.port-img-wrap.port-loaded .port-skeleton {
    display: none;
}


/* SCROLL SHADOWS TOP AND BOTTOM - reduces performance in firefox */
/*.antiscroll-wrap:before { position: absolute; content: ""; z-index: 1;
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
	pointer-events: none;
	box-shadow: 0 20px 40px rgba(255,255,255, .5) inset;
}
.antiscroll-wrap:after { position: absolute; content: "";
	width: 100%;
	height: 40px;
	bottom: 0;
	left: 0;
	pointer-events: none;
	box-shadow: 0 -20px 40px rgba(255,255,255, .5) inset;
}*/

/* =====================================================




/* ----------------------------------------------------------------------
   İLETİŞİM FORMU — YAZILAN METNİN OKUNABİLİRLİĞİ
   Form alanları genel --c-334455 değişkeninden renk alıyordu. O değişken
   Ayarlar > Renkler'den #cddf95 (soluk yeşil) yapılmış; krem zeminde
   kontrast oranı 1.3'e düşüyor — WCAG en az 4.5 ister. Yani ziyaretçi
   yazdığını göremiyordu.
   Değişkene dokunmuyoruz (butonlar, etiketler onu kullanıyor); sadece
   forma yazılan metni sabitliyoruz.
   ---------------------------------------------------------------------- */
#contact-form input:not([type="submit"]):not([type="button"]):not([type="file"]),
#contact-form textarea {
    color: #2a2a2a;
    -webkit-text-fill-color: #2a2a2a;   /* Safari otomatik doldurma */
}
#contact-form input::placeholder,
#contact-form textarea::placeholder { color: rgba(42,42,42,.40); opacity: 1; }
#contact-form input::-webkit-input-placeholder,
#contact-form textarea::-webkit-input-placeholder { color: rgba(42,42,42,.40); }

/* Odaklanınca alan belirgin olsun */
#contact-form input:not([type="submit"]):not([type="button"]):focus,
#contact-form textarea:focus {
    border-color: rgba(42,42,42,.45);
    background-color: rgba(0,0,0,.02);
}

/* ----------------------------------------------------------------------
   KAPAK ALT BAŞLIĞI — "Fullstack Graphic Designer"
   Ölçüm: kutu 461px, metin 526px → %114, yani metin kutuya SIĞMIYORDU
   ve iki yandan 33'er piksel taşıyordu.

   Sebep punto değil, HARF ARALIĞI: .cover h2 { letter-spacing: 7px }
   26 harf × 7px = 182px sadece boşluk. Bu değer punto ile ölçeklenmediği
   için fitText puntoyu küçültse bile genişlik düşmüyordu.

   2px'e çekildi → metin 396px, iki yanda 32'şer piksel boşluk (%86 doluluk).
   Punto (25.6px) ve data-cover-h2-tune değeri değişmedi; başlık hiyerarşisi
   korundu (H1 54px > H2 25.6px > H3 23px).

   Daha ferah istersen 1.5px, daha sıkı istersen 3px yap.
   ---------------------------------------------------------------------- */
.cover h2 { letter-spacing: 2px; }

/* ----------------------------------------------------------------------
   KİTAP KAPANIŞI — iki panelin çakışmasını kaldırır

   ÖLÇÜM (gerçek animasyon, kare kare):
     sağ sayfa : 0 → 700 ms
     kapak     : 200 → 900 ms        ← 500 ms BİRLİKTE hareket ediyorlar

   Çakışma anında sağ sayfa dönerken izleyiciye doğru dışa çıkıyor
   (yüksekliği 700px'ten 838px'e ulaşıyor). .rm-wrapper'da
   transform-style: preserve-3d olduğu için sıralamayı z-index değil
   Z konumu belirliyor — dışa çıkan pembe sayfa o anda kapaktan daha
   önde kalıyor ve kapağın üstünde görünüyor.

   ÇÖZÜM: sırayı değiştirmiyoruz (gerçek kitapta da sayfa önce, kapak
   sonra kapanır). Sadece ÇAKIŞMAYI kaldırıyoruz: kapak, sayfa tamamen
   düze geldikten sonra başlıyor. Artık ikisi hiçbir anda aynı anda
   hareket etmiyor, dolayısıyla pembe hiçbir zaman kapağın önüne geçemiyor.

   Süreler:
     sağ sayfa : 0 → 420 ms
     kapak     : 440 → 860 ms      (toplam 0.86 sn)
   Kritik kural: kapağın gecikmesi (440) sayfanın bitişinden (420) BÜYÜK
   olmalı. Daha da hızlandırmak istersen ikisini birlikte düşür,
   aradaki 20 ms'lik payı koru.
   Açılış hiç etkilenmiyor (.rm-open kurallarına dokunulmadı).

   GERİ ALMAK İÇİN: bu bloğu sil ve js/main.js'te 900 → 850 yap.
   ---------------------------------------------------------------------- */
.rm-container:not(.rm-open) .rm-wrapper .rm-right {
	-webkit-transition-duration: 0.42s;
	transition-duration: 0.42s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.rm-container:not(.rm-open) .rm-wrapper .rm-cover {
	-webkit-transition-duration: 0.42s;
	transition-duration: 0.42s;
	-webkit-transition-delay: 0.44s;
	transition-delay: 0.44s;
}