/* ═══════════════════════════════════════════════════
   TARKIBA — Design System Enhancement
   Brand: #FFD00D (Yellow) + #212120 (Black)
   Loaded AFTER main-rtl.css / main-ltr.css
═══════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────── */
:root {
  --tk-yellow:       #FFD00D;
  --tk-yellow-light: #FFF8D6;
  --tk-yellow-dark:  #C9A300;
  --tk-black:        #212120;
  --tk-grey-900:     #343232;
  --tk-grey-600:     #686464;
  --tk-grey-300:     #9B9797;
  --tk-grey-100:     #F2F2F2;
  --tk-bg:           #F7F8F9;
  --tk-white:        #FFFFFF;
  --tk-border:       rgba(33,33,32,.1);

  --tk-r-sm:   8px;
  --tk-r-md:   12px;
  --tk-r-lg:   16px;
  --tk-r-xl:   24px;
  --tk-r-full: 9999px;

  --tk-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --tk-shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --tk-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --tk-shadow-glow:0 8px 24px rgba(255,208,13,.35);

  --tk-ease: cubic-bezier(.4,0,.2,1);
  --tk-bounce: cubic-bezier(.34,1.56,.64,1);

  --tk-fs-xs:  .75rem;
  --tk-fs-sm:  .875rem;
  --tk-fs-md:  1rem;
  --tk-fs-lg:  1.125rem;
  --tk-fs-xl:  1.25rem;
  --tk-fs-2xl: 1.5rem;
  --tk-fs-3xl: 2rem;
  --tk-fs-4xl: 2.5rem;
  --tk-fs-5xl: 3rem;
}

/* ── 2. PAGE TRANSITIONS ───────────────────────── */
main {
  animation: tk-fadein .4s var(--tk-ease);
}
@keyframes tk-fadein {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── 3. SCROLL PROGRESS BAR ────────────────────── */
.tk-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--tk-yellow);
  width: 0%;
  z-index: 10000;
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(255,208,13,.6);
}

/* ── 4. NAVBAR ENHANCEMENTS ────────────────────── */
.navbar {
  transition: box-shadow .3s var(--tk-ease), background .3s var(--tk-ease);
}
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
  background: rgba(247,248,249,.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── 5. BUTTONS ────────────────────────────────── */
.btn_contact,
.btn_see_more {
  transition: all .25s var(--tk-bounce) !important;
  letter-spacing: .01em;
}
.btn_contact:active,
.btn_see_more:active {
  transform: scale(.96) !important;
}

/* ── 6. CARDS — hover lift ─────────────────────── */
.card_container {
  transition: transform .3s var(--tk-ease), box-shadow .3s var(--tk-ease);
  border-radius: var(--tk-r-lg);
}
.card_container:hover {
  transform: translateY(-6px);
  box-shadow: var(--tk-shadow-lg);
}

/* ── 7. SKELETON LOADERS ───────────────────────── */
.tk-skeleton {
  background: linear-gradient(90deg, var(--tk-grey-100) 25%, #e8e8e8 50%, var(--tk-grey-100) 75%);
  background-size: 200% 100%;
  animation: tk-shimmer 1.4s infinite;
  border-radius: var(--tk-r-sm);
}
@keyframes tk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position:-200% 0; }
}
.tk-skeleton-img  { width:100%; height:200px; }
.tk-skeleton-text { height:14px; margin-bottom:8px; }
.tk-skeleton-text.w-60 { width:60%; }
.tk-skeleton-text.w-80 { width:80%; }

/* ── 8. BADGES ─────────────────────────────────── */
.tk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--tk-r-full);
  font-size: var(--tk-fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
}
.tk-badge-yellow { background:rgba(255,208,13,.15); color:var(--tk-yellow-dark); }
.tk-badge-dark   { background:rgba(33,33,32,.08);   color:var(--tk-black); }
.tk-badge-green  { background:rgba(0,168,89,.1);    color:#00875A; }
.tk-badge-red    { background:rgba(220,53,69,.1);   color:#dc3545; }

/* ── 9. TOAST ──────────────────────────────────── */
.tk-toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}
[dir="rtl"] .tk-toast-container { left:auto; right:24px; }

.tk-toast {
  background: var(--tk-black);
  color: var(--tk-white);
  padding: 14px 18px;
  border-radius: var(--tk-r-md);
  font-size: var(--tk-fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--tk-shadow-lg);
  animation: tk-toast-in .3s var(--tk-bounce);
  border-inline-start: 4px solid var(--tk-yellow);
}
@keyframes tk-toast-in {
  from { opacity:0; transform:translateY(20px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.tk-toast.tk-toast--success { border-color:#00875A; }
.tk-toast.tk-toast--error   { border-color:#dc3545; }
.tk-toast-icon { font-size:1.1rem; flex-shrink:0; color:var(--tk-yellow); }

/* ── 10. MODAL ─────────────────────────────────── */
.tk-modal-backdrop {
  position: fixed; inset:0;
  background: rgba(33,33,32,.6);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: tk-fadein .2s var(--tk-ease);
}
.tk-modal {
  background: var(--tk-white);
  border-radius: var(--tk-r-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--tk-shadow-lg);
  animation: tk-modal-in .3s var(--tk-bounce);
  overflow: hidden;
}
@keyframes tk-modal-in {
  from { opacity:0; transform:scale(.9) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.tk-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--tk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tk-modal-header h5 { font-weight:700; font-size:var(--tk-fs-lg); margin:0; }
.tk-modal-close {
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background: var(--tk-grey-100);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.tk-modal-close:hover { background:var(--tk-yellow); }
.tk-modal-body   { padding:24px; }
.tk-modal-footer { padding:16px 24px; border-top:1px solid var(--tk-border); display:flex; gap:10px; justify-content:flex-end; }

/* ── 11. FORM INPUTS ───────────────────────────── */
.tk-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--tk-border);
  border-radius: var(--tk-r-sm);
  background: var(--tk-grey-100);
  font-size: var(--tk-fs-md);
  color: var(--tk-black);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  font-family: inherit;
}
.tk-input:focus {
  border-color: var(--tk-yellow);
  background: var(--tk-white);
  box-shadow: 0 0 0 3px rgba(255,208,13,.2);
}
.tk-input::placeholder { color:var(--tk-grey-300); }
.tk-input.is-invalid {
  border-color:#dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,.15);
}

/* ── 12. EMPTY STATES ──────────────────────────── */
.tk-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--tk-grey-300);
}
.tk-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: .35;
}
.tk-empty h5 { font-size:var(--tk-fs-lg); color:var(--tk-grey-600); font-weight:600; margin-bottom:8px; }
.tk-empty p  { font-size:var(--tk-fs-sm); max-width:300px; margin:auto; }

/* ── 13. PAGINATION ENHANCEMENT ───────────────── */
.pagination .page-link {
  border-radius: var(--tk-r-sm) !important;
  font-weight: 600;
  transition: all .2s var(--tk-bounce);
}
.pagination .page-item:hover .page-link,
.pagination .page-item.active .page-link {
  transform: scale(1.08);
}

/* ── 14. IMAGES — lazy fade-in ─────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .4s var(--tk-ease);
}
img[loading="lazy"].loaded { opacity: 1; }

/* ── 15. SECTION TITLES ────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,208,13,.12);
  color: var(--tk-yellow-dark);
  padding: 6px 16px;
  border-radius: var(--tk-r-full);
  font-size: var(--tk-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ── 16. MOBILE IMPROVEMENTS (≤ 768px) ─────────── */
@media (max-width: 768px) {
  /* Larger tap targets */
  .btn_contact, .btn_see_more, .btn_talk,
  a[href], button { min-height: 44px; }

  /* Pre-footer — fix flex-nowrap on mobile */
  .pre_footer_sec .row { flex-wrap: wrap !important; }
  .pre_footer_sec .row .col { flex: 1 1 100%; }

  /* Navbar mobile */
  .navbar .navbar-brand { width: 40% !important; }

  /* Hero title size */
  .home_page .hero_sec .data_container .title { font-size: 36px !important; line-height: 1.2 !important; }

  /* Service cards — 2 col on mobile */
  .home_page .services_cards_sec .row { row-gap: 16px; }

  /* About success numbers */
  .about_page .success_number_sec { padding-block: 40px; }

  /* Vision section gap */
  .about_page .tarkiba_vision_sec { padding-block: 40px; }

  /* Blog cards grid → 1 col */
  .blogs_page .recent_blog_post_sec .upper_card_conainer {
    flex-direction: column;
  }
  .blogs_page .recent_blog_post_sec .upper_card_conainer .img_container { width:100% !important; }
  .blogs_page .recent_blog_post_sec .upper_card_conainer .card_body     { width:100% !important; }

  /* Contact form full width */
  .contat_us_page .form_container_sec .form_container { width:100% !important; padding-top:24px !important; }

  /* Portfolio grid → 1 col on xs */
  .portfolio_page .sec_with_tabs .tab-content figure { width:calc(50% - 10px) !important; }

  /* Floating buttons — smaller on mobile */
  .tk-fab-container { bottom:16px; right:16px; }

  /* Typography scale for mobile */
  h1, .title { font-size: clamp(1.5rem, 5vw, 3rem) !important; }
  .subtitle   { font-size: clamp(.9rem, 3vw, 1.2rem) !important; }
}

/* ── 17. TABLET (768px – 1024px) ──────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding-inline: 40px !important; }
  .home_page .hero_sec .data_container .title { font-size: 38px !important; }
  .home_page .services_cards_sec .card_container { width: auto !important; }
}

/* ── 18. LARGE SCREENS (≥ 1600px) ─────────────── */
@media (min-width: 1600px) {
  .container { max-width: 1480px !important; }
  .home_page .hero_sec .data_container .title { font-size: 64px !important; }
}

/* ── 19. REDUCED MOTION ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── 20. SELECTION COLOR ───────────────────────── */
::selection { background: var(--tk-yellow); color: var(--tk-black); }

/* ── 21. FOCUS VISIBLE (Accessibility) ─────────── */
:focus-visible {
  outline: 2px solid var(--tk-yellow);
  outline-offset: 3px;
}

/* ── 22. LINK HOVER UNDERLINE ANIMATION ─────────── */
.navbar .nav-link::before {
  transition: opacity .3s var(--tk-ease), width .3s var(--tk-ease) !important;
}
.navbar .dropdown-menu .dropdown-item::after {
  transition: width .25s var(--tk-ease) !important;
}

/* ── 23. SWIPER PAGINATION ─────────────────────── */
.swiper-pagination-bullet {
  transition: transform .2s var(--tk-bounce), background .2s !important;
}
.swiper-pagination-bullet-active {
  transform: scale(1.3);
}

/* ── 24. FOOTER SOCIAL ICONS ───────────────────── */
.social-icon {
  transition: transform .3s var(--tk-bounce), box-shadow .3s var(--tk-ease) !important;
}
.social-icon:hover {
  transform: translateY(-5px) scale(1.1) !important;
}

/* ── 25. OFFCANVAS MOBILE NAV ──────────────────── */
.offcanvas {
  border-inline-start: none !important;
  border-inline-end: none !important;
}
.offcanvas-end   { border-inline-start: 3px solid var(--tk-yellow) !important; }
.offcanvas-start { border-inline-end:   3px solid var(--tk-yellow) !important; }
.offcanvas .nav-link {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--tk-border);
  font-size: var(--tk-fs-lg);
}

/* ── 26. ERROR STATE ───────────────────────────── */
.tk-error-state {
  padding: 80px 24px;
  text-align: center;
}
.tk-error-code {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--tk-yellow) 0%, var(--tk-yellow-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 27. BLOG CARD HOVER ───────────────────────── */
.blogs_page .card_container .img_container img,
.blogs_page .upper_card_conainer .img_container img {
  transition: transform .4s var(--tk-ease);
}
.blogs_page .card_container:hover .img_container img,
.blogs_page .upper_card_conainer:hover .img_container img {
  transform: scale(1.04);
}
.blogs_page .card_container .img_container,
.blogs_page .upper_card_conainer .img_container {
  overflow: hidden;
}