/* ============================================================
   SASGroup — multi-page components (dropdown, sub-pages, admin)
   Loaded after styles.css. Uses the same design tokens.
   ============================================================ */

/* ---------- Scroll progress bar (shared) ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; background:var(--grad-brand); transform:scaleX(0); transform-origin:0 50%; will-change:transform; }

/* ---------- Nav: Layihələr mega-dropdown ---------- */
.nav-links{ position:static; }
.has-dropdown{ position:relative; }
.has-dropdown > a, .nav-trigger{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-weight:600; font-size:14.5px; color:var(--ink-700); padding:10px 14px; border-radius:999px;
  background:none; border:0; font-family:var(--font-body); transition:color .2s ease, background .2s ease;
}
.has-dropdown > a:hover, .nav-trigger:hover, .has-dropdown.open .nav-trigger{ color:var(--accent-600); background:var(--accent-soft); }
.nav-trigger .chev{ width:14px; height:14px; transition:transform .25s ease; }
.has-dropdown.open .nav-trigger .chev{ transform:rotate(180deg); }
/* ---- Full-width mega: opens as one continuous container with the navbar ---- */
.nav-inner{ position:relative; }
.has-dropdown.has-mega{ position:static; } /* mega spans the whole bar — positioned vs .nav-inner */
.mega{
  position:absolute; top:calc(100% - 1px); left:-1px; right:-1px;
  background:#fff; border:1px solid var(--glass-border); border-top-color:transparent;
  border-radius:0 0 26px 26px;
  box-shadow:0 34px 60px -14px rgba(22,44,98,.22), 0 14px 26px rgba(22,44,98,.08);
  padding:22px 30px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease; z-index:110;
}
.has-dropdown.has-mega.open .mega{ opacity:1; visibility:visible; pointer-events:auto; }
/* the navbar pill morphs into the top of the same card while the mega is open */
.nav-inner:has(.has-mega.open){ border-radius:26px 26px 0 0; background:#fff; border-bottom-color:transparent; box-shadow:0 -6px 24px rgba(22,44,98,.05); }

.mega-top{ display:flex; align-items:center; gap:26px; padding:0 4px 16px; border-bottom:1px solid var(--hairline); margin-bottom:18px; }
.mega-title{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink); }
.mega-tabs{ display:flex; gap:8px; }
.mega-tabs button{ border:0; background:var(--accent-soft); color:var(--accent-700); font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 18px; border-radius:999px; transition:.2s; }
.mega-tabs button.active{ background:var(--grad-brand); color:#fff; }

.mega-body{ display:grid; grid-template-columns:1.45fr 1fr; gap:26px; align-items:stretch; }
.mega-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; align-content:center; }
.mega-item, .mega-all{ display:flex; align-items:center; gap:16px; padding:12px; border-radius:var(--r); transition:background .2s ease; }
.mega-item:hover, .mega-all:hover{ background:var(--accent-soft); }
.mega-item.hidden{ display:none; }
.mega-all{ grid-column:1 / -1; margin-top:6px; border-top:1px solid var(--hairline); border-radius:0 0 var(--r) var(--r); padding-top:16px; }
.mega-thumb{ width:76px; height:68px; border-radius:16px; object-fit:cover; flex:none; background:var(--grad-sky); }
.mega-item b{ font-family:var(--font-display); font-size:18px; color:var(--ink); }
.mega-all-ic{ width:76px; height:68px; border-radius:16px; flex:none; display:grid; place-items:center; background:var(--grad-brand); color:#fff; }
.mega-all-ic svg{ width:30px; height:30px; }
.mega-all b{ font-family:var(--font-display); font-size:18px; color:var(--ink); display:block; }
.mega-all .cnt{ font-size:14px; color:var(--accent-600); }
.mega-promo{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff; }
.mega-promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mega-promo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,18,36,.30) 0%, rgba(8,18,36,.55) 45%, rgba(8,18,36,.9) 100%); z-index:1; }
.mega-promo .pc{ position:relative; z-index:2; }
.mega-promo h4{ color:#fff; font-size:20px; }
.mega-promo p{ color:rgba(255,255,255,.88); font-size:13px; line-height:1.45; margin:6px 0 14px; }
.mega-promo .btn{ align-self:flex-start; padding:9px 18px; font-size:13px; }

/* ---------- Simple "Haqqımızda" dropdown ---------- */
.subnav{
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(8px);
  min-width:216px; padding:8px;
  background:rgba(255,255,255,.98); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border); border-radius:var(--r);
  box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:120;
}
.has-dropdown.open .subnav{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.subnav a{ display:block; padding:10px 14px; border-radius:var(--r-sm); font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink-700); transition:background .2s ease, color .2s ease; }
.subnav a:hover{ background:var(--accent-soft); color:var(--accent-700); }

@media (max-width:1080px){ .mega, .subnav{ display:none!important; } }

/* ---------- Sub-page header / hero ---------- */
.page-hero{ padding-top:calc(var(--nav-h) + 70px); padding-bottom:30px; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent-600); }
.breadcrumb .sep{ opacity:.5; }
.page-title{ font-size:clamp(30px,4vw,48px); letter-spacing:-.03em; }
.page-hero .lead{ max-width:620px; }

/* ---------- Prose / generic content ---------- */
.prose{ max-width:760px; color:var(--ink-700); }
.prose p{ margin-bottom:16px; font-size:16px; }
.prose h3{ font-size:22px; margin:28px 0 12px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.grid-2 img, .media-rounded{ width:100%; border-radius:var(--r-xl); box-shadow:var(--sh); display:block; }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.info-card{ background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-xl); padding:28px; }
.info-card .ic{ width:52px; height:52px; border-radius:15px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:16px; }
.info-card .ic svg{ width:26px; height:26px; color:var(--accent-600); }
.info-card h3{ font-size:18px; margin-bottom:8px; }
.info-card p{ color:var(--muted); font-size:14.5px; }

/* timeline */
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--hairline); }
.timeline li{ position:relative; padding-bottom:26px; }
.timeline li::before{ content:""; position:absolute; left:-25px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--grad-brand); box-shadow:0 0 0 4px var(--accent-soft); }
.timeline b{ font-family:var(--font-display); display:block; }
.timeline span{ color:var(--muted); font-size:14px; }

/* ---------- Project detail ---------- */
.pd-hero{ display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:start; }
/* Horizontal, swipeable gallery — images scroll one at a time instead of stacking */
.pd-gallery{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:12px; scrollbar-width:thin; scrollbar-color:rgba(37,99,235,.45) transparent;
}
.pd-gallery img{
  flex:0 0 100%; max-width:100%; aspect-ratio:16/11; object-fit:cover;
  border-radius:var(--r-lg); display:block; scroll-snap-align:center; background:var(--grad-sky);
}
.pd-gallery::-webkit-scrollbar{ height:8px; }
.pd-gallery::-webkit-scrollbar-track{ background:var(--hairline-2); border-radius:999px; }
.pd-gallery::-webkit-scrollbar-thumb{ background:rgba(37,99,235,.4); border-radius:999px; }
.pd-gallery::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
/* Prev/next arrow controls (injected by app.js) */
.pd-gallery-wrap{ position:relative; }
.pd-nav{ position:absolute; top:calc(50% - 6px); transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92); box-shadow:var(--sh); display:grid; place-items:center; cursor:pointer; z-index:3; transition:background .2s ease, transform .2s ease, opacity .2s ease; }
.pd-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.pd-nav svg{ width:20px; height:20px; color:var(--ink); }
.pd-nav.prev{ left:12px; }
.pd-nav.next{ right:12px; }
.pd-nav[disabled]{ opacity:0; pointer-events:none; }
@media (hover:none){ .pd-nav{ display:none; } }
.pd-side{ background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-xl); padding:26px; align-self:start; box-shadow:var(--sh); position:sticky; top:calc(var(--nav-h) + 24px); }
.pd-price{ font-family:var(--font-display); }
.pd-price b{ display:block; font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--ink); }
.pd-price .cur{ color:var(--accent); }
.pd-price small{ display:block; margin-top:5px; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--muted); }
.spec-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; }
.spec{ }
.spec span{ font-size:12.5px; color:var(--muted); display:block; }
.spec b{ font-family:var(--font-display); font-size:16px; }
.amenities{ display:flex; flex-wrap:wrap; gap:10px; }
.amenities .am{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--hairline-2); border-radius:999px; padding:9px 15px; font-size:13.5px; font-weight:500; }
.amenities .am svg{ width:16px; height:16px; color:var(--accent); }
.plan-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.plan-tabs button{ border:1px solid var(--hairline); background:#fff; font-family:var(--font-display); font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px; }
.plan-tabs button.active{ background:var(--grad-brand); color:#fff; border-color:transparent; }

/* ---------- News ---------- */
.news-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article{ max-width:740px; margin-inline:auto; }
.article .cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-xl); margin-bottom:26px; }

/* ---------- Career ---------- */
.job{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-lg); padding:22px 26px; margin-bottom:14px; transition:box-shadow .25s ease, transform .25s ease; }
.job:hover{ box-shadow:var(--sh); transform:translateY(-2px); }
.job h3{ font-size:18px; }
.job .tags{ display:flex; gap:10px; margin-top:6px; color:var(--muted); font-size:13.5px; flex-wrap:wrap; }
.perk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.field-group{ display:flex; flex-direction:column; gap:16px; }
.input, .textarea, .select-native{ width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--hairline); border-radius:var(--r); padding:14px 16px; transition:border-color .2s ease, box-shadow .2s ease; }
.select-native{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2351617e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; }
.input:focus, .textarea:focus, .select-native:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.textarea{ min-height:130px; resize:vertical; }
.field-label{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px; display:block; }
.contact-info .line{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info .line .ic{ width:46px; height:46px; border-radius:14px; background:var(--accent-soft); display:grid; place-items:center; flex:none; }
.contact-info .line .ic svg{ width:22px; height:22px; color:var(--accent-600); }
.contact-info .line b{ font-family:var(--font-display); display:block; }
.contact-info .line span{ color:var(--muted); font-size:14.5px; }
.map-embed{ width:100%; aspect-ratio:16/7; border:0; border-radius:var(--r-xl); box-shadow:var(--sh); margin-top:24px; background:var(--canvas); }
.form-note{ font-size:13px; color:var(--muted); }
.form-ok{ display:none; background:var(--green-soft); color:var(--green); border-radius:var(--r); padding:14px 16px; font-weight:600; }

/* ---------- Admin panel ---------- */
.admin-body{ background:#f4f6fb; }
.admin{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.admin-side{ background:#0a1526; color:rgba(255,255,255,.7); padding:22px 16px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; }
.admin-side .brand{ padding:6px 10px 18px; }
.admin-side .brand-word{ color:#fff; }
.admin-nav a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.72); transition:.2s; }
.admin-nav a svg{ width:18px; height:18px; }
.admin-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.admin-nav a.active{ background:var(--grad-brand); color:#fff; }
.admin-side .foot{ margin-top:auto; font-size:12.5px; padding:10px; }
.admin-main{ padding:24px 30px 60px; }
.admin-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.admin-top h1{ font-size:24px; }
.admin-user{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hairline-2); border-radius:999px; padding:6px 14px 6px 6px; }
.admin-user .av{ width:34px; height:34px; border-radius:50%; background:var(--grad-brand); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:13px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:26px; }
.kpi{ background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-lg); padding:20px; }
.kpi .ic{ width:42px; height:42px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:14px; }
.kpi .ic svg{ width:21px; height:21px; color:var(--accent-600); }
.kpi b{ font-family:var(--font-display); font-size:28px; display:block; }
.kpi span{ color:var(--muted); font-size:13.5px; }
.panel{ background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-lg); padding:22px; margin-bottom:22px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-head h2{ font-size:18px; }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th{ text-align:left; color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; padding:10px 12px; border-bottom:1px solid var(--hairline); }
.table td{ padding:13px 12px; border-bottom:1px solid var(--hairline-2); }
.table tr:last-child td{ border-bottom:0; }
.table .thumb{ width:46px; height:36px; border-radius:9px; object-fit:cover; }
.badge{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge.ongoing{ color:var(--accent-700); background:var(--accent-soft); }
.badge.done{ color:var(--green); background:var(--green-soft); }
.icon-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--hairline); background:#fff; display:inline-grid; place-items:center; }
.icon-btn svg{ width:16px; height:16px; color:var(--muted); }
.icon-btn:hover{ border-color:var(--accent); }
.icon-btn:hover svg{ color:var(--accent); }
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card{ width:100%; max-width:400px; background:#fff; border:1px solid var(--hairline-2); border-radius:var(--r-2xl); padding:36px; box-shadow:var(--sh-lg); }

@media (max-width:1024px){
  .grid-2, .pd-hero, .contact-grid{ grid-template-columns:1fr; }
  .value-grid, .news-list{ grid-template-columns:1fr 1fr; }
  .perk-grid{ grid-template-columns:1fr 1fr; }
  .admin{ grid-template-columns:1fr; }
  .admin-side{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; }
  .admin-nav{ display:flex; flex-wrap:wrap; gap:4px; }
  .admin-side .foot{ display:none; }
}
@media (max-width:680px){
  .value-grid, .news-list, .perk-grid, .spec-list, .kpi-grid{ grid-template-columns:1fr; }
  .job{ flex-direction:column; align-items:flex-start; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
}

/* ===== Admin: project add/edit modal ===== */
.admin-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.admin-modal.open{ display:flex; }
.admin-modal-backdrop{ position:absolute; inset:0; background:rgba(8,16,33,.55); }
.admin-modal-card{ position:relative; width:100%; max-width:560px; background:#fff; border-radius:20px; box-shadow:0 30px 70px rgba(8,16,33,.35); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.admin-modal-card form{ display:flex; flex-direction:column; min-height:0; }
.admin-modal-head{ padding:22px 26px 16px; border-bottom:1px solid var(--hairline); }
.admin-modal-head h3{ font-family:var(--font-display); font-size:21px; font-weight:800; margin:0 0 4px; color:var(--ink); }
.admin-modal-head p{ margin:0; font-size:13px; color:var(--muted); }
.admin-modal-body{ padding:20px 26px; overflow:auto; }
.admin-modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px 16px; }
.admin-modal-grid .field{ margin:0; display:flex; flex-direction:column; gap:6px; }
.admin-modal-grid .field.span-2{ grid-column:1 / -1; }
.admin-modal-card label{ font-size:13px; font-weight:600; color:var(--ink-700); }
.admin-modal-card input, .admin-modal-card select{ width:100%; padding:11px 13px; border:1px solid var(--hairline-2); border-radius:12px; font:inherit; font-size:14px; background:#fff; color:var(--ink); }
.admin-modal-card input:focus, .admin-modal-card select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.admin-modal-actions{ display:flex; gap:10px; padding:16px 26px; border-top:1px solid var(--hairline); background:#fff; }
.admin-modal-actions .btn{ flex:1; justify-content:center; }

/* image uploader */
.uploader{ display:flex; flex-direction:column; gap:8px; }
.uploader .up-drop{ position:relative; width:100%; display:flex; align-items:center; gap:14px; text-align:left; padding:16px; border:1.5px dashed var(--hairline-2); border-radius:14px; background:#fafbfc; cursor:pointer; transition:border-color .15s, background .15s; }
.uploader .up-drop:hover{ border-color:var(--accent); background:var(--accent-soft); }
.uploader .up-drop.drag{ border-color:var(--accent); background:var(--accent-soft); }
.uploader .up-drop.busy{ pointer-events:none; opacity:.7; }
.uploader .up-drop img{ width:64px; height:64px; flex:none; object-fit:cover; border-radius:10px; border:1px solid var(--hairline); background:#eef; }
.uploader .up-cta{ display:flex; flex-direction:column; gap:2px; }
.uploader .up-cta svg{ width:22px; height:22px; color:var(--accent); margin-bottom:2px; }
.uploader .up-drop.has .up-cta svg{ display:none; }
.uploader .up-cta strong{ font-size:13px; font-weight:700; color:var(--ink); }
.uploader .up-cta small{ font-size:11px; color:var(--muted); }
.uploader .up-spin{ position:absolute; right:16px; top:50%; width:18px; height:18px; margin-top:-9px; border:2px solid var(--hairline-2); border-top-color:var(--accent); border-radius:50%; opacity:0; }
.uploader .up-drop.busy .up-spin{ opacity:1; animation:upspin .7s linear infinite; }
@keyframes upspin{ to{ transform:rotate(360deg); } }

/* media library (previously uploaded images) — flex-wrap avoids grid auto-fill width collapse */
.media-lib{ display:flex; flex-direction:column; gap:8px; margin-top:4px; width:100%; }
.media-lib-label{ font-size:12px; font-weight:600; color:var(--muted); }
.media-grid{ display:flex; flex-wrap:wrap; gap:8px; width:100%; max-height:184px; overflow-y:auto; padding:2px; }
.media-thumb{ flex:0 0 64px; width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; cursor:pointer; background:#eef; transition:border-color .15s, transform .15s; }
.media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-thumb:hover{ transform:translateY(-1px); border-color:var(--hairline-2); }
.media-thumb.sel{ border-color:var(--accent); }