/* ============================================
   CLEAN GROUP — Geçiş Sayfası
   assets/index.css
   Marka renkleri: Teal #226671 · Amber #e58810
   ============================================ */

:root {
    --teal-950: #0b2b30;
    --teal-800: #123f47;
    --teal-700: #1a505a;
    --teal: #226671;
    --teal-400: #5b98a1;
    --teal-200: #b9d6da;

    --amber-900: #7a4a08;
    --amber-700: #b8690a;
    --amber: #e58810;
    --amber-400: #f0ab55;
    --amber-200: #f7d6a6;

    --cream: #faf7f1;
    --cream-2: #fcfaf6;
    --ink: #1c2321;
    --stone: #5c5a51;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.font-serif-custom { font-family: 'Cormorant Garamond', serif; }
.font-script {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
}

.text-teal { color: var(--teal); }
.text-amber { color: var(--amber); }

/* ---------- Split backgrounds ---------- */
.bg-split-left,
.bg-split-right {
    position: relative;
    background-size: cover;
    background-position: center;
}

.bg-split-left { background-image: url('../uploads/index/cleanspasportarkaplan.png'); }
.bg-split-right { background-image: url('../uploads/index/cleanbungalovotel.png'); }

/* Sadece yazıların okunabilmesi için çok hafif siyahlık - Fotoğrafı bozmaz */
.bg-split-left::after,
.bg-split-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.5) 100%);
}

/* Çizgi sadece kartların arasına hapsedildi */
.seam-line-v {
    position: absolute;
    top: -30px; 
    bottom: -30px; 
    left: 50%; 
    width: 1px; 
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--teal-400) 20%, var(--cream) 50%, var(--amber-400) 80%, transparent);
    box-shadow: 0 0 24px rgba(250, 247, 241, 0.35);
    z-index: 5;
}

/* Signature medallion — the union mark at the seam */
.union-mark {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--cream-2);
    box-shadow: 0 12px 30px rgba(6, 16, 18, 0.35), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
.union-mark::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    padding: 1.5px;
    background: conic-gradient(from 200deg, var(--teal) 0deg, var(--teal-400) 90deg, var(--amber-400) 180deg, var(--amber) 270deg, var(--teal) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-ring 10s linear infinite;
}
@keyframes rotate-ring {
    to { transform: rotate(360deg); }
}
.union-mark svg { position: relative; z-index: 2; }

/* ---------- Glass cards, premium refinement ---------- */
.glass-card {
    background: linear-gradient(155deg, rgba(252, 250, 246, 0.94) 0%, rgba(250, 247, 241, 0.86) 100%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 10px rgba(11, 43, 48, 0.06), 0 25px 50px -12px rgba(11, 43, 48, 0.35);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
    position: relative;
}
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(155deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 40%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 10px rgba(11, 43, 48, 0.08), 0 35px 60px -12px rgba(11, 43, 48, 0.45);
}
.card-teal:hover { border-color: rgba(34, 102, 113, 0.55); }
.card-amber:hover { border-color: rgba(229, 136, 16, 0.55); }

/* Logo Medallion */
.logo-medallion {
    width: 125px;
    height: 125px;
    border-radius: 9999px;
    background: var(--cream-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -75px;
    box-shadow: 0 18px 34px rgba(11, 43, 48, 0.28), 0 0 0 1px rgba(255,255,255,0.7) inset;
    position: relative;
    z-index: 5;
}
.logo-medallion::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 9999px;
    border: 1.5px solid transparent;
}
.card-teal .logo-medallion::after { border-color: rgba(34, 102, 113, 0.4); }
.card-amber .logo-medallion::after { border-color: rgba(229, 136, 16, 0.4); }
.logo-medallion img { max-height: 85px; max-width: 105px; object-fit: contain; }

@media (max-width: 767px) {
    .logo-medallion { width: 105px; height: 105px; margin-top: -60px; }
    .logo-medallion img { max-height: 65px; max-width: 85px; }
}

/* Divider rule under the medallion */
.card-rule {
    width: 34px;
    height: 2px;
    border-radius: 2px;
    margin: 12px auto 14px;
}
.card-teal .card-rule { background: linear-gradient(90deg, var(--teal-400), var(--teal)); }
.card-amber .card-rule { background: linear-gradient(90deg, var(--amber-400), var(--amber)); }

/* Icon chips within cards */
.icon-chip {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.card-teal .icon-chip { background: rgba(34, 102, 113, 0.09); color: var(--teal); }
.card-amber .icon-chip { background: rgba(229, 136, 16, 0.1); color: var(--amber-700); }

/* Buttons */
.btn-teal, .btn-amber {
    position: relative;
    overflow: hidden;
    color: #fdfaf5;
    box-shadow: 0 10px 24px -6px rgba(11, 43, 48, 0.4);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}
.btn-teal { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-700) 100%); }
.btn-amber { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-700) 100%); box-shadow: 0 10px 24px -6px rgba(122, 74, 8, 0.45); }
.btn-teal::before, .btn-amber::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    pointer-events: none;
}
.btn-teal:hover, .btn-amber:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-teal:active, .btn-amber:active { transform: translateY(0); }

/* ---------- Footer ---------- */
footer {
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
    border-top: none;
}
.footer-seam {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal) 0%, var(--amber) 50%, var(--teal) 100%);
    opacity: 0.9;
}
.feature-icon { width: 30px; height: 30px; flex-shrink: 0; }
.feature-icon.i-teal { color: var(--teal); }
.feature-icon.i-amber { color: var(--amber-700); }

/* ---------- Entrance choreography ---------- */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fade-up 0.9s var(--ease) both; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.32s; }
.reveal-4 { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; }
    .union-mark::before { animation: none; }
    .glass-card, .btn-teal, .btn-amber { transition: none; }
}