:root { --red: #C0141F; --red-d: #9E0F1A; --ink: #1C1D22; --mut: #5F6470; --line: #E3E5EA; --bg: #F5F5F6; --ok: #13804D; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; }
.kk-wrap { max-width: 880px; margin: 0 auto; padding: 0 18px; }
.kk-top { background: #1C1D22; color: #fff; } .kk-top .kk-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.kk-kurum { font-weight: 700; font-size: 16px; } .kk-kurum i { color: #FF8A93; }
.kk-top a { color: #fff; }
.kk-main { padding-top: 24px; padding-bottom: 40px; }
.kk-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; color: var(--mut); font-size: 13px; } .kk-foot img { width: 20px; } .kk-foot a { color: var(--mut); }
h1 { font-size: 26px; margin: 0 0 6px; } .kk-lead { color: var(--mut); margin: 0 0 18px; line-height: 1.55; white-space: pre-line; }
.kk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.kk-card h2 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.kk-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; }
.kk-field { margin-bottom: 14px; } .kk-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.kk-field input[type=text], .kk-field input[type=tel], .kk-field input[type=email], .kk-field input[type=password], .kk-field input[type=number], .kk-field select, .kk-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #CDD1D9; border-radius: 10px; font: inherit; background: #fff; }
.kk-field textarea { min-height: 90px; resize: vertical; }
.kk-field input:focus, .kk-field select:focus, .kk-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,20,31,.12); }
.kk-hint { font-size: 13px; color: var(--mut); margin: 6px 0 0; }
.kk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.kk-btn-primary { background: var(--red); border-color: var(--red); color: #fff; } .kk-btn-primary:hover { background: var(--red-d); }
.kk-btn-block { width: 100%; padding: 14px; font-size: 16px; } .kk-btn-sm { padding: 7px 12px; font-size: 13px; }
.kk-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; } .kk-ok { background: #E7F6EE; border-color: #BFE3CF; color: #0B5C37; } .kk-err { background: #FDECEE; border-color: #F2C4C8; color: #8E0E19; }
.kk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .kk-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
/* Kurs kartları */
.kk-courses { display: grid; gap: 10px; }
.kk-course { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.kk-course:hover { border-color: #C9CDD5; } .kk-course input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red); }
.kk-course.sel { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,20,31,.10); }
.kk-course.cakisma { border-color: #D97706; background: #FFFBF2; }
.kk-course b { font-size: 16px; } .kk-course .kk-meta { color: var(--mut); font-size: 13px; margin-top: 3px; }
.kk-course .kk-desc { font-size: 13.5px; margin-top: 8px; line-height: 1.5; white-space: pre-line; }
.kk-course .kk-price { font-weight: 800; white-space: nowrap; }
.kk-course .kk-min { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #F1F2F5; color: var(--mut); }
.kk-course .kk-warn { display: none; margin-top: 8px; font-size: 13px; font-weight: 600; color: #B45309; } .kk-course.cakisma .kk-warn { display: block; }
.kk-empty { text-align: center; color: var(--mut); padding: 26px 10px; }
.kk-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 700; }
.kk-kvkk { max-height: 140px; overflow: auto; font-size: 12.5px; color: var(--mut); background: #FAFAFB; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; white-space: pre-line; }
.hp { position: absolute; left: -9999px; }
/* Teşekkür */
.kk-done { text-align: center; padding: 34px 20px; } .kk-done i { font-size: 54px; color: var(--ok); } .kk-done ul { text-align: left; display: inline-block; margin: 10px auto 0; }
/* Öğretmen paneli */
table.kk-t { width: 100%; border-collapse: collapse; font-size: 14px; } .kk-t th, .kk-t td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kk-t th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); background: #FAFAFB; }
.kk-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; } .kk-paid { background: #E7F6EE; color: #0B5C37; } .kk-unpaid { background: #FDECEE; color: #8E0E19; }
.kk-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .kk-tabs a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; } .kk-tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 640px) { .kk-row { grid-template-columns: 1fr; } .kk-course { grid-template-columns: 24px 1fr; } .kk-course .kk-price { grid-column: 2; } .kk-t { font-size: 13px; } }
@media print { .kk-top, .kk-foot, .no-print { display: none !important; } body { background: #fff; } .kk-card { border: 0; padding: 0; } .kk-wrap { max-width: none; } }

.kk-tel { color: #9E0F1A; font-weight: 700; white-space: nowrap; text-decoration: none; } .kk-tel:hover { text-decoration: underline; }

.kk-logo { height: 36px; width: auto; max-width: 160px; object-fit: contain; vertical-align: middle; margin-right: 6px; background: #fff; border-radius: 6px; padding: 2px; }

/* ---- CodebilForm üst bar (TestLab ile aynı aile) ---- */
.cf-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; padding: 10px 22px; background: linear-gradient(90deg, #1C1D22, #2A2B31); color: #fff; box-shadow: 0 4px 20px rgba(28,29,34,.25); }
.cf-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; min-width: 0; }
.cf-logo { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: #fff; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.cf-logo img { width: 100%; height: 100%; object-fit: contain; } .cf-logo b { color: #1C1D22; font-size: 15px; font-weight: 800; }
.cf-brand strong { display: block; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .cf-brand strong b { color: #FF8A93; }
.cf-brand small { display: block; font-size: 11px; opacity: .7; white-space: nowrap; }
.cf-nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.cf-nav a { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; }
.cf-nav a:hover { background: rgba(255,255,255,.08); color: #fff; } .cf-nav a.on { background: rgba(255,255,255,.15); color: #fff; }
.cf-rozet { font-style: normal; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #E10D15; color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.cf-user { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cf-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FF8A93; color: #1C1D22; font-weight: 800; font-size: 13px; flex: none; }
.cf-user-name { display: flex; flex-direction: column; line-height: 1.15; font-size: 13px; } .cf-user-name small { opacity: .65; }
.cf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cf-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.28); } .cf-btn-ghost:hover { background: rgba(255,255,255,.1); }
.cf-btn-primary { background: #C0141F; color: #fff; border: 1px solid #C0141F; } .cf-btn-primary:hover { background: #9E0F1A; }
@media (max-width: 1100px) { .cf-user-name { display: none; } }
@media (max-width: 860px) {
    .cf-top { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .cf-nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; } .cf-nav::-webkit-scrollbar { display: none; }
    .cf-gizle, .cf-btn span { display: none; } .cf-btn { padding: 8px 10px; } .cf-brand strong { max-width: 190px; }
}
@media print { .cf-top { display: none; } }

/* ---- Panel sayfaları: geniş alan, taşmayan tablolar ---- */
.kk-genis { max-width: 1280px; }
.kk-genis .kk-t td, .kk-genis .kk-t th { padding: 9px 7px; }
.ky-islem { display: flex; gap: 4px; justify-content: flex-end; }
.ky-ikon { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 15px; cursor: pointer; text-decoration: none; }
.ky-ikon:hover { background: #F3F4F6; } .ky-ikon.ky-degis { color: #9E0F1A; } .ky-ikon.ky-iptal:hover { background: #FDECEE; color: #8E0E19; border-color: #F2C4C8; }
.ky-fiyat { white-space: nowrap; }
@media (max-width: 760px) { .ky-islem { flex-direction: column; } }

/* =====================================================================================
   ÖĞRETMEN PANELİ · mobil öncelikli, sade ve açıklamalı görünüm (og-*)
   ===================================================================================== */
.og-hos { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.og-hos h1 { font-size: 24px; margin: 0; letter-spacing: -.02em; } .og-hos p { margin: 3px 0 0; color: var(--mut); font-size: 14px; }
.og-yardim-l { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.og-yardim-l:hover { border-color: var(--red); color: var(--red); }
.og-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.og-tile { position: relative; display: grid; gap: 1px; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.og-tile:hover { border-color: #C9CDD5; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(28,29,34,.06); }
.og-tile i { font-size: 20px; color: var(--red); } .og-tile b { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; } .og-tile span { color: var(--mut); font-size: 13px; }
.og-tile-uyari { border-color: #F2C4C8; background: #FFF8F8; } .og-tile-uyari b { color: var(--red); }
.og-rehber { background: #F3F6FB; border: 1px solid #DCE4F0; border-radius: 14px; padding: 0; margin-bottom: 16px; color: #33415C; }
.og-rehber summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; }
.og-rehber summary::-webkit-details-marker { display: none; } .og-rehber summary .bi { color: #2F5DA8; font-size: 18px; }
.og-rehber summary span { margin-left: auto; font-size: 13px; font-weight: 600; color: #2F5DA8; } .og-rehber[open] summary span { font-size: 0; } .og-rehber[open] summary span::after { content: 'Gizle'; font-size: 13px; }
.og-rehber ol { margin: 0; padding: 0 16px 0 36px; line-height: 1.6; font-size: 14px; } .og-rehber li { margin-bottom: 6px; } .og-rehber > a { display: inline-block; margin: 4px 16px 14px; font-weight: 700; color: #2F5DA8; }
.og-ipucu { position: relative; display: block; margin: 0 0 10px; padding: 9px 11px 9px 34px; border-radius: 10px; background: #F3F6FB; color: #33415C; font-size: 13.5px; line-height: 1.5; } .og-ipucu > .bi:first-child { position: absolute; left: 11px; top: 10px; color: #2F5DA8; }
.og-kurslarim, .og-kart-d { padding: 0; } .og-kurslarim > summary, .og-kart-d > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; font-weight: 700; }
.og-kurslarim > summary::-webkit-details-marker, .og-kart-d > summary::-webkit-details-marker { display: none; }
.og-kurslarim > summary .bi:first-child, .og-kart-d > summary .bi:first-child { color: var(--red); margin-right: 4px; }
.og-ok { transition: transform .2s; color: var(--mut); } details[open] > summary .og-ok { transform: rotate(180deg); }
.og-kurslarim[open], .og-kart-d[open] { padding-bottom: 16px; } .og-kurslarim > :not(summary), .og-kart-d > :not(summary) { margin-left: 18px; margin-right: 18px; }
.og-kl { list-style: none; padding: 0; margin: 0 18px 12px; display: grid; gap: 6px; }
.og-kl li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.og-kl li > span:first-child { flex: 1; min-width: 160px; } .og-kl small { display: block; color: #8E0E19; font-size: 12.5px; } .og-kl a { font-weight: 600; font-size: 13.5px; color: var(--red-d); }
.og-sekme { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 2px 10px; margin-bottom: 6px; }
/* Telefonda kurs sekmeleri yana kaymaz: alt alta tam genişlikte liste (bütün kurslar görünür) */
@media (max-width: 700px) {
    .og-sekme, .kk-tabs { display: grid; grid-template-columns: 1fr; gap: 6px; }
    .og-sekme a, .kk-tabs a { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 12px 14px; border-radius: 12px; white-space: normal; text-align: left; }
    .og-sekme a.on, .kk-tabs a.on { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
    .og-sekme::before, .kk-tabs::before { content: "Kurslarınız"; font-size: 13px; font-weight: 700; color: var(--mut); margin: 4px 2px 0; }
}
.og-sekme a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.og-sekme a em { font-style: normal; font-size: 12px; background: #F1F2F5; color: var(--mut); border-radius: 999px; padding: 1px 7px; } .og-sekme a.on { background: var(--ink); border-color: var(--ink); color: #fff; } .og-sekme a.on em { background: rgba(255,255,255,.18); color: #fff; }
.og-kurs { padding: 18px; } .og-kurs-b { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .og-kurs-b h2 { margin: 0 0 4px; font-size: 19px; }
.og-say { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 14px; } .og-arac { display: flex; gap: 6px; flex-wrap: wrap; }
.og-ara { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 12px; border: 1px solid #CDD1D9; border-radius: 10px; background: #fff; } .og-ara .bi { color: var(--mut); }
.og-ara input { flex: 1; border: 0; outline: none; padding: 10px 0; font: inherit; background: transparent; min-width: 0; }
.og-tablo { overflow-x: auto; margin-top: 12px; -webkit-overflow-scrolling: touch; }
.og-t tr.og-ogr > td { border-bottom: 0; } .og-t tr.og-islem-s > td { padding-top: 0; } .og-t tr.og-ayr, .og-t tr.og-ayr + tr.og-islem-s { background: #FFF8F8; }
.og-sinif-m { display: none; color: var(--mut); font-size: 13px; font-weight: 500; }
.og-tel { color: var(--ink); text-decoration: none; white-space: nowrap; } .og-wa { color: #13804D; font-size: 16px; }
.og-islem { display: flex; gap: 6px; flex-wrap: wrap; }
.og-ib { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: #FAFAFB; color: #374151; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.og-ib:hover { border-color: #C9CDD5; background: #fff; } .og-ib.on { background: var(--ink); color: #fff; border-color: var(--ink); } .og-ib .bi { font-size: 14px; }
.og-ib-k { color: #9E0F1A; } .og-ib-k.on { background: #B4141F; border-color: #B4141F; color: #fff; }
.og-panel { margin-top: 10px; padding: 14px; background: #fff; border: 1px solid #E3E5EA; border-radius: 12px; box-shadow: 0 4px 16px rgba(28,29,34,.05); max-width: 760px; } .og-panel[hidden] { display: none; }
.og-panel-k { border-color: #F2C4C8; }
.og-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .og-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: #4B5563; } .og-form .og-gen { grid-column: 1 / -1; }
.og-form .kk-check { display: flex; color: #374151; font-weight: 500; }
.og-form select, .og-form input[type=text], .og-form input[type=time], .og-form input[type=date], .og-form textarea { box-sizing: border-box; width: 100%; padding: 10px 11px; border: 1px solid #CDD1D9; border-radius: 10px; font: inherit; font-weight: 400; color: var(--ink); background: #fff; }
.og-form textarea { resize: vertical; } .og-form :focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,20,31,.12); }
.og-pd { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .og-kirmizi { background: #B4141F !important; border-color: #B4141F !important; }
.og-secenek { display: grid; gap: 8px; margin-bottom: 10px; }
.og-sk { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.og-sk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); } .og-sk small { display: block; color: var(--mut); font-size: 13px; } .og-sk:has(input:checked) { border-color: var(--red); background: #FFF7F7; }
.og-sk.og-pasif { opacity: .5; cursor: not-allowed; }
.og-durum { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; font-weight: 600; } .og-durum-k { color: #9E0F1A; } .og-durum-y { color: #0B5C37; }
.og-link { border: 0; background: none; color: var(--red-d); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 0 0 4px; }
.og-kb { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .og-kb h2 { margin: 0; } .og-kb h2 .bi { color: var(--red); } .og-kbd { display: flex; gap: 6px; flex-wrap: wrap; }
.og-bl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.og-bl li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; } .og-bl li > div { flex: 1; min-width: 0; }
.og-bl li.og-yeni { border-color: #F2C4C8; background: #FFF8F8; } .og-bi { font-size: 18px; color: var(--red); margin-top: 1px; } .og-bl small { color: var(--mut); } .og-bl span { color: #374151; }
.og-zaman { display: block; margin-top: 2px; font-size: 12px; }
.og-gl { display: grid; gap: 8px; margin-top: 12px; } .og-gk { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.og-gk-b { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .og-gk-b span { color: var(--mut); font-size: 13px; } .og-gk-b .kk-badge { margin-left: auto; }
.og-gk-n { margin-top: 6px; white-space: pre-wrap; font-size: 14px; } .og-gk-a { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .og-gk-a small { flex: 1; color: var(--mut); }
.kk-bireysel { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #3730A3; background: #EEF2FF; border-radius: 999px; padding: 2px 8px; }

/* Öğretmen paneli · telefon: tablo yerine öğrenci kartları */
@media screen and (max-width: 700px) {
    .og-hos h1 { font-size: 21px; } .og-tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .og-tile { padding: 12px; } .og-tile b { font-size: 19px; }
    .og-kurs { padding: 14px; } .og-arac { width: 100%; } .og-arac .kk-btn { flex: 1; }
    .og-t, .og-t tbody, .og-t tr, .og-t td { display: block; width: 100%; } .og-t thead { display: none; }
    .og-t tr.og-ogr { border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 12px 12px 4px; margin-top: 10px; background: #fff; }
    .og-t tr.og-islem-s { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; padding: 4px 12px 12px; background: #fff; }
    .og-t tr.og-ayr, .og-t tr.og-ayr + tr.og-islem-s { background: #FFF8F8; border-color: #F2C4C8; }
    .og-t td { border: 0 !important; padding: 2px 0 !important; } .og-t td.og-no, .og-t td.og-sinif, .og-t td.og-yok { display: none; } .og-t td.og-not:empty, .og-t td.og-not small:empty { display: none; }
    .og-t td.og-ad b { font-size: 16px; } .og-sinif-m { display: inline; }
    .og-t td.og-veli { font-size: 14px; color: #374151; } .og-t td.og-odeme { position: absolute; right: 12px; top: 12px; width: auto; } .og-t tr.og-ogr { position: relative; } .og-t td.og-ad { padding-right: 86px !important; }
    .og-tel { display: inline-flex; gap: 4px; align-items: center; padding: 6px 10px; margin-top: 4px; border-radius: 999px; background: #F1F2F5; font-weight: 600; } .og-wa { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E7F6EE; vertical-align: middle; margin-top: 4px; }
    .og-islem { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .og-ib { justify-content: center; padding: 9px 8px; border-radius: 10px; font-size: 13px; }
    .og-form { grid-template-columns: 1fr 1fr; } .og-form label:first-child { grid-column: 1 / -1; } .og-panel { padding: 12px; } .og-pd .kk-btn { flex: 1; }
    .og-form select, .og-form input, .og-form textarea { font-size: 16px; }   /* iOS yakınlaştırmasın */
    .og-gk-b .kk-badge { margin-left: 0; }
}

/* Öğretmen paneli · telefonda alt menü (uygulama gibi) */
.cf-alt { display: none; }
@media screen and (max-width: 760px) {
    .cf-alt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28,29,34,.08); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
    .cf-alt a { position: relative; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; color: #6B7280; text-decoration: none; font-size: 11px; font-weight: 600; border-radius: 10px; }
    .cf-alt a .bi { font-size: 20px; } .cf-alt a.on { color: var(--red); } .cf-alt a.on .bi { transform: translateY(-1px); }
    .cf-alt .cf-rozet { position: absolute; top: 2px; left: 50%; margin-left: 6px; }
    body.cf-mod-ogretmen .cf-nav { display: none; } body.cf-mod-ogretmen .kk-main { padding-bottom: 96px; } body.cf-mod-ogretmen .kk-foot { padding-bottom: 86px; }
}
@media print { .cf-alt { display: none !important; } }

/* =====================================================================================
   VELİ BAŞVURU FORMU (okulun ana sayfası) · kapak, logo, adımlar
   ===================================================================================== */
.vf-hero { --vf-renk: #C0141F; position: relative; overflow: hidden; border-radius: 20px; margin: -6px 0 14px; padding: 26px 22px 22px; color: #fff; background: #1C1D22;
    background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--vf-renk) 70%, #fff 0%) 0%, transparent 55%), linear-gradient(135deg, #1C1D22 0%, color-mix(in srgb, var(--vf-renk) 55%, #1C1D22) 100%);
    box-shadow: 0 14px 34px rgba(28,29,34,.18); }
.vf-hero-kapak { background: linear-gradient(180deg, rgba(14,15,18,.15) 0%, rgba(14,15,18,.78) 100%), var(--vf-kapak) center / cover no-repeat; min-height: 210px; display: flex; align-items: flex-end; }
.vf-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(255,255,255,.06); }
.vf-hero-kapak::after { display: none; }
.vf-hero-ic { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.vf-logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #fff; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.vf-logo img { width: 100%; height: 100%; object-fit: contain; } .vf-logo b { color: #1C1D22; font-size: 20px; font-weight: 800; }
.vf-hero small { display: block; font-size: 13px; font-weight: 600; opacity: .85; letter-spacing: .02em; } .vf-hero h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.vf-adim { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; padding: 0; }
.vf-adim li { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--mut); }
.vf-adim b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F1F2F5; color: var(--ink); font-size: 12px; }
.vf-intro { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.vf-intro .bi { color: var(--red); font-size: 18px; margin-top: 2px; } .vf-intro .kk-lead { margin: 0; color: #374151; }
.vf-guven { text-align: center; color: var(--mut); font-size: 13px; margin: 12px 0 0; }
.cf-mod-genel .kk-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(28,29,34,.04); }
.cf-mod-genel .kk-card h2 { font-size: 18px; } .cf-mod-genel .kk-step { width: 30px; height: 30px; box-shadow: 0 4px 10px rgba(192,20,31,.25); }
.cf-mod-genel .kk-course { border-radius: 14px; } .cf-mod-genel .kk-course.sel { background: #FFF8F8; }
.cf-mod-genel .kk-total { position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; margin-bottom: -4px; z-index: 2; }
.cf-mod-genel .kk-btn-block { border-radius: 14px; padding: 16px; font-size: 17px; box-shadow: 0 10px 24px rgba(192,20,31,.25); }
@media (max-width: 640px) {
    .vf-hero { border-radius: 16px; padding: 20px 16px 18px; margin-top: -10px; } .vf-hero-kapak { min-height: 170px; } .vf-hero h1 { font-size: 21px; } .vf-logo { width: 54px; height: 54px; border-radius: 14px; }
    .vf-adim li { flex-direction: column; gap: 3px; font-size: 12px; padding: 7px 4px; }
    .cf-mod-genel .kk-field input, .cf-mod-genel .kk-field select, .cf-mod-genel .kk-field textarea { font-size: 16px; }
}

/* =====================================================================================
   TELEFON / TABLET GÖRÜNÜMÜ (v6) · okul paneli ve öğretmen paneli
   Üstte sade bar + menü düğmesi, altta uygulama gibi menü, sağdan açılan menü çekmecesi,
   ekrana sığmayan tablolar kart, taşan sekme satırları yana kayar.
   ===================================================================================== */
.cf-menu-btn, .cf-perde, .cf-cekmece { display: none; }

@media screen and (max-width: 860px) {
    /* Üst bar: marka + menü düğmesi (bağlantılar çekmecede ve alt menüde) */
    body.cf-mod-yonetici .cf-top, body.cf-mod-ogretmen .cf-top { flex-wrap: nowrap; gap: 10px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
    body.cf-mod-yonetici .cf-nav, body.cf-mod-ogretmen .cf-nav, body.cf-mod-yonetici .cf-user, body.cf-mod-ogretmen .cf-user { display: none !important; }
    .cf-logo { width: 38px; height: 38px; border-radius: 10px; }
    .cf-brand strong { font-size: 15px; max-width: calc(100vw - 150px); } .cf-brand small { font-size: 10.5px; }
    .cf-menu-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; }
    .cf-menu-btn .cf-avatar { width: 30px; height: 30px; font-size: 12px; } .cf-menu-btn .bi { font-size: 20px; line-height: 1; }
    .cf-nokta { position: absolute; top: 2px; left: 26px; width: 10px; height: 10px; border-radius: 50%; background: #E10D15; border: 2px solid #23242A; }

    /* Alt menü (her iki panel) */
    .cf-alt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
              border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(28,29,34,.08); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
    .cf-alt a, .cf-alt-menu { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 2px; color: #6B7280; text-decoration: none; font: inherit; font-size: 11px; font-weight: 600;
              border: 0; background: none; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .cf-alt a .bi, .cf-alt-menu .bi { font-size: 21px; line-height: 1; }
    .cf-alt a.on, .cf-alt-menu.on { color: var(--red); } .cf-alt a.on::before, .cf-alt-menu.on::before { content: ""; position: absolute; top: 2px; width: 22px; height: 3px; border-radius: 3px; background: var(--red); }
    .cf-alt a:active, .cf-alt-menu:active { background: #F3F4F6; }
    .cf-alt .cf-rozet { position: absolute; top: 3px; left: 50%; margin-left: 6px; }
    body.cf-mod-yonetici .kk-main, body.cf-mod-ogretmen .kk-main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    body.cf-mod-yonetici .kk-foot, body.cf-mod-ogretmen .kk-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

    /* Menü çekmecesi (sağdan) */
    .cf-perde { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(17,18,22,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .cf-cekmece { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(340px, 88vw); background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.25);
                  transform: translateX(105%); transition: transform .24s cubic-bezier(.2,.8,.2,1); padding-top: env(safe-area-inset-top); }
    body.cf-cek-acik { overflow: hidden; } body.cf-cek-acik .cf-perde { opacity: 1; pointer-events: auto; } body.cf-cek-acik .cf-cekmece { transform: none; }
    .cf-cek-ust { display: flex; align-items: center; gap: 12px; padding: 18px 16px 16px; background: linear-gradient(135deg, #1C1D22, #2A2B31); color: #fff; }
    .cf-cek-ust .cf-avatar { width: 44px; height: 44px; font-size: 15px; }
    .cf-cek-kim { flex: 1; min-width: 0; } .cf-cek-kim strong { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-cek-kim small { display: block; font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cf-cek-kapat { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
    .cf-cek-ic { flex: 1; overflow-y: auto; padding: 8px 10px 12px; -webkit-overflow-scrolling: touch; }
    .cf-cek-baslik { margin: 12px 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9CA3AF; }
    .cf-cek-nav { display: grid; gap: 2px; }
    .cf-cek-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
    .cf-cek-nav a .bi { width: 22px; font-size: 18px; color: #6B7280; text-align: center; } .cf-cek-nav a span { flex: 1; }
    .cf-cek-nav a:active { background: #F3F4F6; } .cf-cek-nav a.on { background: #FFF1F2; color: var(--red-d); } .cf-cek-nav a.on .bi { color: var(--red); }
    .cf-cek-nav .cf-rozet { margin-left: auto; }
    .cf-cek-cikis { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 12px calc(12px + env(safe-area-inset-bottom)); padding: 13px; border-radius: 12px; border: 1px solid #F2C4C8; background: #FFF8F8; color: #9E0F1A; font-weight: 700; text-decoration: none; }
}

@media screen and (max-width: 700px) {
    /* Genel ölçüler */
    .kk-wrap { padding-left: 12px; padding-right: 12px; } .kk-main { padding-top: 14px; }
    h1 { font-size: 22px; } .kk-card { padding: 14px; border-radius: 14px; margin-bottom: 12px; } .kk-card h2 { font-size: 16px; flex-wrap: wrap; margin-bottom: 12px; }
    .kk-alert { font-size: 14px; padding: 11px 13px; }
    .kk-main img { max-width: 100%; height: auto; }
    .kk-field input, .kk-field select, .kk-field textarea, .kk-main input[type=text], .kk-main input[type=search], .kk-main input[type=tel], .kk-main input[type=email], .kk-main input[type=date], .kk-main input[type=time], .kk-main input[type=number], .kk-main select, .kk-main textarea { font-size: 16px; }   /* iOS yakınlaştırmasın */
    .kk-btn { padding: 11px 14px; } .kk-btn-sm { padding: 8px 11px; }
    .kk-main [style*="overflow-x:auto"], .kk-main [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }

    /* Kayıtlar sayfası: üst düğmeler 2 sütun, süzgeç alanları tam genişlik */
    body.cf-mod-yonetici .ky-ustb { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } body.cf-mod-yonetici .ky-ustb .kk-btn { width: 100%; padding: 11px 8px; font-size: 14px; }
    body.cf-mod-yonetici .ky-ustb .kk-btn-primary { grid-column: 1 / -1; }
    body.cf-mod-yonetici .ky-filtre { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; } body.cf-mod-yonetici .ky-filtre > * { width: 100%; min-width: 0; }
    body.cf-mod-yonetici .ky-filtre input[type=search], body.cf-mod-yonetici .ky-filtre select[name=donem], body.cf-mod-yonetici .ky-filtre select[name=kurs] { grid-column: 1 / -1; }
    body.cf-mod-yonetici .ky-stat { gap: 8px !important; } body.cf-mod-yonetici .ky-stat > div { padding: 10px 12px; }

    /* Taşan sekme / görünüm satırları: tek satır, yana kayar, sağda solma */
    .cf-kaydir { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding: 0 16px;
                 -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-bottom: 2px; }
    .cf-kaydir::-webkit-scrollbar { display: none; }
    .cf-kaydir > * { flex: none !important; white-space: nowrap; scroll-snap-align: start; }

    /* Ekrana sığmayan tablolar: her satır bir kart, hücrenin başında sütun adı */
    table.cf-kart, table.cf-kart > tbody, table.cf-kart > tbody > tr, table.cf-kart > tr, table.cf-kart > tfoot, table.cf-kart > tfoot > tr { display: block; width: 100%; }
    table.cf-kart > thead, table.cf-kart tr.cf-baslik { display: none !important; }
    table.cf-kart tr { position: relative; margin: 0 0 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(28,29,34,.04); }
    table.cf-kart td, table.cf-kart tr:not(.cf-baslik) > th { display: block; position: relative; width: 100%; min-height: 30px; padding: 7px 0 7px 36% !important; border: 0 !important; border-bottom: 1px dashed #EEF0F3 !important; text-align: left !important; white-space: normal !important; background: none; overflow-wrap: anywhere; }
    table.cf-kart td:last-child { border-bottom: 0 !important; }
    table.cf-kart td::before { content: attr(data-label); position: absolute; left: 0; top: 9px; width: 33%; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9CA3AF; line-height: 1.3; overflow-wrap: anywhere; }
    table.cf-kart td.cf-etiketsiz, table.cf-kart td.cf-tam { padding-left: 0 !important; } table.cf-kart td.cf-etiketsiz::before, table.cf-kart td.cf-tam::before { display: none; }
    table.cf-kart td:empty { display: none; }
    table.cf-kart tr.cf-grup { padding: 9px 12px; background: #F3F4F6; border-color: #E5E7EB; box-shadow: none; }
    table.cf-kart .n, table.cf-kart .num { text-align: left !important; }
    table.cf-kart .ky-islem, table.cf-kart .ky-act { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
    table.cf-kart .ky-ikon { width: 40px; height: 40px; }
    table.cf-kart input, table.cf-kart select { max-width: 100%; }
}
@media print { .cf-alt, .cf-cekmece, .cf-perde, .cf-menu-btn { display: none !important; } }

/* =====================================================================================
   BAĞLANTI (LİNK) KUTULARI · veli formu linki, form bağlantıları, davet linki, giriş sayfası linki
   (.fl-link formlar · .ky-link yetkililer/ayarlar · .fe-link form ayarları)
   Bilgisayarda: link alanı + düğmeler tek satır. Telefonda: link tam genişlikte, altında eşit düğmeler.
   ===================================================================================== */
body .fl-link, body .ky-link, body .fe-link { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
body .fl-link input, body .ky-link input, body .fe-link input { flex: 1 1 260px; min-width: 0 !important; padding: 10px 12px 10px 36px !important; border: 1px solid #D5D9E0 !important; border-radius: 10px !important; font: inherit; font-size: 14px !important;
    color: #1F2937; background: #F7F8FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E") 12px center no-repeat;
    text-overflow: ellipsis; cursor: text; }
body .fl-link input:focus, body .ky-link input:focus, body .fe-link input:focus { outline: none; border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(192,20,31,.12); background-color: #fff; }
body .fl-link .kk-btn, body .ky-link .kk-btn, body .fe-link .kk-btn { flex: none; min-height: 42px; border-radius: 10px; }
body .fl-link a[href*="wa.me"], body .ky-link a[href*="wa.me"], body .fe-link a[href*="wa.me"] { color: #0B6B37; background: #EFFAF3; border-color: #BFE3CF; }
body .fl-link a[href*="wa.me"] .bi, body .ky-link a[href*="wa.me"] .bi { color: #16A34A; }

@media screen and (max-width: 700px) {
    body .fl-link, body .ky-link, body .fe-link { gap: 8px; }
    body .fl-link input, body .ky-link input, body .fe-link input { flex: 1 1 100% !important; width: 100%; font-size: 16px !important; padding-top: 12px !important; padding-bottom: 12px !important; }   /* 16px: iPhone yakınlaştırmasın */
    body .fl-link .kk-btn, body .ky-link .kk-btn, body .fe-link .kk-btn { flex: 1 1 0 !important; min-width: 0; min-height: 46px; padding: 10px 8px !important; font-size: 14px; white-space: nowrap; }
    /* Yalnızca simgesi olan düğmelere telefonda yazı da eklenir */
    body .fl-link a[title="Formu aç"]::after { content: "Aç"; }
    body .fl-link a[href*="wa.me"]::after { content: "WhatsApp"; }
    body .fl-link .kk-btn::after { font-weight: 700; }
    /* Yetkililer › davet: "Bağlantıyı yenile" tam genişlikte, sade */
    body .ky-link button[value^="davet"] { flex: 1 1 100% !important; background: none; border-style: dashed; color: #6B7280; font-weight: 600; }
}

/* =====================================================================================
   SAYFALARA ÖZEL TELEFON DÜZELTMELERİ
   ===================================================================================== */
@media screen and (max-width: 700px) {
    /* Yetkililer / sınıflar: dar ekranda taşan sabit genişlikli kutular */
    body .ky-act input, body .ky-act input[type=text] { min-width: 0 !important; flex: 1 1 100% !important; }
    body .ky-act { gap: 8px; } body .ky-act .kk-btn { flex: 1 1 auto; }
    body .ky-dl { grid-template-columns: 104px minmax(0, 1fr); font-size: 13.5px; }
    body .ky-kurs-h { flex-wrap: wrap; }
    body .yk-liste { max-height: 50vh; }
    /* Yanıtlar ve abonelik: 300px'lik ızgara telefona sığsın */
    body .yo-ozet, body .ab-grid, body .nk-liste { grid-template-columns: minmax(0, 1fr) !important; }
    body .yo-arac > * { flex: 1 1 140px; min-width: 0; }
    body .rp-kurslar { grid-template-columns: minmax(0, 1fr) !important; }
    /* Kayıtlar › yeni kayıt araması */
    body .nk-ust input, body .ky-filtre input[type=search] { min-width: 0 !important; }
    /* Form düzenleme: soru başlığı satırı ve alttaki kaydet çubuğu */
    body .fe-ust { flex-wrap: wrap; } body .fe-ust .fe-tur { flex: 1 1 150px; min-width: 0; } body .fe-sag { margin-left: auto; }
    body .fe-bar .kk-btn { flex: 1 1 auto; } body .fe-bar select { flex: 1 1 100%; }
    body .fl-ust > div[style*="text-align:right"] { text-align: left !important; display: flex; gap: 10px; align-items: center; }
    body .fl-ust > div[style*="text-align:right"] .fl-sayi { margin: 0; font-size: 15px; }
    body .fl-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; } body .fl-act .kk-btn { width: 100%; min-height: 42px; }
    body .ab-num { flex-wrap: wrap; } body .ab-num b { font-size: 18px; } body .ab-fiyat { font-size: 26px; }
}
/* Alt menü açıkken alt kenara yapışan çubuklar menünün üstünde dursun */
@media screen and (max-width: 860px) {
    body.cf-mod-yonetici .fe-bar { bottom: calc(68px + env(safe-area-inset-bottom)); }
    body.cf-mod-yonetici .ib-bar { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}