/* ==========================================================================
    File        : info-cards.css
    Component   : Premium Information Cards
    Version     : 1.0
    Author      : ChatGPT
    Description
    --------------------------------------------------------------------------
    Premium information cards component.
========================================================================== */

/* ==========================================================================
   - CSS VARIABLES
========================================================================== */
:root {
    /* Colors */
    --info-primary: #d7261e;
    --info-primary-hover: #bf1e17;
    --info-secondary: #1f2937;
    --info-background: #f8f9fa;
    --info-card-bg: #ffffff;
    --info-text: #1f2937;
    --info-text-light: #6b7280;
    --info-border: #e5e7eb;
    /* Shadows */
    --info-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    --info-shadow-hover: 0 20px 48px rgba(15, 23, 42, .16);
    /* Radius */
    --info-radius-section: 32px;
    --info-radius-card: 20px;
    --info-radius-pill: 999px;
    /* Spacing */
    --info-section-padding-y: 3rem;
    --info-section-padding-x: 0;
    --info-gap: 15px;
    /* Animation */
    --info-transition: .35s cubic-bezier(.4,0,.2,1);
    /* Container */
    --info-max-width: 1280px;
}

/* ==========================================================================
   - RESET
========================================================================== */
.info-section *,
.info-section *::before,
.info-section *::after {
    box-sizing: border-box;
}

.info-section img {
    display: block;
    max-width: 100%;
}

.info-section a {
    color: inherit;
    text-decoration: none;
}

.info-section button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.info-section ul,
.info-section ol {
    margin: 0;
    padding: 0;
}

.info-section p,
.info-section h1,
.info-section h2,
.info-section h3,
.info-section h4 {
    margin: 0;
}

/* ==========================================================================
   - ROOT
========================================================================== */
.info-section {
    position: relative;
    overflow: hidden;
    background: var(--info-background);
    isolation: isolate;
}

/* ==========================================================================
   - SECTION
========================================================================== */
.info-section {
    padding-top: var(--info-section-padding-y);
    padding-bottom: var(--info-section-padding-y);
    padding-left: var(--info-section-padding-x);
    padding-right: var(--info-section-padding-x);
}

    /* Arka planda çok hafif premium ışık efekti */
    .info-section::before {
        content: "";
        position: absolute;
        top: -240px;
        right: -180px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(215,38,30,.045), transparent 72% );
        pointer-events: none;
        z-index: -1;
    }

    .info-section::after {
        content: "";
        position: absolute;
        bottom: -260px;
        left: -180px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,176,0,.05), transparent 72% );
        pointer-events: none;
        z-index: -1;
    }

    /* ==========================================================================
   - CONTAINER
========================================================================== */
    .info-section > .container {
        width: 100%;
        max-width: var(--info-max-width);
        margin-inline: auto;
        position: relative;
    }

/* ==========================================================================
   - SECTION HEADER
========================================================================== */
.info-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 25px;
}

/* EYEBROW */
.info-section__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*padding: 8px 18px;
    border-radius: var(--info-radius-pill);
    border: 1px solid rgba(215,38,30,.14);
    background: linear-gradient( 180deg, rgba(215,38,30,.08), rgba(215,38,30,.03) );*/
    color: var(--info-secondary);
    font-size: 2rem;
    /*font-size: .82rem;*/
    font-weight: 600;
    /*letter-spacing: .14em;*/
    /*text-transform: uppercase;*/
    user-select: none;
    white-space: nowrap;
    /*transition: background var(--info-transition), border-color var(--info-transition);*/
    margin: 0;
    /*color: var(--map-secondary);*/
    line-height: 1.15;
    letter-spacing: -.02em;
}

/* TITLE */
/*.info-section__title {
    margin-top: 15px;
    color: var(--info-secondary);
    font-size: clamp(1.5rem,3vw, 2rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    max-width: 900px;
    text-wrap: balance;
}*/

/* DESCRIPTION */
.info-section__description {
    margin-top: 22px;
    max-width: 720px;
    color: var(--info-text-light);
    font-size: 1.08rem;
    line-height: 1.9;
    text-wrap: pretty;
}

/* ==========================================================================
   - GRID
========================================================================== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 24px;
    align-items: start;
}

/* CARD */
.info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--info-card-bg);
    border: 1px solid var(--info-border);
    border-radius: var(--info-radius-card);
    overflow: hidden;
    box-shadow: var(--info-shadow);
    transition: transform var(--info-transition), box-shadow var(--info-transition), border-color var(--info-transition), background var(--info-transition);
}

    /* LEFT BORDER */
    .info-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--info-primary);
        transition: width var(--info-transition), background var(--info-transition);
    }

    /* HOVER */
    .info-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--info-shadow-hover);
    }

        .info-card:hover::before {
            width: 8px;
        }

        .info-card:hover .info-card__title {
            color: var(--info-primary);
        }

        .info-card:hover .info-card__icon {
            transform: scale(1.08);
        }

/* HEADER BUTTON */
.info-card__header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    text-align: left;
    cursor: pointer;
}

    /* Focus */
    .info-card__header:focus-visible {
        outline: 3px solid rgba(215,38,30,.18);
        outline-offset: -3px;
    }

/* ICON */
.info-card__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, rgba(215,38,30,.10), rgba(215,38,30,.03) );
    font-size: 26px;
    transition: transform var(--info-transition), background var(--info-transition);
}

/* TITLE */
.info-card__title {
    flex: 1;
    color: var(--info-text);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.45;
    transition: color var(--info-transition);
}

/* ARROW */
.info-card__arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 34px;
    height: 34px;*/
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border-radius: 50%;
    color: var(--info-text-light);
    /*font-size: 18px;*/
    /*transition: transform var(--info-transition), color var(--info-transition), background var(--info-transition);*/
}

    .info-card__arrow svg {
        width: 18px;
        height: 18px;
        display: block;
        transition: transform var(--info-transition);
    }

/* Hover */
.info-card:hover .info-card__arrow {
    color: var(--info-primary);
    background: rgba(215,38,30,.06);
}

/* CARD CATEGORY COLORS */
.info-card--price::before {
    background: #d7261e; /* Kırmızı */
}

.info-card--location::before {
    background: #2563eb; /* Mavi */
}

.info-card--whatsapp::before {
    background: #16a34a; /* WhatsApp Yeşili */
}

.info-card--transport::before {
    background: #0891b2; /* Cyan / Güvenli Taşıma */
}

.info-card--workhours::before {
    background: #f59e0b; /* Amber / Zaman */
}

.info-card--phone::before {
    background: #4f46e5; /* Indigo */
}

.info-card--howvehicleclass::before {
    background: #6b7280; /* Kurumsal Gri */
}

.info-card--coverage::before {
    background: #15803d; /* Koyu Yeşil */
}

/* ==========================================================================
   - CARD BODY
========================================================================== */
.info-card__body {
    display: grid;
    grid-template-rows: 0fr;
    /*min-height: 0;*/
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}

.info-card__content {
    /*min-height: 0;*/
    padding: 0 28px 26px 28px;
}
/*.info-card__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}*/

/* İç sarmalayıcı Grid animasyonu sayesinde içerik yumuşak şekilde açılır. */
/*.info-card__body > * {
        overflow: hidden;
    }*/

.info-card__inner {
    min-height: 0;
    overflow: hidden;
}

/* EXPANDED STATE */
.info-card.is-open .info-card__body {
    grid-template-rows: 1fr;
}

.info-card.is-open {
    background: #fffdf8;
    border-color: rgba(215,38,30,.18);
}

    .info-card.is-open::before {
        width: 8px;
    }

    .info-card.is-open .info-card__arrow svg {
        transform: rotate(180deg);
        color: var(--info-primary);
        background: rgba(215,38,30,.08);
    }

    .info-card.is-open .info-card__title {
        color: var(--info-primary);
    }

/* CONTENT */
/*.info-card__body > div {
    padding: 0 28px 26px 100px;
}*/

/* TYPOGRAPHY */
.info-card__body p {
    color: var(--info-text-light);
    font-size: 1rem;
    line-height: 1.9;
}

    .info-card__body p + p {
        margin-top: 14px;
    }

.info-card__body strong {
    color: var(--info-secondary);
    font-weight: 700;
}

/* LIST */
.info-card__body ul {
    list-style: none;
}

.info-card__body li {
    position: relative;
    padding-left: 28px;
    color: var(--info-text-light);
    line-height: 1.9;
}

    .info-card__body li + li {
        margin-top: 10px;
    }

    .info-card__body li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .72em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--info-primary);
    }

/* SMALL NOTE */
.info-card__body small {
    display: block;
    margin-top: 16px;
    color: #8b8b8b;
    font-size: .90rem;
}

/* ==========================================================================
   - TRUST AREA
========================================================================== */
.info-trust {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
/*.info-trust {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}*/

.info-trust__item {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    gap: 10px;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--info-border);
    border-radius: 16px;
    box-shadow: var(--info-shadow);
    color: var(--info-secondary);
    font-weight: 600;
    text-align: center;
    transition: transform var(--info-transition), box-shadow var(--info-transition), border-color var(--info-transition);
}

    .info-trust__item:hover {
        transform: translateY(-4px);
        border-color: rgba(215,38,30,.18);
        box-shadow: var(--info-shadow-hover);
    }

/* ==========================================================================
   - RESPONSIVE
========================================================================== */
@media (max-width:1200px) {

    .info-grid {
        grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
    }
}

@media (max-width:992px) {

    .info-section {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .info-section__header {
        margin-bottom: 60px;
    }
}

@media (max-width:768px) {

    .info-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .info-card__header {
        padding: 22px;
    }

    .info-card__content {
        padding: 0 22px 22px 22px;
    }

    /*.info-section__title {
        font-size: 2rem;
    }*/

    .info-section__description {
        font-size: 1rem;
        line-height: 1.8;
    }

    .info-trust {
        grid-template-columns: 1fr;
    }
}

@media (max-width:576px) {

    .info-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .info-card__icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .info-card__title {
        font-size: 1rem;
    }

    .info-card__arrow {
        width: 30px;
        height: 30px;
    }

    .info-trust {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   - DARK MODE
========================================================================== */

/*@media (prefers-color-scheme: dark) {

    .info-section {
        background: #111827;
    }

    .info-card {
        background: #1f2937;
        border-color: #374151;
    }

        .info-card.is-open {
            background: #263243;
        }

    .info-card__title {
        color: #f3f4f6;
    }

    .info-card__body p,
    .info-card__body li {
        color: #d1d5db;
    }

    .info-section__description {
        color: #cbd5e1;
    }

    .info-trust__item {
        background: #1f2937;
        color: #f3f4f6;
        border-color: #374151;
    }
}
*/
/* ==========================================================================
   - REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .info-card,
    .info-card *,
    .info-trust__item {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   - RETINA
========================================================================== */

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {

    .info-card {
        border-width: .5px;
    }
}


/* ==========================================================================
   - PRINT
========================================================================== */

@media print {

    .info-section {
        background: #ffffff !important;
        padding: 20px 0;
    }

    .info-card {
        box-shadow: none;
        border: 1px solid #999;
        break-inside: avoid;
    }

    .info-card__body {
        grid-template-rows: 1fr !important;
    }

    .info-card__arrow {
        display: none;
    }

    .info-trust {
        display: none;
    }
}