/* ============================================================
   inovanadolu Brutalist Tasarım
   Navy (#1e2b4d) + Orange (#e14e33) + White
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #1e2b4d;
  --orange: #e14e33;
  --orange-dark: #c0392b;
  --red: #E30A17;
  --white: #fff;
  --light-gray: #f5f5f5;
}

* { box-sizing: border-box; }
/* overflow-x: body'de hidden var ama html duzeyinde acikti — gizli tooltipler ve
   golge kutulari mobilde yatay kaydirma yaratiyordu. clip scroll container yaratmaz,
   sticky konumlandirmayi bozmaz. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--white);
  background-image: 
    linear-gradient(#e5e5e5 1px, transparent 1px),
    linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
  background-size: 140px 140px;
  color: var(--navy);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: var(--white); }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
.block-title, .page-title, .modal-title,
h1 *, h2 *, h3 *, h4 * {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 900 !important;
  color: #1e2b4d !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
h1 { font-size: clamp(2.5rem, 6vw, 6rem); }
h2 { font-size: clamp(1.75rem, 4vw, 4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 2.5rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }

body, p, span, div, td, th, li, a, label, input, textarea, select, button {
  font-family: 'Space Grotesk', sans-serif !important;
}
body {
  line-height: 1.6 !important;
  font-size: 1rem !important;
  color: #1e2b4d !important;
  font-weight: 500 !important;
}
p, li, td { font-weight: 500 !important; color: #1e2b4d !important; }
a { color: #1e2b4d !important; text-decoration: none !important; }
a:hover { color: #e14e33 !important; }

/* === LAYOUT === */
#page-container, #main-container, main#main-container {
  background: transparent !important;
  padding-top: 0 !important;
}
.content-boxed { max-width: 1400px; margin: 0 auto; padding: 0 24px; overflow:hidden; }
.row { display: flex; flex-wrap: nowrap; gap: 24px; }
.col-lg-8, .col-md-8 { flex: 1 1 65%; min-width: 0; }
.col-lg-4, .col-md-4 { flex: 0 1 30%; min-width: 0; }
.col-lg-6, .col-md-6 { flex: 1 1 48%; min-width: 280px; }

/* === HEADER === */
#header-navbar,
#header-navbar *,
#header-navbar a,
#header-navbar button {
  font-family: 'Space Grotesk', sans-serif !important;
}
#header-navbar {
  position: relative !important;
  top: auto; left: auto; right: auto;
  z-index: 1030;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  box-shadow: none !important;
  padding: 24px;
  transition: all 0.3s;
  border-bottom: 4px solid #1e2b4d !important;
}
#header-navbar a {
  font-size: 0.6875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #1e2b4d !important;
  text-decoration: none !important;
}
#header-navbar a:hover { color: #e14e33 !important; }
#header-navbar .btn {
  font-size: 0.6875rem !important;
  letter-spacing: 0.2em !important;
}
.header-navbar-fixed #page-container { padding-top: 0 !important; }

/* === BUTTONS === */
.btn, button, input[type=submit], button[type=submit],
.btn-primary, .btn-default, .btn-success, .btn-warning, .btn-info, .btn-sm, .btn-lg,
.btn *, button * {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.75rem !important;
  border-radius: 0 !important;
  border: 3px solid #1e2b4d !important;
  transition: all 0.2s !important;
  box-shadow: 6px 6px 0px #1e2b4d !important;
}
.btn:hover, button:hover { transform: translate(2px, 2px) !important; box-shadow: none !important; }

/* Buton ICINDEKI elemanlar (numara, ikon sarmali, metin span'i) cerceve ve
   golge tasimaz — bunlar butonun kendisine aittir. Yukaridaki ".btn *" kurali
   yuzunden test soru numaralari gibi ic span'ler kutulu/golgeli gorunuyordu. */
.btn *, button * { border: none !important; box-shadow: none !important; }

/* FontAwesome ikonlari global baslik/buton font zorlamasindan muaf tutulur:
   "h1-h6 *" ve ".btn *" kurallari ikon fontunu Space Grotesk'e cevirip
   glyph'i bozuyor, buton icindeki <i>'ye cerceve/golge cizdiriyordu. */
i[class*="fa-"] {
  font-family: 'Font Awesome 6 Free' !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
i.fab, i.fa-brands { font-family: 'Font Awesome 6 Brands' !important; }
i.far, i.fa-regular { font-weight: 400 !important; }
.btn-primary, .btn-success, .btn-warning, .btn-info, button[type=submit] {
  background: #e14e33 !important;
  color: #fff !important;
  border-color: #1e2b4d !important;
}
.btn-primary:hover { background: #c0392b !important; }
.btn-default {
  background: #fff !important;
  color: #1e2b4d !important;
  border-color: #1e2b4d !important;
}

/* === CARDS / BLOCKS === */
.block {
  background: var(--white) !important;
  border: 4px solid var(--navy) !important;
  border-radius: 0 !important;
  box-shadow: 12px 12px 0px var(--navy) !important;
  margin-bottom: 32px;
  transition: all 0.2s;
}
.block:hover {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}
.block-header {
  background: var(--navy) !important;
  border-bottom: 4px solid var(--navy) !important;
  padding: 20px 24px;
  color: var(--white) !important;
}
.block-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em;
  color: var(--white) !important;
}
.block-content { padding: 24px; background: var(--white) !important; }
.block.block-themed {
  background: var(--orange) !important;
  border-color: var(--navy) !important;
}
.block.block-themed .block-header { background: transparent !important; }

/* === FORMS === */
input, textarea, select, .form-control {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border: 3px solid #1e2b4d !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  background: #fff !important;
  color: #1e2b4d !important;
  box-shadow: none !important;
  width: 100%;
  transition: border-color 0.2s;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: #e14e33 !important;
  outline: none !important;
  box-shadow: 4px 4px 0px #e14e33 !important;
}
label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #1e2b4d !important;
}

/* === TABLES === */
.table { width: 100%; border-collapse: collapse; border: 3px solid var(--navy); }
.table > thead > tr > th {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--navy);
  color: var(--white);
  padding: 14px 16px;
  border-bottom: 3px solid var(--navy);
}
.table > tbody > tr > td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 500;
}
.table > tbody > tr:hover { background: #f0f0f0; }

/* === SIDEBAR === */
#sidebar {
  background: var(--white) !important;
  border-right: 4px solid var(--navy);
}
#sidebar .side-header { padding: 20px; background: var(--white) !important; }
#sidebar .side-content { background: var(--white) !important; }
#sidebar .nav-main { list-style: none; padding: 8px; }
#sidebar .nav-main li a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 900 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy) !important;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: all 0.15s;
}
#sidebar .nav-main li a:hover {
  border-left-color: var(--orange);
  color: var(--orange) !important;
  background: #f5f5f5;
}

/* === NAV TABS === */
.nav-tabs { border-bottom: 4px solid var(--navy); display: flex; gap: 4px; }
.nav-tabs > li > a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy) !important;
  border: 3px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
}
.nav-tabs > li.active > a {
  background: var(--navy);
  color: var(--white) !important;
  border-color: var(--navy);
}

/* === PAGINATION === */
.pagination { display: flex; gap: 6px; list-style: none; padding: 0; }
.pagination > li > a, .pagination > li > span {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  border: 3px solid var(--navy);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  background: var(--white);
  box-shadow: 3px 3px 0px var(--navy);
  transition: all 0.15s;
}
.pagination > li > a:hover { transform: translate(1px, 1px); box-shadow: none; }
.pagination > .active > a { background: var(--navy) !important; color: var(--white) !important; }

/* === DROPDOWNS === */
.dropdown-menu {
  border: 3px solid var(--navy) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0px var(--navy) !important;
  padding: 6px 0;
  background: var(--white) !important;
  list-style: none;
}
.dropdown-menu > li > a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy) !important;
  padding: 11px 18px;
  display: block;
  border-bottom: none;
  transition: all 0.15s;
}
.dropdown-menu > li:last-child > a { border-bottom: none; }
.dropdown-menu > li > a:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* === ALERTS === */
.alert {
  border: 3px solid var(--navy);
  border-radius: 0;
  padding: 16px;
  font-weight: 600;
}
.alert-success { background: var(--navy); color: var(--white); }

/* === MODAL === */
.modal { display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; overflow:auto; }
.modal.fade.in, .modal.show, .modal.in { display:block !important; }
.modal-backdrop { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1999; }
.modal-backdrop.in { display:block; }
.modal-dialog { max-width:600px; margin:80px auto; position:relative; z-index:2001; }
.modal-content {
  background:#fff; border:4px solid #1e2b4d; box-shadow:16px 16px 0px #1e2b4d;
  border-radius:0; position:relative;
}
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:2px solid #1e2b4d; background:#1e2b4d; color:#fff; }
.modal-header .close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:#fff; font-weight:900; }
.modal-title { font-size:1.25rem; font-weight:900; text-transform:uppercase; letter-spacing:0.05em; color:#fff; }
.modal-body { padding:24px; }
.modal-body .form-control { width:100%; box-sizing:border-box; }
.modal-body textarea.form-control { min-height:120px; }
.modal-footer { padding:16px 24px; border-top:2px solid #1e2b4d; display:flex; justify-content:flex-end; gap:8px; }

/* === BADGES === */
.label, .badge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 0.6875rem;
  text-transform: uppercase;
  border-radius: 0;
  padding: 4px 10px;
  border: 2px solid var(--navy);
}
.badge-success, .label-success {
  background: var(--orange) !important;
  color: var(--white) !important;
}

/* === CATEGORY NAV === */
.categories-nav { background: #fff !important; border-bottom: 4px solid var(--navy) !important; }

/* === UTILITIES === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.pull-right { float: right; }
.clearfix::after { content: ''; display: table; clear: both; }
img.logoinovanadolu { max-width: 450px !important; height: auto !important; }
.turkuaz, a.turkuaz, span a.turkuaz, p a.turkuaz, td a.turkuaz { color: #e14e33 !important; font-weight: 900 !important; text-decoration: underline !important; }
.turkuaz:hover { color: #c0392b !important; }

/* === CONTENT === */
.content { padding: 40px 0; }
.sysleftcol, .sysrightcol { padding: 0; }

/* === MOBILE === */
/* Hamburger */
.hamburger { display:none; align-items:center; justify-content:center; cursor:pointer; background:#fff !important; border:2px solid #1e2b4d !important; padding:10px 20px !important; z-index:1100; font-family:'Space Grotesk',sans-serif; font-size:0.875rem; font-weight:900; text-transform:uppercase; letter-spacing:0.15em; color:#1e2b4d; box-shadow:3px 3px 0px #1e2b4d !important; transition:all 0.15s !important; }
.hamburger:hover { transform:translate(1px,1px) !important; box-shadow:1px 1px 0px #1e2b4d !important; color:#e14e33 !important; }
.mobile-menu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1050; background:rgba(255,255,255,0.98); flex-direction:column; align-items:center; justify-content:center; gap:24px; border-bottom:4px solid #1e2b4d; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-family:'Space Grotesk',sans-serif !important; font-size:1.25rem !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:0.15em !important; color:#1e2b4d !important; text-decoration:none !important; }

@media (max-width: 991px) {
  /* Header */
  #header-navbar { padding:12px 16px !important; }
  #header-navbar img[alt="İnovanadolu"] { max-width:260px !important; }
  /* Mobile menu */
  .hamburger { display:flex; }
  .desktop-nav { display:none !important; }
  .mobile-menu .btn-group { position:relative; }
  .mobile-menu .dropdown-menu { position:static !important; box-shadow:none !important; border:none !important; display:block !important; }
  .mobile-menu .dropdown-menu li a { font-size:0.875rem !important; }
  /* Bulten bar */
  #bulten-bar > div { flex-direction:column !important; gap:8px !important; padding:10px 12px !important; }
  #bulten-bar .bulten-text { font-size:0.5625rem !important; text-align:center !important; white-space:normal !important; line-height:1.3 !important; }
  #bulten-bar .bulten-form { flex-wrap:wrap !important; gap:4px !important; width:100% !important; justify-content:center !important; }
  #bulten-bar .bulten-form input { width:auto !important; max-width:none !important; flex:1 1 100px !important; font-size:0.5625rem !important; padding:3px 6px !important; border:1px solid #1e2b4d !important; box-shadow:none !important; }
  #bulten-bar .bulten-form button { font-size:0.5625rem !important; padding:4px 10px !important; border:1px solid #e14e33 !important; box-shadow:none !important; border-radius:0 !important; }
  #bulten-bar .bulten-close { position:absolute !important; top:2px !important; right:4px !important; background:none !important; border:none !important; box-shadow:none !important; font-size:0.75rem !important; color:rgba(255,255,255,0.3) !important; padding:4px 6px !important; font-weight:400 !important; text-transform:none !important; letter-spacing:0 !important; }
  #bulten-bar .bulten-close:hover { color:rgba(255,255,255,0.7) !important; transform:none !important; box-shadow:none !important; }
}

@media (max-width: 767px) {
  /* Typography */
  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.375rem !important; }
  h3 { font-size: 1.125rem !important; }
  h4 { font-size: 1rem !important; }
  h5 { font-size: 0.875rem !important; }
  /* Body */
  body { background-image:none !important; }
  /* Containers */
  .content-boxed { padding:0 12px !important; }
  /* Layout */
  .row, main#main-container .row, .content .row { flex-direction:column !important; }
  .col-lg-4, .col-md-4, .col-lg-8, .col-md-8,
  .col-lg-6, .col-md-6, .col-lg-3, .col-md-3, .col-lg-9, .col-md-9,
  .sysleftcol, .sysrightcol { flex:1 1 100% !important; min-width:100% !important; width:100% !important; }
  .sysrightcol { float:none !important; padding-left:0 !important; }
  .sysleftcol { float:none !important; }
  /* Sidebar min-width overrides */
  [style*="min-width:260px"] { min-width:100% !important; }
  /* Sidebar moves below */
  #topluluk-sidebar { flex:1 1 100% !important; min-width:100% !important; order:2 !important; }
  /* Blocks */
  .block, .sidebar-box { box-shadow:4px 4px 0px var(--navy) !important; margin-bottom:16px !important; padding:16px !important; }
  /* Buttons */
  .btn, button, input[type=submit] { padding:10px 14px !important; font-size:0.6875rem !important; box-shadow:4px 4px 0px #1e2b4d !important; }
  /* Forms */
  input, textarea, select { padding:10px 12px !important; font-size:0.8125rem !important; }
  /* Tables */
  .table { font-size:0.75rem !important; }
  .table td, .table th { padding:8px 10px !important; }
  /* Modal */
  .modal-dialog { margin:20px; max-width:none !important; width:auto !important; }
  .modal-content { box-shadow:8px 8px 0px #1e2b4d !important; }
  .modal-body { padding:14px !important; }
  /* Pagination */
  .pagination > li > a { min-width:32px; height:32px; font-size:0.75rem; }
  /* Header nav */
  #header-navbar img[alt="İnovanadolu"] { max-width:260px !important; }
  #header-navbar img[alt="İnovanadolu"] + div { display:none !important; }
  /* News header */
  #header-navbar [style*="max-width:1400px"] { flex-direction:column !important; gap:8px !important; }
  /* Dropdown */
  .dropdown-menu { position:fixed !important; left:16px !important; right:16px !important; top:auto !important; }
  /* Bulten modal */
  #bultenModal > div { padding:24px !important; margin:12px !important; }
  #bultenModal h3 { font-size:0.875rem !important; }
  /* Brutalist select */
  .brutalist-select { font-size:0.8125rem !important; }
  .brutalist-select-trigger { padding:10px 12px !important; }
  .brutalist-select-option { padding:9px 12px !important; }
  /* Vote/action buttons */
  .cy-up-arrow { padding:4px !important; }
  /* Iframe embeds */
  iframe { max-width:100% !important; height:auto !important; aspect-ratio:16/9; }
  /* Category cards */
  .category .row { flex-direction:column !important; align-items:center !important; text-align:center !important; }
  .category .topluluklogo { max-width:80px !important; }
  /* Fix inline community header */
  [style*="display:flex"][style*="gap:24px"][style*="align-items:center"] {
    flex-direction:column !important;
    gap:14px !important;
    padding:16px !important;
    box-shadow:8px 8px 0px #e14e33 !important;
  }
  [style*="width:180px"][style*="height:180px"] { width:120px !important; height:120px !important; }
  /* Filter bar */
  div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"][style*="flex-wrap:wrap"] {
    flex-direction:column !important;
    gap:8px !important;
  }
  /* Tabs */
  div[style*="display:flex"][style*="gap:0"][style*="border:2px solid #1e2b4d"] {
    flex-wrap:wrap !important;
  }
  div[style*="display:flex"][style*="gap:0"][style*="border:2px solid #1e2b4d"] a {
    padding:6px 10px !important;
    font-size:0.5625rem !important;
  }
  /* Search form */
  /* Search form */
  [style*="flex:1"][style*="max-width:400px"],
  form[style*="max-width:400px"] { max-width:none !important; width:100% !important; flex:1 1 100% !important; }
  form[action] input[name="q"] { max-width:none !important; }
  form[action] > div[style*="display:flex"] { flex-direction:column !important; gap:6px !important; }
  /* Pagination row */
  div[style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction:column !important; gap:10px !important; align-items:stretch !important;
  }
  /* Stat counters */
  div[style*="font-size:3rem"] { font-size:2rem !important; }
  /* Neler Yapabilirsin cards */
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns:1fr !important;
  }
  /* Topluluk grid 4 columns */
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns:repeat(2, 1fr) !important;
  }
  /* Sozluk grid */
  div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns:1fr !important;
  }
  /* Profile page layout */
  div[style*="grid-template-columns:1fr 300px"] {
    grid-template-columns:1fr !important;
  }
  /* Footer */
  footer [style*="display:flex"] { flex-direction:column !important; align-items:center !important; gap:12px !important; text-align:center !important; }
  footer [style*="display:flex"] > div[style*="display:flex"] { flex-direction:column !important; }
  /* Hero section */
  section[style*="min-height:70vh"] { min-height:auto !important; padding:32px 12px !important; }
  section[style*="min-height:70vh"] > div:first-child { min-width:100% !important; }
  section[style*="min-height:70vh"] > div:last-child { padding-top:12px !important; width:100% !important; flex-shrink:1 !important; }
  section[style*="min-height:70vh"] img[src*="TRHEADER1"] { width:100% !important; max-width:300px !important; height:auto !important; aspect-ratio:1 !important; }
  section[style*="min-height:70vh"] div[style*="width:400px"][style*="height:400px"] { width:100% !important; max-width:300px !important; height:auto !important; aspect-ratio:1 !important; margin:0 auto !important; }
  /* Hero buttons */
  section[style*="min-height:70vh"] a[href="/uyeol"],
  section[style*="min-height:70vh"] a[href="/topluluklar"] {
    width:100% !important; text-align:center !important; padding:14px 20px !important;
  }
  /* Community detail page */
  [style*="padding-left:48px"][style*="border-left:2px"] {
    padding-left:0 !important; margin-left:0 !important; border-left:none !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
    width:100% !important; border-top:2px solid rgba(255,255,255,0.2) !important;
    padding-top:14px !important; margin-top:8px !important;
    text-align:center !important;
  }
  /* Community header inner layout on mobile */
  [style*="display:flex"][style*="gap:24px"][style*="align-items:center"] > [style*="flex:1"] {
    text-align:center !important;
  }
  [style*="display:flex"][style*="gap:24px"][style*="align-items:center"] > a img {
    margin:0 auto !important; display:block !important;
  }
  /* Center URL/year badges row */
  [style*="display:flex"][style*="gap:8px"][style*="align-items:stretch"] {
    justify-content:center !important;
  }
  /* Breadcrumb height */
  [style*="margin:8px 0"][style*="display:flex"][style*="align-items:center"] {
    margin:4px 0 !important; gap:4px !important; flex-wrap:wrap !important;
  }
  [style*="margin:8px 0"][style*="display:flex"] a,
  [style*="margin:8px 0"][style*="display:flex"] span {
    font-size:0.5625rem !important;
  }
  /* Marquee full width on mobile */
  div[style*="overflow:hidden"][style*="border:2px solid #e14e33"] {
    flex:1 1 100% !important; min-width:100% !important;
  }
  /* Sidebar boxes */
  .sidebar-box { margin:0 0 14px 0 !important; }
  /* Profile stats */
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns:repeat(2, 1fr) !important;
  }
  /* Project/Event detail header */
  div[style*="max-width:1400px"][style*="margin:24px auto"] {
    margin:12px auto !important; padding:0 12px !important;
  }
  /* Event detail action area */
  div[style*="justify-content:space-between"][style*="align-items:flex-start"] {
    flex-direction:column !important; gap:12px !important;
  }
  /* Comment area */
  .cy-comment { padding:12px 0 !important; }
  .cy-comment-reply { margin-left:16px !important; }
  /* Inline max-width containers */
  .content-boxed, #main-container > .content { overflow:visible !important; }
  [style*="max-width:1400px"][style*="margin:0 auto"],
  [style*="max-width:1200px"][style*="margin:0 auto"] { padding-left:12px !important; padding-right:12px !important; }
  /* Section padding */
  [style*="padding:80px 24px"] { padding:40px 16px !important; }
  section[style*="padding:48px 24px"] { padding:32px 16px !important; }
  [style*="padding:48px 24px"] { padding:32px 16px !important; }
  /* Override flex-gap-large */
  [style*="gap:24px"][style*="display:flex"] { gap:14px !important; }
  /* Community header large padding */
  [style*="padding:32px"][style*="margin:0 0 32px"] { padding:16px !important; margin:0 0 16px !important; }
  /* Topluluklar hero banner accent strip */
  [style*="writing-mode:vertical-lr"] { writing-mode:horizontal-tb !important; }
  [style*="padding-left:24px"][style*="border-left:3px solid rgba"] { padding-left:0 !important; border-left:none !important; padding-top:12px !important; border-top:2px solid rgba(255,255,255,0.3) !important; margin-top:4px !important; }
  /* Hero text in stacked mode */
  div[style*="background:#1e2b4d"][style*="box-shadow"] p { display:block !important; opacity:1 !important; }
  /* Content detail pages */
  [style*="max-width:900px"][style*="margin:0 auto"] { padding:0 12px !important; }
  /* Article/project content area */
  [style*="max-width:800px"][style*="margin:0 auto"] { padding:0 12px !important; }
  /* Adjust h1 in community header */
  [style*="font-size:2.25rem"][style*="font-style:italic"] { font-size:1.5rem !important; }
  /* Event detail header */
  div[style*="max-width:1400px"][style*="margin:24px auto"] { margin:12px auto !important; }
  /* Profile page headings */
  div[style*="font-size:1.75rem"] { font-size:1.25rem !important; }
  /* Hadi modal */
  div[id$="Modal"] > div[style*="max-width:600px"],
  div[id$="Modal"] > div[style*="max-width:500px"] {
    max-width:95vw !important; margin:12px !important;
    box-shadow:12px 12px 0px #e14e33 !important;
  }
  div[id$="Modal"] > div[style*="padding:32px"] { padding:20px !important; }
  /* Tiny labels/spans */
  span[style*="font-size:0.6875rem"][style*="letter-spacing:0.15em"] { font-size:0.5625rem !important; }
  /* Yenilink page */
  form[style*="padding:32px"] { padding:16px !important; }
  /* İcerik detay large images */
  img[style*="width:120px"][style*="height:120px"] { width:64px !important; height:64px !important; }
  /* Content detail page - make content full width below vote/thumb/user */
  div[style*="gap:10px"][style*="padding:28px"][style*="box-shadow"] { flex-wrap:wrap !important; }
  div[style*="gap:10px"][style*="padding:28px"] .vote-col + img + div[style*="flex:1"] { flex:1 1 100% !important; }
  /* Content card header user badge */
  div[style*="min-width:0"] > h3 { font-size:0.9375rem !important; }
  /* Thumbnail images - keep square, enforce fixed ratio */
  img[style*="width:44px"], img[style*="width:50px"],
  img[style*="width:56px"] { height:44px !important; }
  img[style*="width:50px"] { height:50px !important; }
  /* Team/grid fixes */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  /* Sozluk detay page */
  .sysleftcol h3, .sysleftcol h1 { font-size:1.25rem !important; }
  /* Margin collapse */
  [style*="margin-bottom:48px"] { margin-bottom:24px !important; }
  [style*="margin-bottom:32px"] { margin-bottom:20px !important; }
  [style*="margin-bottom:40px"] { margin-bottom:20px !important; }
  /* Ensure images don't overflow */
  img { max-width:100% !important; height:auto !important; }
  /* Profile PFP */
  div[style*="width:200px"][style*="height:200px"] { width:140px !important; height:140px !important; min-width:140px !important; }
  /* Grid columns (Bootstrap col-xs/sm/md/lg any) */
  [class*="col-"] { float:none !important; width:100% !important; }
  /* Admin topluluklar table overflow */
  .table-responsive { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
  table[style*="width:100%"] { display:block !important; overflow-x:auto !important; }
}

@media (max-width: 480px) {
  h1 { font-size:1.375rem !important; }
  h2 { font-size:1.125rem !important; }
  h3 { font-size:1rem !important; }
  /* Grids */
  div[style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns:1fr !important;
  }
  /* Stat counters */
  div[style*="font-size:3rem"] { font-size:1.5rem !important; }
  section[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns:repeat(2, 1fr) !important;
  }
  /* Buttons */
  a[style*="padding:14px 28px"] { padding:12px 16px !important; font-size:0.6875rem !important; }
  /* Edit/design modal buttons in header */
  [style*="padding-left:48px"] a { font-size:0.5625rem !important; padding:4px 8px !important; }
  /* Logo in community header */
  [style*="width:120px"][style*="height:120px"] { width:80px !important; height:80px !important; }
  /* Breadcrumb */
  div[style*="margin:8px 0"][style*="display:flex"] { flex-wrap:wrap !important; gap:4px !important; }
  /* Tiny h4 headers */
  h4[style*="font-size:0.75rem"], h4[style*="font-size:0.6875rem"] { font-size:0.625rem !important; }
  /* Sidebar auth buttons */
  .sidebar-l [style*="padding-left:48px"] { flex-direction:column !important; }
  /* Nedir sayfası */
  section[style*="min-height:80vh"] { min-height:auto !important; padding:80px 12px 40px !important; flex-direction:column !important; }
  section[style*="min-height:80vh"] h1 { font-size:clamp(2rem,6vw,4rem) !important; }
  section[style*="min-height:80vh"] p[style*="font-size:1.25rem"] { font-size:0.875rem !important; }
  section[style*="min-height:80vh"] div[style*="width:320px"][style*="height:320px"] { width:100% !important; max-width:240px !important; height:auto !important; aspect-ratio:1 !important; margin:0 auto !important; }
  section[style*="min-height:80vh"] > div:first-child { min-width:100% !important; }
  section[style*="min-height:80vh"] > div:last-child { width:100% !important; flex-shrink:1 !important; padding-top:12px !important; }
  div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; gap:24px !important; }
  div[style*="grid-template-columns:1fr 1fr"] div[style*="height:400px"] { height:auto !important; min-height:200px !important; }
  div[style*="box-shadow:30px 30px 0px"] { box-shadow:12px 12px 0px #1e2b4d !important; }
}
@media (min-width: 992px) {
  .visible-xs, .visible-sm, .mobile-menu, .hamburger { display:none !important; }
}

/* === OVERRIDE OLD === */
.push-20-l, .push-50-r { margin: 0 !important; padding: 0 !important; }
.content-mini { padding: 0 !important; }
.input-group-addon { border: none !important; background: none !important; }

/* Community cards */
.category { 
  background:#fff !important; 
  border:4px solid #e14e33 !important; 
  box-shadow:8px 8px 0px #1e2b4d !important; 
  margin-bottom:20px !important; 
  padding:20px !important; 
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.category .row { margin:0 !important; display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; }
.category:hover { transform:translate(2px,2px); box-shadow:none !important; transition:all 0.15s; }
.category .topluluklogo { width:100%; max-width:128px; border:2px solid #1e2b4d; }
/* Main layout fix */
main#main-container .content .row { display:flex !important; flex-wrap:wrap !important; }
.sysleftcol { flex:1 1 65% !important; min-width:0; }
.sysrightcol { flex:0 0 30% !important; min-width:260px; margin-left:auto !important; position:relative !important; align-self:flex-start !important; }
.sysrightcol img { max-width:100% !important; height:auto !important; }
.sidebar-banner img { max-width:100% !important; height:auto !important; }
.sidebar-l .sidebar, .sidebar-l #sidebar { position:relative !important; }
/* Fix sidebar layout */
main#main-container .row, .content .row { display:flex !important; flex-wrap:wrap !important; }
.col-lg-8, .col-md-8, .sysleftcol { flex: 1 1 65% !important; min-width: 0; }
.col-lg-4, .col-md-4, .sysrightcol { flex: 0 0 30% !important; min-width: 0; }

/* Custom Brutalist Select */
.brutalist-select { position:relative; width:100%; margin-bottom:12px; font-family:'Space Grotesk',sans-serif; font-size:0.875rem; font-weight:600; }
.brutalist-select-trigger { display:flex; align-items:center; justify-content:space-between; border:3px solid #1e2b4d; padding:12px 14px; background:#fff; cursor:pointer; color:#1e2b4d; user-select:none; }
.brutalist-select-trigger:hover { background:#f8f8f8; }
.brutalist-select-trigger.open { border-color:#e14e33; }
.brutalist-select-arrow { font-size:0.625rem; transition:transform 0.15s; color:#1e2b4d; }
.brutalist-select-trigger.open .brutalist-select-arrow { transform:rotate(180deg); }
.brutalist-select-dropdown { display:none; position:absolute; z-index:999; top:100%; left:0; right:0; border:3px solid #1e2b4d; border-top:none; background:#fff; box-shadow:6px 6px 0px #1e2b4d; max-height:320px; overflow-y:auto; }
.brutalist-select-dropdown.open { display:block; }
.brutalist-select-option { padding:11px 14px; cursor:pointer; color:#1e2b4d; border-bottom:1px solid #eee; transition:all 0.1s; font-weight:600; }
.brutalist-select-option:last-child { border-bottom:none; }
.brutalist-select-option:hover { background:#1e2b4d; color:#fff; }
.brutalist-select-option.selected { background:#e14e33; color:#fff; font-weight:700; }
.brutalist-select-search { width:calc(100% - 24px) !important; margin:10px 12px !important; padding:8px 10px !important; border:2px solid #1e2b4d !important; font-family:'Space Grotesk',sans-serif !important; font-size:0.75rem !important; font-weight:600 !important; color:#1e2b4d !important; outline:none !important; }

/* Source tooltip hover */
.src-tooltip:hover .src-tt-text { visibility:visible !important; opacity:1 !important; }
/* Nick tooltip: show above-right instead of centered */
.nick-tooltip .src-tt-text { left:auto !important; right:0 !important; transform:none !important; }

/* ============================================================
   2026 REFINEMENT LAYER
   Ozu koruyarak yukseltme: ayni palet, ayni brutalist dil.
   Yeni nesil dokunuslar: sayfa gecis animasyonlari, yapiskan
   header, yayli mikro-etkilesimler, scroll-reveal, odak
   halkalari, ozel scrollbar. Tumu progressive enhancement.
   ============================================================ */
:root {
  --mint: #5eec97;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);      /* hizli-yumusak durus */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* hafif yaylanma */
}

/* --- Sayfalar arasi yumusak gecis (MPA View Transitions) --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.18s var(--ease-snap) both; }
::view-transition-new(root) { animation: vt-in 0.26s var(--ease-snap) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Yapiskan header: scroll'da hep ulasilabilir --- */
#header-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
/* Mobilde header yuksek (logo + menu); yapiskan olursa ekrani kaplar */
@media (max-width: 767px) {
  #header-navbar { position: relative !important; }
  /* Dar ekranda tasan yan rozetler: sorgu sayaci gizle, sticker kucult */
  #query-counter-badge { display: none !important; }
  .sekiz-yil-badge { margin-left: 8px !important; padding: 5px 8px !important; font-size: 0.5rem !important; }
}

/* --- Nav linklerinde kayan alt cizgi --- */
#header-navbar .desktop-nav a { position: relative; padding-bottom: 3px; }
#header-navbar .desktop-nav a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s var(--ease-snap);
}
#header-navbar .desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Butonlar: yayli basma hissi + gercek "basili" durumu --- */
.btn, button, input[type=submit], button[type=submit] {
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-snap),
              background 0.2s, color 0.2s !important;
  will-change: transform;
}
.btn:hover, button:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 3px 3px 0px #1e2b4d !important;
}
.btn:active, button:active {
  transform: translate(5px, 5px) !important;
  box-shadow: 0px 0px 0px #1e2b4d !important;
  transition-duration: 0.08s !important;
}

/* --- Kartlar: kademeli cokme (tamamen dusmek yerine) --- */
.block:hover {
  transform: translate(4px, 4px);
  box-shadow: 6px 6px 0px var(--navy) !important;
}

/* --- Erisilebilir ve sik odak halkalari --- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--orange) !important;
  outline-offset: 3px !important;
  border-radius: 0;
}

/* --- Ozel brutalist scrollbar --- */
html { scrollbar-color: var(--navy) #ececea; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #ececea; }
::-webkit-scrollbar-thumb {
  background: var(--navy);
  border: 3px solid #ececea;
}
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* --- Hata duzeltme: .content, .content-boxed'in yatay padding'ini eziyordu;
   icerik viewport kenarina yapisiyordu. Birlikte kullanildiginda ikisi de gecerli. --- */
.content.content-boxed { padding: 40px 24px; }

/* --- Tipografi incelikleri --- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
* { -webkit-tap-highlight-color: transparent; }

/* --- Icerik bolumleri ekrana girerken yumusak yukselis ---
   Yalnizca scroll-driven animation destegi olan tarayicilarda;
   digerlerinde hicbir etki yok. Hareket azaltma tercihine saygili. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section, .block {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 36%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0.2; transform: translateY(22px); }
  to   { opacity: 1;   transform: none; }
}

/* --- Dropdown menuler animasyonlu acilsin (destekleyen tarayicida) --- */
.dropdown-menu {
  transition: opacity 0.18s var(--ease-snap), transform 0.18s var(--ease-snap),
              display 0.18s allow-discrete;
  opacity: 1;
  transform: translateY(0);
}
@starting-style {
  .dropdown-menu { opacity: 0; transform: translateY(-8px); }
}

/* --- Gorseller: tasma yok, kartlarda sakin buyume --- */
img { max-width: 100%; }
.block img { transition: transform 0.4s var(--ease-snap); }
.block:hover img { transform: scale(1.015); }

/* --- Okuma ilerlemesi: sayfanin en ustunde turuncu cizgi (CSS-only) --- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: '';
      position: fixed; top: 0; left: 0;
      width: 100%; height: 4px;
      background: var(--orange);
      transform-origin: left;
      transform: scaleX(0);
      z-index: 2000;
      pointer-events: none;
      animation: scroll-progress linear both;
      animation-timeline: scroll();
    }
  }
}
@keyframes scroll-progress { to { transform: scaleX(1); } }

/* --- Sayfa ustune cok hafif turuncu isik: grid'e derinlik katar --- */
body {
  background-image:
    radial-gradient(ellipse 90% 44% at 50% -12%, rgba(225, 78, 51, 0.055), transparent),
    linear-gradient(#e5e5e5 1px, transparent 1px),
    linear-gradient(90deg, #e5e5e5 1px, transparent 1px);
  background-size: 100% 900px, 140px 140px, 140px 140px;
  background-repeat: no-repeat, repeat, repeat;
}

/* --- Hareket azaltma tercihi: tum susleri kapat --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   2026 IMZA BILESENLERI
   Marquee seridi, kontur tipografi, grain dokusu, scroll'a
   bagli sayac, sticker rozetler. Ayni palet, ayni dil.
   ============================================================ */

/* --- Kayan serit (marquee): CSS-only, hover'da durur --- */
.inova-marquee {
  overflow: hidden;
  background: var(--navy);
  border-top: 4px solid var(--navy);
  border-bottom: 4px solid var(--navy);
  padding: 14px 0;
  display: flex;
  user-select: none;
}
.inova-marquee--orange { background: var(--orange); }
.inova-marquee__inner {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  gap: 48px;
  padding-right: 48px;
  animation: marquee-slide 28s linear infinite;
  will-change: transform;
}
.inova-marquee:hover .inova-marquee__inner { animation-play-state: paused; }
.inova-marquee__inner span {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.8125rem;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #fff !important;
  white-space: nowrap;
  display: flex; align-items: center; gap: 48px;
}
.inova-marquee__inner span::after {
  content: '✦';
  color: var(--orange);
  font-size: 1rem;
  letter-spacing: 0;
}
.inova-marquee--orange .inova-marquee__inner span::after { color: var(--navy); }
@keyframes marquee-slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .inova-marquee__inner { animation: none; }
}

/* --- Kontur (outline) tipografi: dev arka plan kelimeleri --- */
.text-outline {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(30, 43, 77, 0.16);
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
}

/* --- Grain dokusu: koyu bolumlere 2026 dokunusu --- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* --- Sticker rozet: hafif egik, hover'da duzelir --- */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  color: var(--navy) !important;
  border: 3px solid var(--navy);
  box-shadow: 5px 5px 0px var(--navy);
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(-4deg);
  transition: transform 0.3s var(--ease-spring);
}
.sticker:hover { transform: rotate(0deg) scale(1.04); }
.sticker--orange { background: var(--orange); color: #fff !important; }

/* --- Scroll'a bagli sayac: rakamlar ekrana girerken dolar --- */
@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stat-num { counter-reset: statn var(--num); }
    .stat-num::after { content: counter(statn); }
    .stat-num > .stat-fallback { display: none; }
    .stat-num {
      animation: stat-count linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }
  }
}
@keyframes stat-count { from { --num: 0; } to { --num: var(--target, 0); } }

/* --- CTA butonlarinda kayan ok --- */
.btn-arrow { position: relative; }
.btn-arrow::after {
  content: '→';
  display: inline-block;
  margin-left: 10px;
  letter-spacing: 0;
  transition: transform 0.25s var(--ease-snap);
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* --- Responsive kart gridleri (inline sabit sutunlarin yerine) --- */
.inova-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.inova-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 991px) {
  .inova-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .inova-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .inova-grid-3, .inova-grid-4 { grid-template-columns: 1fr; }
}

/* --- Ana sayfa kart hover'i (inline JS yerine) --- */
.inova-card {
  background: #fff;
  border: 3px solid var(--navy);
  box-shadow: 4px 4px 0px #d1d5db;
  padding: 24px;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-snap);
}
.inova-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--orange);
}

/* --- Dev hero arka plan kelimesi --- */
.hero-bgword {
  position: absolute;
  right: -1%;
  bottom: 2%;
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: 0.8;
  z-index: 0;
  white-space: nowrap;
}

/* --- Rozet hover bilgi kutusu (brutalist tooltip) --- */
.rozet-tip {
  visibility: hidden; opacity: 0;
  position: absolute; bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  width: 230px; background: var(--navy); color: #fff !important;
  border: 2px solid var(--navy); box-shadow: 5px 5px 0px var(--orange);
  padding: 10px 12px; font-size: 0.6875rem; font-weight: 600; line-height: 1.5;
  z-index: 60; transition: opacity 0.15s var(--ease-snap), transform 0.15s var(--ease-snap);
  text-transform: none; letter-spacing: 0; text-align: left; pointer-events: none;
}
.rozet-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--navy);
}
/* Kenardaki rozetlerde kutu ortalanirsa tasar. Cozum: ortalamak yerine
   rozete YASLAMAK. Ilk rozet CSS ile saga acilir (JS calismasa bile
   dogru); JS ayrica satir basi/sonu rozetlerini isaretler. */
.rozet-chip:first-child .rozet-tip,
.rozet-tip.tip-sag { left: 0; right: auto; transform: none; }
.rozet-chip:first-child .rozet-tip::after,
.rozet-tip.tip-sag::after { left: 22px; margin-left: 0; }

.rozet-tip.tip-sol { left: auto; right: 0; transform: none; }
.rozet-tip.tip-sol::after { left: auto; right: 22px; margin-left: 0; }

.rozet-chip:hover .rozet-tip, .rozet-chip:focus-within .rozet-tip {
  visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-2px);
}
.rozet-chip:first-child:hover .rozet-tip,
.rozet-chip:first-child:focus-within .rozet-tip,
.rozet-chip:hover .rozet-tip.tip-sag, .rozet-chip:focus-within .rozet-tip.tip-sag,
.rozet-chip:hover .rozet-tip.tip-sol, .rozet-chip:focus-within .rozet-tip.tip-sol {
  transform: translateY(-2px);
}