/* N11 Faturam v2 Design - Brand Refresh */

:root {
    --brand-primary: #FF44EE;
    --brand-magenta: #FF44EE;
    --brand-black: #111111;
    --brand-dark: #1b1b1b;
    --text-primary: #1b1b1b;
    --text-muted: #6b6b6b;
    --text-light: #9aa0a6;
    --border-color: #e5e5e5;
    --bg-light: #f7f7f8;
    --bg-white: #ffffff;
    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Header Updates */
.header-div .sign-in a {
    color: var(--brand-dark) !important;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.header-div .sign-in a:hover {
    color: var(--brand-primary) !important;
}

.header-div .sign-in.bg-purple {
    background: var(--brand-primary) !important;
    border-radius: var(--radius);
    padding: 10px 24px;
}

.header-div .sign-in.bg-purple a {
    color: white !important;
}

.header-div .sign-in.bg-purple:hover {
    background: #e6008a !important;
}

/* Banner/Hero Section */
.bannerdescription h3 {
    color: white;
    font-weight: 700;
}

.bannerdescription h4 {
    color: white;
    font-weight: 400;
}

.bannerbtn a {
    background: var(--brand-primary) !important;
    color: white !important;
    border-radius: var(--radius);
    padding: 14px 32px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.bannerbtn a:hover {
    background: #e6008a !important;
}

/* Advantages Section - Pink Icons */
.kullanmali-item h5 {
    color: var(--brand-dark);
    font-weight: 600;
}

.kullanmali-item p {
    color: var(--text-muted);
}

/* Section Headings */
.n11fatura-kullanmaliyim h2,
.e-fatuara-avantaj-baslik,
.cozumlerimiz h2 {
    color: var(--brand-dark) !important;
    font-weight: 700;
}

.e-fatuara-avantaj-desc,
.cozumlerimiz p {
    color: var(--text-muted) !important;
}

/* 3 Steps Section */
.efatura-3-adim-title {
    color: var(--brand-dark);
    font-weight: 600;
}

.efatura-3-adim-desc {
    color: var(--text-muted);
}

/* Pricing Buttons */
.paketler-item a,
.paket-button,
button[value="SATIN AL"],
input[value="SATIN AL"],
a[href*="eInvoiceTicketPurchase"] {
    background: var(--brand-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius);
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
}

.paketler-item a:hover,
.paket-button:hover,
button[value="SATIN AL"]:hover,
input[value="SATIN AL"]:hover,
a[href*="eInvoiceTicketPurchase"]:hover {
    background: #d63dd9 !important;
}

/* Footer Updates */
.footer-contact a,
.footer-down a,
.footer-contact a[href^="mailto:"],
.footer-tr a {
    color: var(--brand-primary) !important;
    text-decoration: none;
}

.footer-contact a:hover,
.footer-down a:hover,
.footer-contact a[href^="mailto:"]:hover,
.footer-tr a:hover {
    text-decoration: underline;
}

.i-head {
    color: var(--brand-dark) !important;
}

/* Menu */
.menu a {
    color: var(--brand-dark);
    transition: color 0.2s;
}

.menu a:hover {
    color: var(--brand-primary);
}

/* Responsive Menu */
.responsive-nav-menu a {
    color: var(--brand-dark);
}

.responsive-nav-menu a:hover {
    color: var(--brand-primary);
}

/* Additional Button Styles - Ensure all SATIN AL buttons use brand color */
input[type="button"],
input[type="submit"],
button,
.btn,
.button {
    background: var(--brand-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius);
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

input[type="button"]:hover,
input[type="submit"]:hover,
button:hover,
.btn:hover,
.button:hover {
    background: #d63dd9 !important;
}

/* CTA Section */
.cta-section a,
.cta-button,
a[href*="Katılın"] {
    background: var(--brand-primary) !important;
    color: white !important;
}

/* Kontör Numbers - Use brand color */
.kontor-number,
.paket-kontor {
    color: var(--brand-primary) !important;
}

/* Pricing Section Specific Fixes */
/* Kontör badge - the circular number display */
.kontor p,
.kontor2 p,
.kontor3 p {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

.kontor span,
.kontor2 span,
.kontor3 span {
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

/* "Paket Fiyatı" and "Birim Kontör Fiyatı" labels */
.birim-fiyat p {
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

/* Pricing section header - Plain text, no background */
.fiyat h1 {
    background: transparent;
    color: var(--brand-dark);
    padding: 0;
    border-radius: 0;
    font-weight: 700;
    margin-bottom: 16px;
}

/* SATIN AL buttons in pricing section - BLACK color only, keep original styling */
.table-paket a.btnsatinal {
    background: #111 !important;
    border-color: #111 !important;
}

.table-paket a.btnsatinal:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* Header SATIN AL button - BLACK color only, keep original styling */
/* Must override the global a[href*="eInvoiceTicketPurchase"] rule */
.header-div .sign-in.bg-purple {
    background: #111 !important;
}

.header-div .sign-in.bg-purple a {
    background: #111 !important;
    color: #fff !important;
}

.header-div .sign-in.bg-purple:hover,
.header-div .sign-in.bg-purple a:hover {
    background: #000 !important;
}

/* Header logo fix */
.header-div .logo img,
img.logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: none !important;
}

/* Footer logo fix */
.footer-logo img,
.n11-logo img {
    height: auto;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: none !important;
}

.dtp-logo img {
    height: auto;
    max-height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: none !important;
}
