/* ==========================================================================
   TTR Bilişim — MVC sitesine özel eklemeler
   Tema: style.css (Ttrbilisimhtml/html ile aynı dosya; değiştirmeyin).
   Bu dosya yalnızca CMS'ten gelen içerik ve MVC'ye özel bileşenler içindir.
   Not: html font-size 62.5% → 1rem = 10px
   ========================================================================== */

/* ---------- CMS içeriği (eski siteden gelen HTML) ---------- */
.prose--narrow{max-width:82rem;margin-left:auto;margin-right:auto}
.cms-content{overflow-wrap:break-word}
.cms-content [style*="color"]{color:inherit!important}
.cms-content [style*="font-size"]{font-size:inherit!important}
.cms-content [style*="text-align: justify"],.cms-content [style*="text-align:justify"]{text-align:left!important}
.cms-content p:empty,.cms-content p:has(>br:only-child){display:none}
.cms-content p+p{margin-top:1.6rem}
.cms-content h2,.cms-content h3,.cms-content h4{color:var(--c-dark)}
.cms-content h4{font:500 var(--x-16)/1.4 var(--f-sans);margin:3.2rem 0 1.2rem}
.cms-content h2 a,.cms-content h3 a{text-decoration:none}
.cms-content h2 a:hover,.cms-content h3 a:hover{text-decoration:underline;text-underline-offset:.2em}
.cms-content p a,.cms-content li a,.cms-content td a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.cms-content p a:hover,.cms-content li a:hover{color:var(--c-light-brown)}
.cms-content img{display:inline-block;max-width:100%;height:auto;vertical-align:middle}
.cms-content picture{display:block}
.cms-content p>img:only-child,.cms-content figure img{display:block;margin:2.4rem 0}
.cms-content ol{margin:2rem 0;padding-left:2.4rem;list-style:decimal;display:flex;flex-direction:column;gap:1rem}
.cms-content ol li{font-size:var(--x-18);line-height:1.45}
.cms-content ul[style*="list-style"]{margin:1.6rem 0!important}
.cms-content ul[style*="list-style"]>li{padding-left:0}
.cms-content ul[style*="list-style"]>li::before{display:none}
.cms-content table{width:100%;margin:2.4rem 0;border-collapse:collapse;font:400 var(--x-14)/1.5 var(--f-sans)}
.cms-content th,.cms-content td{padding:1.2rem;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top}
.cms-content th{font-weight:500;background:var(--c-beige)}
.cms-content blockquote{margin:3.2rem 0;padding-left:2.4rem;border-left:1px solid var(--c-light-brown);font:300 var(--t-24)/1.4 var(--f-serif)}
.cms-content iframe,.cms-content video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;height:auto;border:0;margin:2.4rem 0}
.cms-content .fa{font-style:normal}
.cms-content .table-responsive,.cms-content .table-wrap{overflow-x:auto}

/* Ana sayfa CMS gövdesi (eski slider listesi view tarafında çıkarılır) */
.home-cms{max-width:82rem;margin-left:auto;margin-right:auto}

/* ---------- Sayfa görseli / makale ---------- */
.page-figure{margin:0 0 4rem;background:var(--c-beige);overflow:hidden}
.page-figure img{display:block;width:100%;height:auto;max-height:56rem;object-fit:cover}
.article{max-width:82rem;margin-left:auto;margin-right:auto}
.article__meta{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;margin-bottom:3.2rem;padding-bottom:2rem;border-bottom:1px solid var(--c-line);font:400 var(--x-12)/1.5 var(--f-sans);letter-spacing:.1rem;text-transform:uppercase;color:var(--c-muted)}

/* Referans ekran görüntüsü (uzun tam sayfa görüntüleri) */
.screen-frame{position:sticky;top:12rem;max-height:80vh;overflow:auto;padding:1.6rem;background:var(--c-beige);scrollbar-width:thin}
.screen-frame img{display:block;width:100%;height:auto;margin:0 auto;box-shadow:0 1.2rem 3.2rem #0000001f}
@media (max-width:1024px){.screen-frame{position:static;max-height:60rem}}

/* Proje bilgileri */
.facts{display:flex;flex-direction:column}
.facts div{display:grid;grid-template-columns:16rem 1fr;gap:2rem;padding:1.6rem 0;border-bottom:1px solid var(--c-line)}
.facts dt{font:500 var(--x-12)/1.5 var(--f-sans);letter-spacing:.1rem;text-transform:uppercase;color:var(--c-muted)}
.facts dd{font:400 var(--x-16)/1.5 var(--f-sans)}
@media (max-width:560px){.facts div{grid-template-columns:1fr;gap:.6rem}}

/* ---------- Kartlar ---------- */
.project-card__img img{object-position:top center}
.project-card--wide .project-card__img{aspect-ratio:16/10}
.project-card--wide .project-card__img img{object-position:center}
.project-card__img--empty{display:flex;align-items:flex-end;padding:2.4rem;background:var(--c-dark-beige);color:var(--c-light-beige);transition:background .4s}
.project-card__img--empty span{font:300 var(--t-32)/1.15 var(--f-serif)}
.project-card:hover .project-card__img--empty{background:var(--c-dark-brown)}
.logos li a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:inherit}
.logos li{font-size:1.9rem}

/* ---------- İç sayfa yan sütunu ---------- */
.page-aside{position:sticky;top:12rem;display:flex;flex-direction:column;gap:1.6rem}
.page-aside .service-row__media{aspect-ratio:4/3}
.page-aside__box{padding:3.2rem;background:var(--c-beige)}
.page-aside__box--light{background:var(--c-light)}
.bg-beige .page-aside__box--light,.page-aside__box--light{border:1px solid var(--c-line)}
.page-aside__box a{text-decoration:none}
.page-aside__box p a:hover{text-decoration:underline}
.page-aside__links{display:flex;flex-direction:column;margin-top:1.6rem}
.page-aside__links a{display:block;padding:1.2rem 0;border-bottom:1px solid var(--c-line);font:400 var(--x-16)/1.4 var(--f-sans);transition:padding .4s var(--ease-out),opacity .3s}
.page-aside__links a:hover{padding-left:.8rem;opacity:.7}
@media (max-width:1024px){.page-aside{position:static}}

/* ---------- Form / iletişim ---------- */
.form__note{color:#ffffff80}
.office-address{font-style:normal;font-size:var(--x-18)}
.social-links{display:flex;flex-direction:column;gap:1.4rem}
.hours a{text-decoration:none}
.hours a:hover{text-decoration:underline}
.contact-tile__value--small{font-size:var(--t-24);line-height:1.3}
.steps--single{grid-template-columns:1fr}
.steps--single .step{padding-right:0}
.link-light{color:var(--c-light)}
.cta-band-wrap{padding-left:1.6rem;padding-right:1.6rem;background:var(--c-light)}
.not-found__text{max-width:52rem}
.not-found__actions{justify-content:center}

/* ---------- Çerez onayı ---------- */
.consent-banner{position:fixed;z-index:60;right:2.4rem;bottom:2.4rem;left:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:2.4rem;max-width:98rem;margin-inline:auto;padding:2.4rem;background:var(--c-light);color:var(--c-dark);box-shadow:0 1.8rem 5rem #0003;font-family:var(--f-sans)}
.consent-banner[hidden]{display:none}
.consent-banner strong{font:500 var(--x-12)/1.4 var(--f-sans);letter-spacing:.12rem;text-transform:uppercase}
.consent-banner p{max-width:70rem;margin:.8rem 0 0;font:400 var(--x-14)/1.5 var(--f-sans);color:var(--c-muted)}
.consent-banner p a{color:var(--c-dark)}
.consent-banner__actions{display:flex;flex:none;gap:1rem}
.consent-banner button{height:4.6rem;padding:0 2rem;border:1px solid var(--c-dark);background:var(--c-light);color:var(--c-dark);font:500 var(--x-12)/1 var(--f-sans);letter-spacing:.12rem;text-transform:uppercase;cursor:pointer}
.consent-banner #consent-accept{background:var(--c-dark);color:var(--c-light)}
@media (max-width:720px){.consent-banner{right:1.2rem;bottom:1.2rem;left:1.2rem;display:block}.consent-banner__actions{margin-top:1.6rem}.consent-banner button{flex:1}}

/* ---------- Sağdan açılan perde (ana sayfa "Hakkımızda") ---------- */
.drawer-tab{position:fixed;right:0;top:50%;z-index:45;display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem 1.2rem;border:0;background:var(--c-brown);color:var(--c-light);box-shadow:0 .8rem 2.4rem #0003;cursor:pointer;transform:translateY(-50%);transition:background .3s,padding .4s var(--ease-out)}
.drawer-tab:hover{background:var(--c-dark-brown);padding-right:1.8rem}
.drawer-tab__label{writing-mode:vertical-rl;transform:rotate(180deg);font:500 var(--x-12)/1 var(--f-sans);letter-spacing:.16rem;text-transform:uppercase}
.drawer-tab__icon{display:flex;transition:transform .4s var(--ease-out)}
.drawer-tab:hover .drawer-tab__icon{transform:translateX(-.3rem)}
.drawer{position:fixed;inset:0;z-index:70;visibility:hidden;transition:visibility 0s linear .7s}
.drawer.is-open{visibility:visible;transition:visibility 0s}
.drawer__backdrop{position:absolute;inset:0;background:#0009;opacity:0;transition:opacity .6s var(--ease-out)}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(64rem,100%);background:var(--c-beige);box-shadow:-1.2rem 0 4rem #0003;transform:translateX(100%);transition:transform .7s var(--ease);outline:0}
.drawer.is-open .drawer__panel{transform:none}
.drawer.is-dragging .drawer__panel{transition:none}
.drawer__bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.4rem 4rem;border-bottom:1px solid var(--c-line)}
.drawer__close{display:flex;align-items:center;gap:1.2rem;padding:0;border:0;background:none;color:var(--c-dark);font:500 var(--x-12)/1 var(--f-sans);letter-spacing:.12rem;text-transform:uppercase;cursor:pointer}
.drawer__close:hover{opacity:.6}
.drawer__close-x{position:relative;width:2rem;height:2rem}
.drawer__close-x::before,.drawer__close-x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transform:rotate(45deg)}
.drawer__close-x::after{transform:rotate(-45deg)}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4rem 4rem 6rem;-webkit-overflow-scrolling:touch}
.drawer__body .home-cms{max-width:none}
.drawer__actions{display:flex;flex-wrap:wrap;gap:1.2rem}
@media (max-width:1024px){
  .drawer-tab{padding:1.6rem .9rem;gap:.8rem}
  .drawer-tab__label{font-size:1rem;letter-spacing:.12rem}
  .drawer__bar{padding:1.8rem 1.6rem}
  .drawer__body{padding:3rem 1.6rem 5rem}
  .drawer__actions{flex-direction:column}
  .drawer__actions .button{width:100%}
}

/* ---------- Marka logosu (üst: ttrlogoust, alt: ttrlogoalt siyah/beyaz) ---------- */
.brand-logo{gap:.5rem}
.brand-logo__top{width:auto;height:4.6rem}
.brand-logo__bottom{display:grid}
.brand-logo__text{grid-area:1/1;width:15.6rem;height:auto}
/* Saydam header (koyu görsel üstü): beyaz yazı; kaydırınca / menü açıkken / düz header'da: siyah yazı */
.header-logo .brand-logo__text--dark{visibility:hidden}
.header-bar.is-scroll .header-logo .brand-logo__text--dark,.site-header.is-open .header-logo .brand-logo__text--dark{visibility:visible}
.header-bar.is-scroll .header-logo .brand-logo__text--light,.site-header.is-open .header-logo .brand-logo__text--light{visibility:hidden}
.brand-logo--footer{gap:1rem}
.brand-logo--footer .brand-logo__top{height:6.4rem}
.brand-logo--footer .brand-logo__text{width:22rem}
@media (max-width:1024px){
  .brand-logo{gap:.3rem}
  .brand-logo__top{height:3.2rem}
  .brand-logo__text{width:11rem}
  .brand-logo--footer .brand-logo__top{height:5.2rem}
  .brand-logo--footer .brand-logo__text{width:18rem}
}

/* ---------- Referans logo kartları (ana sayfa kaydırıcısı) ---------- */
.logo-card{display:block;width:30rem;text-decoration:none;color:var(--c-dark)}
/* İç boşluk 0.2rem: logo kutunun neredeyse tamamını kullanır */
.logo-card__box{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:.2rem;overflow:hidden;background:var(--c-light);border:1px solid var(--c-line);transition:background .5s var(--ease-out),border-color .5s,box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
/* Logolar kendi renkleri ve tam netliğiyle gösterilir (gri/soluk filtre yok) */
.logo-card__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .8s var(--ease-out)}
.logo-card__wordmark{padding:1.6rem;font:400 clamp(2.4rem,2.2vw,3.2rem)/1.1 var(--f-serif);letter-spacing:.02rem;text-align:center;overflow-wrap:anywhere;transition:color .5s,transform .8s var(--ease-out)}
.logo-card__more{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1.2rem;background:var(--c-dark);font:500 var(--x-11)/1 var(--f-sans);letter-spacing:.14rem;text-transform:uppercase;color:var(--c-light);transform:translateY(100%);transition:transform .5s var(--ease-out)}
/* Üzerine gelince arka plan açık kalır (koyu logolar görünür kalsın); kart yükselir, çerçeve koyulaşır */
.logo-card:hover .logo-card__box,.logo-card:focus-visible .logo-card__box{background:var(--c-light);border-color:var(--c-dark);box-shadow:0 1.6rem 3.2rem #0000001f;transform:translateY(-.4rem)}
.logo-card:hover .logo-card__wordmark,.logo-card:focus-visible .logo-card__wordmark{color:var(--c-dark);transform:translateY(-1.2rem)}
.logo-card:hover .logo-card__img,.logo-card:focus-visible .logo-card__img{transform:translateY(-1.2rem)}
.logo-card:hover .logo-card__more,.logo-card:focus-visible .logo-card__more{transform:none}
.logo-card__meta{display:flex;justify-content:space-between;gap:1.6rem;margin-top:1.2rem;font:400 var(--x-12)/1.4 var(--f-sans);letter-spacing:.08rem;text-transform:uppercase}
.logo-card__meta span:last-child{opacity:.5}
/* Logo altındaki firma adı gizlenir (uzun başlıklar ızgarayı bozuyordu); ad, bağlantının aria-label ve logonun alt metninde kalır */
.logo-card__title{display:none}
@media (max-width:1024px){.logo-card{width:64vw}}
.logo-card__wordmark--long{font-size:clamp(1.9rem,1.6vw,2.3rem);line-height:1.2}

/* MTHS referans logoları (görsel logolar) */
.logos--images{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.logos--images li{aspect-ratio:auto;height:11.2rem;padding:2rem;background:var(--c-light)}
.logos--images a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.logos--images img{display:block;max-width:100%;max-height:7.2rem;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .4s,opacity .4s}
.logos--images li:hover img{filter:none;opacity:1}
@media (hover:none){.logos--images img{filter:none;opacity:1}}
@media (max-width:560px){.logos--images{grid-template-columns:1fr 1fr}.logos--images li{height:9.6rem;padding:1.4rem}.logos--images img{max-height:6rem}}

/* Referanslar sayfası logo ızgarası */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(24rem,100%),1fr));align-items:start;gap:4rem 2.4rem;margin-top:6rem}
.logo-grid .logo-card{width:auto}
@media (max-width:560px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 1.2rem}.logo-grid .logo-card__wordmark{font-size:1.9rem}.logo-grid .logo-card__wordmark--long{font-size:1.4rem;line-height:1.25}.logo-grid .logo-card__meta{font-size:1rem}}

/* Referans detayı: hero'da firma logosu */
.hero-logo{display:flex;align-items:center;justify-content:center;width:24rem;max-width:100%;aspect-ratio:4/3;margin:0 0 1.6rem;padding:2.4rem;background:var(--c-light)}
.hero-logo img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:1024px){.hero-logo{width:18rem}}

/* İletişim: panelden eklenen ofis görseli */
.office-figure{margin:2.4rem 0 0;aspect-ratio:4/3;overflow:hidden;background:var(--c-light)}
.office-figure img{display:block;width:100%;height:100%;object-fit:cover}

/* Başlık yapısı düzenlemeleri (ContentOutline): görünüm özgün başlık seviyesine göre korunur */
.footer__col .footer__heading{margin:0 0 4rem;font:400 var(--x-12)/1 var(--f-sans);letter-spacing:.12rem;text-transform:uppercase;opacity:.4;white-space:nowrap}
@media (max-width:1024px){.footer__col .footer__heading{margin-bottom:2.4rem}}
.hero__title h1.hero__slide,.hero__title p.hero__slide{font:inherit;letter-spacing:inherit;color:inherit;margin:0}
.prose .cms-h2{font:300 var(--t-40)/1.15 var(--f-serif);margin:6rem 0 2.4rem;color:var(--c-dark)}
.prose .cms-h3{font:400 var(--t-24)/1.3 var(--f-serif);margin:4rem 0 1.6rem;color:var(--c-dark)}
.prose .cms-h4{font:500 var(--x-16)/1.4 var(--f-sans);margin:3.2rem 0 1.2rem;color:var(--c-dark)}
.prose .cms-h2:first-child,.prose .cms-h3:first-child{margin-top:0}
.prose .cms-heading a{text-decoration:none}
.prose .cms-faq{margin:2.4rem 0 4rem}
.prose .cms-faq summary{margin:0}
.prose .cms-faq .faq__answer>*:first-child{margin-top:0}
.prose .cms-faq .faq__answer>*:last-child{margin-bottom:0}