/* ===================================================
   exigo-logo.css — Exigoshop Logo Component
   
   Ayrı dosya: Logo tasarımını değiştirmek için
   sadece bu dosyayı düzenlemeniz yeterli.
   
   Kullanım (HTML):
   <div class="exigo-logo [boyut-class]">
       <div class="logo-text text-exi">exi</div>
       <div class="logo-ring ring-tl"></div>
       <div class="logo-ring ring-tr"></div>
       <div class="logo-text text-sh">sh</div>
       <div class="logo-ring ring-b"></div>
       <div class="logo-text text-p">p</div>
       <div class="logo-connector"></div>
   </div>
   
   Boyut classes: logo-navbar, logo-mobile, logo-auth, logo-full
   =================================================== */

/* ── Basis Container ── */
.exigo-logo {
    position: relative;
    width: 460px;
    height: 255px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #224a9a;
    user-select: none;
    transform-origin: top left;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Tekst Elementen ── */
.exigo-logo .logo-text {
    position: absolute;
    font-size: 150px;
    line-height: 1;
    margin: 0;
    letter-spacing: -6px;
    z-index: 2;
    color: #224a9a;
}

.exigo-logo .text-exi {
    top: 0;
    left: 0;
}

.exigo-logo .text-sh {
    top: 110px;
    left: 72px;
}

.exigo-logo .text-p {
    top: 110px;
    left: 340px;
}

/* ── Gouden Ringen (de "o" letters) ── */
.exigo-logo .logo-ring {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 24px solid #eaaa14;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 2;
    background: transparent;
}

/* Eerste "o" — bovenste rij, links */
.exigo-logo .ring-tl {
    top: 34px;
    left: 235px;
}

/* Tweede "o" — bovenste rij, rechts (iets groter) */
.exigo-logo .ring-tr {
    top: 30px;
    left: 335px;
    width: 96px;
    height: 96px;
    border-width: 26px;
}

/* Onderste "o" — in "shop" */
.exigo-logo .ring-b {
    top: 146px;
    left: 235px;
    width: 82px;
    height: 82px;
    border-width: 22px;
}

/* ── Verticale Verbindingsbrug ── */
.exigo-logo .logo-connector {
    position: absolute;
    top: 80px;
    left: 268px;
    width: 24px;
    height: 110px;
    background-color: #eaaa14;
    z-index: 1;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════
   SCHAAL VARIANTEN
   transform: scale() behoudt exacte verhoudingen
   width/height worden aangepast zodat de flow
   in de pagina correct blijft (geen overloop)
   ═══════════════════════════════════════════ */

/* Navbar — compact (hoogte ≈ 58px) */
.exigo-logo.logo-navbar {
    transform: scale(0.23);
    width: 106px;
    height: 58px;
}

/* Mobiel menu header — kleiner */
.exigo-logo.logo-mobile {
    transform: scale(0.19);
    width: 87px;
    height: 48px;
}

/* Auth pagina's (inloggen/registreren) — groter */
.exigo-logo.logo-auth {
    transform: scale(0.36);
    width: 166px;
    height: 92px;
}

/* Volle grootte (voor standalone gebruik) */
.exigo-logo.logo-full {
    transform: none;
    width: 460px;
    height: 255px;
}

/* ── Hover Effect (optioneel, voor klikbare logo's) ── */
a.exigo-logo:hover .logo-ring,
button.exigo-logo:hover .logo-ring {
    border-color: #d4960f;
    transition: border-color 0.2s ease;
}

a.exigo-logo:hover .logo-connector,
button.exigo-logo:hover .logo-connector {
    background-color: #d4960f;
    transition: background-color 0.2s ease;
}

a.exigo-logo .logo-ring,
a.exigo-logo .logo-connector {
    transition: all 0.2s ease;
}