/* ───────────────────────────────────────────────
   Tanda Casa · Shared English Nav (CSS)
   Used by: /en/*  (see /lib/nav-en.js)
   Selectors: .tc-nav-d* + .tc-lang-dd*
   ─────────────────────────────────────────────── */

/* ── TC-NAV-D ── */
.tc-nav-d { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-bottom:1px solid #E4E4E7; font-family:'Outfit',system-ui,sans-serif; }
.tc-nav-d-inner { max-width:1320px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:20px; }
.tc-nav-d-logo { display:flex; align-items:center; text-decoration:none; gap:10px; }
.tc-nav-d-logo img { height:60px; display:block; max-width:200px; object-fit:contain; }
.tc-nav-d-logo-text { font-size:18px; font-weight:800; color:#982063; letter-spacing:-.03em; display:none; }
.tc-nav-d-links { display:flex; gap:18px; align-items:center; }
.tc-nav-d-link { font-size:14px; color:#3F3F46; text-decoration:none; font-weight:500; transition:color .15s; white-space:nowrap; }
.tc-nav-d-link:hover { color:#982063; }
.tc-nav-d-link.is-active { color:#982063; font-weight:700; }
.tc-nav-d-lang { display:flex; align-items:center; gap:4px; margin-left:8px; font-size:12px; }
.tc-nav-d-lang a { color:#71717A; padding:4px 8px; border-radius:6px; font-weight:600; text-decoration:none; transition:background .15s, color .15s; }
.tc-nav-d-lang a:hover { background:#FAFAFA; color:#09090B; }
.tc-nav-d-lang a.active { background:#FDF2F7; color:#982063; }
.tc-nav-d-actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
.tc-nav-d-cta-rose { display:inline-flex; align-items:center; gap:7px; background:#982063; color:white !important; padding:9px 18px; border-radius:100px; font-size:13px; font-weight:700; text-decoration:none; transition:background .15s, transform .15s; }
.tc-nav-d-cta-rose:hover { background:#5E0F38; transform:translateY(-1px); }
.tc-nav-d-cta-wa { display:inline-flex; align-items:center; gap:7px; background:#25D366; color:white !important; padding:9px 16px; border-radius:100px; font-size:13px; font-weight:700; text-decoration:none; transition:background .15s; }
.tc-nav-d-cta-wa:hover { background:#1ea952; }
.tc-nav-d-cta-wa svg { width:16px; height:16px; fill:white; }
.tc-nav-d-hamburger { display:none; background:none; border:1px solid #E4E4E7; border-radius:8px; cursor:pointer; padding:8px; color:#09090B; align-items:center; }
.tc-nav-d-hamburger svg { width:22px; height:22px; }
.tc-nav-d-mobile { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(9,9,11,.96); backdrop-filter:blur(12px); z-index:200; padding:80px 32px 32px; }
.tc-nav-d-mobile.is-open { display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.tc-nav-d-mobile a { color:white; text-decoration:none; font-size:18px; font-weight:600; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.tc-nav-d-mobile a.tc-nav-d-mobile-cta { background:#982063; color:white; text-align:center; border-radius:100px; padding:14px 22px; border:none; margin-top:16px; }
.tc-nav-d-mobile a.tc-nav-d-mobile-cta.is-wa { background:#25D366; }
.tc-nav-d-mobile-langs { display:flex; gap:6px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.tc-nav-d-mobile-langs a { font-size:13px; padding:6px 10px; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:rgba(255,255,255,.75); }
.tc-nav-d-mobile-langs a.active { background:#982063; color:white; border-color:#982063; }
.tc-nav-d-mobile-close { position:absolute; top:20px; right:24px; background:none; border:none; color:white; cursor:pointer; padding:8px; }
.tc-nav-d-mobile-close svg { width:28px; height:28px; }
@media (max-width:1080px) {
  .tc-nav-d-links { gap:14px; }
  .tc-nav-d-link { font-size:13px; }
  .tc-nav-d-lang { display:none; }
}
@media (max-width:900px) {
  .tc-nav-d-cta-rose { padding:8px 14px; font-size:12px; }
  .tc-nav-d-cta-wa { padding:8px 12px; font-size:12px; }
  .tc-nav-d-cta-wa span { display:none; }
}
@media (max-width:820px) {
  .tc-nav-d-inner { padding:12px 16px; gap:12px; }
  .tc-nav-d-links { display:none; }
  .tc-nav-d-cta-rose { display:none; }
  .tc-nav-d-hamburger { display:inline-flex; }
}

/* === tc-lang-dd dropdown === */
.tc-lang-dd { position: relative; }
.tc-lang-dd-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #E4E4E7; padding: 6px 10px; border-radius: 100px; font-size: 13px; font-weight: 600; color: #3F3F46; cursor: pointer; transition: all .15s; font-family: inherit; }
.tc-lang-dd-btn:hover { border-color: #982063; color: #982063; }
.tc-lang-dd-btn svg { width: 14px; height: 14px; }
.tc-lang-dd-btn svg:first-child { opacity: .65; }
.tc-lang-dd-btn svg:last-child { opacity: .6; transition: transform .2s; }
.tc-lang-dd.is-open .tc-lang-dd-btn svg:last-child { transform: rotate(180deg); }
.tc-lang-dd-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: #fff; border: 1px solid #E4E4E7; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); padding: 6px; list-style: none; margin: 0; display: none; z-index: 100; }
.tc-lang-dd.is-open .tc-lang-dd-menu { display: block; }
.tc-lang-dd-menu li { margin: 0; padding: 0; }
.tc-lang-dd-menu a { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 14px; border-radius: 8px; text-decoration: none; color: #3F3F46; font-size: 14px; font-weight: 600; transition: background .12s, color .12s; }
.tc-lang-dd-menu a:hover { background: #FAFAFA; color: #09090B; }
.tc-lang-dd-menu a.active { background: #FDF2F7; color: #982063; }
.tc-lang-dd-menu a span { font-size: 12px; color: #71717A; font-weight: 500; margin-left: 12px; }
.tc-lang-dd-menu a.active span { color: #982063; opacity: .75; }
@media (max-width: 900px) { .tc-lang-dd { display: none; } }