:root {
      --primary: #0a1d3c;
      --accent: #004080;
      --light: #ffffff;
      --gray: #ffffff;
      --soft-gray: #ccc;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Source Sans 3', Arial, sans-serif;
      background: #f3f4f6;
      color: #333;
    }

    .top-banner {
      background: #e9eef5;
      text-align: center;
      padding: 10px;
      font-size: 16px;
      font-weight: 500;
    }

    .top-banner span {
      color: var(--accent);
      font-weight: bold;
    }

    header {
      background: var(--primary);
      color: white;
      padding: 7px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .left { font-size: 22px; font-weight: bold; }

    .right {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
    }

    .search-box {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 6px;
      padding: 2px 8px;
    }

    .search-box input[type="text"] {
      border: none;
      outline: none;
      font-size: 14px;
      padding: 6px;
      background: transparent;
    }

    .search-box button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: var(--primary);
    }

    .divider {
      width: 1px;
      height: 20px;
      background: var(--soft-gray);
    }

    .button {
      background: white;
      color: var(--primary);
      padding: 6px 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      transition: 0.3s;
    }

    .button:hover {
      background: var(--accent);
      color: white;
    }

    .dropdown {
      position: relative;
    }

    #user-dropdown {
      display: none;
      position: absolute;
      top: 110%;
      right: 0;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.10);
      box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16);
      border-radius: 14px;
      min-width: 210px;
      padding: 8px;
      z-index: 999;
    }
    #user-dropdown::before{
      content:"";
      position:absolute;
      top:-7px;
      right: 14px;
      width: 14px;
      height: 14px;
      background: #ffffff;
      border-left: 1px solid rgba(15, 23, 42, 0.10);
      border-top: 1px solid rgba(15, 23, 42, 0.10);
      transform: rotate(45deg);
    }

    #user-dropdown a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border-radius: 12px;
      color: #0f172a;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: .1px;
      transition: background .12s ease, color .12s ease;
    }

    #user-dropdown a:hover {
      background: #f1f5f9;
      color: #1d4ed8;
    }
    #user-dropdown a i{
      width: 16px;
      text-align: center;
      opacity: .72;
    }
    #user-dropdown a[onclick*="logout"]{
      background:#ef4444;
      color:#fff;
    }
    #user-dropdown a[onclick*="logout"]:hover{
      background:#dc2626;
      color:#fff;
    }
    .user-dropdown-divider{
      height: 1px;
      background: #e5e7eb;
      margin: 6px 6px;
    }

    #user-button {
      background: none;
      color: white;
      border: none;
      font-size: 14px;
      cursor: pointer;
    }

    .main {
      display: flex;
      min-height: calc(100vh - 105px - 20px - 170px); /* Üstteki banner, header, footer yüksekliği ve margin */
      max-width: 1200px;
      margin: 20px auto;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(0,0,0,0.08);
      background-color: white;
    }

    .sidebar {
      width: 250px;
      background: white;
      padding: 20px;
      border-right: 1px solid #ddd;
      display: flex; /* Sidebar içindeki öğeleri düzenlemek için flexbox */
      flex-direction: column; /* Öğeleri dikey hizala */
    }

    .sidebar h3 {
      font-size: 18px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 5px;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
    }

    .sidebar ul li {
      padding: 8px 0;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
    }

    .sidebar ul li:hover {
      color: var(--accent);
    }

    .content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      background: white;
    }

    .ilan-karti {
      border: 1px solid var(--p-border);
      border-radius: 12px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
    }

    .ilan-karti:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      border-color: #cbd5e1;
    }

    .ilan-karti-media {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      background: #ffffff;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f5f9;
    }

    .ilan-karti-media img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    .ilan-detay {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-grow: 1;
      background: #fff;
      z-index: 1;
      position: relative;
    }

    .baslik-alani {
      height: auto;
      margin-bottom: 2px;
      display: flex;
      align-items: flex-start;
      gap: 4px;
    }

    .baslik-alani h3 {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 0;
      flex: 1;
    }
    .eids-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: #1e3a8a;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border: 1px solid #93c5fd;
      border-radius: 4px;
      padding: 1px 4px;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .fiyat-alani {
      height: auto;
      border-bottom: none;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }

    .fiyat {
      font-size: 18px;
      font-weight: 600;
      color: var(--p-brand-2);
      letter-spacing: -0.5px;
    }

    .ozet-alani {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .ozet-pill {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f8fafc;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    /* Vitrin Grid Düzeni */
    .vitrin {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }

.link {
  padding: 14px 16px;
  font-size: 17px;
  font-weight: bold;
  color: whitesmoke; /* Bu satırı değiştirdik */
  background: rgb(0, 0, 169);
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
  text-align: center;
}

.link:hover {
  background: #0050b3;
  transform: scale(1.03);
}

    .notif-dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: 120%;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      width: 400px;
      max-height: 500px;
      overflow-y: auto;
      z-index: 999;
      animation: slideDown 0.2s ease;
      border: 1px solid #eee;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .notif-dropdown .notif-header {
      padding: 14px 16px;
      font-weight: 600;
      background: #f5f7fa;
      border-bottom: 1px solid #ddd;
      font-size: 16px;
      color: #0a1d3c;
    }

    .notif-item {
      display: flex;
      gap: 14px;
      padding: 12px 16px;
      border-bottom: 1px solid #cacaca;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .notif-item:hover {
      background: #f9f9f9;
    }

    .notif-item img {
      width: 60px;
      height: 45px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid #ddd;
    }

    .notif-item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .notif-item-content .title {
      font-size: 14px;
      font-weight: 700;
      color: #0a1d3c;
    }

    .notif-item-content .desc {
      font-size: 13px;
      color: #555;
    }

    .notif-item-content .price {
      font-size: 13px;
      color: #333;
      margin: 4px 0;
    }

    .notif-item-content .time {
      font-size: 11px;
      color: gray;
    }

    .notif-list{
      padding: 12px 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .notif-card{
      display:flex;
      gap:12px;
      padding:12px;
      border:1px solid #eef2f7;
      border-radius:14px;
      background:#fff;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      user-select:none;
    }

    .notif-card:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(15, 23, 42, 0.10);
    }

    .notif-card.is-open{
      border-color: rgba(37, 99, 235, 0.35);
      box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
    }

    .notif-thumb{
      width:60px;
      height:45px;
      border-radius:10px;
      object-fit:cover;
      border:1px solid #e5e7eb;
      flex: 0 0 auto;
      background:#f8fafc;
    }

    .notif-badge{
      width:60px;
      height:45px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      font-weight:600;
      flex: 0 0 auto;
      border:1px solid #e5e7eb;
      background:#f8fafc;
      color:#0a57d4;
    }

    .notif-badge.is-red{
      background:#fff1f2;
      border-color:#fecdd3;
      color:#dc2626;
    }

    .notif-main{
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    .notif-title{
      font-size:14px;
      font-weight:600;
      color:#0a1d3c;
      letter-spacing:-0.1px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .notif-desc{
      font-size:13px;
      color:#334155;
      line-height:1.45;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
      white-space: pre-line;
    }

    .notif-card.is-open .notif-desc{
      -webkit-line-clamp: unset;
      overflow: visible;
      display:block;
    }

    .notif-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top: 2px;
    }

    .notif-time{
      font-size:11px;
      color:#94a3b8;
      white-space:nowrap;
    }

    .notif-actions{
      display:none;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
    }

    .notif-card.is-open .notif-actions{
      display:flex;
    }

    .notif-go{
      background:#0a1d3c;
      color:#fff;
      border:none;
      padding:6px 10px;
      border-radius:10px;
      font-weight:600;
      font-size:12px;
      cursor:pointer;
    }

    .notif-go:hover{
      background:#0047ab;
    }
    .notif-count {
      position: absolute;
      top: -5px;
      right: -7px;
      background: white;
      color: #007BFF;
      font-size: 11px;
      font-weight: bold;
      padding: 2px 5px;
      border-radius: 50%;
      border: 1.5px solid #007BFF;
      min-width: 18px;
      text-align: center;
      line-height: 1;
    }

    /* Footer Stilleri */
    footer {
      background: var(--primary);
      color: var(--light);
      padding: 26px 18px 14px;
      margin-top: 30px;
      border-top: 3px solid var(--accent);
    }

    .footer-content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-section {
      flex: 1;
      min-width: 250px;
      margin: 15px;
    }

    .footer-section h3 {
      color: var(--light);
      margin-bottom: 20px;
      font-size: 18px;
      position: relative;
      padding-bottom: 10px;
    }

    .footer-section h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 2px;
      background: var(--accent);
    }

    .footer-section p {
      font-size: 14px;
      line-height: 1.8;
      color: #c0c0c0;
    }

    .footer-section .contact span {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      color: #c0c0c0;
    }

    .footer-section .contact i {
      margin-right: 10px;
      color: var(--accent);
    }

    .footer-section ul {
      list-style: none;
    }

    .footer-section ul li {
      margin-bottom: 10px;
    }

    .footer-section ul li a {
      color: #c0c0c0;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;
    }

    .footer-section ul li a:hover {
      color: var(--accent);
    }

    .footer-section .social-links a {
      display: inline-block;
      margin-right: 15px;
      transition: transform 0.3s ease;
    }

    .footer-section .social-links a:hover {
      transform: translateY(-3px);
    }

    .footer-section .social-links img {
      width: 28px;
      height: 28px;
    }

    .footer-bottom {
      text-align: center;
      padding-top: 12px;
      margin-top: 18px;
      border-top: 1px solid #2d4059;
      font-size: 13px;
      color: #a0a0a0;
    }

    /* Skeleton Loading CSS */
    .skeleton {
      background: #f0f0f0;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
      border-radius: 4px;
    }

    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .sk-card {
      height: 280px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid #eee;
      overflow: hidden;
    }
    .sk-img { width: 100%; height: 160px; }
    .sk-content { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
    .sk-title { width: 80%; height: 16px; }
    .sk-price { width: 40%; height: 20px; }
    .sk-meta { width: 100%; height: 12px; margin-top: auto; }

    .sk-row {
      display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ececec;
    }
    .sk-row-img { width: 80px; height: 60px; border-radius: 6px; }
    .sk-row-content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .sk-row-line { height: 12px; width: 60%; }
    .sk-row-line.short { width: 40%; }

    .latest-ads-section {
        margin-top: 25px;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

    .latest-ads-section h4 {
        font-size: 16px;
        color: var(--primary);
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 1px solid #f0f0f0;
    }

    /* YENİ TASARIM BAŞLANGICI */
    .latest-ad-item {
        display: flex;
        gap: 12px; /* Resim ile metin arasında boşluk */
        padding: 10px 0; /* Üstten ve alttan iç boşluk */
        border-bottom: 1px solid #ececec; /* Her öğe arasına gri çizgi */
        cursor: pointer;
        transition: background-color 0.2s ease;
        align-items: center; /* Dikeyde ortala */
    }

    .latest-ad-item:hover {
        background-color: #f9f9f9;
    }

    .latest-ad-item:last-child {
        border-bottom: none; /* Son öğede çizgi olmasın */
        padding-bottom: 0;
    }

    .latest-ad-item img {
        width: 80px; /* Sabit genişlik */
        height: 60px; /* Sabit yükseklik */
        object-fit: cover; /* Resmi kutuya sığdır */
        border-radius: 6px; /* Hafif yuvarlak köşeler */
        flex-shrink: 0; /* Resmin küçülmesini engelle */
    }

    .latest-ad-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-items: center;
  overflow: hidden; /* Bu da eklenebilir */
}


    .latest-ad-info .brand-model {
        font-size: 14px;
        font-weight: 600;
        color: var(--primary); /* Daha belirgin renk */
        margin-bottom: 2px; /* Fiyat ile arasında boşluk */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .latest-ad-info .price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 4px;
    }
    .latest-ad-info .price .old-price {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-decoration: line-through;
    }
    .latest-ad-info .price .new-price {
        font-size: 13px;
        font-weight: bold;
        color: var(--accent);
    }
.latest-ad-info .details {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 4px; /* her bilgi arası biraz dikey boşluk */
}


    .latest-ad-info .details span {
      white-space: nowrap; /* Her bir detay tek satırda kalsın */
    }

    /* YENİ TASARIM SONU */

    /* --- Medya Sorguları (Responsive Tasarım İçin) --- */
    @media (max-width: 992px) {
      .vitrin {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 768px) {
      .header .right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
      }
      .search-box {
        order: 1;
        width: 100%;
        margin-bottom: 10px;
      }
      .dropdown, #login-btn, #register-btn, #ilan-ekle-btn {
        order: 2;
      }
      .divider {
        display: none;
      }

      .main {
        flex-direction: column;
        margin: 10px;
      }

      .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding-bottom: 0; /* İçerik için boşluk bırakma */
      }
      .latest-ads-section {
        margin-top: 15px; /* Mobil görünümde daha az boşluk */
      }

      .vitrin {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .footer-content {
        flex-direction: column;
        align-items: center;
      }

      .footer-section {
        min-width: unset;
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
      }

      .footer-section h3::after {
        left: 50%;
        transform: translateX(-50%);
      }
      .footer-section .social-links {
        text-align: center;
      }
    }

    @media (max-width: 576px) {
      .vitrin {
        grid-template-columns: repeat(2, 1fr);
      }
      .ilan-karti {
        height: 220px;
      }
      .ilan-karti-media {
        height: 80px;
      }
      .ilan-karti h3 {
        font-size: 12px;
      }
      .ilan-karti .fiyat {
        font-size: 13px;
      }
      .ozet-alani span {
        font-size: 10.5px;
      }
      /* Mobil için son eklenen ilanların boyutunu daha da küçültelim */
      .latest-ad-item img {
          width: 70px;
          height: 50px;
      }
      .latest-ad-info .brand-model {
          font-size: 13px;
      }
      .latest-ad-info .price {
          font-size: 12px;
      }
      .latest-ad-info .details {
          font-size: 10.5px;
      }
    }

    @media (max-width: 400px) {
      .vitrin {
        grid-template-columns: 1fr;
      }
      .ilan-karti {
        height: auto;
      }
      .ilan-karti-media {
        height: 120px;
      }
      .ilan-karti h3 {
        font-size: 14px;
      }
      .ilan-karti .fiyat {
        font-size: 15px;
      }
      .ozet-alani span {
        font-size: 11.5px;
      }
    }
.arama-sonuclari-kutusu {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 999;
  font-size: 13px;
  display: none;
}

.arama-sonuclari-kutusu .sonuc {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}

.arama-sonuclari-kutusu .sonuc:hover {
  background-color: #f5f5f5;
}

.arama-sonuclari-kutusu img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
}

#aramaSonuclari {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

#aramaSonuclari .sonuc {
   font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

#aramaSonuclari .sonuc:hover {
  background-color: #f7f7f7;
}

#aramaSonuclari .sonuc img {
  width: 60px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
}
.tumunu-gor {
  text-align:center;
  font-weight:bold;
  color:#004080;
  text-decoration:underline;
  cursor:pointer;
  padding:10px;
}

/* Haberler */
.news-list{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, .9fr);
  gap:14px;
  align-items:stretch;
}
.news-feature{
  position:relative;
  min-height:280px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #dbe7f6;
  background:#0f172a;
  text-decoration: none;
  color:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow:0 18px 42px rgba(15, 23, 42, 0.14);
}
.news-feature:hover{
  transform: translateY(-2px);
  box-shadow:0 24px 48px rgba(15, 23, 42, 0.18);
}
.news-feature-media{
  position:absolute;
  inset:0;
  background:#dbeafe;
}
.news-feature-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-feature-placeholder{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);
  color: rgba(255,255,255,.9);
  font-size: 42px;
}
.news-feature-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.08) 0%, rgba(15,23,42,.68) 56%, rgba(15,23,42,.92) 100%);
}
.news-feature-content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:18px;
}
.news-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bfdbfe;
}
.news-feature-title{
  margin:0;
  font-size:24px;
  line-height:1.18;
  font-weight:600;
  color:#fff;
}
.news-feature-meta{
  font-size:12px;
  color:rgba(255,255,255,.78);
}
.news-feature-summary{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.86);
}
.news-feature-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:2px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:12px;
  font-weight:600;
  backdrop-filter:blur(10px);
}
.news-side-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.news-mini-item{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:12px;
  align-items:stretch;
  padding:12px;
  border:1px solid #e7edf5;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-mini-item:hover{
  transform:translateY(-2px);
  border-color:#d7e6fb;
  box-shadow:0 12px 28px rgba(15, 23, 42, 0.08);
}
.news-mini-index{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:92px;
  border-radius:14px;
  background:linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  color:#1d4ed8;
  font-size:24px;
  font-weight:600;
}
.news-mini-title{
  margin:0 0 4px;
  font-size:14px;
  line-height:1.45;
  font-weight:600;
  color:#0f172a;
}
.news-mini-meta{
  font-size:11px;
  color:#64748b;
}
.news-mini-summary{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#475569;
}
.news-footer-link{
  grid-column:1 / -1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  min-height:46px;
  font-size:12px;
  font-weight:600;
  color:#1d4ed8;
  text-decoration:none;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#f8fafc;
}
.news-footer-link:hover{
  border-color:#93c5fd;
  background:#eff6ff;
}

/* Skeleton */
.skeleton-news{
  border:1px solid #e7edf5;
  border-radius:16px;
  overflow:hidden;
  padding:12px;
}
.skel{
  background: linear-gradient(90deg,#eef2f7 25%,#f7f9fc 37%,#eef2f7 63%);
  background-size:400% 100%;
  animation: shine 1.2s infinite linear;
}
@keyframes shine { 0%{background-position: 100% 0;} 100%{background-position: 0 0;} }
.skel-line{ height: 12px; border-radius: 8px; margin: 8px 0; }
.skel-img{ width: 100%; height: 84px; border-radius: 12px; }

@media (max-width: 576px){
  .news-feature{
    min-height:240px;
  }
  .news-feature-title{
    font-size:20px;
  }
  .news-feature-summary{
    font-size:12px;
  }
  .news-feature-content{
    padding:14px;
  }
}
@media (max-width: 900px){
  .news-list{
    grid-template-columns:1fr;
  }
  .news-side-list{
    gap:12px;
  }
}
@media (max-width: 640px){
  .news-mini-item{
    grid-template-columns:1fr;
  }
  .news-mini-index{
    min-height:72px;
  }
}

/* === EN ÇOK BEĞENİLEN İLAN === */
.top-liked-section {
  margin-top: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.top-liked-section h4 {
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.top-liked-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  align-items: center;
  min-height: 76px;
}
.top-liked-card:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.top-liked-card img {
  width: 86px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
  flex-shrink: 0;
}

.top-liked-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* ellipsis için */
}

.top-liked-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-liked-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-top: 4px;
}

.top-liked-like {
  color: green;
}


.top-liked-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-liked-title .pipe { opacity: .5; }

.top-liked-actions {
  display: flex;
  align-items: center;   /* ikon ve sayı aynı hizada */
  gap: 6px;              /* aralarındaki boşluk daha kısa */
  margin-top: 6px;
  font-size: 15px;       /* yazı boyutu */
  font-weight: 600;
}

.top-liked-actions span {
  display: flex;
  align-items: center;   /* ikon ve sayı aynı çizgide */
  gap: 3px;              /* ikon ile rakam arasındaki boşluk */
  min-width: 0;
  flex-shrink: 1;        /* uzun sayı sığsın */
}

.top-liked-actions i {
  font-size: 16px;       /* ikon boyu küçüldü */
  line-height: 1;        /* rakamla tam hizalı */
}

.top-liked-actions .like    { color: #177a2f; }



.top-liked-actions .like    { color: #177a2f; display:flex; align-items:center; gap:6px; }
.top-liked-actions .dislike { color: #b10f0f; display:flex; align-items:center; gap:6px; }
.top-liked-actions i { font-size: 15px; }
/* Kategoriler - Sade & Premium Liste */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 15px;
}

.cat-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cat-btn i {
  font-size: 18px;
  color: #94a3b8;
  width: 24px;
  text-align: center;
  transition: all 0.2s;
}

.cat-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  padding-left: 20px;
}

.cat-btn:hover i {
  color: #2563eb;
  transform: scale(1.1);
}

/* Sidebar genel düzen */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}

:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: rgba(255, 255, 255, 0.9);
  --text: #0b1220;
  --muted: #64748b;
  --navy: #071a37;
  --navy-2: #0b2f63;
  --brand: #3b82f6;
  --brand-2: #2563eb;
  --border: #e6eaf2;
  --radius: 18px;
  --shadow: 0 18px 60px rgba(7, 18, 40, 0.12);
  --shadow-sm: 0 10px 28px rgba(7, 18, 40, 0.08);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Source Sans 3', Arial, sans-serif;
  line-height: 1.4;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: block;
  padding: 0;
  color: #ffffff;
  background: rgba(7, 26, 55, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #93c5fd, #3b82f6);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.35);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.divider { display: none; }

.button {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: none;
}

.button:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transform: none;
  border-color: rgba(255, 255, 255, 0.18);
}

#user-button {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

#user-button:hover { background: rgba(255, 255, 255, 0.18); }

#ilan-ekle-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

#ilan-ekle-btn:hover {
  background: linear-gradient(135deg, var(--brand-2), #1e40af);
  border-color: rgba(255, 255, 255, 0.16);
}

.home {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px 34px;
}

.hero {
  margin-top: 14px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0) 65%),
    radial-gradient(700px 420px at 85% 5%, rgba(37, 99, 235, 0.35), rgba(37, 99, 235, 0) 60%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-inner {
  padding: 26px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: stretch;
}

.hero-copy {
  color: #ffffff;
  padding: 6px 4px;
}

.hero-copy h1 {
  margin: 0;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.6px;
}

.hero-copy p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.8;
  max-width: 54ch;
}

.hero-chips {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.chip:hover { background: rgba(255, 255, 255, 0.16); }

.hero-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 16px;
}

.hero-panel h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.search-box {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.search-box input[type="text"] {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  background: transparent;
}

.search-box button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.hero-panel .arama-sonuclari-kutusu {
  position: static;
  width: 100%;
  margin-top: 10px;
  box-shadow: none;
  border-radius: 14px;
}

.hero-cta {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.cta-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #ffffff;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.cta-secondary {
  background: #ffffff;
  color: var(--navy);
  border: 1px solid var(--border);
}

.below-hero {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.section {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f4fb;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.2px;
  color: var(--navy);
}

.section-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-2);
  text-decoration: none;
}

.section-link:hover { text-decoration: underline; }

.vitrin {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ilan-karti {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ilan-karti:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.ilan-karti-media { height: 160px; }

.ilan-karti .fiyat { color: var(--brand-2); }

.ozet-alani { color: var(--muted); }

.top-liked-card { border: none; box-shadow: none; border-radius: 0; background: transparent; }

.notif-dropdown { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }

footer {
  background: linear-gradient(135deg, #0b1f3b, #0b3a8f);
  border-top: none;
}

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }

@media (max-width: 992px) {
  .site-header-inner { flex-wrap: wrap; }
  .header-actions { justify-content: flex-end; flex-wrap: wrap; }
  .hero-inner { grid-template-columns: 1fr; }
  .below-hero { grid-template-columns: 1fr; }
  .vitrin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .site-header-inner { padding: 10px 12px; }
  .vitrin { grid-template-columns: 1fr; }
  .hero-inner { padding: 18px; }
  .hero-copy h1 { font-size: 32px; }
  .hero-panel { padding: 14px; }
}

    :root{
      --p-bg:#ffffff;
      --p-surface:#ffffff;
      --p-text:#0f172a;
      --p-muted:#64748b;
      --p-border:#e5e7eb;
      --p-brand:#2563eb;
      --p-brand-2:#1d4ed8;
      --p-radius:14px;
      --p-shadow:0 14px 40px rgba(15,23,42,.08);
      --p-shadow-sm:0 8px 20px rgba(15,23,42,.06);
    }

    body{
      background:var(--p-bg);
      color:var(--p-text);
      font-family: 'Source Sans 3', Arial, sans-serif;
      line-height:1.45;
    }

    .p-header{
      position:sticky;
      top:0;
      z-index:200;
      background:rgba(255,255,255,.92);
      border-bottom:1px solid var(--p-border);
      backdrop-filter:blur(10px);
      overflow:visible;
    }

    .p-header__inner{
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding:0 24px;
      display:grid;
      grid-template-columns:auto minmax(320px, 1fr) auto;
      align-items:center;
      align-content:center;
      gap:20px; 
      height: 56px;
      position: relative;
      top: -4px;
    }

    .p-brand{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      min-width: 0;
    }

    /* Ana sayfa logosunu dengeli boyutta tut */
    .p-brand img {
        height: 92px !important;
    }

    .p-search{
      width:100%;
      min-width:0;
      margin:0;
    }
    
    .p-searchBox {
        width: 100%; /* Kutu konteynerin tamamını kaplasın */
    }

    .p-actions{
      display:flex;
      align-items:center;
      gap:16px;
      flex-shrink: 0;
      justify-content:flex-end;
      min-width:max-content;
    }

    .p-actions{
      display:flex;
      align-items:center;
      gap:16px;
      flex-shrink: 0;
    }

    .p-brandDot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:linear-gradient(135deg,var(--p-brand),var(--p-brand-2));
    }

    .p-search{position:relative}

    .p-searchBox{
      display:flex;
      align-items:center;
      gap:10px;
      background:#fff;
      border:1px solid #e5e7eb;
      border-radius:10px;
      padding:8px 14px;
      box-shadow:0 8px 20px rgba(15,23,42,.06);
      /* Genişlik ayarı parent grid tarafından kontrol ediliyor (1fr) */
    }

    .p-searchBox input{
      width:100%;
      border:none;
      outline:none;
      background:transparent;
      font-size:14px;
    }

    .p-searchBox button{
      border:none;
      background:transparent;
      cursor:pointer;
      font-size:16px;
      color:#0b1f3b;
    }

    .p-searchBox:focus-within{
      border-color:rgba(37,99,235,.45);
      box-shadow:0 0 0 4px rgba(37,99,235,.12);
    }

    .p-search .arama-sonuclari-kutusu{
      position:absolute;
      left:0;
      top:calc(100% + 10px);
      width:100%;
      max-height:360px;
      overflow:auto;
      background:var(--p-surface);
      border:1px solid var(--p-border);
      border-radius:14px;
      box-shadow:var(--p-shadow);
      z-index:1000;
    }

    .p-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .p-header .button{
      background:var(--p-surface);
      color:var(--p-text);
      border:1px solid var(--p-border);
      border-radius:10px;
      padding:8px 12px;
      font-weight:600;
      box-shadow:none;
    }

    .p-header .button:hover{
      background:#f8fafc;
      border-color:#d1d5db;
      transform:none;
    }

    .p-header #ilan-ekle-btn{
      background:linear-gradient(135deg,var(--p-brand),var(--p-brand-2));
      border-color:rgba(37,99,235,.6);
      color:#ffffff;
    }

    .p-header #ilan-ekle-btn:hover{
      background:linear-gradient(135deg,var(--p-brand-2),#1e40af);
      border-color:rgba(29,78,216,.7);
    }

    .p-header #user-button{
      background: transparent; /* Arkaplan şeffaf */
      color: var(--p-text);
      border: none; /* Çerçeve kaldırıldı */
      padding: 6px 10px;
      font-weight: 700; /* Biraz daha kalın yazı */
      font-size: 14px;
      cursor: pointer;
    }
    
    .p-header #user-button:hover{
        background: transparent; /* Hover'da da değişmesin */
        color: var(--p-brand); /* Sadece yazı rengi değişsin */
    }

    .p-page{
      max-width:1240px;
      margin:0 auto;
      padding:18px 18px 34px;
    }

    /* --- STORY SECTION --- */
    .story-section {
      margin-bottom: 20px;
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      border: none;
      overflow: visible;
    }

    .story-list {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding-top: 6px;
      padding-bottom: 5px;
      scrollbar-width: none;
    }
    
    .story-list::-webkit-scrollbar { 
      display: none;
    }

    .story-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      min-width: 70px;
    }

    .story-circle {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      padding: 3px;
      background: #fff;
      border: 2px solid #e2e8f0;
      position: relative;
    }

    .story-circle.has-story {
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      border: none;
    }

    .story-circle.has-story.premium-story {
      background: transparent;
      border: none;
      padding: 4px;
      box-shadow: 0 10px 22px rgba(245, 158, 11, 0.25);
      overflow: visible;
    }
    .story-circle.has-story.premium-story::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      background: conic-gradient(
        from 210deg,
        #f59e0b,
        #ef4444,
        #8b5cf6,
        #3b82f6,
        #22c55e,
        #f59e0b
      );
      will-change: transform;
      transform: translateZ(0);
      transform-origin: 50% 50%;
      backface-visibility: hidden;
      pointer-events: none;
      animation: premiumSpin 1.2s linear infinite;
    }

    .story-circle.has-story.premium-story img {
      position: relative;
      z-index: 1;
      border: 3px solid #fff;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    @keyframes premiumSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .story-circle img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      background: #fff;
    }

    .story-username {
      font-size: 11px;
      color: #0f172a;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    
    .story-item.add-story .story-circle {
      border: 2px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
    }
    
    .story-item.add-story .story-circle i {
      font-size: 24px;
      color: #3b82f6;
    }
    
    /* Modal Viewer */
    .story-viewer {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.9);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
    }
    
    .story-content-wrapper {
        position: relative;
        width: 100%;
        max-width: 550px; /* Büyütüldü: 400px -> 550px */
        height: 90vh; /* Büyütüldü: 80vh -> 90vh */
        background: #000;
        display: flex;
        flex-direction: column;
        border-radius: 12px; /* Köşeler yumuşatıldı */
        overflow: hidden; /* İçerik taşmasın */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    
    .story-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }
    
    .story-progress-bar {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        display: flex;
        gap: 4px;
        z-index: 20; /* Z-index artırıldı */
    }
    
    .progress-segment {
        flex: 1;
        height: 2px;
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        background: #fff;
        width: 0%;
        transition: width 0.05s linear; /* Akıcı geçiş */
    }
    
    .story-header-info {
        position: absolute;
        top: 24px;
        left: 16px;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Okunabilirlik için gölge */
    }
    
    .story-header-ring{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 3px;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .story-header-ring.is-premium{
        border: none;
        background: transparent;
        position: relative;
    }
    .story-header-ring.is-premium::before{
        content:"";
        position:absolute;
        inset:0;
        border-radius:50%;
        background: conic-gradient(
          from 210deg,
          #f59e0b,
          #ef4444,
          #8b5cf6,
          #3b82f6,
          #22c55e,
          #f59e0b
        );
        will-change: transform;
        transform: translateZ(0);
        transform-origin: 50% 50%;
        backface-visibility: hidden;
        pointer-events: none;
        animation: premiumSpin 1.2s linear infinite;
    }
    .story-header-avatar{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.9);
        object-fit: cover;
        background: #fff;
        position: relative;
        z-index: 1;
    }
    
    .story-close-btn {
        position: absolute;
        top: 24px;
        right: 16px;
        color: white;
        font-size: 28px;
        cursor: pointer;
        z-index: 30;
        opacity: 0.8;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .story-close-btn:hover { opacity: 1; }
    
    /* Navigasyon Butonları - İçeri Alındı ve Mobilde de Görünür Yapıldı */
    .story-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 36px; /* İkon büyütüldü */
        cursor: pointer;
        padding: 20px;
        z-index: 25;
        opacity: 0.6;
        transition: opacity 0.2s, transform 0.2s;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Gölge eklendi */
    }
    .story-nav-btn:hover { 
        opacity: 1; 
        transform: translateY(-50%) scale(1.1); 
    }
    .nav-prev { left: 0; }  /* Sol kenara yapışık */
    .nav-next { right: 0; } /* Sağ kenara yapışık */
    
    .ad-modal{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(2, 6, 23, 0.72);
      z-index:10000;
      align-items:flex-end;
      justify-content:center;
      padding:14px;
    }
    .ad-modal.is-open .ad-modal__sheet{ transform: translateY(0); }
    .ad-modal__sheet{
      width:min(980px, 100%);
      background:#fff;
      border-radius:18px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      max-height:min(84vh, 820px);
      box-shadow: 0 26px 90px rgba(0,0,0,0.55);
      transform: translateY(18px);
      transition: transform .18s ease;
    }
    .ad-modal__handle{
      width:44px;
      height:5px;
      border-radius:999px;
      background:rgba(15, 23, 42, 0.18);
      margin:10px auto 6px;
    }
    .ad-modal__top{
      padding:10px 14px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }
    .ad-modal__title{
      margin:0;
      font-size:15px;
      font-weight:950;
      color:#0f172a;
      letter-spacing:.1px;
    }
    .ad-modal__close{
      border:none;
      background:rgba(15, 23, 42, 0.06);
      width:36px;
      height:36px;
      border-radius:12px;
      cursor:pointer;
      font-size:22px;
      line-height:36px;
      color:#0f172a;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: filter .15s;
      flex: 0 0 auto;
    }
    .ad-modal__close:hover{ filter: brightness(.95); }
    .ad-modal__search{
      padding:10px 14px 12px;
      display:flex;
      align-items:center;
      gap:10px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      background: #fff;
    }
    .ad-modal__search i{
      color:#64748b;
      font-size:14px;
    }
    .ad-modal__search input{
      width:100%;
      border:none;
      outline:none;
      font-size:14px;
      font-weight:600;
      color:#0f172a;
    }
    .ad-modal__search input::placeholder{
      color:#94a3b8;
      font-weight:700;
    }
    .ad-modal__list{
      flex:1;
      overflow:auto;
      padding:12px;
      background:#fff;
    }
    .ad-modal__placeholder{
      padding:20px 12px;
      text-align:center;
      color:#64748b;
      font-weight:600;
    }
    .ad-modal__placeholder small{
      display:block;
      margin-top:6px;
      font-weight:700;
      color:#94a3b8;
    }
    .ad-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .ad-card{
      border:none;
      background:transparent;
      padding:0;
      text-align:left;
      cursor:pointer;
      border-radius:16px;
      overflow:hidden;
      position:relative;
      aspect-ratio: 16 / 10;
      box-shadow: 0 10px 28px rgba(0,0,0,0.10);
      transform: translateY(0);
      transition: transform .15s, filter .15s;
    }
    .ad-card:hover{ transform: translateY(-2px); filter: brightness(.98); }
    .ad-card:active{ transform: translateY(0); }
    .ad-card__img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .ad-card__shade{
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(2,6,23,0) 32%, rgba(2,6,23,.78) 92%);
    }
    .ad-card__meta{
      position:absolute;
      left:12px;
      right:12px;
      bottom:10px;
      color:#fff;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .ad-card__t{
      font-size:13px;
      font-weight:950;
      line-height:1.15;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .ad-card__p{
      font-size:12px;
      font-weight:600;
      opacity:.95;
    }
    @media (min-width: 980px){
      .ad-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 420px){
      .ad-grid{ grid-template-columns: 1fr; }
    }

    /* Story Overlay Ad */
    .story-ad-overlay {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15,23,42,0.72);
      padding: 12px 14px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 20;
      box-shadow: 0 18px 34px rgba(2,6,23,0.28);
      border: 1px solid rgba(255,255,255,0.12);
      width: min(94%, 720px);
      justify-content: space-between;
      cursor: pointer;
      backdrop-filter: blur(10px);
      text-decoration: none;
      transition: transform .16s ease, box-shadow .16s ease;
    }
    .story-ad-overlay:hover{
      transform: translateX(-50%) translateY(-1px);
      box-shadow: 0 22px 40px rgba(2,6,23,0.34);
    }
    .story-ad-overlay__info .p{
      margin-top: 0;
      font-size: 14px;
      font-weight: 950;
      color: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .story-ad-overlay__chev{
      margin-left: auto;
      color:#ffffff;
      font-size: 12px;
      opacity:.9;
      flex: 0 0 auto;
      transition: transform .16s ease, color .16s ease;
    }
    .story-ad-overlay__action{
      margin-left: auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
      color:#ffffff;
      font-size:13px;
      font-weight:950;
      letter-spacing:-.1px;
      flex: 0 0 auto;
      transition: background .16s ease, border-color .16s ease;
    }
    .story-ad-overlay:hover .story-ad-overlay__chev{
      transform: translateX(2px);
      color:#ffffff;
    }
    .story-ad-overlay:hover .story-ad-overlay__action{
      background: rgba(255,255,255,0.16);
      border-color: rgba(255,255,255,0.22);
    }
    @media (max-width: 420px){
      .story-ad-overlay{ width: min(94%, 560px); }
    }

    @media (max-width: 576px) {
        .story-content-wrapper { height: 100vh; max-width: 100%; border-radius: 0; }
        /* Navigasyon butonları artık mobilde de görünsün */
        /* .nav-prev, .nav-next { display: none; }  <-- KALDIRILDI */
    }

    /* --- PROFESSIONAL HERO SECTION --- */
    .p-hero {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-radius: 12px;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      margin-bottom: 20px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    
    /* Decorative circle */
    .p-hero::after {
        content: '';
        position: absolute;
        right: -50px;
        top: -50px;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.03);
        border-radius: 50%;
        pointer-events: none;
    }

    .p-hero-content {
        flex: 1;
        z-index: 1;
    }

    .p-hero h1 {
      margin: 0;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      color: #fff;
    }

    .p-hero p {
      margin: 6px 0 0;
      font-size: 13px;
      color: #94a3b8;
      max-width: 500px;
    }

    .p-hero__actions {
      display: flex;
      gap: 12px;
      z-index: 1;
    }

    .p-hero .p-btn {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        font-weight: 600;
        padding: 10px 20px;
        border-radius: 8px;
        transition: all 0.2s;
    }
    .p-hero .p-btn:hover {
        background: #fff;
        color: #0f172a;
    }
    .p-hero .p-btn--primary {
        background: #3b82f6;
        border-color: #3b82f6;
    }
    .p-hero .p-btn--primary:hover {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
    }

    .p-hero__mini { display: none; } /* Hide old mini cards */

    /* --- PROFESSIONAL AD CARD --- */
    .ilan-karti {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px; /* Slightly sharper corners */
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
    }

    .ilan-karti:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.1);
      border-color: #cbd5e1;
    }

    .ilan-karti-media {
      height: 200px; /* Fixed height, good ratio */
    }

    .ilan-detay {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex-grow: 1;
    }

    .baslik-alani {
        margin-bottom: 4px;
        display: flex;
        align-items: flex-start;
        gap: 4px;
    }
    .baslik-alani h3 {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 40px;
      flex: 1; /* Fixed height for alignment */
    }
    .eids-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: #1e3a8a;
      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      border: 1px solid #93c5fd;
      border-radius: 4px;
      padding: 1px 4px;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .fiyat-alani {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    .fiyat {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .eski-fiyat {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
      text-decoration: line-through;
    }

    .ozet-alani {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #64748b;
    }
    
    .ozet-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .ozet-divider {
        width: 3px;
        height: 3px;
        background: #cbd5e1;
        border-radius: 50%;
    }

    .p-grid{
      margin-top:16px;
      display:grid;
      grid-template-columns:320px 1fr;
      gap:16px;
      align-items:start;
    }

    .p-side{display:flex;flex-direction:column;gap:12px}
    .p-main{display:flex;flex-direction:column;gap:14px}

    .p-side,
    .p-main{
      background: rgba(255,255,255,.72);
      border-radius: 18px;
      padding: 10px;
    }

    .p-side .p-card,
    .p-main .p-card{
      padding: 12px;
    }

    .p-card{
      background:transparent;
      border:none;
      border-radius:0;
      box-shadow:none;
      padding:14px;
    }

    .p-card__title{
      font-weight:950;
      font-size:13px;
      letter-spacing:-.15px;
      margin-bottom:10px;
    }

    .p-sectionHead{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
      padding-bottom:10px;
      border-bottom:1px solid #f1f5f9;
      margin-bottom:12px;
    }

    .p-sectionHead h2{
      margin:0;
      font-size:16px;
      font-weight:950;
      letter-spacing:-.2px;
    }

    .p-sectionHead a{
      font-size:12px;
      font-weight:600;
      color:var(--p-brand-2);
      text-decoration:none;
    }

    .p-sectionHead a:hover{text-decoration:underline}

    /* --- TAB BAR STYLES (Mobil Alt Menü) --- */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 21px;
      background: rgba(255, 255, 255, 0.96);
      border-top: 1px solid #e2e8f0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 1000;
      backdrop-filter: blur(10px);
      box-shadow: 0 -4px 20px rgba(0,0,0,0.03);
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: #94a3b8;
      font-size: 8px;
      font-weight: 600;
      gap: 1px;
      flex: 1;
      height: 100%;
    }
    
    .tab-item i {
      font-size: 12px;
      margin-bottom: 0;
      transition: transform 0.2s;
    }
    
    .tab-item.active {
      color: var(--p-brand);
    }
    
    .tab-item.active i {
      transform: translateY(-2px);
    }
    
    .tab-item.add-btn {
      position: relative;
      top: -3px;
    }
    
    .tab-item.add-btn .add-icon {
      width: 22px;
      height: 22px;
      background: linear-gradient(135deg, var(--p-brand), var(--p-brand-2));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
      border: 1px solid #fff;
    }
    
    .tab-item.add-btn span {
      margin-top: 1px;
      color: var(--p-text);
    }

    /* Bildirim ikonu masaüstü için görünür, mobilde tab-bar'a entegre edilebilir veya gizlenebilir. 
       İstek üzerine "bildirim butonunu görünmez şuan onu düzelt" denildiği için masaüstü header'daki stilini kontrol ediyoruz. */
    .notification-wrapper {
        display: block !important; /* Görünürlüğü zorla */
    }
    .notif-icon {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        border-radius: 50%;
        transition: background 0.2s;
    }
    .notif-icon:hover {
        background: #e2e8f0;
    }
    .notif-icon svg {
        fill: #64748b; /* İkon rengini gri yap (arkaplan beyaz olduğu için) */
        stroke: none;
    }

    /* Masaüstünde tab-bar gizli */
    @media (min-width: 769px) {
      .tab-bar { display: none; }
    }

    @media (max-width: 992px){
      .p-header__inner{grid-template-columns:140px 1fr; gap:16px;}
      /* Mobilde arama kutusu tam genişlikte */
      .p-search { order: 3; grid-column: 1 / -1; width: 100%; margin-top: 0; }
      .p-actions { grid-column: 2; justify-content: flex-end; }
      
      /* Mobilde header düzeni: Logo - Actions (Bildirim/User) 
         Alt satır: Arama Kutusu */
      .p-header__inner {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          gap: 12px;
          padding: 12px 16px;
      }
      .p-brand { grid-column: 1; grid-row: 1; }
      .p-actions { grid-column: 2; grid-row: 1; }
      
      /* Butonları mobilde gizle, sadece ikonlar kalsın */
      .p-header #login-btn, .p-header #register-btn, .p-header #ilan-ekle-btn, .divider {
          display: none;
      }
      
      /* Mobilde bildirim ve kullanıcı ikonu yan yana */
      .notification-wrapper { display: block !important; margin-right: 10px; }
      #user-button { padding: 8px; font-size: 0; } /* Sadece ikon veya küçük görünüm */
      #user-button::after { content: '👤'; font-size: 18px; }
      
      .p-hero__mini{min-width:unset;grid-template-columns:repeat(3,minmax(0,1fr))}
    }

    @media (max-width: 576px){
      .p-hero__mini{grid-template-columns:1fr}
    }


    /* Empty State Design */
    .empty-state {
      grid-column: 1 / -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      background: #f8fafc;
      border-radius: 16px;
      border: 2px dashed #e2e8f0;
      text-align: center;
      color: #64748b;
      margin: 20px 0;
    }

    .empty-state-icon {
      width: 80px;
      height: 80px;
      background: #e0f2fe;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: #0284c7;
      margin-bottom: 20px;
    }

    .empty-state h3 {
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 10px;
    }

    .empty-state p {
      font-size: 15px;
      color: #64748b;
      max-width: 380px;
      margin: 0 auto 24px;
      line-height: 1.6;
    }

    .empty-state-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      border-radius: 10px;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }

    .empty-state-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
      color: white;
    }

    .cookie-consent {
      position: fixed;
      right: 18px;
      bottom: calc(18px + env(safe-area-inset-bottom));
      width: min(360px, calc(100vw - 24px));
      z-index: 5000;
    }

    .cookie-consent[hidden] {
      display: none !important;
    }

    .cookie-consent__card {
      width: 100%;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
      color: #fff;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 22px;
      box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
      padding: 18px;
      backdrop-filter: blur(14px);
    }

    .cookie-consent__icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
      margin-bottom: 14px;
      font-size: 18px;
    }

    .cookie-consent__title {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .cookie-consent__text {
      margin: 0;
      font-size: 13px;
      line-height: 1.6;
      color: #cbd5e1;
    }

    .cookie-consent__actions {
      display: flex;
      gap: 10px;
      margin-top: 16px;
    }

    .cookie-consent__btn {
      flex: 1;
      min-height: 46px;
      border: 1px solid transparent;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    }

    .cookie-consent__btn:hover {
      transform: translateY(-1px);
    }

    .cookie-consent__btn--primary {
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: #fff;
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.32);
    }

    .cookie-consent__btn--secondary {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(148, 163, 184, 0.28);
      color: #e2e8f0;
    }

    .cookie-consent__meta {
      margin-top: 12px;
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.5;
    }

    @media (max-width: 768px) {
      .cookie-consent {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: calc(82px + env(safe-area-inset-bottom));
      }

      .cookie-consent__card {
        border-radius: 18px;
        padding: 16px;
      }

      .cookie-consent__actions {
        flex-direction: column;
      }
    }



/* Automotive sketch banner: live text and the selected illustration. */
.home-road-banner { position:relative; isolation:isolate; display:flex; align-items:center; min-height:194px; margin-bottom:16px; padding:20px 34px; overflow:hidden; border:1px solid #dbc8b7; border-radius:18px; background:#faf7f3; }
.home-road-banner__copy { position:relative; z-index:1; width:55%; }
.home-road-banner__eyebrow { display:block; color:#142d47; font-size:13px; font-weight:500; letter-spacing:4px; }
.home-road-banner__eyebrow>span { display:none; }
.home-road-banner h1 { margin:16px 0 12px; color:#142d47; font-size:48px; font-weight:600; line-height:1.17; letter-spacing:-.9px; }
.home-road-banner h1>span { color:#b9652d; }
.home-road-banner p { margin:0; max-width:510px; color:#71777b; font-size:20px; line-height:1.55; }
.home-road-banner__art { position:absolute; inset:0 0 0 auto; width:47%; overflow:hidden; pointer-events:none; z-index:0; mask-image:linear-gradient(to right,transparent,#000 5%); }
.home-road-banner__art img { position:absolute; display:block; width:210%; max-width:none; height:auto; right:-2%; top:50%; transform:translateY(-50%); }
@media(max-width:1050px) {
  .home-road-banner { padding:18px 28px; min-height:174px; }
  .home-road-banner h1 { font-size:38px; }
  .home-road-banner p { font-size:18px; }
}
@media(max-width:600px) {
  .home-road-banner { display:block; min-height:0; margin-bottom:14px; padding:17px 20px 136px; border-radius:15px; }
  .home-road-banner__copy { width:100%; }
  .home-road-banner__eyebrow { font-size:11px; letter-spacing:2.6px; }
  .home-road-banner h1 { font-size:36px; letter-spacing:-.5px; margin:12px 0 9px; }
  .home-road-banner p { font-size:17px; max-width:360px; }
  .home-road-banner__art { inset:auto 0 0; width:100%; height:125px; mask-image:linear-gradient(to bottom,transparent,#000 18%); }
  .home-road-banner__art img { width:210%; right:-2%; }
}