/* CRITICAL: .main must have 100% height so rm-wrapper's absolute positioning works */
.main { height:100%; overflow: hidden; }

.rm-container {
	/* width: 32% is the mathematically correct value.
	   When pages rotate to 150° (rm-in/portfolio state), they extend 0.866×W
	   beyond each side. For a centered container, available margin = (viewport - W) / 2.
	   Overflow occurs when: 0.866×W > (viewport - W) / 2  →  W > viewport / 2.73
	   At 32%: W = 0.32×vp, margin = 0.34×vp → 0.866×0.32vp = 0.277vp < 0.34vp ✓ FITS
	   At 42%: W = 0.42×vp, margin = 0.29×vp → 0.866×0.42vp = 0.364vp > 0.29vp ✗ OVERFLOWS */
	width: 32%;
	height: 100%;
	max-width: 580px;
	margin: 0 auto;
	position: relative;
	/* Perspective large relative to element size prevents corner clipping */
	-webkit-perspective: 2800px;
	-moz-perspective: 2800px;
	-o-perspective: 2800px;
	-ms-perspective: 2800px;
	perspective: 2800px;
}

.rm-wrapper { height:auto; }
/* Floating shadow — dergi zeminden yukarda gibi durur */
.rm-wrapper {
	box-shadow:
		0 2px 4px rgba(0,0,0,0.4),
		0 8px 24px rgba(0,0,0,0.55),
		0 30px 80px rgba(0,0,0,0.5),
		0 60px 120px rgba(0,0,0,0.35);
}
.rm-wrapper,
.rm-wrapper,
.rm-wrapper > div {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.rm-wrapper { position:absolute; top:40px; bottom:40px; height:auto; }

.rm-wrapper .rm-cover {
	-webkit-transform-origin: 0% 50%;
	-webkit-transition-delay: 0.2s;
	-moz-transform-origin: 0% 50%;
	-moz-transition-delay: 0.2s;
	-o-transform-origin: 0% 50%;
	-o-transition-delay: 0.2s;
	-ms-transform-origin: 0% 50%;
	-ms-transition-delay: 0.2s;
	transform-origin: 0% 50%;
	transition-delay: 0.2s;
}

.rm-wrapper .rm-right {
	-webkit-transform-origin: 100% 50%;
	-webkit-transition-delay: 0s;
	-moz-transform-origin: 100% 50%;
	-moz-transition-delay: 0s;
	-o-transform-origin: 100% 50%;
	-o-transition-delay: 0s;
	-ms-transform-origin: 100% 50%;
	-ms-transition-delay: 0s;
	transform-origin: 100% 50%;
	transition-delay: 0s;
}

.rm-wrapper > div > div {
	width: 100%;
	height: 100%;
	position: absolute;
	/*padding: 30px;*/
}

.rm-container .rm-front,
.rm-container .rm-back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

html:not(.safe-mod) .rm-container .rm-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.rm-overlay {
	position: absolute;
	width: 10%;
	height: 100%;
	top: 0;
	right: 0;
	pointer-events: none;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.04)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%);
}



/* Transitions — specific properties enable GPU compositing without clipping */
.rm-wrapper,
.rm-wrapper > div {
	-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease;
	-moz-transition: -moz-transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease;
	-o-transition: -o-transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease;
	transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.5s ease;
}
.safe-mod .rm-wrapper,
.safe-mod .rm-wrapper > div, .safe-mod .rm-wrapper > div > div {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}


.rm-close {
	height: auto;  /* main.css'deki height:50px geçerli olsun */
}

.rm-container.rm-open .rm-cover {
	-webkit-transform: rotateY(-180deg);
	-webkit-transition-delay: 0s;
	-moz-transform: rotateY(-180deg);
	-moz-transition-delay: 0s;
	-o-transform: rotateY(-180deg);
	-o-transition-delay: 0s;
	-ms-transform: rotateY(-180deg);
	-ms-transition-delay: 0s;
	transform: rotateY(-180deg);
	transition-delay: 0s;
}

.rm-container.rm-open .rm-right {
	-webkit-transform: rotateY(180deg);
	-webkit-transition-delay: 0.2s;
	-moz-transform: rotateY(180deg);
	-moz-transition-delay: 0.2s;
	-o-transform: rotateY(180deg);
	-o-transition-delay: 0.2s;
	-ms-transform: rotateY(180deg);
	-ms-transition-delay: 0.2s;
	transform: rotateY(180deg);
	transition-delay: 0.2s;
}

.rm-container.rm-in .rm-cover {
	-webkit-transform: rotateY(-150deg);
	-moz-transform: rotateY(-150deg);
	-o-transform: rotateY(-150deg);
	-ms-transform: rotateY(-150deg);
	transform: rotateY(-150deg);
}

.rm-container.rm-in .rm-right {
	-webkit-transform: rotateY(150deg);
	-moz-transform: rotateY(150deg);
	-o-transform: rotateY(150deg);
	-ms-transform: rotateY(150deg);
	transform: rotateY(150deg);
}

.rm-container.rm-in .rm-wrapper {
	/* Reduced from -500px: large translateZ causes corners to exit perspective frustum */
	-webkit-transform: translateZ(-180px);
	-moz-transform: translateZ(-180px);
	-o-transform: translateZ(-180px);
	-ms-transform: translateZ(-180px);
	transform: translateZ(-180px);
}

.rm-container.rm-in .rm-cover, 
.rm-container.rm-in .rm-right,
.rm-container.rm-nodelay .rm-right {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}

.rm-container.rm-in .rm-modal {
	-webkit-transform: translateZ(0px);
	-moz-transform: translateZ(0px);
	-o-transform: translateZ(0px);
	-ms-transform: translateZ(0px);
	transform: translateZ(0px);
	opacity: 1;
	pointer-events: auto;
}


/* Media Queries — vertical padding for the book wrapper */
@media screen and (min-height: 600px) { 
	.rm-wrapper { top:60px; bottom:60px; }
}
@media screen and (min-height: 800px) { 
	.rm-wrapper { top:80px; bottom:80px; }
}
@media screen and (min-height: 900px) { 
	.rm-wrapper { top:100px; bottom:100px; }
}
@media screen and (min-height: 1000px) { 
	.rm-wrapper { top:120px; bottom:120px; }
}
/* Wide + tall: safely increase max-width without breaking the 32% ratio */
@media screen and (min-width: 1400px) and (min-height: 900px) {
	.rm-container { max-width: 720px; }
}


/* Page Shadow Middle */
.rm-wrapper .rm-middle {
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.rm-container.rm-open .rm-wrapper .rm-cover {
	box-shadow: 2px 4px 4px rgba(0,0,0,0.2);
}

.rm-container.rm-open .rm-wrapper .rm-right {
	box-shadow: -2px 4px 4px rgba(0,0,0,0.2);
}

.rm-container.rm-open .rm-wrapper .rm-middle {
	box-shadow: 0 6px 4px -2px rgba(0,0,0,0.2);
}


/* firefox weird z-index fix */
.rm-container.rm-closed .rm-wrapper > div.rm-right > div.rm-front { visibility:hidden; }
.rm-container .rm-wrapper > div.rm-right > div.rm-front { visibility:visible; }

.rm-wrapper .rm-cover { z-index:100; }
.rm-wrapper > div > div.rm-front { z-index:120; }
.rm-wrapper > div > div.rm-back { z-index:120; }
.rm-wrapper .rm-middle { z-index:50; }
.rm-wrapper .rm-right { z-index:60; }

/* iPad/Safari fix: Isolate rm-middle from the parent 3D context.
   Without this, Safari propagates the book-page rotateY transforms into
   the portfolio Isotope items, triggering their CSS transitions (flash/flip).
   transform-style:flat breaks the 3D inheritance while keeping the
   portfolio fully visible behind the rotating pages as intended. */
.rm-wrapper .rm-middle {
    -webkit-transform-style: flat;
    transform-style: flat;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}