/* Responsive Styles */

/* Tablet Layout (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }

    .hero-left {
        padding-right: 2rem;
    }

    .masthead {
        padding-top: 20px;
    }

    .masthead-top {
        width: calc(100% - 36px);
    }


    .nav-list {
        gap: 1.5rem;
    }

    .nav-list a {
        font-size: 0.85rem;
    }
}

/* Mobile Layout (max-width: 768px) */
@media screen and (max-width: 768px) {
    body {
        padding: 1rem;
    }

    /* Hide Desktop Headers */
    .desktop-masthead {
        display: none;
        padding-top: 14px;
    }

    .masthead-top {
        width: calc(100% - 20px);
    }

    .desktop-nav-links {
        display: none;
    }

    /* Show Mobile Header */
    .mobile-header {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    /* Hamburger Animation */
    .menu-toggle.is-active .hamburger {
        background-color: transparent;
    }

    .menu-toggle.is-active .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-toggle.is-active .hamburger::after {
        transform: rotate(-45deg);
        bottom: 0;
    }

    /* Hero Responsive */
    .hero-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hero-left {
        border-right: none;
        border-bottom: none;
        padding-right: 0;
        padding-bottom: 0;
    }

    .hero-image {
        width: 82%;
        max-width: 320px;
        margin: 24px auto 0;
        aspect-ratio: 2 / 3;
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .memorial-headline {
        margin-top: 0;
        margin-bottom: 0.8rem;
    }

    /* Tek sütuna düşünce sağ kolon tam genişliğe çıkıyor,
       o yüzden clamp tabanlarının biraz üstündeyiz. */
    .memorial-headline__lead {
        font-size: 20px;
        line-height: 1.5;
    }

    .memorial-headline__name {
        font-size: 40px;
        /* Mobilde metin ortalı; optik kaydırma burada gerekmiyor. */
        margin-left: 0;
    }

    .category-label {
        margin: 0 auto 1.5rem auto;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 0;
    }

    .hero-left {
        border-right: none;
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }

    .hero-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: none;
        padding-bottom: 0;
        margin-top: 16px;
        margin-bottom: 24px;
    }

    .metadata-line {
        display: inline-block;
        font-size: 16px;
        letter-spacing: 0.04em;
        margin: 0;
        border: none;
        padding: 0;
    }

    .editorial-link {
        display: inline-block;
        margin: 0;
    }

    /* Quote Responsive */
    .featured-quote {
        padding: 26px 0;
        margin: 28px 0 32px 0;
        text-align: center;
    }

    .featured-quote blockquote {
        font-size: clamp(26px, 6vw, 36px);
        line-height: 1.25;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .featured-quote cite {
        font-size: 16px;
        letter-spacing: 0.08em;
        margin-top: 14px;
        display: block;
    }

    /* ==========================================================================
       ABOUT PAGE MOBILE STYLES (hakkinda.html)
       ========================================================================== */

    .about-page {
        padding: 0 20px;
    }

    .about-rule {
        margin: 2rem 0;
    }

    .grid-12 {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Override column spans and padding for mobile */
    .col-3,
    .col-4,
    .col-5,
    .col-7,
    .col-8,
    .col-9,
    .col-12 {
        width: 100%;
        padding: 0;
        border: none;
    }

    .feature-text-wrapper {
        padding-left: 0;
        padding-top: 1rem;
    }

    .feature-image-wrapper,
    .roots-img,
    .match-img {
        height: auto;
        max-height: 450px;
        aspect-ratio: 4/5;
        text-align: center;
    }

    .intro-portrait-col.feature-image-wrapper {
        aspect-ratio: auto;
        max-height: none;
        margin-bottom: 0;
    }

    .intro-mobile-flex {
        align-items: center;
        text-align: center;
        gap: 0.5rem !important;
    }

    .portrait-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .portrait-img {
        max-width: 65%;
        /* Make the first image noticeably smaller */
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        display: block;
    }

    .inline-archive-img {
        text-align: center;
        margin: 1.5rem auto;
    }

    .article-text.two-columns {
        column-count: 1;
    }

    .section-headline {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .intro-headline {
        font-size: clamp(1.5rem, 5vw, 1.9rem) !important;
        margin-top: 1rem;
    }

    .section-headline.large {
        font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    }

    .form-intro {
        font-size: 1.05rem !important;
        margin-top: 1rem;
    }

    .page-header {
        margin-top: 2rem;
    }

    .section-headline.small {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    /* New Pages Mobile Overrides */
    .page-container {
        padding: 0 20px;
    }

    .editorial-entry {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .entry-img {
        max-height: 400px;
        aspect-ratio: 4/5;
    }

    .entry-title {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }

    .form-action {
        text-align: center;
    }

    .editorial-button {
        width: 100%;
    }

    .portrait-img,
    .column-portrait-img {
        max-height: 480px;
        object-fit: cover;
    }

    .landscape-img,
    .archive-img {
        height: auto;
        object-fit: contain;
    }

    .about-img {
        margin-top: 18px;
        margin-bottom: 22px;
    }

    .image-caption {
        font-size: 18px;
        line-height: 1.45;
    }

    .inline-archive-img {
        width: 90%;
        max-width: 420px;
        margin: 18px auto 22px;
    }

    /* Guestbook Mobile */
    .guestbook-stream {
        height: auto;
    }

    .guestbook-entry {
        padding: 20px 22px;
    }

    .guestbook-entry.photos-0,
    .guestbook-entry.photos-1,
    .guestbook-entry.photos-2,
    .guestbook-entry.photos-3-plus {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .guestbook-entry.photos-1 .guestbook-photo-col,
    .guestbook-entry.photos-2 .guestbook-photo-col,
    .guestbook-entry.photos-3-plus .guestbook-photo-gallery {
        order: -1;
    }

    .guestbook-entry.photos-2 .guestbook-photo-col {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    /* Mobile 3+ photos: stack vertically, preserve natural aspect ratio */
    .guestbook-entry.photos-3-plus .guestbook-photo-gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .guestbook-photo {
        /* Tasmaya karsi guvence: hicbir fotograf sayfayi yana kaydirmasin. */
        max-width: 100%;
    }

    /* 2-sutunlu izgara, 4/3 iyi uyuyor. 3+ fotograflar mobil'de inline style ile dogal oranini koruyacak */
    .guestbook-entry.photos-2 .guestbook-photo {
        aspect-ratio: 4 / 3;
    }


    .gozlem-sohbet-img {
        width: 100%;
        height: auto;
        margin-top: 22px;
    }

    /* Mobile reading order for opening section */
    .intro-mobile-flex {
        display: flex;
        flex-direction: column;
    }

    .intro-portrait-col,
    .intro-text-col {
        display: contents;
    }

    .intro-headline {
        order: 1;
        padding-top: 0;
    }

    .portrait-content {
        order: 2;
    }

    .intro-text-body {
        order: 3;
    }

    .inline-archive-img {
        order: 4;
    }

    /* ==========================================================================
       GLOBAL IMAGE LIGHTBOX SYSTEM (MOBILE)
       ========================================================================== */
    .global-lightbox__image {
        max-width: 94vw;
        max-height: 84vh;
    }

    .global-lightbox__close {
        top: 16px;
        right: 16px;
        font-size: 32px;
        padding: 12px;
        /* larger touch target */
    }

    .global-lightbox__prev,
    .global-lightbox__next {
        font-size: 36px;
        padding: 12px;
    }

    .global-lightbox__prev {
        left: 8px;
    }

    .global-lightbox__next {
        right: 8px;
    }

    .global-lightbox__counter {
        top: 16px;
        left: 16px;
    }

    .global-lightbox__caption {
        font-size: 0.9rem;
        padding: 0 16px;
    }

    /* Form Labels (Mobile) */
    .form-group label {
        font-size: 0.8rem;
    }

    .security-title {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   ZİYARETÇİ DEFTERİ RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 900px) {
    .guestbook-masthead {
        margin-bottom: 2.6rem;
        padding-top: 1.6rem;
    }

    .guestbook-standfirst {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

@media screen and (max-width: 600px) {
    .guestbook-standfirst {
        align-items: stretch;
        text-align: left;
    }

    .guestbook-standfirst .guestbook-action-btn {
        text-align: center;
    }

    .guestbook-meta__rule {
        width: 72px;
        margin-bottom: 0.85rem;
    }

    .guestbook-attribution {
        gap: 0.3rem;
    }

    .guestbook-relationship {
        font-size: 15px;
    }

    .guestbook-date {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   AİLESİNDEN PAGE RESPONSIVE REDESIGN
   ========================================================================== */
@media screen and (max-width: 900px) {
    .family-letter-wrapper {
        padding: 4rem 3.5rem 3.4rem;
    }

    .letter-pullquote {
        max-width: 26em;
        margin-bottom: 1.6rem;
    }
}

@media screen and (max-width: 768px) {
    .family-letter-wrapper {
        padding: 5.2rem 1.6rem 3.4rem;
        margin: 1rem auto 2rem auto;
    }

    .letter-masthead {
        margin-bottom: 1.1rem;
    }

    .letter-pullquote {
        padding: 0.55rem 0;
        margin-bottom: 1.1rem;
    }


    .family-letter-body {
        font-size: 1.3rem;
        line-height: 1.72;
    }

    .letter-signoff {
        font-size: 1.3rem;
    }

    /* İmza: masaüstü alt sınırı (29px) mobilde fazla iri kalıyor.
       Sağ boşluk çerçeveye yapışmasını önlüyor. */
    .letter-signature {
        margin-right: 0.9rem;
    }

    .letter-signature__name {
        font-size: 25px;
    }

    .letter-signature__role {
        font-size: 17px;
    }

    .letter-signature__rule {
        width: 112px;
    }
}

@media screen and (max-width: 480px) {
    .family-letter-wrapper {
        padding: 4.6rem 1.25rem 3rem;
    }

    .letter-byline__role {
        font-size: 15px;
    }

    .letter-pullquote {
        padding: 0.45rem 0;
    }

    .letter-signature {
        margin-right: 0.5rem;
    }

    .letter-signature__name {
        font-size: 23px;
    }

    .letter-signature__role {
        font-size: 16px;
    }

    .letter-signature__rule {
        width: 96px;
    }
}