:root {
  --kk-ink: #10233e;
  --kk-ink-soft: #45566d;
  --kk-navy: #0a2445;
  --kk-blue: #174c83;
  --kk-gold: #c89c51;
  --kk-cream: #f6f2ea;
  --kk-paper: #ffffff;
  --kk-line: #dfe5ec;
  --kk-success: #1f6a4a;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body.kk-preview {
  background: #f7f9fb;
  color: var(--kk-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}
a { color: inherit; }
.kk-preview-banner {
  background: #07182d;
  color: #d9e4ef;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  padding: 9px 20px;
  text-align: center;
}
.kk-site-header {
  align-items: center;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--kk-line);
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 104px;
  padding: 14px max(24px, calc((100vw - 1320px) / 2));
  position: sticky;
  top: 0;
  z-index: 20;
}
.kk-brand { align-items: center; display: inline-flex; gap: 12px; text-decoration: none; width: max-content; }
.kk-brand-mark { align-items: center; background: var(--kk-navy); border-radius: 50%; color: #fff; display: inline-flex; font-family: Georgia, serif; font-size: 23px; height: 44px; justify-content: center; width: 44px; }
.kk-brand strong, .kk-brand small { display: block; letter-spacing: .11em; }
.kk-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.kk-brand small { color: var(--kk-ink-soft); font-size: 9px; margin-top: 2px; }
.kk-site-header nav { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
.kk-site-header nav a { font-size: 14px; font-weight: 700; text-decoration: none; }
.kk-header-cta, .kk-button { align-items: center; border-radius: 999px; display: inline-flex; font-size: 14px; font-weight: 750; justify-content: center; min-height: 46px; padding: 0 22px; text-decoration: none; }
.kk-header-cta { background: var(--kk-navy); color: #fff; }
.kk-language-switcher { align-items: center; display: flex; gap: 5px; grid-column: 1 / -1; justify-content: center; white-space: nowrap; }
.kk-language-switcher strong, .kk-language-switcher span { border: 1px solid var(--kk-line); border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; padding: 7px 8px; }
.kk-language-switcher strong { background: var(--kk-navy); border-color: var(--kk-navy); color: #fff; }
.kk-language-switcher span { color: #78879a; cursor: not-allowed; }
main { min-height: 70vh; }
.kk-hero, .kk-tera-detail-hero {
  background: linear-gradient(125deg, #07182d 0%, #103a68 67%, #1a5689 100%);
  color: #fff;
  display: grid;
  gap: clamp(32px, 7vw, 90px);
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  margin: 0 auto;
  max-width: 1440px;
  min-height: 590px;
  overflow: hidden;
  padding: clamp(70px, 9vw, 126px) max(24px, calc((100% - 1180px) / 2));
  position: relative;
}
.kk-hero::before, .kk-tera-detail-hero::before { background: radial-gradient(circle, rgba(200,156,81,.28), transparent 64%); content: ""; height: 600px; position: absolute; right: -120px; top: -190px; width: 600px; }
.kk-hero-copy, .kk-tera-detail-hero > div { position: relative; z-index: 2; }
.kk-kicker { color: var(--kk-gold); display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; margin-bottom: 16px; }
.kk-hero h1, .kk-catalog-hero h1, .kk-tera-detail-hero h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 6vw, 76px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; margin: 0; max-width: 820px; }
.kk-hero p, .kk-tera-detail-hero p { color: #d9e4ef; font-size: clamp(17px, 2vw, 20px); line-height: 1.7; margin: 26px 0 0; max-width: 700px; }
.kk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.kk-button-primary { background: var(--kk-gold); color: #091a2d; }
.kk-button-ghost { border: 1px solid rgba(255,255,255,.38); color: #fff; }
.kk-trust-row { color: #eaf1f7; display: flex; flex-wrap: wrap; font-size: 13px; gap: 19px; margin-top: 28px; }
.kk-hero-panel { align-content: center; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; position: relative; z-index: 2; }
.kk-stat { backdrop-filter: blur(8px); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; min-height: 148px; padding: 28px; }
.kk-stat-wide { grid-column: 1 / -1; min-height: 120px; }
.kk-stat strong, .kk-stat span { display: block; }
.kk-stat strong { color: #fff; font-family: Georgia, serif; font-size: 48px; font-weight: 500; }
.kk-stat span { color: #d9e4ef; line-height: 1.4; margin-top: 8px; }
.kk-section { margin: 0 auto; max-width: 1180px; padding: 78px 24px; }
.kk-section + .kk-section { padding-top: 12px; }
.kk-section-head { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 30px; }
.kk-section-head h2, .kk-tera-feature h2, .kk-verification-panel h2, .kk-contact-panel h2 { font-family: Georgia, serif; font-size: clamp(32px, 4vw, 48px); font-weight: 500; margin: 0; }
.kk-section-head > p, .kk-section-head > a { color: var(--kk-ink-soft); margin: 0; }
.kk-city-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.kk-city-card { border-radius: 22px; color: #fff; display: flex; flex-direction: column; min-height: 210px; overflow: hidden; padding: 30px; position: relative; text-decoration: none; }
.kk-city-card::after { border: 1px solid rgba(255,255,255,.17); border-radius: 50%; content: ""; height: 220px; position: absolute; right: -70px; top: -76px; width: 220px; }
.kk-city-card span { font-family: Georgia, serif; font-size: 34px; position: relative; z-index: 2; }
.kk-city-card strong { font-size: 14px; margin-top: auto; position: relative; z-index: 2; }
.kk-city-card small { color: rgba(255,255,255,.75); margin-top: 7px; position: relative; z-index: 2; }
.kk-city-istanbul { background: linear-gradient(135deg, #143d66, #0a2445); }
.kk-city-ankara { background: linear-gradient(135deg, #76562c, #b18441); }
.kk-city-antalya { background: linear-gradient(135deg, #1e6e70, #124449); }
.kk-tera-feature { align-items: center; background: var(--kk-cream); border-radius: 30px; display: grid; gap: 54px; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); margin-bottom: 70px; padding: 44px; }
.kk-tera-feature p { color: var(--kk-ink-soft); font-size: 17px; line-height: 1.7; }
.kk-tera-art, .kk-tera-detail-art { align-items: center; background: linear-gradient(145deg, #091c33, #1f5687); border-radius: 24px; color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 310px; overflow: hidden; position: relative; }
.kk-tera-art::before, .kk-tera-detail-art::before { border: 1px solid rgba(200,156,81,.45); border-radius: 50%; content: ""; height: 310px; position: absolute; width: 310px; }
.kk-tera-art span, .kk-tera-detail-art span { color: var(--kk-gold); font-family: Georgia, serif; font-size: 92px; line-height: 1; position: relative; }
.kk-tera-art small, .kk-tera-detail-art small { letter-spacing: .26em; margin-top: 14px; position: relative; }
.kk-text-link { color: var(--kk-blue); font-weight: 800; text-decoration: none; }
.kk-project-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.kk-project-card { background: #fff; border: 1px solid var(--kk-line); border-radius: 20px; box-shadow: 0 16px 42px rgba(25,47,75,.07); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.kk-project-card:hover { box-shadow: 0 20px 52px rgba(25,47,75,.12); transform: translateY(-3px); }
.kk-project-card.is-priority { border-color: #d3b276; box-shadow: 0 18px 50px rgba(150,105,31,.16); }
.kk-project-visual { align-items: center; background: linear-gradient(135deg, #dfe7ef, #b9c7d5); display: flex; height: 220px; justify-content: center; overflow: hidden; position: relative; text-decoration: none; }
.kk-project-card:nth-child(3n+2) .kk-project-visual { background: linear-gradient(135deg, #e6dfd2, #cbb99d); }
.kk-project-card:nth-child(3n+3) .kk-project-visual { background: linear-gradient(135deg, #d7e3df, #aac4bd); }
.kk-project-card.is-priority .kk-project-visual { background: linear-gradient(135deg, #0a2445, #1d5c8d); }
.kk-project-initials { color: rgba(255,255,255,.94); font-family: Georgia, serif; font-size: 58px; letter-spacing: -.06em; }
.kk-project-badge { background: rgba(8,28,51,.9); border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; left: 16px; padding: 8px 12px; position: absolute; top: 16px; }
.kk-project-card.is-priority .kk-project-badge { background: var(--kk-gold); color: #0a1b2d; }
.kk-project-body { padding: 23px; }
.kk-project-location { color: var(--kk-blue); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kk-project-body h3 { font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.2; margin: 10px 0 8px; }
.kk-project-body h3 a { text-decoration: none; }
.kk-project-body p { color: var(--kk-ink-soft); font-size: 14px; margin: 0; }
.kk-card-footer { align-items: center; border-top: 1px solid var(--kk-line); display: flex; font-size: 12px; justify-content: space-between; margin-top: 22px; padding-top: 16px; }
.kk-card-footer a { color: var(--kk-blue); font-weight: 800; text-decoration: none; }
.kk-catalog-hero { background: var(--kk-navy); color: #fff; padding: 82px max(24px, calc((100vw - 1180px) / 2)); }
.kk-catalog-hero p { color: #cbd8e6; font-size: 18px; line-height: 1.6; max-width: 680px; }
.kk-filter-shell { align-items: center; background: #fff; border: 1px solid var(--kk-line); border-radius: 18px; display: flex; gap: 28px; justify-content: space-between; margin-top: 42px; padding: 20px 24px !important; }
.kk-filter-copy strong, .kk-filter-copy span { display: block; }
.kk-filter-copy span { color: var(--kk-ink-soft); font-size: 12px; margin-top: 4px; }
.kk-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-filter-pills a { background: #edf2f6; border-radius: 999px; font-size: 13px; font-weight: 750; padding: 10px 14px; text-decoration: none; }
.kk-filter-pills a.is-active { background: var(--kk-navy); color: #fff; }
.kk-filter-pills small { opacity: .7; }
.kk-tera-detail-hero { min-height: 620px; }
.kk-tera-detail-art { min-height: 390px; position: relative; z-index: 2; }
.kk-verification-panel { align-items: start; display: grid; gap: 60px; grid-template-columns: .8fr 1.2fr; }
.kk-check-list { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.kk-check-list p { background: #fff; border: 1px solid var(--kk-line); border-radius: 16px; margin: 0; padding: 20px; }
.kk-check-list p > span { align-items: center; background: var(--kk-cream); border-radius: 50%; color: #896329; display: flex; font-weight: 800; height: 30px; justify-content: center; margin-bottom: 14px; width: 30px; }
.kk-check-list strong, .kk-check-list small { display: block; }
.kk-check-list small { color: var(--kk-ink-soft); line-height: 1.5; margin-top: 6px; }
.kk-contact-panel { align-items: center; background: var(--kk-navy); border-radius: 28px; color: #fff; display: grid; gap: 40px; grid-template-columns: 1fr auto; margin-bottom: 80px; padding: 46px; }
.kk-contact-panel p { color: #cbd8e6; line-height: 1.65; max-width: 700px; }
.kk-contact-panel > div:last-child { align-items: center; display: flex; flex-direction: column; gap: 10px; }
.kk-contact-panel small { color: #9fb0c2; }
.kk-site-footer { align-items: center; background: #07182d; color: #fff; display: flex; gap: 32px; justify-content: space-between; padding: 44px max(24px, calc((100vw - 1180px) / 2)); }
.kk-site-footer strong, .kk-site-footer span, .kk-site-footer a { display: block; }
.kk-site-footer span { color: #9fb0c2; font-size: 13px; margin-top: 8px; }
.kk-site-footer a { color: #fff; font-size: 13px; text-decoration: none; }
.kk-legal-links, .kk-join-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.kk-footer-contact a { display: block; margin-top: 7px; text-align: right; }
.kk-legal-shell { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr); }
.kk-legal-note { background: var(--kk-cream); border-left: 4px solid var(--kk-gold); border-radius: 12px; padding: 22px; position: sticky; top: 100px; }
.kk-legal-note strong, .kk-legal-note span { display: block; }
.kk-legal-note span { color: var(--kk-ink-soft); font-size: 13px; line-height: 1.6; margin-top: 8px; }
.kk-legal-card { background: #fff; border: 1px solid var(--kk-line); border-radius: 22px; min-width: 0; padding: clamp(26px, 5vw, 58px); }
.kk-legal-card h2 { font-family: Georgia, serif; font-size: clamp(25px, 3vw, 34px); font-weight: 500; margin: 36px 0 12px; }
.kk-legal-card h2:first-child { margin-top: 0; }
.kk-legal-card p { color: var(--kk-ink-soft); line-height: 1.75; }
.kk-legal-card a { color: var(--kk-blue); font-weight: 700; }
.kk-legal-table-wrap { max-width: 100%; overflow-x: auto; }
.kk-legal-card table { border-collapse: collapse; min-width: 680px; width: 100%; }
.kk-legal-card th, .kk-legal-card td { border: 1px solid var(--kk-line); padding: 14px; text-align: left; vertical-align: top; }
.kk-legal-card th { background: #edf2f6; }
.kk-intent-grid, .kk-news-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-intent-grid article, .kk-news-grid article, .kk-empty-state { background: #fff; border: 1px solid var(--kk-line); border-radius: 22px; padding: clamp(26px, 4vw, 44px); }
.kk-intent-grid h2, .kk-news-grid h2, .kk-empty-state h2 { font-family: Georgia, serif; font-size: clamp(27px, 3vw, 38px); font-weight: 500; margin: 0 0 14px; }
.kk-intent-grid p, .kk-news-grid p, .kk-empty-state p { color: var(--kk-ink-soft); line-height: 1.7; }
.kk-embedded-tools { background: #f7f9fb; }
.kk-embedded-tools > :where(form, div, section) { max-width: 1180px; }
.kk-embedded-tools :where(input, select, textarea, button) { font: inherit; }
.kk-contact-options { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kk-contact-options > a { background: #fff; border: 1px solid var(--kk-line); border-radius: 18px; display: grid; gap: 7px; padding: 24px; text-decoration: none; }
.kk-contact-options span { color: var(--kk-ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kk-contact-options strong { color: var(--kk-navy); overflow-wrap: anywhere; }
.kk-news-grid article > span { color: var(--kk-gold); font-size: 12px; font-weight: 800; }
.kk-news-grid h2 { font-size: 28px; margin-top: 12px; }
.kk-news-grid h2 a { text-decoration: none; }
.kk-search-form, .kk-application-form { background: #fff; border: 1px solid var(--kk-line); border-radius: 22px; margin-bottom: 28px; padding: clamp(24px, 4vw, 42px); }
.kk-search-form label, .kk-application-form > label, .kk-application-form .kk-form-row label { display: grid; font-size: 13px; font-weight: 750; gap: 8px; }
.kk-search-form > div { display: flex; gap: 12px; margin-top: 10px; }
.kk-search-form input, .kk-application-form input, .kk-application-form textarea { background: #fff; border: 1px solid #bdc9d5; border-radius: 10px; color: var(--kk-ink); font: inherit; min-height: 48px; padding: 11px 13px; width: 100%; }
.kk-application-form textarea { min-height: 130px; resize: vertical; }
.kk-application-shell { align-items: start; display: grid; gap: 34px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.kk-application-copy h2 { font-family: Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 500; margin: 0; }
.kk-application-copy p, .kk-application-copy li, .kk-form-note { color: var(--kk-ink-soft); line-height: 1.7; }
.kk-application-form { display: grid; gap: 18px; margin: 0; }
.kk-form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.kk-consent { align-items: start; display: grid !important; font-weight: 500 !important; grid-template-columns: 22px 1fr; line-height: 1.55; }
.kk-consent input { min-height: 18px; margin-top: 2px; width: 18px; }
.kk-consent a { color: var(--kk-blue); font-weight: 750; }
.kk-honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }
.kk-form-alert { background: #fff2f0; border-left: 4px solid #b8332a; color: #7b211b; margin: 0; padding: 12px 14px; }
.kk-form-note { font-size: 12px; margin: 0; }

@media (max-width: 900px) {
  .kk-site-header { grid-template-columns: 1fr auto; }
  /* DÜZELTME (mobil P0): nav gizlenmiyor, açılır menüye dönüşüyor. */
  .kk-site-header { position: relative; }
  .kk-nav-toggle { display: inline-flex; }
  .kk-main-nav {
    background: #fff;
    border: 1px solid var(--kk-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(11, 31, 58, .16);
    display: none;
    flex-direction: column;
    gap: 2px;
    left: 16px;
    padding: 10px;
    position: absolute;
    right: 16px;
    top: calc(100% - 6px);
    z-index: 60;
  }
  .kk-nav-toggle-input:checked ~ .kk-main-nav { display: flex; }
  .kk-main-nav a { border-radius: 10px; display: block; padding: 12px 14px; }
  .kk-main-nav a:hover, .kk-main-nav a:focus-visible { background: #eef2f7; }
  .kk-hero, .kk-tera-detail-hero, .kk-tera-feature, .kk-verification-panel, .kk-application-shell { grid-template-columns: 1fr; }
  .kk-hero { padding-top: 80px; }
  .kk-project-grid, .kk-city-grid, .kk-intent-grid, .kk-news-grid, .kk-contact-options { grid-template-columns: repeat(2, 1fr); }
  .kk-filter-shell { align-items: flex-start; flex-direction: column; }
  .kk-legal-shell { grid-template-columns: 1fr; }
  .kk-legal-note { position: static; }
}

@media (max-width: 620px) {
  .kk-preview-banner { font-size: 9px; letter-spacing: .1em; }
  .kk-site-header { gap: 10px; grid-template-columns: minmax(0, 1fr); min-height: 72px; padding: 14px 16px; }
  .kk-language-switcher { flex-wrap: wrap; }
  /* DÜZELTME (mobil P0): CTA küçük ekranda da erişilebilir kalır. */
  .kk-header-cta { font-size: 13px; min-height: 40px; padding: 0 16px; }
  .kk-brand-mark { height: 38px; width: 38px; }
  .kk-brand strong { font-size: 15px; }
  .kk-hero, .kk-tera-detail-hero { grid-template-columns: minmax(0, 1fr); max-width: 100%; min-height: auto; padding: 62px 20px; }
  .kk-hero-copy, .kk-hero-panel, .kk-tera-detail-hero > div { min-width: 0; width: 100%; }
  .kk-hero h1, .kk-catalog-hero h1, .kk-tera-detail-hero h1 { font-size: clamp(34px, 11vw, 42px); overflow-wrap: anywhere; }
  .kk-hero p, .kk-tera-detail-hero p { overflow-wrap: anywhere; }
  .kk-hero-panel { grid-template-columns: 1fr; }
  .kk-stat { min-height: 120px; padding: 20px; }
  .kk-stat strong { font-size: 38px; }
  .kk-section { padding: 56px 18px; }
  .kk-city-grid, .kk-project-grid, .kk-check-list, .kk-intent-grid, .kk-news-grid, .kk-contact-options { grid-template-columns: 1fr; }
  .kk-tera-feature { border-radius: 0; margin-bottom: 0; padding: 34px 20px; }
  .kk-tera-art, .kk-tera-detail-art { min-height: 260px; }
  .kk-section-head, .kk-site-footer, .kk-contact-panel { align-items: flex-start; flex-direction: column; }
  .kk-section-head { display: flex; }
  .kk-catalog-hero { padding: 60px 20px; }
  .kk-filter-shell { border-radius: 0; margin-top: 0; }
  .kk-contact-panel { border-radius: 0; display: flex; margin-bottom: 0; padding: 36px 20px; }
  .kk-contact-panel > div:last-child { align-items: flex-start; }
  .kk-site-footer { display: flex; padding: 38px 20px; }
  .kk-legal-links, .kk-join-links { justify-content: flex-start; }
  .kk-form-row { grid-template-columns: 1fr; }
  .kk-search-form > div { align-items: stretch; flex-direction: column; }
  .kk-footer-contact a { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* Keyboard focus remains visible against light and dark preview surfaces. */
.kk-preview :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #f4bd58;
  outline-offset: 3px;
}


/* =====================================================================
   KONUTKENT TR 1. AŞAMA DÜZELTMELERİ — 0.5.3
   Kaynak: 5 Eylül 2026 canlı staging denetimi
   ===================================================================== */

/* Mobil menü düğmesi — 901px ve üzerinde gizli. */
.kk-nav-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 999px;
  cursor: pointer;
  display: none;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  user-select: none;
}
.kk-nav-toggle em { font-size: 13px; font-style: normal; font-weight: 750; }
.kk-nav-toggle span {
  background: var(--kk-navy);
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 18px;
}
.kk-nav-toggle span + span { margin-top: -6px; }
.kk-nav-toggle-input:focus-visible + .kk-nav-toggle { outline: 3px solid #f4bd58; outline-offset: 2px; }

/* KK-166: kart görseli varsa gerçek görsel gösterilir. */
.kk-project-visual.has-image { padding: 0; }
.kk-project-visual.has-image img {
  aspect-ratio: 16 / 10;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* KK-172: pasif dil kodları tıklanabilir görünmesin. */
.kk-language-switcher span { opacity: .55; }
.kk-language-note {
  color: #78879a;
  font-size: 10px;
  letter-spacing: .04em;
  margin-left: 6px;
  white-space: nowrap;
}

/* Yüzen CRO düğmeleri kart içeriğinin üstüne binmesin. */
.kk-project-grid { padding-bottom: 96px; }

@media (max-width: 620px) {
  .kk-language-note { display: block; margin: 4px 0 0; width: 100%; text-align: center; }
}


/* =====================================================================
   BIRLESIK SURUM 0.5.4 EKLERI
   Kaynak: 5 Eylul 2026 uc yonlu birlestirme (canli 0.5.2+ tabani + 0.5.3)
   ===================================================================== */

/* Mobil menu anahtari kurallari T-05 v2 duzeltme blogunda tanimlidir (dosya sonu). */

/* Sayfalama (?sayfa=N) — canli surumde markup vardi, stili yoktu. */
.kk-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px auto 0;
  padding: 0 20px;
}
.kk-pagination a,
.kk-pagination span.is-active {
  align-items: center;
  border: 1px solid var(--kk-line);
  border-radius: 10px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 650;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  text-decoration: none;
}
.kk-pagination a { background: #fff; color: var(--kk-navy); }
.kk-pagination a:hover,
.kk-pagination a:focus-visible { background: #eef2f7; }
.kk-pagination span.is-active {
  background: var(--kk-navy);
  border-color: var(--kk-navy);
  color: #fff;
}
.kk-pagination span[aria-hidden="true"] { color: #78879a; padding: 0 2px; }

@media (max-width: 620px) {
  .kk-pagination { gap: 6px; }
  .kk-pagination a, .kk-pagination span.is-active { font-size: 13px; min-width: 40px; padding: 0 10px; }
}
/* ============================================================================
   KONUTKENT — MOBİL MENÜ DÜZELTMESİ  v2   (T-05)
   v1'in yerine geçer. preview.css sonuna eklenir; v1 bloğu varsa SİLİNİR.

   v1'e göre iki düzeltme:
   A) MASAÜSTÜNDE GÖRÜNMEZ SEKME DURAĞI (WCAG 2.4.7)
      v1, checkbox'ı her ekran boyutunda odaklanabilir bırakıyordu. 901 px üstünde
      etiket display:none olduğu için odak halkası görünmüyordu -> Tab ile görünmez
      bir durağa geliniyordu. Canlıda doğrulandı: input sekme sırasında 2. sırada,
      etiketi görünmez.
      Çözüm: checkbox yalnız <=900 px'de odaklanabilir. >=901 px'de display:none —
      orada menü zaten yatay ve görünür, düğmenin işlevi yok.

   B) YÜZEN CRO DÜĞMELERİ MENÜ BAĞLANTILARINI ENGELLİYOR
      Canlıda hit-test ile doğrulandı: menü açıkken "Kiralık" bağlantısının üstüne
      .kk-cro__btn--call, "İlanlar" bağlantısının üstüne .kk-cro__btn--wa düşüyor.
      Sebep: .kk-cro z-index 99990 (fixed); menü .kk-main-nav z-index 60 ama
      .kk-site-header z-index 20 ile KENDİ YIĞIN BAĞLAMINI kuruyor, dolayısıyla
      menünün 60'ı CRO'nun 99990'ıyla hiç yarışmıyor.
      Çözüm: <=900 px'de header'ın yığın seviyesi CRO'nun üstüne alınır (çerez
      panelinin 100000'inin altında kalır). Ayrıca menü açıkken CRO gizlenir.
   ========================================================================== */

/* --- MASAÜSTÜ (901 px ve üzeri) ------------------------------------------ */
@media (min-width: 901px) {
  .kk-site-header .kk-nav-toggle { display: none !important; }

  /* (A) sekme sırasından tamamen çıkar — görünmez durak kalmaz */
  .kk-site-header .kk-nav-toggle-input { display: none !important; }

  .kk-site-header .kk-main-nav {
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    padding: 0;
    position: static;
  }
}

/* --- MOBİL / TABLET (900 px ve altı) ------------------------------------- */
@media (max-width: 900px) {

  /* (B) header'ı CRO'nun (99990) üstüne, çerez panelinin (100000) altına al */
  .kk-site-header { position: relative; z-index: 99991; }

  .kk-site-header .kk-nav-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid var(--kk-line);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    user-select: none;
  }

  /* (A) burada görsel olarak gizli AMA odaklanabilir — etiket görünür olduğu için
     odak halkası da görünür. display:none KULLANILMAZ. */
  .kk-site-header .kk-nav-toggle-input {
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
  }

  .kk-site-header .kk-main-nav {
    background: #fff;
    border: 1px solid var(--kk-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(11, 31, 58, .16);
    display: none;
    flex-direction: column;
    gap: 2px;
    left: 16px;
    padding: 10px;
    position: absolute;
    right: 16px;
    top: calc(100% - 6px);
    z-index: 60;
  }

  .kk-site-header .kk-nav-toggle-input:checked ~ .kk-main-nav { display: flex; }

  .kk-site-header .kk-main-nav a {
    border-radius: 10px;
    display: block;
    padding: 12px 14px;
  }
  .kk-site-header .kk-main-nav a:hover,
  .kk-site-header .kk-main-nav a:focus-visible { background: #eef2f7; }

  /* (B) ilerici iyileştirme: menü açıkken yüzen düğmeler tamamen çekilir.
     :has() desteklemeyen tarayıcıda yukarıdaki z-index zaten yeterli. */
  body:has(.kk-nav-toggle-input:checked) .kk-cro { display: none; }

  /* KK-192: menü açıkken çerez paneli de çekilir — .kk-cro ile BİREBİR aynı kalıp.
     Panel YOK OLMUYOR: yalnız menü açıkken gizlenir, menü kapanınca geri gelir.
     KVKK gereği çerez tercihi sorulmaya devam eder.
     Özgüllük (0,3,1) > .kk-cookie-consent[hidden] (0,2,0) -> kaynak sırasından bağımsız kazanır. */
  body:has(.kk-nav-toggle-input:checked) .kk-cookie-consent { display: none; }
}

/* --- HER EKRANDA --------------------------------------------------------- */
.kk-site-header { position: relative; }

.kk-site-header .kk-nav-toggle-input:focus-visible + .kk-nav-toggle {
  outline: 3px solid #f4bd58;
  outline-offset: 2px;
}

.kk-site-header .kk-nav-toggle em {
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}
.kk-site-header .kk-nav-toggle span {
  background: var(--kk-navy);
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 18px;
}
.kk-site-header .kk-nav-toggle span + span { margin-top: -6px; }


/* =====================================================================
   HIZMET MERKEZI ve BASVURU SAYFASI BICIMLERI  (KK-170 / KK-176)
   6 Eylul 2026.

   KAPSAM SINIRI: bu blok YALNIZ yeni icerik siniflarini bicimlendirir.
   `.kk-nav-toggle`, `.kk-main-nav`, `.kk-site-header` ve `.kk-cro`
   kurallarina DOKUNMAZ — T-05 mobil menu davranisi degismez.
   ===================================================================== */

.kk-service-card h2 { margin-top: 30px; }
.kk-service-card h2:first-child { margin-top: 0; }

.kk-service-lead {
  color: var(--kk-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}

.kk-service-list { margin: 12px 0 0; padding-left: 20px; }
.kk-service-list li { margin-bottom: 8px; line-height: 1.6; }

.kk-service-faq { margin-top: 12px; }
.kk-service-faq details {
  border: 1px solid var(--kk-line);
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 12px 14px;
}
.kk-service-faq summary {
  cursor: pointer;
  font-weight: 700;
  line-height: 1.5;
  min-height: 24px;
}
.kk-service-faq summary:focus-visible { outline: 3px solid #f4bd58; outline-offset: 2px; }
.kk-service-faq details[open] summary { margin-bottom: 8px; }
.kk-service-faq p { margin: 0; }

.kk-service-cta {
  background: var(--kk-cream);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
}
.kk-service-cta p { margin: 0 0 16px; }
.kk-service-cta .kk-hero-actions { justify-content: center; }

.kk-application-audience {
  color: var(--kk-ink-soft);
  font-size: 15px;
  margin-top: 10px;
}

@media (max-width: 620px) {
  .kk-service-lead { font-size: 16px; }
  .kk-service-cta { padding: 20px 16px; }
  .kk-service-faq details { padding: 10px 12px; }
}


/* =====================================================================
   KK-185 · HIZMET MERKEZI ERISIM YOLLARI
   6 Eylul 2026 · P0 duzeltmesi (10 merkez oksuzdu)

   KAPSAM SINIRI: bu blok `.kk-nav-toggle`, `.kk-nav-toggle-input`,
   `.kk-main-nav` ve `.kk-cro` kurallarina DOKUNMAZ. Menu acilir listesi
   NATIVE <details> ogesidir; T-05'in checkbox mekanizmasi degismedi.
   ===================================================================== */

/* --- merkez kartlari --- */
.kk-service-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.kk-service-tile {
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: 12px;
  display: block;
  min-height: 44px;
  padding: 16px 18px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kk-service-tile:hover,
.kk-service-tile:focus-visible { border-color: var(--kk-blue); box-shadow: 0 6px 18px rgba(11,31,58,.10); }
.kk-service-tile strong { color: var(--kk-navy); display: block; font-size: 15px; }
.kk-service-tile span { color: var(--kk-ink-soft); display: block; font-size: 13px; line-height: 1.5; margin-top: 6px; }

.kk-related-shell { padding-top: 0; }

/* --- menudeki "Hizmetler" acilir listesi --- */
.kk-nav-sub { position: relative; }
.kk-nav-sub > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  padding: 10px 9px;
  min-height: 44px;          /* dokunma hedefi — T-05 olcutu */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kk-nav-sub > summary::-webkit-details-marker { display: none; }
.kk-nav-sub > summary::after { content: "▾"; font-size: 11px; }
.kk-nav-sub > summary:focus-visible { outline: 3px solid #f4bd58; outline-offset: 2px; }

.kk-nav-sub-panel { display: flex; flex-direction: column; }
.kk-nav-sub-panel a {
  border-radius: 8px;
  display: block;
  font-size: 14px;
  min-height: 44px;          /* dokunma hedefi */
  padding: 12px 14px;
  text-decoration: none;
}
.kk-nav-sub-panel a:hover,
.kk-nav-sub-panel a:focus-visible { background: #eef2f7; }

/* Masaustunde acilir panel yuzer; mobilde menunun icinde akar. */
@media (min-width: 901px) {
  .kk-site-header .kk-nav-sub[open] > .kk-nav-sub-panel {
    background: #fff;
    border: 1px solid var(--kk-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(11, 31, 58, .16);
    left: 0;
    min-width: 280px;
    padding: 8px;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 70;
  }
}
@media (max-width: 900px) {
  .kk-site-header .kk-nav-sub-panel { padding-left: 12px; }
}


/* =====================================================================
   KK-186 · HIZMET / BASVURU SAYFASI HERO GORSELI
   6 Eylul 2026.

   FOTOGRAF KULLANILMAZ. Gerekce: medya kutuphanesindeki 55.007 gorselin
   TAMAMI belirli bir proje kaydina baglidir (ebeveynsiz gorsel: 0).
   Birini hizmet sayfasinda kullanmak, o projeyi temsil ediyormus izlenimi
   verirdi — KK-068 bunu yasakliyor. Bu yuzden hicbir temsili iddia
   tasimayan, marka renklerinden turetilmis dekoratif bir oge kullanilir.

   KAPSAM SINIRI: menu kurallarina (.kk-nav-*, .kk-main-nav) DOKUNMAZ.
   ===================================================================== */

.kk-service-hero {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 160px;
}
.kk-service-hero-copy { min-width: 0; }

.kk-service-hero-art {
  height: 120px;
  position: relative;
  width: 100%;
}
.kk-service-hero-art span {
  border-radius: 50%;
  display: block;
  position: absolute;
}
.kk-service-hero-art span:nth-child(1) {
  background: linear-gradient(140deg, var(--kk-blue), var(--kk-navy));
  height: 92px; right: 8px; top: 6px; width: 92px;
}
.kk-service-hero-art span:nth-child(2) {
  border: 2px solid var(--kk-gold);
  height: 64px; right: 62px; top: 44px; width: 64px;
}
.kk-service-hero-art span:nth-child(3) {
  background: var(--kk-cream);
  height: 26px; right: 96px; top: 12px; width: 26px;
}

@media (max-width: 900px) {
  .kk-service-hero { grid-template-columns: minmax(0, 1fr); }
  .kk-service-hero-art { height: 84px; order: -1; }
  .kk-service-hero-art span:nth-child(1) { height: 66px; width: 66px; right: auto; left: 0; }
  .kk-service-hero-art span:nth-child(2) { height: 46px; width: 46px; right: auto; left: 46px; top: 30px; }
  .kk-service-hero-art span:nth-child(3) { height: 20px; width: 20px; right: auto; left: 96px; top: 8px; }
}


/* =====================================================================
   KK-190 · P0 REGRESYON DUZELTMESI — MOBIL MENU 375 px
   6 Eylul 2026

   NE OLDU: Menuye "Hizmetler" acilir listesi eklenince (KK-185/12c) mobil
   menu kirildi. 18 baglantidan 10'u tiklanamaz hale geldi.

   UC AYRI KIRILMA vardi:
     1) Alt menu paneli AKIS DISINDA kalip ana menu ogelerinin ustune bindi
        (Hizmetler ve Ucretler 353px <-> Projeler 355px gibi)
     2) Nav'da `max-height` ve `overflow` YOKTU; icerik 812px ekrani asti,
        govdenin ustune tasti ve govde onlari ortti
     3) Son iki baglanti (793px, 837px) ekran disinda kaldi, kaydirma olmadigi
        icin hic ulasilamiyordu

   BU BLOK NE YAPAR (yalniz <=900px):
     - Alt menu panelini AKIS ICINE alir (position: static)
     - Nav'a max-height + overflow-y: auto verir -> tasma yerine KAYDIRMA
     - Alt menu varsayilan KAPALI kalir (native <details>; JS yok)
     - Masaustu (>=901px) davranisi DEGISMEZ

   KAPSAM SINIRI: `.kk-nav-toggle`, `.kk-nav-toggle-input` ve `.kk-cro`
   kurallarina DOKUNMAZ — T-05 checkbox mekanizmasi aynen korunur.
   ===================================================================== */

@media (max-width: 900px) {

  /* (2)(3) Tasma yerine kaydirma. Header min-height 104px (dar ekranda 72px);
     guvenli pay ile 120px dusuluyor. */
  .kk-site-header .kk-main-nav {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* (1) Alt menu AKIS ICINDE. Ozgullugu (0,3,0) — akis disina cikaran hicbir
     kural bunu yenemez. Ustune binme boylece yapisal olarak imkansiz olur. */
  .kk-site-header .kk-nav-sub,
  .kk-site-header .kk-nav-sub[open] > .kk-nav-sub-panel {
    background: none;
    border: 0;
    box-shadow: none;
    inset: auto;
    min-width: 0;
    position: static;
    z-index: auto;
  }

  /* Alt menu, ana menunun icinde bir alt seviye gibi okunur. */
  .kk-site-header .kk-nav-sub[open] > .kk-nav-sub-panel {
    border-left: 2px solid var(--kk-line);
    margin: 2px 0 6px 10px;
    padding-left: 10px;
  }

  /* Acilir baslik tam genislikte ve dokunma hedefi >=44px. */
  .kk-site-header .kk-nav-sub > summary {
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 14px;
    width: 100%;
  }
  .kk-site-header .kk-nav-sub[open] > summary { background: #eef2f7; }
}


/* =====================================================================
   KK-190-b · ILK DUZELTMENIN KACIRDIGI SEY — flex-wrap
   6 Eylul 2026

   NE OLDU: KK-190'da nav'a `max-height` + `overflow-y: auto` verdim ama
   `flex-wrap` set etmedim. Temel kural (satir 51):

       .kk-site-header nav { display: flex; flex-wrap: wrap; ... }

   `flex-wrap: wrap` MIRAS KALDI. `flex-direction: column` + `flex-wrap: wrap`
   + `max-height` birlesince tasma DIKEY OLMAZ; icerik IKINCI SUTUNA SARAR.
   Sonuc: scrollHeight ~= max-height, dikey tasma yok, `overflow-y: auto`
   hicbir zaman devreye girmez, kaydirma cubugu cikmaz — baglantilar yine
   ulasilamaz. Olcum: max-height 692px · scrollHeight 690px.

   DUZELTME:
     1) flex-wrap: nowrap  -> sarma yok, tasma dikey olur, kaydirma calisir
     2) cocuklara flex: 0 0 auto -> sinirli yukseklikte SIKISMASINLAR.
        (nowrap + kisitli yukseklikte flex-shrink:1 varsayilani ogeleri
        ezip 44px dokunma hedefinin altina dusururdu.)
   ===================================================================== */

@media (max-width: 900px) {
  .kk-site-header .kk-main-nav {
    flex-wrap: nowrap;
  }
  .kk-site-header .kk-main-nav > * {
    flex: 0 0 auto;
  }
}


/* =====================================================================
   KK-190-c · NAV HEADER'IN ALTINA GIRIYOR
   6 Eylul 2026

   OLCUM (Cloud, tarayicida): nav ust kenari 253px, header alt kenari 260px.
   Nav header'in 7px ALTINA giriyor; ilk baglanti ("Hakkimizda") uzerindeki
   tiklama header'a gidiyor -> `elementFromPoint` orada header donuyor.

   SEBEP: `.kk-site-header .kk-main-nav { top: calc(100% - 6px); }`
   `-6px` navi yukari cekiyor ve header'la ortusturuyor.

   DUZELTME: nav header'in TAM ALTINDAN baslar (+4px gorsel bosluk).
   ===================================================================== */

@media (max-width: 900px) {
  .kk-site-header .kk-main-nav {
    top: calc(100% + 4px);
  }
}


/* =====================================================================
   KK-190-d · <details> TUZAGI — KAPALI PANEL GIZLENMIYOR
   6 Eylul 2026

   OLCUM (Cloud, tarayicida):
     details.open = false  AMA  panel display = flex, yukseklik 528px,
     nav icinde gorunur <a> = 18 (6 olmaliydi) -> 10 baglanti engelleniyor.

   SEBEP: `.kk-nav-sub-panel { display: flex; }` KOSULSUZ yaziliydi.
   Bir <details> icerik ogesine `display` verirseniz, tarayicinin kapaliyken
   gizleme davranisi EZILIR; `open` false olsa da panel yerinde durur.

   DUZELTME: `display` yalniz [open] durumunda verilir; kapali durum
   tarayicinin kendi davranisina birakilir.
   ===================================================================== */

/* --- Cloud sartnamesi: <=900px --- */
@media (max-width: 900px) {
  .kk-site-header .kk-nav-sub-panel { display: none; }
  .kk-site-header details[open] > .kk-nav-sub-panel { display: flex; }
}

/* --- EK: masaustunde de AYNI kusur olculdu -------------------------------
   Temel kural (satir 609) `display: flex` koşulsuz veriyor ve >=901px blogu
   `display` set etmiyor. Yani kapali panel MASAUSTUNDE de render ediliyor.
   Cloud "masaustune dokunmayin" dedi; gerekcesi acilir davranisi bozmamakti.
   Bu iki satir onu BOZMAZ, tam tersine duzeltir: `position: absolute` ve
   diger acilir kurallar [open] blogunda oldugu gibi kalir, yalniz KAPALI
   durumun gizlenmesi saglanir. Itiraz halinde tek blok geri alinabilir.  */
@media (min-width: 901px) {
  .kk-site-header .kk-nav-sub-panel { display: none; }
  .kk-site-header .kk-nav-sub[open] > .kk-nav-sub-panel { display: flex; }
}


/* =====================================================================
   KK-190-e · SON IKI KUSUR
   6 Eylul 2026

   KUSUR 1 — nav ekranin 143px altina tasiyor
     `max-height: calc(100vh - 120px)` navin 120px'den basladigini varsayiyordu;
     gercekte 263px'den basliyor (header + sticky). Sonuc: nav bottom 955px,
     ekran 812px, son baglanti kutunun icinde ama EKRANIN disinda.
     DUZELTME: `calc(100dvh - 100% - 48px)`
       - `100%` navin kapsayan blogu olan header'in yuksekligine cozulur;
         staging bandi kalkinca da dogru kalir (sabit piksel yazmaktan guvenli)
       - `100dvh` mobil tarayici cubugunu hesaba katar
     Cloud olcumu: nav bottom 798px, ekran tasmasi -14px, kaydirma calisiyor.

   KUSUR 2 — ilk baglanti nav kutusunun 80px USTUNDE
     Kaynak yine SATIR 51: `.kk-site-header nav { justify-content: center; }`
     <=900px'de ezilmeyen TEK ozellik buydu (display, flex-wrap ve gap ezilmisti).
     Sutun flex kutusunda icerik max-height'i asinca `center` TASMAYI IKI YANA
     BOLER; ustteki yari kaydirma baslangicinin USTUNDE kalir ve tarayici oraya
     KAYDIRAMAZ. Bu yuzden "Hakkimizda" offsetTop = -80 ve header CTA'sinin
     altinda kaliyor. Negatif offsetTop'un tek olasi kaynagi budur.
     DUZELTME: `justify-content: flex-start` — tasma yalniz ALTA gider, oraya
     kaydirilabilir.
   ===================================================================== */

/* `dvh` desteklemeyen tarayicilar icin GERI DUSUS — once yazilir ki
   asagidaki `dvh` kurali onu ezsin (destekleyen tarayicida dvh kazanir). */
@supports not (height: 100dvh) {
  @media (max-width: 900px) {
    .kk-site-header .kk-main-nav { max-height: calc(100vh - 100% - 48px); }
  }
}

@media (max-width: 900px) {
  .kk-site-header .kk-main-nav {
    justify-content: flex-start;   /* KUSUR 2 — tasma yalniz alta */
    align-items: stretch;
    max-height: calc(100dvh - 100% - 48px);   /* KUSUR 1 */
  }
}