@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   SMART ZUGDIDI — ერთიანი ვიზუალური სისტემა (Design System)
   დ-2026-821 · 2026-08-24
   ───────────────────────────────────────────────────────────────────
   ეს ფაილი ერთადერთი წყაროა ფერების, ზომების, დაშორებების,
   რადიუსებისა და ჩრდილებისთვის. ორივე დეველოპერი ამას იყენებს.

   წესები:
   1. ახალი ფერი ან ზომა ცვლადის გარეშე არ ემატება.
        ❌  color:#0f766e
        ✅  color:var(--ds-green-600)
   2. ახალი კომპონენტი ჯერ აქ ჩაემატება, მერე გამოიყენება გვერდზე.
   3. გვერდის inline <style> მხოლოდ იმ გვერდის განლაგებას (layout)
      ეხება — ფერს/ზომას აქედან იღებს ცვლადით.
   4. ?v= ავტომატურია (@filemtime) — ხელით აწევა აღარ საჭიროა.

   Namespace:  --ds-*  (ცვლადი)   ·   .ds-*  (კომპონენტი)
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── ბრენდის მწვანე ── */
  --ds-green-900:#0d2d2a;   /* ჰედერი, ფუტერი, მუქი სექცია */
  --ds-green-800:#134e4a;
  --ds-green-700:#0d5e58;
  --ds-green-600:#0f766e;   /* მთავარი მწვანე */
  --ds-green-500:#14b8a6;   /* აქცენტი, ბორდერი */
  --ds-green-400:#10b981;
  --ds-green-300:#5eead4;   /* ღია აქცენტი მუქ ფონზე */
  --ds-green-200:#99f6e4;   /* ბარათის ბორდერი */
  --ds-green-100:#d1fae5;   /* გვერდის ფონი */
  --ds-green-50:#e8fcf3;    /* ბარათის ზედაპირი */
  --ds-green-25:#ecfdf5;    /* ღია ზოლი */

  /* ── ოქროსფერი აქცენტი (CTA) ── */
  --ds-gold:#FFC94A;
  --ds-gold-hover:#ffd97a;
  --ds-gold-ink:#4A3500;
  --ds-gold-soft:rgba(255,201,74,.18);
  --ds-gold-faint:rgba(255,201,74,.05);
  --ds-gold-line:rgba(255,201,74,.35);

  /* ── ნეიტრალი ── */
  --ds-ink:#0f172a;
  --ds-ink-2:#1e293b;
  --ds-text:#1e293b;
  --ds-text-muted:#475569;
  --ds-text-soft:#64748b;
  --ds-line:#e2e8f0;
  --ds-white:#ffffff;

  /* ── სტატუსი ── */
  --ds-ok:#16a34a;
  --ds-warn:#f59e0b;
  --ds-err:#dc2626;

  /* ── ზედაპირის როლები ── */
  --ds-bg:var(--ds-green-100);
  --ds-surface:var(--ds-green-50);
  --ds-surface-2:var(--ds-green-25);
  --ds-surface-dark:var(--ds-green-900);
  --ds-border:var(--ds-green-200);
  --ds-on-dark:rgba(255,255,255,.72);
  --ds-glass:rgba(15,23,42,.55);          /* მინის ბარათი მუქ ფონზე */
  --ds-glass-hover:rgba(15,23,42,.68);
  --ds-glass-line:rgba(255,255,255,.20);
  --ds-glass-line-hover:rgba(255,255,255,.30);
  --ds-on-dark-line:rgba(255,255,255,.32);
  --ds-on-dark-hover:rgba(255,255,255,.12);
  /* ⚠️ მრავალსაფეხურიანი scrim/glow გრადიენტები ქვემოთ .ds-hero-შია
     ერთხელ განსაზღვრული და გვერდებზე აღარ მეორდება — წესი #1 დაცულია. */

  /* ── შრიფტი ── */
  --ds-font:'Noto Sans Georgian','Inter',sans-serif;
  --ds-fs-xs:.72rem;
  --ds-fs-sm:.82rem;
  --ds-fs-base:.95rem;
  --ds-fs-md:1.05rem;
  --ds-fs-lg:1.25rem;
  --ds-fs-h3:clamp(1.2rem,2vw,1.5rem);
  --ds-fs-h2:clamp(1.5rem,3vw,2.2rem);
  --ds-fs-h1:clamp(1.9rem,5vw,3.1rem);
  --ds-lh:1.7;
  --ds-lh-tight:1.25;
  --ds-fw-semi:600;
  --ds-fw-bold:700;
  --ds-fw-black:800;

  /* ── დაშორება (4px ბადე) ── */
  --ds-1:4px;   --ds-2:8px;   --ds-3:12px;  --ds-4:16px;
  --ds-5:20px;  --ds-6:24px;  --ds-8:32px;  --ds-10:40px;
  --ds-12:48px; --ds-16:64px; --ds-20:80px;

  /* ── რადიუსი ── */
  --ds-r-sm:8px;
  --ds-r:12px;
  --ds-r-lg:16px;
  --ds-r-xl:24px;
  --ds-r-pill:999px;
  --ds-r-2xl:36px;          /* ჰეროს ქვედა კუთხე */

  /* ── ჩრდილი ── */
  --ds-sh-sm:0 1px 3px rgba(13,45,42,.08);
  --ds-sh:0 4px 16px rgba(13,45,42,.08);
  --ds-sh-lg:0 10px 30px rgba(13,45,42,.10);
  --ds-sh-xl:0 20px 50px rgba(13,45,42,.12);

  /* ── განლაგება ── */
  --ds-container:1280px;
  --ds-hero-max:1200px;     /* ჰეროს კონტენტი ოდნავ ვიწროა კონტეინერზე */
  --ds-transition:.2s ease;
}

/* ═══ ბაზისი ═══
   მიზანმიმართულად არ ვდებთ გლობალურ *{box-sizing} reset-ს, რომ არსებულ
   გვერდებს არ შევეხოთ — მხოლოდ ჩვენს კომპონენტებს ვიცავთ. */
.ds-container,.ds-hero,.ds-hero-in,.ds-hero-text,.ds-hero-side,.ds-card,.ds-btn,
.ds-section,.ds-sec-head,.ds-table,.ds-table-wrap,.ds-field,.ds-stat-grid,.ds-hero-caption,.ds-chips,
.ds-input,.ds-select,.ds-textarea{box-sizing:border-box}

/* ═══ კონტეინერი ═══ */
.ds-container{max-width:var(--ds-container);margin:0 auto;padding:0 var(--ds-6);width:100%}

/* ═══ 1. ჰერო-სექცია ══════════════════════════════════════════════
   <section class="ds-hero">
     <video class="ds-hero-media">…</video>        (არასავალდებულო)
     <div class="ds-hero-glow"></div>              (არასავალდებულო)
     <div class="ds-hero-in">
       <div class="ds-hero-text">
         <div class="ds-hero-badge">…</div>
         <h1 class="ds-hero-title">… <span>…</span></h1>
         <p class="ds-hero-lead">… — <em>…</em></p>
         <p class="ds-hero-sub">…</p>
         <div class="ds-hero-actions">…</div>
       </div>
       <div class="ds-hero-side">…</div>           (არასავალდებულო)
     </div>
   </section>                                                       */
.ds-hero{position:relative;overflow:hidden;color:var(--ds-white);min-height:560px;
  display:flex;align-items:center;border-radius:0 0 var(--ds-r-2xl) var(--ds-r-2xl);
  background:linear-gradient(125deg,var(--ds-ink) 0%,var(--ds-ink-2) 45%,var(--ds-green-900) 100%)}
.ds-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:70% 40%;z-index:0;filter:brightness(.92) contrast(1.04) saturate(1.06)}
.ds-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(118deg,var(--ds-green-600) 0%,var(--ds-green-500) 45%,var(--ds-green-400) 100%);
  mix-blend-mode:soft-light;opacity:.30}
.ds-hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,23,42,.94) 0%,rgba(15,23,42,.88) 34%,
    rgba(15,23,42,.66) 52%,rgba(15,23,42,.46) 68%,rgba(15,23,42,.34) 100%)}
.ds-hero-glow{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.42;
  background:radial-gradient(760px 460px at 14% 20%,rgba(153,246,228,.14),transparent 70%),
             radial-gradient(600px 400px at 86% 14%,rgba(255,201,74,.10),transparent 72%)}
.ds-hero-in{position:relative;z-index:4;max-width:var(--ds-hero-max);margin:0 auto;width:100%;
  display:grid;grid-template-columns:1.12fr .88fr;gap:var(--ds-12);align-items:center;
  padding:var(--ds-20) var(--ds-10)}
.ds-hero-badge{display:inline-flex;align-items:center;gap:7px;
  background:rgba(153,246,228,.14);border:1px solid rgba(153,246,228,.32);
  color:var(--ds-green-25);font-size:.78rem;font-weight:var(--ds-fw-bold);
  padding:6px var(--ds-4);border-radius:var(--ds-r-pill);margin-bottom:var(--ds-5);
  letter-spacing:.07em;text-transform:uppercase}
.ds-hero-title{font-size:var(--ds-fs-h1);font-weight:var(--ds-fw-black);line-height:1.18;
  letter-spacing:-.02em;margin-bottom:var(--ds-4);text-shadow:0 3px 20px rgba(0,0,0,.3)}
.ds-hero-title span{color:var(--ds-green-200)}
.ds-hero-lead{position:relative;padding-inline-start:17px;margin-bottom:var(--ds-4);max-width:560px;
  font-size:clamp(1rem,1.5vw,1.22rem);font-weight:var(--ds-fw-bold);line-height:1.65;
  color:rgba(240,253,250,.90);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.ds-hero-lead::before{content:'';position:absolute;inset-inline-start:0;top:5px;bottom:5px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,var(--ds-green-200),var(--ds-green-500))}
.ds-hero-lead em{font-style:normal;
  /* ⚠️ iOS Safari: background-clip:text + color:transparent ტექსტს ერთხელ არასტერებს
     და pinch-zoom-ზე ხელახლა აღარ ხატავს — ტექსტი ქრება. ამიტომ:
     1) color რჩება ნამდვილი ფერი (fallback, ყოველთვის იკითხება)
     2) გამჭვირვალობა -webkit-text-fill-color-ით, არა color-ით
     3) სენსორულ ეკრანებზე გრადიენტი საერთოდ ითიშება           (2026-08-25) */
  color:var(--ds-green-300);
  background:linear-gradient(90deg,var(--ds-green-300),var(--ds-green-25));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ds-hero-lead em{background:none;-webkit-text-fill-color:currentColor}
}
/* სენსორული ეკრანი (iPhone/Android) — მკვეთრი ერთფეროვანი ტექსტი, zoom-ზე არ ქრება */
@media (hover:none),(max-width:980px){
  .ds-hero-lead em{background:none;-webkit-text-fill-color:var(--ds-green-300);color:var(--ds-green-300)}
}
.ds-hero-sub{font-size:var(--ds-fs-base);color:rgba(255,255,255,.80);max-width:520px;
  line-height:1.8;margin-bottom:var(--ds-8)}
.ds-hero-actions{display:flex;gap:var(--ds-3);flex-wrap:wrap}
@media(max-width:980px){
  .ds-hero{min-height:0;border-radius:0 0 var(--ds-r-xl) var(--ds-r-xl)}
  .ds-hero-in{grid-template-columns:1fr;gap:var(--ds-6);padding:var(--ds-10) var(--ds-5) var(--ds-8)}
  .ds-hero::after{background:linear-gradient(180deg,rgba(15,23,42,.92) 0%,rgba(15,23,42,.80) 55%,rgba(15,23,42,.70) 100%)}
  .ds-hero-title{font-size:clamp(1.7rem,7vw,2.4rem)}
  .ds-hero-badge{margin-bottom:var(--ds-4)}
  .ds-hero-sub{margin-bottom:var(--ds-6)}
  .ds-hero-actions .ds-btn{flex:1 1 46%;justify-content:center;padding:13px var(--ds-4)}
  .ds-hero-lead,.ds-hero-sub{max-width:none}
}
@media(prefers-reduced-motion:reduce){.ds-hero-media{display:none}}

/* ═══ 1b. ჰეროს ვარიანტები ═══════════════════════════════════════
   --compact : ქვე-გვერდის ცენტრირებული სათაური (გრიდის გარეშე)
   --photo   : ფოტო-ჰერო, ტექსტი ქვედა კიდეზე                      */
.ds-hero--compact{min-height:0;display:block;padding:var(--ds-12) 0 var(--ds-10);text-align:center}
.ds-hero--compact .ds-hero-in{display:block;padding:0 var(--ds-6);max-width:var(--ds-container)}
.ds-hero--compact .ds-hero-title{font-size:clamp(26px,3.8vw,44px);margin-bottom:var(--ds-2)}
.ds-hero--compact .ds-hero-sub{max-width:62ch;margin:0 auto;font-size:clamp(14px,1.3vw,17px)}
.ds-hero--compact::after{background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(15,23,42,.72))}
.ds-hero--compact .ds-hero-actions{justify-content:center;margin-top:var(--ds-5)}
@media(max-width:980px){.ds-hero--compact{padding:var(--ds-10) 0 var(--ds-8)}}

.ds-hero--photo{min-height:0;height:320px;display:block;border-radius:0;padding:0}
.ds-hero--photo::before,.ds-hero--photo .ds-hero-glow{display:none}
.ds-hero--photo::after{background:linear-gradient(180deg,rgba(15,23,42,.15),rgba(15,23,42,.85))}
.ds-hero--photo .ds-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.ds-hero-caption{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:var(--ds-8) 0}
.ds-hero-caption .ds-hero-title{font-size:30px;margin-bottom:6px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.ds-hero-caption .ds-hero-sub{margin-bottom:0;display:flex;align-items:center;gap:var(--ds-2);font-size:15px}
@media(max-width:980px){
  .ds-hero--photo{height:240px}
  .ds-hero-caption .ds-hero-title{font-size:22px}
  .ds-hero--photo .ds-hero-media{display:block}
}

/* ═══ 1c. ჩიპები (ჰეროს ნავიგაცია) ═══ */
.ds-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:var(--ds-5)}
.ds-chip{display:inline-flex;align-items:center;gap:var(--ds-2);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--ds-r-pill);padding:9px 18px;color:var(--ds-white);
  text-decoration:none;font-size:.87rem;font-weight:var(--ds-fw-semi);transition:all var(--ds-transition)}
.ds-chip:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.ds-chip:focus-visible{outline:2px solid var(--ds-green-300);outline-offset:3px}

/* ═══ 2. ბარათი ═══ */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);
  border-radius:var(--ds-r-lg);padding:var(--ds-6);box-shadow:var(--ds-sh);
  transition:transform var(--ds-transition),box-shadow var(--ds-transition)}
.ds-card:hover{transform:translateY(-3px);box-shadow:var(--ds-sh-lg)}
.ds-card-icon{font-size:1.6rem;color:var(--ds-green-600);margin-bottom:var(--ds-3);display:block}
.ds-card-title{display:block;font-size:var(--ds-fs-md);font-weight:var(--ds-fw-bold);
  color:var(--ds-text);margin-bottom:var(--ds-1)}
.ds-card-text{font-size:var(--ds-fs-sm);color:var(--ds-text-muted);line-height:1.6;margin:0}
/* მუქ ფონზე (ჰერო) — მინის ბარათი */
.ds-card--glass{background:var(--ds-glass);border-color:var(--ds-glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ds-white)}
.ds-card--glass:hover{background:var(--ds-glass-hover);border-color:var(--ds-glass-line-hover)}
.ds-card--glass .ds-card-icon{color:var(--ds-green-300)}
.ds-card--glass .ds-card-title{color:var(--ds-white)}
.ds-card--glass .ds-card-text{color:var(--ds-on-dark)}

/* ═══ 2b. სტატისტიკის ბარათი (ჰეროსთვის) ═══
   <div class="ds-stat-grid">
     <div class="ds-card ds-card--glass">
       <i class="ds-card-icon fas fa-building"></i>
       <b class="ds-stat-num">62</b><span class="ds-stat-label">…</span>
     </div>
   </div>                                                        */
.ds-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ds-stat-grid .ds-card-icon{font-size:1.15rem;margin-bottom:13px}
.ds-stat-num{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:var(--ds-fw-black);
  line-height:1;letter-spacing:-1.5px}
.ds-stat-label{display:block;font-size:.78rem;opacity:.72;margin-top:9px;line-height:1.45}
/* აქცენტის (ოქროსფერი) ბარათი — გამორჩეული ერთეული */
.ds-card--accent{background:linear-gradient(135deg,var(--ds-gold-soft),var(--ds-gold-faint));
  border-color:var(--ds-gold-line)}
.ds-card--accent:hover{border-color:var(--ds-gold)}
.ds-card--accent .ds-card-icon,.ds-card--accent .ds-stat-num{color:var(--ds-gold)}
.ds-card--accent .ds-stat-num{font-size:clamp(26px,3vw,36px)}
@media(max-width:560px){
  .ds-stat-grid{gap:var(--ds-2)}
  .ds-stat-grid .ds-card{padding:var(--ds-4) var(--ds-3)}
  .ds-stat-grid .ds-card-icon{font-size:1rem;margin-bottom:var(--ds-2)}
  .ds-stat-num{font-size:clamp(24px,7vw,32px);letter-spacing:-1px}
  .ds-stat-label{font-size:.7rem;margin-top:6px;line-height:1.35}
}

/* ═══ 3. ღილაკი ═══ */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px var(--ds-6);border-radius:var(--ds-r);border:none;cursor:pointer;
  font-family:var(--ds-font);font-size:.94rem;font-weight:var(--ds-fw-bold);
  text-decoration:none;transition:all var(--ds-transition);white-space:nowrap}
.ds-btn:focus-visible{outline:2px solid var(--ds-green-300);outline-offset:3px}
.ds-btn--primary{background:var(--ds-gold);color:var(--ds-gold-ink)}
.ds-btn--primary:hover{background:var(--ds-gold-hover);transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(255,201,74,.30)}
.ds-btn--secondary{background:transparent;color:var(--ds-green-600);
  border:1.5px solid var(--ds-green-500)}
.ds-btn--secondary:hover{background:var(--ds-green-25);border-color:var(--ds-green-600)}
/* მუქ ფონზე */
.ds-btn--on-dark{color:var(--ds-white);border:1.5px solid var(--ds-on-dark-line);background:transparent}
.ds-btn--on-dark:hover{background:var(--ds-on-dark-hover)}
.ds-btn--sm{padding:8px var(--ds-4);font-size:var(--ds-fs-sm)}
.ds-btn[disabled],.ds-btn--disabled{opacity:.5;pointer-events:none}

/* ═══ 4. სექციის სათაური ═══ */
.ds-section{padding:var(--ds-20) 0}
.ds-section--surface{background:var(--ds-surface-2)}
.ds-section--dark{background:var(--ds-surface-dark);color:var(--ds-white)}
.ds-sec-head{text-align:center;margin-bottom:var(--ds-12)}
.ds-sec-badge{display:inline-flex;align-items:center;gap:var(--ds-2);
  font-size:var(--ds-fs-sm);font-weight:var(--ds-fw-semi);color:var(--ds-green-700);
  margin-bottom:var(--ds-3)}
.ds-sec-title{font-size:var(--ds-fs-h2);font-weight:var(--ds-fw-bold);color:var(--ds-ink);
  line-height:var(--ds-lh-tight)}
.ds-sec-sub{font-size:var(--ds-fs-base);color:var(--ds-text-muted);max-width:600px;
  margin:var(--ds-3) auto 0;line-height:var(--ds-lh)}
.ds-section--dark .ds-sec-title{color:var(--ds-white)}
.ds-section--dark .ds-sec-sub{color:var(--ds-on-dark)}
.ds-section--dark .ds-sec-badge{color:var(--ds-green-300)}

/* ═══ 5. ცხრილი ═══ */
.ds-table-wrap{overflow-x:auto;max-width:100%;border-radius:var(--ds-r-lg);box-shadow:var(--ds-sh)}
.ds-table{width:100%;border-collapse:collapse;background:var(--ds-surface);
  font-size:var(--ds-fs-sm);min-width:520px}
.ds-table th,.ds-table td{padding:var(--ds-3) var(--ds-4);text-align:start;
  border-bottom:1px solid var(--ds-border)}
.ds-table thead th{background:var(--ds-green-600);color:var(--ds-white);
  font-weight:var(--ds-fw-semi);font-size:var(--ds-fs-xs);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ds-table tbody tr:last-child th,.ds-table tbody tr:last-child td{border-bottom:none}
.ds-table tbody tr:hover{background:var(--ds-green-25)}
.ds-table tbody th{font-weight:var(--ds-fw-semi);color:var(--ds-text)}

/* ═══ 6. ფორმის ველი ═══ */
.ds-field{display:block;margin-bottom:var(--ds-5)}
.ds-label{display:block;font-size:var(--ds-fs-sm);font-weight:var(--ds-fw-semi);
  color:var(--ds-text);margin-bottom:var(--ds-2)}
.ds-label--req::after{content:' *';color:var(--ds-err)}
.ds-input,.ds-select,.ds-textarea{width:100%;font-family:var(--ds-font);
  font-size:var(--ds-fs-base);color:var(--ds-text);background:var(--ds-white);
  border:1.5px solid var(--ds-border);border-radius:var(--ds-r);
  padding:12px var(--ds-4);transition:border-color var(--ds-transition),box-shadow var(--ds-transition)}
.ds-textarea{min-height:120px;resize:vertical;line-height:var(--ds-lh)}
.ds-input:hover,.ds-select:hover,.ds-textarea:hover{border-color:var(--ds-green-500)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;
  border-color:var(--ds-green-600);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ds-text-soft)}
.ds-input[disabled],.ds-select[disabled],.ds-textarea[disabled]{
  background:var(--ds-green-25);color:var(--ds-text-soft);cursor:not-allowed}
.ds-help{display:block;font-size:var(--ds-fs-xs);color:var(--ds-text-soft);margin-top:6px}
.ds-error{display:block;font-size:var(--ds-fs-xs);color:var(--ds-err);margin-top:6px}
.ds-field--invalid .ds-input,.ds-field--invalid .ds-select,.ds-field--invalid .ds-textarea{
  border-color:var(--ds-err)}
.ds-field--invalid .ds-input:focus{box-shadow:0 0 0 3px rgba(220,38,38,.15)}

/* ═══ ბეჭდვა ═══ */
@media print{
  .ds-hero,.ds-section--dark{background:none;color:var(--ds-ink)}
  .ds-card{box-shadow:none;border:1px solid var(--ds-text-soft)}
}