@charset "utf-8";
/* CSS Document */

/*
body {
  background-image: 
    url('/media/images/interface/perdeson.png'),
    url('/media/images/interface/orestes-mockups.jpg');
  background-size: 
    cover,
    cover;
  background-position: 
    center,
    center;

	
  background-attachment: fixed;
	font-family:Sarabun;
	font-size:0.8em;
	font-weight:100;
}

*/

body {
  background-image: url('/media/images/interface/orestes-mockups.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
	/*
  font-family:Sarabun;
  font-size:0.9em;
  font-weight:100;
  */
	
		font-size:14px;
			font-family: "optima-lt-pro", sans-serif;
			font-weight: 100;
			font-style: normal;
}


.pc{
	display:block;
}

	
	
#overlay {
  position: fixed;
  inset: var(--overlay-padding, 20px);
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#overlay.slider-mode {
  display: flex;
  align-items: center;   /* dikey ortalama */
  justify-content: center;
  overflow: hidden;
}

#overlay.text-mode {
  display: flex;
  align-items: flex-start; /* yukarıdan başla */
  justify-content: center;
  overflow: auto;          /* scroll aktif */
  padding: 40px;
	z-index: 10000;
}


	
#overlay, .slider, .slider-controls-below a {
  pointer-events: auto;
}

#close-overlay {
  position: fixed;
  top: var(--overlay-padding, 30px);
  right: var(--overlay-padding, 50px);
  background: none;
  border: 1px solid #c49d48;
  color: #c49d48;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 10px;
  z-index:100000;
}

	
	

/* Kitap Katmanı */
#book-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 100%;
  text-align: center;
  z-index: 1; /* Menünün altında */
  color:white;
	border-left: 0px solid rgba(255,255,255,0.9);
	border-right: 0px solid rgba(255,255,255,0.9);
	backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.90);
	display:none;
	
}

#book-meta {
  margin-top: 1vh;
  opacity:0.2;
}
	
#book-meta img {
  max-width: 70%;
  height: auto;
  margin-top: 1vh;
}


#book-meta h1 {
  font-size: 3rem;
  letter-spacing: 2px;
}

#book-meta h2 {
  font-size: 1.5rem;
  opacity: 0.8;
}

#book-meta .tagline {
  margin-top: 1rem;
  font-style: italic;
  opacity: 0.7;
}

#vazo {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 600px; /* başlangıç boyutu */
  opacity: 0.6;
  pointer-events: none;
  transition: transform 0.3s ease;
}
	
#vazo:hover {
  transform: scale(1.05);
  opacity: 0.8;
}

/* Menü Katmanı */
#prosopon {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
}

/*
.panel {
  flex: 1;
  transition: flex 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.2);
  border-left: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.panel-inner {
  text-align: center;
  color: #fff;
  opacity: 0.9;
}

.panel h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}


.panel-content {
  display: none;
  text-align: center;
  padding-top: 1rem;
}
*/	


.panel .desc {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}

/*
.panel-btn {
  background: none;
  border: 1px solid #c49d48;
  color: #c49d48;
  padding: 6px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.panel-btn:hover {
  background: #c49d48;
  color: #000;
}


.panel-btn {
  background: none;
  border: 0px solid #c49d48;
  color: #c49d48;
  padding: 8px 24px 8px 24px;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
	text-align:left;
	list-style:none;
	font-family:Sarabun;
	font-size:14px;
	font-weight:100;
}

.panel-btn:hover {
  background: #000;
  color: #fff;
}

*/
	
.subtitle{
	font-size:13px; margin-top:-10px; font-family:Sarabun
}





.panel {
            flex: 1;
            position: relative; /* ÇOK ÖNEMLİ */
            display: flex;
            align-items: center;
            justify-content: left;
            transition: flex 0.6s ease;
            background: rgba(0,0,0,0.2);
            border-left: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
            overflow: hidden; /* ÇOK ÖNEMLİ */
            color: white;
        }

        /* * 3. PANEL BAŞLIĞI
         * 'z-index: 3' ile en üstte kalır.
         */
        .panel-inner {
            text-align: left;
            color: #fff;
            opacity: 0.9;
            position: relative; /* z-index'in çalışması için */
            z-index: 3; /* panel-content'in (z-index: 2) üstünde olmalı */
            transition: transform 0.6s ease;
			padding: 3.5rem;
			display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }


		.subtitle {
            font-style: italic;
            opacity: 0.7;
        }


        /* * 4. AŞAĞIDAN GELEN İÇERİK (panel-content)
         * 'position: absolute' ile .panel'in içine sabitlenir.
         */
        .panel-content {
            position: absolute;
            left: 0;
            
            /* BAŞLANGIÇ KONUMU: Panel'in tam altında (top: 100%) */
            /* Panel 100vh yüksekliğinde olduğu için, bu aynı zamanda ekranın altıdır */
            top: 100%; 
            
            width: 100%;
            /*height: 50vh;  Ekranın yarısı kadar yükseklik */
			height: 60vh;
            /*background: black;*/
			background: rgba(0,0,0,0.5);
            color: white;
            padding: 3.5rem;
            box-sizing: border-box;
            
            /* Başlığın (z-index: 3) altında kalmalı */
            z-index: 2; 

            /* * DÜZELTME: "Pat diye" kaybolma sorununun çözümü.
             * Sadece 'top' özelliğini 0.8 saniyede anime etmesini söylüyoruz.
             * Sizin kodunuzda 'transition: transform...' da vardı ve bu satırı eziyordu.
             */
            transition: top 0.8s ease; 

            /* İçeriği düzgün dizmek için */
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }


        /* * 5. HOVER DURUMLARI (Animasyon)
         */

        /* Fare panelin üzerine gelince panel genişlesin */
        .panel:hover {
            flex: 1.25;
        }

        /* Fare panelin üzerine gelince başlık yukarı kaysın */
        .panel:hover .panel-inner {
            transform: translateY(-150px); 
        }

        /* * Fare panelin üzerine gelince panel-content yukarı çıksın
         * HEDEF KONUM: 'top: 50%'
         * Panel 100vh yüksekliğinde olduğu için, top: 50% ekranın tam ortasıdır.
         * İçerik (50vh yükseklikte) ekranın alt yarısını kaplar.
         */
        .panel:hover .panel-content {
            top: 40%;
        }

        /* İçerik butonları için basit stil */
        .panel-btn {
            /*background: #333;*/
			background: none;
			border:0px;
            border-bottom: 1px solid #222;
            color: white;
            padding: 12px 20px 12px 0px;
            margin: 0px 0px 0px 0px;
            cursor: pointer;
            transition: background 0.3s ease;
            border-radius: 0px;
            text-decoration: none;
			/*display: inline-block;*/
			font-size:14px;
			font-family: "optima-lt-pro", sans-serif;
			font-weight: 300;
			font-style: normal;
			width:100%;
			text-align:left;
		}

        .panel-btn:hover {
            background: #222;
        }


        .panel-btn-nonjs {
            /*background: #333;*/
			background: none;
			border:0px;
            border-bottom: 1px solid #222;
            color: white;
            padding: 12px 20px 12px 0px;
            margin: 0px 0px 0px 0px;
            cursor: pointer;
            transition: background 0.3s ease;
            border-radius: 0px;
            text-decoration: none;
			/*display: inline-block;*/
			font-size:14px;
			font-family: "optima-lt-pro", sans-serif;
			font-weight: 300;
			font-style: normal;
			width:100%;
			text-align:left;
		}

        .panel-btn-nonjs:hover {
            background: #222;
        }




		.panel-inner h3{
			font-size:32px;
			font-family: "optima-lt-pro", sans-serif;
			font-weight: 500;
			font-style: normal;
			color:#d7df23;
		}

		.panel-content h2{
			font-size:24px;
			font-family: "optima-lt-pro", sans-serif;
			font-weight: 400;
			font-style: normal;
			color:#d7df23;
		}





.content-loader {
  color: #ccc;
  text-align: center;
  margin-top: 2rem;
  font-style: italic;
}

.content-area {
  position: relative;
  color: #eee;
  padding: 2rem;
  font-family: "Crimson Text", serif;
  overflow-y: auto;
  max-height: 80vh;
  backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  animation: fadeIn 0.4s ease;
}

.close-content {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.close-content:hover {
  background: rgba(255,255,255,0.4);
}




@media (max-width: 768px) {
	
	.pc{
		display:none;
	}
	
	
	#overlay {
	  position: fixed;
	  inset: var(--overlay-padding, 5px);
	  background: rgba(0,0,0,0.9);
	  display: none;
	  align-items: center;
	  justify-content: center;
	  z-index: 10000;
	}

	#overlay.slider-mode {
	  display: flex;
	  align-items: center;   /* dikey ortalama */
	  justify-content: center;
	  overflow: hidden;
	}

	#overlay.text-mode {
	  display: flex;
	  align-items: flex-start; /* yukarıdan başla */
	  justify-content: center;
	  overflow: auto;          /* scroll aktif */
	  padding: 5px;
		z-index: 10000;
	}
	
	
	#close-overlay {
	  position: fixed;
	  top: var(--overlay-padding, 10px);
	  right: var(--overlay-padding, 10px);
	  background: none;
	  border: 1px solid #c49d48;
	  color: #c49d48;
	  font-size: 1.5rem;
	  cursor: pointer;
	  padding: 4px 10px;
	  z-index:100000;
	}
	
	
	.panel-content{
		padding: 0.5rem;
	}
	
	.panel-inner{
		padding: 0.5rem;
	}
	
	
}