/* Custom styles for Doğa Global Education Academy */

/* Site genelinde varsayılan %100 görünüm */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}
body {
    transform: none;
    transform-origin: initial;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

/* Container genel ayarları - tüm ekranlarda iç içe geçmeyi önle */
.container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive breakpoints */
/* Mobil: 0-640px */
/* Tablet: 641px-1023px */
/* 12 inç ekranlar: 1024px-1279px */
/* Desktop: 1280px+ */

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* Tüm elementlerin taşmasını önle */
* {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Bounce animation for scroll indicator */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* Hero Section Styles */
.hero-text-box {
    text-align: left;
}

@media (max-width: 1024px) {
    .hero-text-box {
        text-align: center;
    }
}

.btn--fill:hover,
.btn--fill:active {
    background-color: #0a1a2e !important;
    text-decoration: underline;
}

.btn--outline:hover,
.btn--outline:active {
    background-color: #FAFAF7 !important;
    box-shadow: inset 0px 0px 0px 3px #fff;
    text-decoration: underline;
}

.delivered-imgs img {
    outline: #FAFAF7 solid 3px;
}

.delivered-text span {
    color: #D4AF37;
}

.hero-img-box {
    grid-column: 2/3;
    grid-row: 1 / 3;
}

.hero-img {
    width: 100%;
}

@media (max-width: 1024px) {
    .hero-img-box {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Hero Section Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out 0.2s both;
}

/* 3D Carousel Styles */
#carousel-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

#drag-container, #spin-container {
    position: relative;
    display: flex;
    margin: auto;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
}

#drag-container img, #drag-container video {
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    box-shadow: 0 0 8px rgba(11, 31, 58, 0.3);
    border-radius: 0.75rem;
    object-fit: cover;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0,0,0,0.1));
}

#drag-container img:hover, #drag-container video:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0,0,0,0.15));
}

#drag-container p {
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%) rotateX(90deg);
    color: #fff;
}

#ground {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%) rotateX(90deg);
    background: -webkit-radial-gradient(center center, farthest-side , rgba(11, 31, 58, 0.1), transparent);
}

@keyframes spin {
    from{
        transform: rotateY(0deg);
    } to{
        transform: rotateY(360deg);
    }
}

@keyframes spinRevert {
    from{
        transform: rotateY(360deg);
    } to{
        transform: rotateY(0deg);
    }
}

/* Scroll Animations for Steps Section */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.step-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.step-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.arrow-connector {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.arrow-connector.visible {
    opacity: 1;
    transform: scale(1);
}

.timeline-line {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.8s ease-out, transform 1s ease-out;
}

.timeline-line.visible {
    opacity: 1;
    transform: scaleX(1);
}

/* Hover effects for step cards */
.step-card .group:hover {
    transform: translateY(-8px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fade-in-up {
        transform: translateY(20px);
    }
    
    .step-card {
        transform: translateY(30px) scale(0.98);
    }
}

/* Header: sadece tablet/mobilde dikey düzen (masaüstü lg: tek satır kalır) */
@media (max-width: 1023px) {
    header .flex.h-36,
    header .flex.flex-col.lg\:flex-row {
        flex-direction: column;
        height: auto;
    }
    header .flex.flex-col.lg\:flex-row > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem;
    }
    header .flex.flex-col.lg\:flex-row > div:last-child {
        width: 100% !important;
        padding: 1rem;
    }
}

/* Mobil için ek düzenlemeler */
@media (max-width: 640px) {
    /* Padding azalt */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Grid'leri tek sütun yap */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Tabloları scroll yap */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Butonları tam genişlik yap */
    button, .btn, a.btn {
        width: 100%;
        max-width: 100%;
    }
    
    /* Form elemanlarını tam genişlik yap */
    input, textarea, select {
        width: 100%;
        max-width: 100%;
    }
}

/* Tablet için düzenlemeler (641px-1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Masaüstü görünümü bozulmasın: genel overflow sadece mobilde (ID ile) uygulanıyor */

/* Tablet için ek optimizasyonlar */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Yatay taşmayı sadece html seviyesinde (masaüstü görünümü bozulmaz) */
html {
    overflow-x: hidden;
}

/* Tüm görseller responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Video ve iframe responsive */
video, iframe {
    max-width: 100%;
    height: auto;
}

/* Form elemanları responsive */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Tablolar için mobil scroll */
@media (max-width: 768px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    table {
        min-width: 600px;
    }
}

/* Grid sistemleri için responsive */
@media (max-width: 640px) {
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hero carousel mobil için */
@media (max-width: 768px) {
    #carousel-container {
        height: 250px !important;
    }
    
    #ground {
        width: 600px !important;
        height: 600px !important;
    }
}

/* Profil sayfası mobil düzenlemeleri */
@media (max-width: 1023px) {
    .lg\\:col-span-1,
    .lg\\:col-span-3,
    .lg\\:col-span-4 {
        grid-column: span 1 / span 1;
    }
}

/* Eğitim detay sayfası mobil düzenlemeleri */
@media (max-width: 1023px) {
    .lg\\:col-span-2 {
        grid-column: span 1 / span 1;
    }
    
    .lg\\:sticky {
        position: relative;
        top: auto;
    }
}

/* Tablolar mobil için */
@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    thead, tbody, tr {
        display: block;
    }
    
    th, td {
        display: block;
        text-align: left;
        padding: 0.5rem;
    }
    
    th {
        font-weight: bold;
        border-bottom: 2px solid #e5e7eb;
    }
}

/* ========== Mobil (sadece 640px altı): ID ile hedeflenen alanlar, masaüstü bozulmaz ========== */
@media (max-width: 640px) {
    
    /* Logo: alanı büyütmeden sadece logoyu büyüt (masaüstü header'da; mobil bar ayrı) */
    .header-logo-area {
        height: 5rem;
        min-height: 5rem;
        overflow: hidden;
    }
    .header-logo-area .header-logo-img {
        transform: scale(2);
        object-fit: contain;
    }
    
    /* #site-body: scrollbarları gizle ve yatay taşmayı kapat */
    #site-body,
    #site-body * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #site-body *::-webkit-scrollbar {
        display: none;
    }
    #site-body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* #packages-section: paket bölümünde scroll/taşma yok */
    #packages-section,
    #packages-section .container {
        overflow-x: hidden;
    }
    #packages-section .bg-white ul,
    #packages-section .bg-white .p-6,
    #packages-section .bg-white .p-8 {
        overflow: hidden;
    }
    
    /* #site-footer: mobilde ortala */
    #site-footer .grid {
        text-align: center;
    }
    #site-footer .grid > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #site-footer .border-t {
        text-align: center;
    }
    #site-footer .border-t > div {
        align-items: center;
        text-align: center;
    }
    
    /* Sadece mobilde içerik hafif küçült (ID ile sınırlı) */
    #site-body {
        font-size: 15px;
    }
    #site-body h1 { font-size: 1.5rem !important; }
    #site-body h2 { font-size: 1.35rem !important; }
    #site-body h3 { font-size: 1.15rem !important; }
}

/* Blog yazı içeriği (Quill / HTML) */
.blog-post-content h1 { font-size: 1.875rem; font-weight: 700; margin: 1.5em 0 0.5em; color: #1A1A1A; }
.blog-post-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.25em 0 0.5em; color: #1A1A1A; }
.blog-post-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1em 0 0.5em; color: #1A1A1A; }
.blog-post-content p { margin: 0.75em 0; line-height: 1.7; color: #1A1A1A; }
.blog-post-content a { color: #0B1F3A; text-decoration: underline; }
.blog-post-content a:hover { color: #4E6E8E; }
.blog-post-content ul { list-style: disc; padding-left: 1.5em; margin: 0.75em 0; }
.blog-post-content ol { list-style: decimal; padding-left: 1.5em; margin: 0.75em 0; }
.blog-post-content li { margin: 0.25em 0; }
.blog-post-content blockquote { border-left: 4px solid #0B1F3A; background: #F2F2F2; padding: 0.75em 1em; margin: 1em 0; border-radius: 0 4px 4px 0; color: #4E6E8E; }
.blog-post-content img { max-width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 1em 0; }
.blog-post-content pre, .blog-post-content code { background: #1f2937; color: #f3f4f6; padding: 0.25em 0.5em; border-radius: 4px; font-size: 0.9em; }
.blog-post-content pre { padding: 1rem; overflow-x: auto; margin: 1em 0; }
.blog-post-content pre code { padding: 0; background: none; }
.blog-post-content .ql-align-center { text-align: center; }
.blog-post-content .ql-align-right { text-align: right; }
.blog-post-content .ql-align-justify { text-align: justify; }