/*
Theme Name: Orion Tente
Theme URI: https://oriontente.com
Author: Orion Tente
Author URI: https://oriontente.com
Description: Tente sistemleri, pergola ve gölgelendirme firmaları için hazırlanmış kurumsal WordPress teması. Anasayfa, hizmetler, projeler ve blog bölümleri Özelleştirici (Customizer) ve yönetim panelinden kolayca düzenlenebilir.
Version: 1.6.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: orion-tente
*/

/* =========================================================
   0. DEĞİŞKENLER (CSS VARIABLES)
   ========================================================= */
:root{
  --ot-navy: #1a2a4a;
  --ot-navy-light: #2a3a5a;
  --ot-orange: #d97e32;
  --ot-orange-dark: #c46a1c;
  --ot-text: #2c3e50;
  --ot-muted: #7a8a9e;
  --ot-bg-light: #f5f7fb;
  --ot-border: #e5e8ed;
  --ot-white: #ffffff;
  --ot-radius: 8px;
  --ot-shadow: 0 4px 16px rgba(26,42,74,0.08);
  --ot-container: 1180px;
  --ot-font: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ot-font-heading: 'Poppins', sans-serif;
  --ot-font-weight-light: 300;
  --ot-font-weight-regular: 400;
  --ot-font-weight-semibold: 600;
  --ot-font-weight-bold: 700;
  --ot-font-weight-extrabold: 800;
  --ot-space-xs: 4px;
  --ot-space-sm: 8px;
  --ot-space-md: 16px;
  --ot-space-lg: 24px;
  --ot-space-xl: 32px;
  --ot-space-2xl: 48px;
  --ot-space-3xl: 64px;
  --ot-transition-fast: 0.15s ease;
  --ot-transition-normal: 0.2s ease;
  --ot-transition-slow: 0.3s ease;
}

/* =========================================================
   1. RESET / TEMEL
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ot-font);
  color:var(--ot-text);
  background:var(--ot-white);
  line-height:1.65;
  font-size:15px;
  font-weight:400;
  letter-spacing:0.3px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0 0 .5em; line-height:1.25; font-weight:700; color:var(--ot-navy); font-family:var(--ot-font-heading); }
h1{ font-size:42px; letter-spacing:-0.015em; }
h2{ font-size:32px; letter-spacing:-0.015em; }
h3{ font-size:22px; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.ot-container{
  max-width:var(--ot-container);
  margin:0 auto;
  padding:0 24px;
}
.ot-section{ padding:60px 0; }
.ot-section--tight{ padding:56px 0; }
.ot-section--light{ background:var(--ot-bg-light); }
.ot-section--navy{ background:var(--ot-navy); color:#cbd3e0; }
.ot-section--navy h2, .ot-section--navy h3{ color:#fff; }

.ot-eyebrow{
  display:inline-block;
  color:var(--ot-orange);
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.ot-section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.ot-section-head.is-left{ text-align:left; margin:0; max-width:none; }
.ot-section-subtitle{ color:var(--ot-muted); }

/* Buttons */
.ot-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:5px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  border:2px solid transparent;
  transition:var(--ot-transition-normal);
  white-space:nowrap;
}
.ot-btn--orange{ background:var(--ot-orange); color:#1a1305; }
.ot-btn--orange:hover{ background:var(--ot-orange-dark); }
.ot-btn--outline{ border-color:rgba(255,255,255,.6); color:#fff; }
.ot-btn--outline:hover{ background:rgba(255,255,255,.12); }
.ot-btn--navy{ background:var(--ot-navy); color:#fff; }
.ot-btn--navy:hover{ background:var(--ot-navy-light); }
.ot-btn--ghost-navy{ border-color:var(--ot-navy); color:var(--ot-navy); }
.ot-btn--ghost-navy:hover{ background:var(--ot-navy); color:#fff; }
.ot-btn--sm{ padding:9px 16px; font-size:12px; }

/* =========================================================
   2. TOPBAR
   ========================================================= */
.ot-topbar{
  background:var(--ot-navy);
  color:#c9d2e0;
  font-size:13px;
}
.ot-topbar .ot-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:40px;
  flex-wrap:wrap;
  gap:8px;
}
.ot-topbar__left{ display:flex; gap:22px; flex-wrap:wrap; }
.ot-topbar__left span{ display:inline-flex; align-items:center; gap:6px; }
.ot-topbar__right{ display:flex; gap:16px; }
.ot-topbar__right a{ display:inline-flex; align-items:center; gap:6px; }
.ot-topbar svg{ width:14px; height:14px; flex:none; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.ot-header{
  background:#fff;
  border-bottom:1px solid var(--ot-border);
  position:relative;
  z-index:50;
}
.ot-header .ot-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:20px;
}
.ot-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ot-navy); }
.ot-logo img{ max-height:48px; width:auto; }
.ot-logo small{ display:block; font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--ot-muted); }

.ot-nav{ display:flex; }
.ot-nav ul{ display:flex; align-items:center; gap:28px; }
.ot-nav a{ font-weight:600; font-size:15px; color:var(--ot-navy); padding:8px 0; position:relative; }
.ot-nav > ul > li > a::after{
  content:"";
  position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--ot-orange);
  transition:.2s;
}
.ot-nav > ul > li:hover > a::after,
.ot-nav > ul > li.current-menu-item > a::after,
.ot-nav > ul > li.current_page_item > a::after{ width:100%; }
.ot-nav li.menu-item-has-children{ position:relative; }
.ot-nav li.menu-item-has-children > a::before{
  content:"▾"; margin-left:5px; font-size:11px; display:inline-block;
}
.ot-nav .sub-menu{
  position:absolute; top:100%; left:0; background:#fff;
  box-shadow:var(--ot-shadow); border-radius:8px; padding:10px; min-width:220px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s;
}
.ot-nav li.menu-item-has-children:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.ot-nav .sub-menu a{ display:block; padding:8px 12px; border-radius:6px; }
.ot-nav .sub-menu a:hover{ background:var(--ot-bg-light); }

.ot-header__actions{ display:flex; align-items:center; gap:18px; }
.ot-menu-toggle{
  display:none; background:none; border:none; padding:8px; color:var(--ot-navy);
}
.ot-menu-toggle svg{ width:26px; height:26px; }

/* =========================================================
   4. HERO
   ========================================================= */
.ot-hero{
  position:relative;
  color:#fff;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.ot-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(9,16,28,.92) 0%, rgba(9,16,28,.55) 48%, rgba(9,16,28,.25) 100%);
}
.ot-hero__inner{
  position:relative; z-index:2;
  padding:110px 0 90px;
  max-width:640px;
}
.ot-hero h1{ color:#fff; font-size:44px; line-height:1.15; margin-bottom:18px; }
.ot-hero p{ color:#d7dee9; font-size:17px; max-width:520px; }
.ot-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

.ot-hero__features{
  position:relative; z-index:2;
  background:#fff;
  border-top:1px solid var(--ot-border);
}
.ot-hero__features .ot-container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding-top:26px; padding-bottom:26px;
}
.ot-feature{ display:flex; align-items:center; gap:14px; flex:1 1 200px; }
.ot-feature__icon{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:#fff4e2; color:var(--ot-orange);
  display:flex; align-items:center; justify-content:center;
}
.ot-feature__icon svg{ width:22px; height:22px; }
.ot-feature h4{ font-size:14px; margin:0; }
.ot-feature p{ font-size:12.5px; color:var(--ot-muted); margin:0; }

.ot-hero__phone{
  display:flex; align-items:center; gap:12px;
  background:#fff; color:var(--ot-navy);
  border-radius:50px; padding:10px 22px 10px 10px;
  box-shadow:var(--ot-shadow);
}
.ot-hero__phone .ot-icon-circle{
  width:44px; height:44px; border-radius:50%; background:var(--ot-orange);
  display:flex; align-items:center; justify-content:center; color:#1a1305; flex:none;
}
.ot-hero__phone strong{ display:block; font-size:16px; }
.ot-hero__phone span{ display:block; font-size:12px; color:var(--ot-muted); }

/* =========================================================
   5. MARKALAR
   ========================================================= */
.ot-brands{ padding:48px 0; border-bottom:1px solid var(--ot-border); }
.ot-brands__title{
  text-align:center; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ot-muted); font-weight:700; margin-bottom:28px;
}
.ot-brands__row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px;
}
.ot-brands__row img{ max-height:34px; width:auto; filter:grayscale(1); opacity:.75; margin:0 auto; }

/* =========================================================
   6. HİZMETLER
   ========================================================= */
.ot-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ot-service-card{
  border:1px solid var(--ot-border); border-radius:var(--ot-radius);
  padding:34px 28px; text-align:center; transition:.2s;
  background:#fff;
}
.ot-service-card:hover{ box-shadow:var(--ot-shadow); transform:translateY(-4px); border-color:transparent; }
.ot-service-card__icon{
  width:60px; height:60px; margin:0 auto 18px; border-radius:14px;
  background:var(--ot-bg-light); display:flex; align-items:center; justify-content:center; color:var(--ot-orange);
}
.ot-service-card__icon svg{ width:28px; height:28px; }
.ot-service-card h3{ font-size:17px; }
.ot-service-card p{ color:var(--ot-muted); font-size:14px; }
.ot-service-card a{ font-weight:700; font-size:13px; color:var(--ot-navy); }
.ot-service-card a:hover{ color:var(--ot-orange); }

/* =========================================================
   7. NEDEN BİZ (about/stats)
   ========================================================= */
.ot-why{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.ot-why__list{ margin:22px 0 34px; }
.ot-why__list li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; color:#dde3ee; }
.ot-why__list svg{ flex:none; width:18px; height:18px; color:var(--ot-orange); margin-top:3px; }
.ot-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px 40px; }
.ot-stat{ display:flex; align-items:center; gap:14px; }
.ot-stat__icon{
  width:44px; height:44px; border-radius:10px; background:rgba(245,166,35,.15);
  display:flex; align-items:center; justify-content:center; color:var(--ot-orange); flex:none;
}
.ot-stat strong{ display:block; font-size:24px; color:#fff; }
.ot-stat span{ font-size:13px; color:#aab4c6; }

.ot-why__media{ position:relative; border-radius:var(--ot-radius); overflow:hidden; }
.ot-why__media img{ width:100%; height:100%; object-fit:cover; }
.ot-why__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:#fff; color:var(--ot-navy);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--ot-shadow);
}
.ot-why__quote{
  position:absolute; left:24px; bottom:24px; background:#fff; color:var(--ot-navy);
  padding:14px 18px; border-radius:10px; max-width:220px; box-shadow:var(--ot-shadow); font-size:13px;
}
.ot-why__quote em{ display:block; color:var(--ot-orange); font-style:italic; margin-top:4px; }

/* =========================================================
   8. PROJELER
   ========================================================= */
.ot-projects-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:20px; }
.ot-projects-slider{ position:relative; }
.ot-projects-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr);
  gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.ot-project-card{
  position:relative; border-radius:var(--ot-radius); overflow:hidden; aspect-ratio:4/5; scroll-snap-align:start;
}
.ot-project-card img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.ot-project-card:hover img{ transform:scale(1.06); }
.ot-project-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,16,28,.85), rgba(9,16,28,0) 55%);
}
.ot-project-card__info{ position:absolute; left:16px; bottom:14px; z-index:2; color:#fff; }
.ot-project-card__info span{ font-size:12px; color:#d9dfea; }
.ot-project-card__info strong{ display:block; font-size:15px; }
.ot-slider-nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.ot-slider-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--ot-border); background:#fff; color:var(--ot-navy);
  display:flex; align-items:center; justify-content:center;
}
.ot-slider-nav button:hover{ background:var(--ot-navy); color:#fff; border-color:var(--ot-navy); }

/* =========================================================
   9. BLOG
   ========================================================= */
.ot-blog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ot-blog-card{ border:1px solid var(--ot-border); border-radius:var(--ot-radius); overflow:hidden; background:#fff; transition:.2s; }
.ot-blog-card:hover{ box-shadow:var(--ot-shadow); transform:translateY(-4px); }
.ot-blog-card__thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.ot-blog-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.ot-blog-card__cat{
  position:absolute; top:10px; left:10px; background:var(--ot-orange); color:#1a1305;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
}
.ot-blog-card__body{ padding:18px; }
.ot-blog-card__date{ font-size:12px; color:var(--ot-muted); margin-bottom:8px; display:block; }
.ot-blog-card h3{ font-size:15.5px; margin-bottom:10px; }
.ot-blog-card h3 a:hover{ color:var(--ot-orange); }
.ot-blog-card a.ot-readmore{ font-size:13px; font-weight:700; color:var(--ot-navy); }
.ot-blog-card a.ot-readmore:hover{ color:var(--ot-orange); }

/* =========================================================
   10. CTA BANNER
   ========================================================= */
.ot-cta{
  background:var(--ot-navy); border-radius:var(--ot-radius); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:34px 40px;
}
.ot-cta__left{ display:flex; align-items:center; gap:20px; }
.ot-cta__icon{
  width:56px; height:56px; border-radius:12px; background:rgba(245,166,35,.15); color:var(--ot-orange);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.ot-cta h3{ color:#fff; font-size:19px; margin-bottom:4px; }
.ot-cta p{ color:#b9c2d4; margin:0; font-size:14px; }

/* =========================================================
   11. FOOTER
   ========================================================= */
.ot-footer{ background:var(--ot-navy); color:#aab4c6; font-size:14px; }
.ot-footer__top{ padding:70px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.ot-footer__about .ot-logo{ color:#fff; margin-bottom:14px; }
.ot-footer__about .ot-logo small{ color:#8b96ac; }
.ot-footer__social{ display:flex; gap:10px; margin-top:18px; }
.ot-footer__social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
}
.ot-footer__social a:hover{ background:var(--ot-orange); color:#1a1305; border-color:var(--ot-orange); }
.ot-footer h4{ color:#fff; font-size:15px; margin-bottom:18px; }
.ot-footer ul li{ margin-bottom:10px; }
.ot-footer ul a:hover{ color:#fff; }
.ot-footer__contact li{ display:flex; gap:10px; align-items:flex-start; }
.ot-footer__contact svg{ flex:none; width:16px; height:16px; margin-top:3px; color:var(--ot-orange); }
.ot-newsletter{ display:flex; margin-top:8px; }
.ot-newsletter input{
  flex:1; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff;
  padding:12px 14px; border-radius:6px 0 0 6px; font-size:13px;
}
.ot-newsletter button{
  background:var(--ot-orange); border:none; color:#1a1305; padding:0 16px; border-radius:0 6px 6px 0;
}
.ot-footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:20px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px;
}
.ot-footer__bottom ul{ display:flex; gap:20px; }
.ot-back-to-top{
  position:fixed; right:24px; bottom:24px; width:44px; height:44px; border-radius:50%;
  background:var(--ot-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--ot-shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; z-index:99; border:none;
}
.ot-back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* =========================================================
   12. SAYFA İÇİ İÇERİK (page.php / single.php generic)
   ========================================================= */
.ot-page-header{
  background:var(--ot-navy); color:#fff; padding:60px 0; text-align:center;
}
.ot-page-header h1{ color:#fff; margin-bottom:8px; }
.ot-breadcrumb{ color:#aab4c6; font-size:13px; }
.ot-breadcrumb a:hover{ color:var(--ot-orange); }
.ot-content-wrap{ padding:70px 0; }
.ot-entry-content h2{ margin-top:1.4em; }
.ot-entry-content img{ border-radius:var(--ot-radius); }
.ot-entry-content ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.ot-entry-content a{ color:var(--ot-navy); text-decoration:underline; }

.ot-contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; }
.ot-contact-info li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.ot-contact-info svg{ width:20px; height:20px; color:var(--ot-orange); flex:none; margin-top:3px; }
.ot-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.ot-form input, .ot-form textarea{
  width:100%; border:1px solid var(--ot-border); border-radius:6px; padding:13px 14px; font-family:inherit; font-size:14px;
}
.ot-form textarea{ min-height:130px; resize:vertical; }
.ot-form-full{ margin-bottom:16px; }

.ot-pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.ot-pagination a, .ot-pagination span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ot-border); border-radius:6px; font-size:13px; font-weight:600;
}
.ot-pagination .current{ background:var(--ot-navy); color:#fff; border-color:var(--ot-navy); }

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .ot-services{ grid-template-columns:repeat(2,1fr); }
  .ot-blog-grid{ grid-template-columns:repeat(2,1fr); }
  .ot-why{ grid-template-columns:1fr; }
  .ot-footer__top{ grid-template-columns:1fr 1fr; }
  .ot-hero h1{ font-size:34px; }
}
@media (max-width: 782px){
  .ot-topbar__left span:nth-child(n+3){ display:none; }
  .ot-nav{ position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background:#fff; flex-direction:column;
    padding:90px 24px 24px; transform:translateX(100%); transition:.25s; z-index:60; overflow-y:auto; }
  .ot-nav.is-open{ transform:translateX(0); box-shadow:-10px 0 30px rgba(0,0,0,.15); }
  .ot-nav ul{ flex-direction:column; align-items:flex-start; gap:6px; width:100%; }
  .ot-nav .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; padding-left:10px;}
  .ot-nav li.menu-item-has-children.is-open .sub-menu{ display:block; }
  .ot-menu-toggle{ display:flex; }
  .ot-header .ot-btn{ display:none; }
  .ot-services{ grid-template-columns:1fr; }
  .ot-blog-grid{ grid-template-columns:1fr; }
  .ot-footer__top{ grid-template-columns:1fr; padding:50px 0 30px; }
  .ot-contact-grid{ grid-template-columns:1fr; }
  .ot-form-row{ grid-template-columns:1fr; }
  .ot-cta{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   14. REFERANS TASARIM UYUMLULUK KATMANI (2026-08-09)
   Gönderilen masaüstü görsele mümkün olduğunca yakın ölçüler.
   ========================================================= */
@media (min-width: 992px){
  :root{ --ot-container: 1180px; --ot-radius: 7px; }
  body{ font-size:14px; line-height:1.45; }
  .ot-container{ padding-left:22px; padding-right:22px; }

  /* topbar */
  .ot-topbar{ font-size:11px; }
  .ot-topbar .ot-container{ min-height:29px; }
  .ot-topbar__left{ gap:20px; }
  .ot-topbar__left span + span{ position:relative; }
  .ot-topbar__left span + span:before{ content:""; position:absolute; left:-10px; top:2px; width:1px; height:14px; background:rgba(255,255,255,.14); }
  .ot-topbar svg{ width:12px; height:12px; color:var(--ot-orange); }

  /* main nav */
  .ot-header .ot-container{ min-height:57px; gap:18px; }
  .ot-logo img{ max-height:42px; width:auto; }
  .ot-nav ul{ gap:34px; }
  .ot-nav a{ font-size:12.5px; font-weight:650; }
  .ot-header__actions .ot-btn{ padding:10px 18px; font-size:11px; border-radius:4px; }

  /* hero */
  .ot-hero{ min-height:367px; background-position:center right; }
  .ot-hero:before{ background:linear-gradient(90deg,rgba(7,14,25,.96) 0%,rgba(7,14,25,.76) 35%,rgba(7,14,25,.31) 66%,rgba(7,14,25,.07) 100%); }
  .ot-hero__inner{ padding:52px 0 105px; max-width:540px; }
  .ot-hero .ot-eyebrow{ font-size:13px; letter-spacing:0; text-transform:none; margin-bottom:11px; }
  .ot-hero h1{ font-size:39px; line-height:1.12; letter-spacing:-.025em; margin-bottom:13px; max-width:520px; }
  .ot-hero__inner > p{ font-size:14px; line-height:1.55; max-width:460px; }
  .ot-hero__actions{ margin-top:22px; gap:14px; }
  .ot-hero__actions .ot-btn{ padding:11px 18px; border-radius:4px; font-size:11px; }

  .ot-hero__features{ position:absolute; left:0; right:0; bottom:0; background:rgba(4,10,18,.68); border-top:1px solid rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(4px); }
  .ot-hero__features .ot-container{ min-height:67px; padding-top:10px; padding-bottom:10px; gap:0; flex-wrap:nowrap; padding-right:170px; }
  .ot-feature{ min-width:0; flex:1; padding:0 16px; border-right:1px solid rgba(255,255,255,.13); }
  .ot-feature:first-child{ padding-left:0; }
  .ot-feature__icon{ width:34px; height:34px; background:transparent; border:1px solid rgba(245,166,35,.75); }
  .ot-feature__icon svg{ width:18px; height:18px; }
  .ot-feature h4{ color:#fff; font-size:10.5px; margin-bottom:2px; white-space:nowrap; }
  .ot-feature p{ color:#ccd4df; font-size:9px; line-height:1.35; }
  .ot-hero__phone{ position:absolute; right:23px; bottom:14px; padding:7px 15px 7px 7px; border-radius:13px; gap:8px; z-index:4; }
  .ot-hero__phone .ot-icon-circle{ width:32px; height:32px; background:#0d1b2e; color:var(--ot-orange); }
  .ot-hero__phone strong{ font-size:12px; }
  .ot-hero__phone span{ font-size:9.5px; }

  /* brands */
  .ot-brands{ padding:13px 0 17px; }
  .ot-brands__title{ font-size:9px; margin-bottom:9px; }
  .ot-brands__row{ gap:18px; flex-wrap:nowrap; }
  .ot-brands__row img{ width:90px; height:37px; object-fit:contain; max-height:none; filter:none; opacity:1; }

  /* services */
  .ot-section{ padding:34px 0; }
  .ot-section-head{ margin-bottom:19px; }
  .ot-section-head .ot-eyebrow{ font-size:9px; margin-bottom:3px; }
  .ot-section-head h2{ font-size:21px; margin-bottom:4px; }
  .ot-section-subtitle{ font-size:10.5px; margin-bottom:0; }
  .ot-services{ grid-template-columns:repeat(6,1fr); gap:9px; }
  .ot-service-card{ padding:17px 12px 13px; min-height:148px; border-radius:5px; }
  .ot-service-card__icon{ width:46px; height:40px; margin-bottom:10px; background:transparent; color:var(--ot-navy); }
  .ot-service-card__icon svg{ width:34px; height:34px; stroke-width:1.4; }
  .ot-service-card h3{ font-size:12px; margin-bottom:7px; }
  .ot-service-card p{ font-size:9.6px; line-height:1.5; min-height:41px; margin-bottom:8px; }
  .ot-service-card a{ font-size:9.5px; }

  /* why */
  .ot-section--navy{ padding:0; }
  .ot-why{ grid-template-columns:1.08fr .92fr; gap:0; min-height:196px; }
  .ot-why__content{ display:grid; grid-template-columns:1fr .82fr; column-gap:28px; padding:25px 30px 22px 0; }
  .ot-why__content > .ot-eyebrow,.ot-why__content > h2,.ot-why__content > .ot-why__list{ grid-column:1; }
  .ot-why__content > .ot-eyebrow{ font-size:9px; margin-bottom:3px; }
  .ot-why__content > h2{ font-size:21px; margin-bottom:7px; }
  .ot-why__list{ margin:6px 0 0; }
  .ot-why__list li{ font-size:10.5px; margin-bottom:6px; }
  .ot-why__list svg{ width:13px; height:13px; margin-top:1px; }
  .ot-stats{ grid-column:2; grid-row:1 / span 3; align-self:center; grid-template-columns:1fr; gap:7px; border-left:1px solid rgba(255,255,255,.12); padding-left:22px; }
  .ot-stat{ gap:10px; }
  .ot-stat__icon{ width:32px; height:32px; border-radius:5px; }
  .ot-stat__icon svg{ width:18px; height:18px; }
  .ot-stat strong{ font-size:21px; line-height:1; }
  .ot-stat span{ font-size:9.5px; }
  .ot-why__media{ border-radius:0; height:196px; margin-right:calc((100vw - var(--ot-container))/ -2); }
  .ot-why__play{ width:47px; height:47px; }
  .ot-why__quote{ left:8px; bottom:7px; padding:10px 14px; border-radius:5px; max-width:160px; font-size:10px; }

  /* projects */
  #projeler{ padding-top:20px; padding-bottom:24px; }
  .ot-projects-head{ margin-bottom:12px; align-items:center; }
  .ot-projects-head .ot-section-head .ot-eyebrow{ font-size:9px; margin-bottom:2px; }
  .ot-projects-head .ot-section-head h2{ font-size:20px; }
  .ot-projects-head .ot-btn{ padding:8px 12px; font-size:9px; }
  .ot-projects-track{ grid-auto-columns:calc((100% - 48px)/5); gap:12px; overflow:hidden; }
  .ot-project-card{ aspect-ratio:1.45/1; border-radius:5px; }
  .ot-project-card__info{ left:10px; bottom:8px; }
  .ot-project-card__info strong{ font-size:10px; }
  .ot-project-card__info span{ font-size:9px; }
  .ot-slider-nav{ position:absolute; inset:50% -26px auto -26px; transform:translateY(-50%); justify-content:space-between; pointer-events:none; }
  .ot-slider-nav button{ width:25px; height:25px; background:#fff; pointer-events:auto; }

  /* blog */
  #blog{ padding:18px 0 16px; background:#fff; }
  #blog .ot-projects-head{ margin-bottom:11px; }
  .ot-blog-grid{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .ot-blog-card{ display:grid; grid-template-columns:39% 61%; min-height:99px; border-radius:5px; }
  .ot-blog-card__thumb{ aspect-ratio:auto; min-height:99px; }
  .ot-blog-card__cat{ display:none; }
  .ot-blog-card__body{ padding:9px 9px 8px; }
  .ot-blog-card__date{ font-size:7.8px; margin-bottom:6px; }
  .ot-blog-card h3{ font-size:9.4px; line-height:1.45; margin-bottom:6px; }
  .ot-blog-card a.ot-readmore{ font-size:8px; }

  /* CTA */
  .ot-section--tight{ padding:0 0 12px; }
  .ot-cta{ border-radius:7px; padding:13px 25px; min-height:70px; }
  .ot-cta__left{ gap:16px; }
  .ot-cta__icon{ width:43px; height:43px; background:transparent; border:1px solid rgba(255,255,255,.28); }
  .ot-cta h3{ font-size:16px; }
  .ot-cta p{ font-size:9.8px; max-width:480px; }
  .ot-cta .ot-btn{ min-width:215px; justify-content:center; font-size:10px; padding:11px 18px; }

  /* footer */
  .ot-footer{ font-size:10px; }
  .ot-footer__top{ padding:18px 0 14px; grid-template-columns:1.5fr .8fr .9fr 1.2fr; gap:28px; }
  .ot-footer__about .ot-logo img{ max-height:38px; }
  .ot-footer__about p{ line-height:1.6; max-width:250px; }
  .ot-footer__social{ margin-top:10px; gap:6px; }
  .ot-footer__social a{ width:25px; height:25px; }
  .ot-footer h4{ font-size:10px; margin-bottom:8px; text-transform:uppercase; }
  .ot-footer ul li{ margin-bottom:4px; }
  .ot-footer__contact svg{ width:12px; height:12px; }
  .ot-newsletter{ margin-top:6px; }
  .ot-newsletter input{ padding:8px 10px; font-size:9px; background:#fff; color:#333; }
  .ot-newsletter button{ padding:0 11px; }
  .ot-footer__bottom{ padding:8px 0; font-size:8.5px; }
}

/* Referans görünümde marka ve ana görsel netliği */
.ot-brands__row img{ mix-blend-mode:multiply; }


/* =========================================================
   15. V3 CANLI SİTE / CUSTOMIZER EŞLEŞTİRME DÜZELTMELERİ
   ========================================================= */
/* Logo markup artık tek bağlantıdır; üçüncü taraf WP stilleri ne olursa olsun
   logo header ölçülerini aşamaz. */
.ot-header .ot-logo,
.ot-footer .ot-logo{
  flex:0 0 auto;
  min-width:0;
  overflow:visible;
}
.ot-header .ot-logo .custom-logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:220px !important;
  max-height:48px !important;
  object-fit:contain;
}
.ot-footer .ot-logo .custom-logo{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:190px !important;
  max-height:42px !important;
  object-fit:contain;
}
.ot-logo__text{ display:block; line-height:1.15; }
.ot-logo__text small{ display:block; }

/* Header hiçbir ek tema/eklenti CSS'i yüzünden büyümesin. */
.ot-header > .ot-container{
  width:100%;
}
.ot-header img{
  object-fit:contain;
}

@media (min-width:992px){
  .ot-header{ min-height:58px; }
  .ot-header .ot-container{ height:58px; min-height:58px; }
  .ot-header .ot-logo{ width:220px; max-width:220px; height:52px; }
  .ot-header .ot-logo .custom-logo{ max-width:220px !important; max-height:46px !important; }
  .ot-nav{ margin-left:auto; }
  .ot-nav ul{ flex-wrap:nowrap; }

  /* Hero ve alt özellik şeridi tek bir sabit masaüstü kompozisyonudur. */
  .ot-hero{ height:367px; min-height:367px; }
  .ot-hero > .ot-container{ height:100%; }
  .ot-hero__inner{ box-sizing:border-box; }
  .ot-hero__features{ height:67px; }
  .ot-hero__features .ot-container{ height:67px; min-height:67px; }
  .ot-feature{ visibility:visible !important; opacity:1 !important; }
}

@media (max-width:1199px) and (min-width:992px){
  :root{ --ot-container: 100%; }
  .ot-container{ padding-left:34px; padding-right:34px; }
  .ot-header .ot-logo{ width:190px; max-width:190px; }
  .ot-header .ot-logo .custom-logo{ max-width:190px !important; max-height:43px !important; }
  .ot-nav ul{ gap:20px; }
  .ot-nav a{ font-size:12px; }
}

@media (max-width:991px){
  .ot-header .ot-logo{ max-width:190px; }
  .ot-header .ot-logo .custom-logo{ max-width:190px !important; max-height:48px !important; }
}

@media (max-width:520px){
  .ot-header .ot-logo{ max-width:155px; }
  .ot-header .ot-logo .custom-logo{ max-width:155px !important; max-height:42px !important; }
}

/* =========================================================
   V4 LAYOUT KATMANI (KONSOLIDE EDİLMİŞ - 2026-08-31)
   Orijinal: assets/css/v4-layout.css
   ========================================================= */

:root{
  --ot-v4-container:1180px;
  --ot-v4-hero:520px;
  --ot-v4-feature:92px;
}

/* Genel taşma güvenliği */
html,body{max-width:100%;overflow-x:hidden}
.ot-site{overflow:hidden}
.ot-container{width:min(100%,var(--ot-v4-container));margin-inline:auto}

/* =========================
   ÜST BAR + HEADER
   ========================= */
.ot-topbar{background:#07162a;color:#d8dfeb;border:0}
.ot-topbar .ot-container{min-height:32px}
.ot-topbar__left,.ot-topbar__right{gap:20px}
.ot-topbar__left span,.ot-topbar__right a{white-space:nowrap}

.ot-header{background:#fff;border-bottom:1px solid #edf0f4}
.ot-header .ot-container{min-height:86px;height:auto;gap:34px}
.ot-header .ot-logo{width:230px;max-width:230px;height:68px;justify-content:flex-start}
.ot-header .ot-logo .custom-logo{max-width:230px!important;max-height:62px!important;width:auto!important;height:auto!important}
.ot-nav{margin-left:auto}
.ot-nav ul{gap:38px}
.ot-nav a{font-size:13px;font-weight:700}
.ot-header__actions .ot-btn{min-height:44px;padding:0 22px;border-radius:5px;font-size:11px}

/* =========================
   HERO / SLIDER
   ========================= */
.ot-hero{
  min-height:var(--ot-v4-hero);
  height:var(--ot-v4-hero);
  background-position:center center;
  background-size:cover;
  isolation:isolate;
}
.ot-hero::before{
  z-index:0;
  background:linear-gradient(90deg,rgba(5,13,24,.94) 0%,rgba(5,13,24,.83) 28%,rgba(5,13,24,.48) 53%,rgba(5,13,24,.10) 79%,rgba(5,13,24,.04) 100%);
}
.ot-hero>.ot-container{height:100%;position:relative;z-index:1}
.ot-hero__inner{max-width:600px;padding:78px 0 calc(var(--ot-v4-feature) + 52px)}
.ot-hero .ot-eyebrow{font-size:14px;margin-bottom:13px}
.ot-hero h1{font-size:46px;line-height:1.08;letter-spacing:-.03em;max-width:590px;margin-bottom:17px}
.ot-hero__inner>p{font-size:15px;line-height:1.62;max-width:500px}
.ot-hero__actions{margin-top:28px;gap:16px}
.ot-hero__actions .ot-btn{min-height:46px;padding:0 22px;font-size:11px;border-radius:5px}

.ot-hero__features{
  position:absolute;left:0;right:0;bottom:0;height:var(--ot-v4-feature);
  z-index:3;background:rgba(3,10,18,.88);border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(7px);
}
.ot-hero__features .ot-container{
  height:100%;min-height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;padding-top:0;padding-bottom:0;padding-right:205px;position:relative;
}
.ot-feature{height:100%;min-width:0;padding:0 20px;display:flex;align-items:center;gap:13px;border-right:1px solid rgba(255,255,255,.13)}
.ot-feature:first-child{padding-left:0}
.ot-feature:last-of-type{border-right:0}
.ot-feature__icon{width:42px;height:42px;min-width:42px;background:transparent;border:1px solid rgba(245,166,35,.84);color:#f5a623}
.ot-feature__icon svg{width:21px;height:21px}
.ot-feature h4{color:#fff;font-size:11px;line-height:1.25;margin:0 0 3px;white-space:normal}
.ot-feature p{color:#cbd4df;font-size:9.5px;line-height:1.35;margin:0}

.ot-hero__phone{
  position:absolute;right:0;bottom:18px;z-index:5;min-width:165px;
  border-radius:14px;padding:8px 14px 8px 8px;box-shadow:0 12px 30px rgba(0,0,0,.24)
}
.ot-hero__phone .ot-icon-circle{width:38px;height:38px;background:#0b1a2d;color:#f5a623}
.ot-hero__phone strong{font-size:12px}
.ot-hero__phone span{font-size:9.5px}

/* =========================
   MARKALAR
   ========================= */
.ot-brands{padding:20px 0 23px;background:#fff}
.ot-brands__title{font-size:9.5px;margin-bottom:15px;letter-spacing:.12em}
.ot-brands__row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;align-items:center}
.ot-brands__row img{width:100%;max-width:100px;height:42px;object-fit:contain;filter:grayscale(1);opacity:.82;mix-blend-mode:multiply}

/* =========================
   HİZMETLER
   ========================= */
#hizmetler{padding:38px 0 42px}
#hizmetler .ot-section-head{margin-bottom:24px}
#hizmetler .ot-section-head h2{font-size:24px}
#hizmetler .ot-section-subtitle{font-size:11px}
.ot-services{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ot-service-card{min-height:188px;padding:22px 14px 17px;border-radius:7px;box-shadow:0 8px 24px rgba(15,30,50,.05)}
.ot-service-card__icon{width:54px;height:48px;margin-bottom:12px}
.ot-service-card__icon svg{width:39px;height:39px}
.ot-service-card h3{font-size:12.5px;margin-bottom:8px}
.ot-service-card p{font-size:10px;line-height:1.55;min-height:63px}
.ot-service-card a{font-size:9.5px}

/* Neden biz / projeler / blog: mevcut yapı korunur, sadece daha ferah */
.ot-why{min-height:225px}
.ot-why__media{height:225px}
#projeler{padding-top:28px;padding-bottom:32px}
.ot-projects-track{grid-auto-columns:calc((100% - 48px)/5);gap:12px}
#blog{padding:26px 0 22px}
.ot-cta{min-height:82px}

/* =========================
   TABLET
   ========================= */
@media (max-width:1199px) and (min-width:783px){
  :root{--ot-v4-container:100%;--ot-v4-hero:500px}
  .ot-container{padding-left:28px;padding-right:28px}
  .ot-header .ot-container{gap:22px}
  .ot-header .ot-logo{width:190px;max-width:190px}
  .ot-header .ot-logo .custom-logo{max-width:190px!important}
  .ot-nav ul{gap:20px}
  .ot-nav a{font-size:12px}
  .ot-hero__inner{padding-top:68px;max-width:530px}
  .ot-hero h1{font-size:41px}
  .ot-hero__features .ot-container{padding-right:190px}
  .ot-feature{padding-inline:12px;gap:10px}
  .ot-feature__icon{width:38px;height:38px;min-width:38px}
  .ot-feature p{font-size:8.7px}
  .ot-brands__row{gap:14px}
  .ot-services{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ot-service-card{min-height:175px}
}

/* =========================
   MOBİL - referans görseldeki düzen
   ========================= */
@media (max-width:782px){
  :root{--ot-v4-container:100%;--ot-v4-hero:auto;--ot-v4-feature:auto}
  .ot-container{padding-left:16px;padding-right:16px}

  .ot-topbar{font-size:9px;padding:0}
  .ot-topbar .ot-container{display:flex;flex-wrap:wrap;min-height:64px;padding-top:7px;padding-bottom:7px;gap:5px 0}
  .ot-topbar__left{width:100%;display:flex;justify-content:space-between;gap:8px}
  .ot-topbar__left span:nth-child(n){display:inline-flex}
  .ot-topbar__right{width:100%;display:flex;justify-content:center;gap:24px}
  .ot-topbar svg{width:11px;height:11px}

  .ot-header{position:relative;z-index:70}
  .ot-header .ot-container{min-height:78px;height:78px;padding-top:7px;padding-bottom:7px}
  .ot-header .ot-logo{width:auto;max-width:190px;height:60px}
  .ot-header .ot-logo .custom-logo{max-width:185px!important;max-height:54px!important}
  .ot-menu-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:8px}
  .ot-menu-toggle svg{width:25px;height:25px}

  .ot-nav{top:0;bottom:0;width:min(84vw,340px);padding:88px 24px 30px;z-index:65}
  .ot-nav ul{gap:5px}
  .ot-nav a{font-size:15px;padding:11px 0;display:block;width:100%}

  .ot-hero{height:auto;min-height:650px;background-position:62% center;overflow:hidden;padding:0}
  .ot-hero::before{background:linear-gradient(90deg,rgba(5,13,24,.89) 0%,rgba(5,13,24,.68) 52%,rgba(5,13,24,.23) 100%)}
  .ot-hero>.ot-container{height:auto;min-height:490px}
  .ot-hero__inner{max-width:100%;padding:88px 0 132px}
  .ot-hero .ot-eyebrow{font-size:13px;line-height:1.35;max-width:230px;margin-bottom:13px}
  .ot-hero h1{font-size:31px;line-height:1.08;max-width:330px;margin-bottom:16px}
  .ot-hero__inner>p{font-size:13px;line-height:1.55;max-width:320px}
  .ot-hero__actions{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .ot-hero__actions .ot-btn{min-height:43px;padding:0 18px;font-size:10px;width:auto}

  .ot-hero__features{position:relative;left:auto;right:auto;bottom:auto;height:auto;background:rgba(3,10,18,.94);backdrop-filter:none}
  .ot-hero__features .ot-container{height:auto;min-height:158px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 8px 12px;gap:0}
  .ot-feature{height:auto;min-height:130px;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;padding:0 6px;gap:7px;border-right:1px solid rgba(255,255,255,.13)}
  .ot-feature:first-child{padding-left:6px}
  .ot-feature:last-of-type{border-right:0}
  .ot-feature__icon{width:36px;height:36px;min-width:36px;margin-top:2px}
  .ot-feature__icon svg{width:18px;height:18px}
  .ot-feature h4{font-size:8.5px;line-height:1.25;margin:0;white-space:normal}
  .ot-feature p{font-size:7.3px;line-height:1.35;margin:0;word-break:normal}

  .ot-hero__phone{right:auto;left:16px;bottom:176px;min-width:158px;padding:7px 13px 7px 7px;border-radius:13px}
  .ot-hero__phone .ot-icon-circle{width:36px;height:36px}
  .ot-hero__phone strong{font-size:11.5px}
  .ot-hero__phone span{font-size:9px}

  .ot-brands{padding:28px 0 31px}
  .ot-brands__title{font-size:9px;margin-bottom:22px}
  .ot-brands__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  .ot-brands__row img{max-width:86px;height:40px}

  #hizmetler{padding:34px 0 38px}
  #hizmetler .ot-section-head{margin-bottom:20px;padding-inline:8px}
  #hizmetler .ot-section-head h2{font-size:23px;line-height:1.18}
  #hizmetler .ot-section-subtitle{font-size:11px;line-height:1.55}
  .ot-services{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ot-service-card{min-height:190px;padding:19px 12px 15px}
  .ot-service-card__icon{width:48px;height:45px;margin-bottom:9px}
  .ot-service-card__icon svg{width:34px;height:34px}
  .ot-service-card h3{font-size:12px}
  .ot-service-card p{font-size:9.5px;min-height:58px}

  .ot-section--navy{padding:0}
  .ot-why{grid-template-columns:1fr;min-height:0}
  .ot-why__content{display:block;padding:34px 16px 30px}
  .ot-stats{grid-template-columns:repeat(2,minmax(0,1fr));border-left:0;padding-left:0;margin-top:24px;gap:14px}
  .ot-why__media{height:260px;margin:0;border-radius:0}

  .ot-projects-head{align-items:flex-end;gap:12px}
  .ot-projects-head .ot-btn{white-space:nowrap}
  .ot-projects-track{grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}
  .ot-project-card{scroll-snap-align:start}
  .ot-slider-nav{display:none}

  .ot-blog-grid{grid-template-columns:1fr;gap:12px}
  .ot-blog-card{grid-template-columns:38% 62%;min-height:118px}
  .ot-blog-card__thumb{min-height:118px}
  .ot-blog-card__body{padding:11px}
  .ot-blog-card h3{font-size:11px}

  .ot-cta{padding:20px;border-radius:8px;gap:18px}
  .ot-cta__left{align-items:flex-start}
  .ot-cta .ot-btn{width:100%;justify-content:center}
  .ot-footer__top{grid-template-columns:1fr;padding:38px 0 24px;gap:26px}
}

@media (max-width:430px){
  .ot-topbar__left{gap:4px}
  .ot-topbar__left span{font-size:8px}
  .ot-topbar__right{gap:15px;font-size:8.5px}
  .ot-header .ot-logo{max-width:165px}
  .ot-header .ot-logo .custom-logo{max-width:160px!important}
  .ot-hero{background-position:65% center}
  .ot-hero__inner{padding-top:76px}
  .ot-hero h1{font-size:28px;max-width:300px}
  .ot-hero__inner>p{font-size:12.5px;max-width:290px}
  .ot-feature{padding-inline:4px}
  .ot-feature:first-child{padding-left:4px}
  .ot-feature h4{font-size:7.8px}
  .ot-feature p{font-size:6.9px}
  .ot-services{grid-template-columns:1fr}
  .ot-service-card{min-height:auto}
  .ot-service-card p{min-height:0}
  .ot-projects-track{grid-auto-columns:86%}
}