/* ---------------- Language Switcher ---------------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid rgba(0,0,0,.1);border-radius:30px;padding:3px;background:#fff}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;font-size:12px;font-weight:600;color:#555;text-decoration:none;padding:0 8px;border-radius:20px;transition:all .2s ease;letter-spacing:.3px;line-height:1}
.lang-switch a:hover{color:#0d1f17;background:#f3f3f3}
.lang-switch a.active{background:#0d1f17;color:#fff;cursor:default}
.lang-switch a.active:hover{background:#0d1f17;color:#fff}

.lang-switch-mobile{display:flex;justify-content:center;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.lang-switch-mobile a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:32px;font-size:12px;font-weight:600;color:#aaa;text-decoration:none;padding:0 12px;border-radius:20px;border:1px solid rgba(255,255,255,.18);transition:all .25s ease;letter-spacing:.5px}
.lang-switch-mobile a:hover{color:#fff;border-color:#fff}
.lang-switch-mobile a.active{background:#fff;color:#0d1f17;border-color:#fff}

/* ---------------- Language Selection Modal ---------------- */
.lang-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease;padding:20px}
.lang-modal-overlay.show{opacity:1;visibility:visible}
.lang-modal-box{background:#fff;border-radius:18px;max-width:520px;width:100%;padding:42px 36px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4);transform:translateY(20px) scale(.96);transition:transform .6s cubic-bezier(.22,1,.36,1);position:relative}
.lang-modal-overlay.show .lang-modal-box{transform:translateY(0) scale(1)}
.lang-modal-close{position:absolute;top:14px;right:18px;width:36px;height:36px;border-radius:50%;border:none;background:transparent;font-size:20px;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.lang-modal-close:hover{background:#f1f1f1;color:#0d1f17}
.lang-modal-logo{max-width:140px;margin:0 auto 18px}
.lang-modal-title{font-family:"Outfit",sans-serif;font-size:22px;font-weight:600;color:#0d1f17;margin-bottom:8px;line-height:1.3}
.lang-modal-subtitle{font-size:14px;color:#666;margin-bottom:28px;line-height:1.5}
.lang-modal-options{display:flex;flex-direction:column;gap:10px}
.lang-modal-options a{display:flex;align-items:center;justify-content:center;gap:10px;background:#f6f6f6;color:#0d1f17;font-size:15px;font-weight:600;padding:14px 20px;border-radius:12px;text-decoration:none;transition:all .25s ease;border:2px solid transparent}
.lang-modal-options a:hover{background:#0d1f17;color:#fff;transform:translateY(-2px)}
.lang-modal-options a .flag{font-size:20px;line-height:1}

html[dir="rtl"] .lang-modal-close{right:auto;left:18px}

@media(max-width:575px){
  .lang-modal-box{padding:30px 22px}
  .lang-modal-title{font-size:18px}
}
/* On mobile/tablet hide the header lang-switch (and its column).
   Mobile users access it via the drawer menu (lang-switch-mobile). */
@media(max-width:991.98px){
  .lang-switch-wrap{display:none!important}
  .col-auto:has(>.lang-switch-wrap){display:none!important}
}
/* Make the mobile drawer language selector more prominent */
.lang-switch-mobile{margin-top:24px;padding-top:22px}
.lang-switch-mobile a{min-width:56px;height:36px;font-size:13px}

/* ---------------- Bölge Envanteri / Regional Inventory ----------------
   The vision-card style is designed for dark backgrounds, so on the
   light section we override colors to keep text readable. */
#bolge-envanteri,
#regional-inventory{background:#f5f8f4}
#bolge-envanteri .sec-title,
#regional-inventory .sec-title{color:#0d1f17}
#bolge-envanteri .sec-text,
#regional-inventory .sec-text,
#bolge-envanteri .title-area p,
#regional-inventory .title-area p{color:#4a5a52}
#bolge-envanteri .shadow-title,
#regional-inventory .shadow-title{color:rgba(13,31,23,.06)}
#bolge-envanteri .vision-card,
#regional-inventory .vision-card{
  background:#fff;
  border:1px solid rgba(13,31,23,.08);
  border-radius:14px;
  padding:30px 26px;
  box-shadow:0 10px 30px rgba(13,31,23,.05);
  transition:transform .25s ease,box-shadow .25s ease;
}
#bolge-envanteri .vision-card:hover,
#regional-inventory .vision-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(13,31,23,.1);
}
#bolge-envanteri .vision-card .box-title,
#regional-inventory .vision-card .box-title{
  color:#0d1f17;
  font-size:18px;
  font-weight:600;
  margin-bottom:14px;
  line-height:1.35;
}
#bolge-envanteri .vision-card .box-text,
#regional-inventory .vision-card .box-text,
#bolge-envanteri .vision-card p,
#regional-inventory .vision-card p{
  color:#4a5a52;
  margin-bottom:10px;
  font-size:14px;
  line-height:1.65;
}
#bolge-envanteri .vision-card .box-text:last-child,
#regional-inventory .vision-card .box-text:last-child,
#bolge-envanteri .vision-card p:last-child,
#regional-inventory .vision-card p:last-child{margin-bottom:0}
#bolge-envanteri .vision-card strong,
#regional-inventory .vision-card strong{
  color:#0d1f17;
  font-weight:600;
}

/* ---------------- Project sidebar widget checklists ----------------
   The project detail page (Raisa Bahçe, Greenlife, Hargeisa) sidebar
   widgets use a dark green background. The default checklist body text
   is dark and becomes unreadable, so force it to white. Applies in TR,
   EN and AR alike. */
.sidebar-area .widget .checklist li,
.sidebar-area .widget .checklist ul li{
  color:#fff;
}
.sidebar-area .widget .checklist li i,
.sidebar-area .widget .checklist li strong,
.sidebar-area .widget .checklist li span,
.sidebar-area .widget .checklist li a{
  color:#fff;
}
.sidebar-area .widget .checklist li a:hover{
  color:rgba(255,255,255,.75);
}

/* ---------------- Rotating circle title around play buttons ----------------
   The .circle-title-anime text wrapping around the about-tag play button was
   dark on a light section background, making it hard to read. Force white
   with a subtle shadow for contrast. Used in index + hakkimizda. */
.about-experience-tag .circle-title-anime,
.about-tag .circle-title-anime{
  color:#fff!important;
  text-shadow:0 1px 4px rgba(13,31,23,.55);
  font-weight:600;
  letter-spacing:.5px;
}
.about-experience-tag .circle-title-anime path,
.about-tag .circle-title-anime path{fill:#fff}

/* ---------------- Local HTML5 Video Popup ----------------
   Replaces YouTube popup-video with native HTML5 player. */
.video-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:99999;padding:40px 20px;opacity:0;transition:opacity .35s ease}
.video-popup-overlay.show{opacity:1}
.video-popup-inner{width:100%;max-width:1100px;max-height:88vh;display:flex;align-items:center;justify-content:center}
.video-popup-overlay video{width:100%;max-height:88vh;outline:none;background:#000;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.video-popup-close{position:absolute;top:24px;right:30px;width:46px;height:46px;border-radius:50%;border:none;background:#fff;font-size:28px;font-weight:300;color:#0d1f17;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:transform .2s ease,background .2s ease}
.video-popup-close:hover{background:#0d1f17;color:#fff;transform:rotate(90deg)}
body.video-popup-open{overflow:hidden}
html[dir="rtl"] .video-popup-close{right:auto;left:30px}
@media(max-width:575px){
  .video-popup-overlay{padding:20px 12px}
  .video-popup-close{top:14px;right:14px;width:40px;height:40px;font-size:24px}
  html[dir="rtl"] .video-popup-close{right:auto;left:14px}
}

/* ---------------- Body text on light/smoke backgrounds ----------------
   The default .text-theme uses #0F4D2A (very dark green) which on the
   light bg-smoke / bg-light sections reads almost black. For paragraph
   body copy we use a slightly brighter, more obviously green hue so
   sentences are clearly green to the eye. Headings keep their original
   dark green for hierarchy. */
.bg-smoke p.text-theme,
.bg-light p.text-theme,
body.bg-smoke p.text-theme,
body.bg-light p.text-theme,
.about-page-wrap p.text-theme,
.title-area > p.text-theme{
  color:#1B6F47!important;
  font-weight:500;
}

/* .text-title is used by several pages (faaliyet-kollari, projeler, index)
   for intro paragraphs, but the underlying theme defines no rule for it,
   so the text fell back to a dark gray/black on light backgrounds. Force
   the same visible green used for other body copy. */
.text-title,
p.text-title,
.sec-text.text-title,
.title-area .sec-text.text-title{
  color:#1B6F47!important;
  font-weight:500;
}

/* ---------------- rent-card titles (default white, hover green) ----------------
   Match the homepage "Yaşam Deneyimi" cards behavior on every rent-card.
   Some cards (Faaliyet Kolları, project advantages, etc.) have plain
   <h4 class="box-title"> without an inner anchor, so default color was
   inheriting dark text on a dark green background. Force white default,
   and turn green when the whole card is hovered. */
.rent-card .box-title{
  color:#fff;
  transition:color .25s ease;
}
.rent-card .box-title a{
  transition:color .25s ease;
}
.rent-card:hover .box-title,
.rent-card:hover .box-title a,
.rent-card .box-title:hover{
  color:var(--theme-color2)!important;
}

/* ---------------- Faaliyet Kolları rent-card checklists ----------------
   rent-card has a dark green background with white title/description.
   On the Business Areas page, each card also lists its sub-items via a
   checklist; force those list items to white so they stay readable. */
.rent-card .checklist li,
.rent-card .checklist ul li{
  color:#fff;
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  line-height:1.6;
  margin-bottom:6px;
}
.rent-card .checklist li img{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:3px;
  filter:brightness(0) invert(1) opacity(.85);
}
.rent-card .checklist li:last-child{margin-bottom:0}

/* ---------------- Property grid list 3-column variant ----------------
   Pages whose summary items have longer titles (e.g. Hargeisa) get
   wider cards by capping the grid at 3 columns. */
.property-grid-list-3col{
  grid-template-columns:repeat(3,1fr)!important;
  gap:32px 28px!important;
  padding:36px 40px!important;
}
.property-grid-list-3col li .property-grid-list-title{font-size:15px}
.property-grid-list-3col li .property-grid-list-text{font-size:15px;line-height:1.45}
@media(max-width:1199.98px){
  .property-grid-list-3col{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:575.98px){
  .property-grid-list-3col{grid-template-columns:repeat(1,1fr)!important;padding:24px!important}
}

/* ---------------- Kat Planı / Floor Plan thumb size ----------------
   property-grid-thumb has no width cap by default, so when we use a
   photograph instead of a small floor-plan diagram the image renders
   at its natural (very large) size and dominates the section. Cap it
   to a reasonable size and make the layout responsive. */
.property-grid-plan{align-items:flex-start}
.property-grid-thumb{max-width:520px;width:100%}
.property-grid-thumb img{
  display:block;
  width:100%;
  height:auto;
  max-height:360px;
  object-fit:cover;
  border-radius:10px;
}
@media(max-width:991.98px){
  .property-grid-thumb{max-width:100%}
  .property-grid-thumb img{max-height:280px}
}